@extends('layouts.app')

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">सारांस विवरण</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('addlocallevel') }}">प्रतिवेदन</a></li>
                    <li class="breadcrumb-item active">सारांस विवरण</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('summarizereport') }}" method="GET">

                    <div class="row">

                        <div class="col-md-4 mb-3">
                            <label class="form-label">प्रदेश</label>
                            <select name="province_id" id="province_id" class="form-control">
                                <option value="" disabled selected>प्रदेश चयन गर्नुहोस्</option>
                                @foreach($provinces as $id => $provinceName)
                                <option value="{{ $id }}" {{ request('province_id') == $id ? 'selected' : '' }}>{{ $provinceName }}</option>
                                @endforeach
                            </select>
                            @error('Province')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">जिल्ला</label>
                            <select name="district_id" id="district_id" class="form-control" disabled>
                                <option value="" disabled selected>पहिले प्रदेश चयन गर्नुहोस्</option>
                                @if(request('province_id'))
                                    @foreach($districts as $id => $districtName)
                                    <option value="{{ $id }}" {{ request('district_id') == $id ? 'selected' : '' }}>{{ $districtName }}</option>
                                    @endforeach
                                @endif
                            </select>
                            @error('district')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">स्थानीय तह</label>
                            <select name="locallevel_id" id="locallevel_id" class="form-control" disabled>
                                <option value="" disabled selected>पहिले जिल्ला चयन गर्नुहोस्</option>
                                @if(request('district_id'))
                                    @foreach($locallevels as $id => $locallevelName)
                                    <option value="{{ $id }}" {{ request('locallevel_id') == $id ? 'selected' : '' }}>{{ $locallevelName }}</option>
                                    @endforeach
                                @endif
                            </select>
                            @error('locallevel')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">विशेषज्ञता</label>
                            <select name="specialization" class="form-control">
                                <option value="" disabled selected>विशेषज्ञता चयन गर्नुहोस्</option>
                                @foreach($specialization as $id => $specializationName)
                                <option value="{{ $id }}" {{ request('specialization') == $id ? 'selected' : '' }}>{{ $specializationName }}</option>
                                @endforeach
                            </select>
                            @error('specialization')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <!-- search button -->
                        <div class="col-md-4 mb-3">
                            <label for="">&nbsp;</label>
                            <button class="btn btn-primary w-100 waves-effect waves-light" type="submit">रिपोर्ट हेर्ने</button>
                        </div>

                    </div>
                </form>

                <!-- end table responsive -->
            </div>
            <!-- end card body -->
        </div>
        <!-- end card -->
    </div>
    <!-- end col -->
</div>
<!-- end row -->

@if($showingReport)

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table align-middle datatable dt-responsive table-check nowrap" style="border-collapse: collapse; border-spacing: 0 8px; width: 100%;">
                        <thead>
                            <tr class="bg-transparent">
                                <th>श्रेणी</th>
                                <th>पुरुष संख्या</th>
                                <th>महिला संख्या</th>
                                <th>जम्मा</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($results as $level)
                            <tr>
                                <td>
                                    <a href="{{ make_route('summarizedetail',$level->level_id) }}" class="text-decoration-none">
                                        {{ $level->level->level }}
                                    </a>
                                </td>
                                <td>{{ $level->countMale($level->level_id) }}</td>
                                <td>{{ $level->countFemale($level->level_id) }}</td>
                                <td>{{ $level->countMale($level->level_id) + $level->countFemale($level->level_id) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@else
<div class="row">
    <div class="col-lg-12">
        <div class="alert alert-warning" role="alert">
            <i class="mdi mdi-alert-outline me-2"></i>
            कृपया रिपोर्ट हेर्नको लागि माथिका विकल्पहरू चयन गर्नुहोस्।
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script>
$(document).ready(function() {

    // Province change event
    $('#province_id').on('change', function() {
        var provinceId = $(this).val();
        var districtSelect = $('#district_id');
        var locallevelSelect = $('#locallevel_id');

        // Reset dependent dropdowns
        districtSelect.html('<option value="" disabled selected>जिल्ला लोड हुँदैछ...</option>').prop('disabled', true);
        locallevelSelect.html('<option value="" disabled selected>पहिले जिल्ला चयन गर्नुहोस्</option>').prop('disabled', true);

        if (provinceId) {
            $.ajax({
                url: "{{ route('ajax.get-district') }}",
                type: "POST",
                data: {
                    province_id: provinceId,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    console.log('Districts response:', response); // Debug line
                    districtSelect.html('<option value="" disabled selected>जिल्ला चयन गर्नुहोस्</option>');

                    if (response && Object.keys(response).length > 0) {
                        // Sort districts alphabetically
                        var sortedDistricts = Object.keys(response).sort(function(a, b) {
                            return response[a].localeCompare(response[b]);
                        });

                        $.each(sortedDistricts, function(index, districtId) {
                            districtSelect.append('<option value="' + districtId + '">' + response[districtId] + '</option>');
                        });

                        districtSelect.prop('disabled', false);
                    } else {
                        districtSelect.html('<option value="" disabled selected>कुनै जिल्ला फेला परेन</option>');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading districts:', error);
                    districtSelect.html('<option value="" disabled selected>Error loading districts</option>');
                }
            });
        }
    });

    // District change event
    $('#district_id').on('change', function() {
        var districtId = $(this).val();
        var locallevelSelect = $('#locallevel_id');

        // Reset local level dropdown
        locallevelSelect.html('<option value="" disabled selected>स्थानीय तह लोड हुँदैछ...</option>').prop('disabled', true);

        if (districtId) {
            $.ajax({
                url: "{{ route('ajax.get-district-local-level') }}",
                type: "POST",
                data: {
                    district_id: districtId,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    console.log('Local levels response:', response); // Debug line
                    locallevelSelect.html('<option value="" disabled selected>स्थानीय तह चयन गर्नुहोस्</option>');

                    if (response && Object.keys(response).length > 0) {
                        // Sort local levels alphabetically
                        var sortedLocallevels = Object.keys(response).sort(function(a, b) {
                            return response[a].localeCompare(response[b]);
                        });

                        $.each(sortedLocallevels, function(index, locallevelId) {
                            locallevelSelect.append('<option value="' + locallevelId + '">' + response[locallevelId] + '</option>');
                        });

                        locallevelSelect.prop('disabled', false);
                    } else {
                        locallevelSelect.html('<option value="" disabled selected>कुनै स्थानीय तह फेला परेन</option>');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading local levels:', error);
                    locallevelSelect.html('<option value="" disabled selected>Error loading local levels</option>');
                }
            });
        }
    });

    // Initialize dropdowns if there are pre-selected values
    @if(request('province_id'))
        $('#province_id').trigger('change');
        @if(request('district_id'))
            setTimeout(function() {
                $('#district_id').val('{{ request('district_id') }}').trigger('change');
                @if(request('locallevel_id'))
                    setTimeout(function() {
                        $('#locallevel_id').val('{{ request('locallevel_id') }}');
                    }, 500);
                @endif
            }, 500);
        @endif
    @endif
});
</script>
@endpush