@extends('layouts.app')

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

@section('content')
<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 justify-center items-stretch gap-5">
            <div class="grid items-stretch">
                <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>
        </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 style="background:white; border-radius:6px; padding:16px; text-align:center;" 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 style="flex:1; background:white; border-radius:6px; padding:22px;" 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>
@vite('resources/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%;
}

/* ✅ 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>