{{-- resources/views/toilets/index.blade.php --}}
<x-admin.layout>
    <x-slot name="title">Muster Report</x-slot>
    <x-slot name="heading">Muster Report</x-slot>

    <div class="row">
        <div class="col-12">
            <div class="card p-3">
                <div class="card-header p-0">
                    <h3 class="text-start">Muster Report Filter</h3>
                </div>

                <div class="card-body">
                    <form id="muster-filter-form" class="d-grid gap-3">

                        <div class="row mb-5">

                            <!-- Year -->
                            <div class="col-md-3 mb-3">
                                <label for="year" class="form-label">Year: <span
                                        class="text-danger">*</span></label>
                                <select id="year" name="year" class="form-control">
                                    <option value="">-- Select Year --</option>
                                    @foreach ($years as $y)
                                        <option value="{{ $y }}">{{ $y }}</option>
                                    @endforeach
                                </select>
                                <span class="invalid year_err text-danger"></span>
                            </div>

                            <!-- Month -->
                            <div class="col-md-3 mb-3">
                                <label for="month" class="form-label">Month: <span
                                        class="text-danger">*</span></label>
                                <select id="month" name="month" class="form-control">
                                    <option value="">-- Select Month --</option>
                                </select>
                                <span class="invalid month_err text-danger"></span>
                            </div>

                            <!-- Prabhag -->
                            <div class="col-md-3 mb-3">
                                <label for="prabhag" class="form-label">Prabhag Samiti:</label>
                                <select id="prabhag" name="prabhag" class="form-control">
                                    <option value="">-- Select Prabhag --</option>
                                    @foreach ($prabhags as $p)
                                        <option value="{{ $p->id }}">{{ $p->prabhag }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Divider -->
                            <div class="col-md-3 mb-3">
                                <label for="divider" class="form-label">Divider Name:</label>
                                <select id="divider" name="divider" class="form-control">
                                    <option value="">-- Select Divider --</option>
                                    @foreach ($dividers as $p)
                                        <option value="{{ $p->id }}">{{ $p->divider_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-6 d-flex gap-3">
                                <button type="submit" id="generate-pdf" class="btn btn-primary w-100">Generate
                                    PDF</button>
                                <button type="button" id="reset-btn" class="btn btn-secondary w-100">Reset</button>
                            </div>
                        </div>

                    </form>
                </div>

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





</x-admin.layout>



<script>
    $(document).ready(function() {

        $('#year').on('change', function() {
            let year = $(this).val();

            $('#month').html('<option value="">Select Month</option>');

            if (year !== '') {
                $.ajax({
                    url: "{{ route('get-divider-months') }}",
                    type: "GET",
                    data: {
                        year: year
                    },
                    success: function(res) {
                        if (res.months.length > 0) {
                            res.months.forEach(function(m) {
                                $('#month').append(
                                    `<option value="${m.value}">${m.name}</option>`
                                );
                            });
                        }
                    }
                });
            }
        });

        $('#prabhag').on('change', function() {
            let prabhagId = $(this).val();

            $('#divider').html('<option value="">Select Divider</option>');

            if (prabhagId !== '') {
                $.ajax({
                    url: "{{ route('get-dividers-by-prabhag') }}",
                    type: "GET",
                    data: {
                        prabhag_id: prabhagId
                    },
                    success: function(res) {
                        if (res.dividers.length > 0) {
                            res.dividers.forEach(function(g) {
                                $('#divider').append(
                                    `<option value="${g.id}">${g.divider_name}</option>`
                                );
                            });
                        }
                    }
                });
            }
        });

    });
</script>

<script>
    document.getElementById('reset-btn').addEventListener('click', function() {
        window.location.href = "{{ route('garden_muster_report_pdf') }}";
    });
</script>

<script>
    $(document).on('click', '#generate-pdf', function(e) {
        e.preventDefault();

        // get values
        let year = $('#year').val();
        let month = $('#month').val();
        let prabhag = $('#prabhag').val();
        let divider = $('#divider').val();

        // clear previous errors
        $('.year_err').text('');
        $('.month_err').text('');

        let hasError = false;

        // Validate Year
        if (!year) {
            $('.year_err').text('Year is required.');
            hasError = true;
        }

        // Validate Month
        if (!month) {
            $('.month_err').text('Month is required.');
            hasError = true;
        }

        if (hasError) return;

        // Build URL manually
        let url = "{{ route('divider_muster_report_pdf') }}";
        url += `?year=${year}&month=${month}&prabhag=${prabhag}&divider=${divider}`;

        // Open PDF in new tab
        window.open(url, '_blank');
    });

    function showError(field, msg) {
        $(field).closest('.mb-3').append(`<div class="text-danger error-text mt-1">${msg}</div>`);
    }
</script>