@extends('theme.default.layouts.app')

@section('dashboard-title')
<h3 style="margin-top:17px;font-size:26px;">MONITORING (Spot Check)</h3>
@endsection

@section('content')
@php
    $monitoringCount = $monitoringCount ?? 18;
    $districts = $districts ?? [
        'District A',
        'District B',
        'District C',
        'District D',
    ];
    $progressData = $progressData ?? [12, 9, 15, 6];
    $womenHeaded = $womenHeaded ?? [4, 3, 5, 2];
    $disabilityHeaded = $disabilityHeaded ?? [1, 2, 1, 0];
    $lotLabels = $lotLabels ?? ['Lot 1', 'Lot 2', 'Lot 3', 'Lot 4'];
    $lotData = $lotData ?? [5, 4, 6, 3];
@endphp

<div class="flex items-stretch {{ request()->is('monitoring*') ? '' : 'lg:fixed' }} z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
    id="navbar">
    <div class="rounded-t-xl border border-input border-b-input filter-container flex items-stretch grow nav-color">

        <div class="kt-container-fluid flex items-stretch gap-5" style="position:relative; width: 100%;">
            <!-- Empty left spacer to balance the absolutely positioned right button (if needed for perfect centering) -->
            <div style="flex: 1;"></div>

            <!-- Filters (Centered) -->
            <div class="grid items-stretch" style="display: flex; justify-content: center;">
                <div class="kt-scrollable-x-auto flex items-stretch">
                    <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true" data-is-gis-dashboard="true">

                        <x-dropdown-filter title="Lot" name="lot" :options="[]" searchable="true" />
                        <x-dropdown-filter title="District" name="district" :options="[]" searchable="true" />
                        <!-- <x-dropdown-filter title="Tehsil" name="tehsil" :options="[]" searchable="true" /> -->
                        <!-- <x-dropdown-filter title="Residence" name="residence" :options="[]" searchable="true" />
                        <x-dropdown-filter title="UC" name="uc" :options="[]" searchable="true" />
                        <x-dropdown-filter title="Ref" name="ref" :options="[]" searchable="true" />
                        <x-dropdown-filter title="Beneficiary" name="beneficiary" :options="[]" searchable="true" /> -->

                    </div>
                </div>
            </div>

            <!-- Export PDF Button (Right Aligned) -->
            <div class="flex items-center justify-end" style="flex: 1;">
                <button id="exportPdfBtn" type="button"
                    style="display:inline-flex; align-items:center; gap:6px; padding:7px 18px;
                           font-size:13px; font-weight:600; color:#fff; background:#2e7d32;
                           border:none; border-radius:6px; cursor:pointer;
                           transition: background 0.2s, box-shadow 0.2s;
                           box-shadow: 0 2px 6px rgba(0,0,0,0.12);">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                        <polyline points="7 10 12 15 17 10"/>
                        <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                    Export PDF
                </button>
            </div>
        </div>
    </div>
</div>
<div style="background-color:#f5f5e8; min-height:100vh; padding:20px;" class="main-wrapper">

    <!-- Main Row -->
    <div style="display:flex; gap:20px; align-items:flex-start;" class="main-row">

        <!-- LEFT SIDE (Monitoring + Pie stacked) -->
        <div style="display:flex; flex-direction:column; gap:20px; width:300px;" class="left-panel">

            <!-- Monitoring Cases -->
            <div style="border:2px solid #FFD54F; border-radius:6px; overflow:hidden; background:white;"  class="monitor-box">
                <div style="padding:8px 16px; font-size:22px; font-weight:600; text-align:center;">
                    Monitoring Cases
                </div>
                <div id="monitoringCount" style="background-color:#f5c518; padding:12px; text-align:center; font-size:48px; font-weight:700;">
                    {{ $monitoringCount }}
                </div>
            </div>

            <!-- Pie Chart -->
            <div id="pieChartWrapper" style="background:white; border-radius:6px; padding:16px; text-align:center; position:relative;" class="pie-box">
                <canvas id="pieChart" style="width:100%; height:260px;"></canvas>
                <div style="border:1px solid #999; border-radius:4px; padding:8px 16px; margin-top:8px; font-size:14px; font-weight:600; display:inline-block;">
                    Lot Wise Distribution
                </div>
            </div>

        </div>

        <!-- RIGHT SIDE (Bar Chart) -->
        <div id="barChartWrapper" style="flex:1; background:white; border-radius:6px; padding:24px; position:relative;" class="right-panel">
            <canvas class="bar-wrapper" id="barChart" style="width:100%; height:480px;"></canvas>
        </div>

    </div>

</div>

{{-- Pass dynamic data to JS --}}
<script>
window.monitoringData = {
    districts: {!! json_encode($districts) !!},        // array
    progress: {!! json_encode($progressData) !!},      // array
    womenHeaded: {!! json_encode($womenHeaded) !!},   // array
    disability: {!! json_encode($disabilityHeaded) !!}, // array
    lotLabels: {!! json_encode($lotLabels) !!},       // array
    lotData: {!! json_encode($lotData) !!}            // array
};
</script>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="{{ asset('theme/assets/js/chart-toolbar.js') }}"></script>
<script src="{{ asset('theme/assets/js/export-pdf.js') }}"></script>
@vite('resources/theme/js/pages/monitoring.js')
@endsection

<style>
    /* DEFAULT (keep your current look) */
.main-wrapper {
    width: 100%;
}

.main-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.left-panel {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.right-panel {
    flex: 1;
}

.bar-wrapper {
    width: 100% !important;
}

/* ✅ LARGE SCREENS (>= 1400px) */
@media (min-width: 1400px) {

    .main-wrapper {
        max-width: 100%;
    }

    .left-panel {
        width: 360px;
    }

    #pieChart {
        height: 280px !important;
    }

    .bar-wrapper {
        max-width: 100%;
    }

    #barChart {
        height: 480px !important;
    }
}

/* ✅ EXTRA LARGE SCREENS (>= 1700px) */
@media (min-width: 1700px) {

    .main-wrapper {
        max-width: 100%;
    }

    .left-panel {
        width: 400px;
    }

    #pieChart {
        height: 280px !important;
    }

    .bar-wrapper {
        max-width: 100%;
    }

    #barChart {
        height: 480px !important;
    }
}
</style>