@extends('layouts.admin')

@section('title', 'Seats List')

@section('content')

    <div class="container-fluid p-0">
        <!--title-->
        <div class="mb-3">
            <h4 class="fw-bold">Location & Section Details</h4>

            <div class="card p-3">
                <p>
                    <strong>District:</strong> {{ $section->office->district->district ?? 'N/A' }} &nbsp;||
                    <strong>Taluk:</strong> {{ $section->office->societytaluk->taluk_name ?? 'N/A' }} &nbsp;||
                    <strong>Office:</strong> {{ $section->office->name }} &nbsp;||
                    <strong>Office Type:</strong> {{ $section->office->officeType->name ?? 'N/A' }} &nbsp;||
                    <strong>Section:</strong> {{ $section->name }}
                </p>
            </div>
        </div>


        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">Seats</h1>
        </div>

        <!-- Create Section Button -->
        <div class="d-flex justify-content-end align-items-center gap-2 mb-3">
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#addSeatForm">
                Add Seat
            </button>

            <a href="{{ route('admin.seatmanagement.sections.sections', Crypt::encryptString($section->office_id)) }}"
                class="btn btn-primary">
                Back
            </a>
        </div>

        <div class="collapse mb-4" id="addSeatForm">
            <form id="seatForm">
                @csrf

                <div class="row">

                    <div class="col-md-6">
                        <label for="example-text-input" class="form-control-label"><span style="color:red">*</span> Seat
                            Name</label>
                        <input class="form-control" type="text" name="name">
                        <label style="color:red" id="nameError"></label>
                    </div>
                    <div class="col-md-6">
                        <label for="example-text-input" class="form-control-label"><span style="color:red">*</span>
                            Role</label>

                        <select name="role_id" class="form-select">
                            <option value="">-- Select Role --</option>
                            @foreach ($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                        <label style="color:red" id="roleError"></label>

                    </div> <br>
                    <div>
                        <h3> Choose Reporting seat</h3>
                    </div>

                    <div class="col-md-6">
                        <label><span style="color:red">*</span> District</label>
                        <select id="districtSelect" class="form-select">
                            <option value="">-- Select District --</option>
                            @foreach ($districts as $dist)
                                <option value="{{ $dist->id }}">{{ $dist->district }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label><span style="color:red">*</span> Office Type</label>
                        <select id="officeTypeSelect" class="form-select" disabled>
                            <option value="">-- Select Office Type --</option>
                            @foreach ($officeTypes as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label><span style="color:red">*</span> Office</label>
                        <select id="officeSelect" class="form-select" disabled>
                            <option value="">-- Select Office --</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="example-text-input" class="form-control-label"><span style="color:red">*</span> Default
                            Reporting Seat</label>

                        <select name="default_reporting_seat_id" id="default_reporting_seat_id" class="form-control"
                            disabled>
                            <option value="">-- None --</option>
                        </select>

                        @if ($existingSeats->isEmpty())
                            <small class="text-muted">No other seats available in this section yet.</small>
                        @endif

                        <label style="color:red" id="defaultseatError"></label>

                    </div>



                </div>


                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>



        <!-- Search Form -->
        <div class="col-md-6">
            <br>
            <form class="d-flex ms-auto" action="" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" name="search"
                    value="{{ $search ?? '' }}" aria-label="Search">
                <button class="btn btn-outline-primary" type="submit">Search</button>
            </form>
        </div>

        <!-- Collapsible Section Add Form -->


        <br>

        <!-- Sections Table -->
        <div class="row">
            <div class="col-12 col-xl-12">
                <div class="card">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>SL No</th>
                                    <th>Seat Name</th>
                                    <th>Role</th>
                                    <th>Reporting Seat</th>
                                    <th>Staff</th>
                                    <th>Seats Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>

                            <tbody>


                                @foreach ($seats as $index => $seat)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $seat->name }}</td>
                                        <td>{{ $seat->role->name ?? '—' }}</td>
                                        <td>
                                            @if ($seat->reportingSeat)
                                                {{ $seat->reportingSeat->name }}
                                                ({{ $seat->reportingSeat->office->name ?? '—' }})
                                            @else
                                                <span class="text">Not Assigned</span>
                                            @endif
                                        </td>
                                        <td>



                                            <a href="{{ route('admin.seatmanagement.seats.users', \Crypt::encryptString($seat->id)) }}"
                                                class="btn btn-primary">Staff</a>





                                        </td>
                                        <td>


                                            <span class="badge {{ $seat->status ? 'bg-success' : 'bg-danger' }}">
                                                {{ $seat->status ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td>
                                            <!-- Toggle Status Button -->
                                            @php $encryptedId = Crypt::encryptString($seat->id); @endphp

                                            <form
                                                action="{{ route('admin.seatmanagement.seats.toggle', Crypt::encryptString($seat->id)) }}"
                                                method="POST" class="d-inline toggle-form">
                                                @csrf

                                                <a href="javascript:void(0);" class="toggle-status-btn"
                                                    data-id="{{ $encryptedId }}" data-status="{{ $seat->status }}"
                                                    data-url="{{ route('admin.seatmanagement.seats.toggle', $encryptedId) }}">
                                                    @if ($seat->status)
                                                        <i class="align-middle me-2 fas fa-fw fa-ban"
                                                            title="Deactivate"></i>
                                                    @else
                                                        <i class="align-middle me-2 fas fa-fw fa-check"
                                                            title="Activate"></i>
                                                    @endif
                                                </a>
                                            </form>
                                            <a href="javascript:void(0);" class="edit-seat-btn"
                                                data-id="{{ $encryptedId }}" data-name="{{ $seat->name }}"
                                                data-role_id="{{ $seat->role_id }}"
                                                data-default_reporting_seat_id="{{ $seat->default_reporting_seat_id ? Crypt::encryptString($seat->default_reporting_seat_id) : '' }}"
                                                data-default_reporting_seat_plain="{{ $seat->default_reporting_seat_id }}"
                                                data-reporting-district="{{ $seat->reportingSeat->office->district->id ?? '' }}"
                                                data-reporting-office-type="{{ $seat->reportingSeat->office->office_type_id ?? '' }}"
                                                data-reporting-office="{{ $seat->reportingSeat->office->id ?? '' }}"
                                                title="Edit Seat">
                                                <i class="align-middle" data-feather="edit-2"></i>
                                            </a>

                                            </button>

                                            <!-- Delete Button -->

                                            </form>
                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="d-flex justify-content-center">
                            {{ $seats->links() }}
                        </div>
                    </div>
                </div>

                <!-- Edit Seat Modal -->
                <!-- Edit Seat Modal -->
                <div class="modal fade" id="editSeatModal" tabindex="-1" aria-labelledby="editSeatModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">

                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title" id="editSeatModalLabel">Edit Seat</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <div class="modal-body">
                                <form id="editSeatForm">
                                    @csrf
                                    <input type="hidden" id="editSeatId" name="seat_id">

                                    <div class="row">

                                        <!-- Seat Name -->
                                        <div class="col-md-6">
                                            <label><span style="color:red">*</span> Seat Name</label>
                                            <input type="text" class="form-control" id="editSeatName" name="name">
                                            <small id="editNameError" class="text-danger"></small>
                                        </div>

                                        <!-- Role -->
                                        <div class="col-md-6">
                                            <label><span style="color:red">*</span> Role</label>
                                            <select class="form-select" id="editRoleId" name="role_id">
                                                <option value="">-- Select Role --</option>
                                                @foreach ($roles as $role)
                                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                                @endforeach
                                            </select>
                                            <small id="editRoleError" class="text-danger"></small>
                                        </div><br>

                                        <div class="mt-3">
                                            <h4>Choose Reporting Seat</h4>
                                        </div>


                                        <div class="col-md-4 mt-3">
                                            <label>District</label>
                                            <select id="editDistrictSelect" class="form-select">
                                                <option value="">-- Choose District --</option>
                                                @foreach ($districts as $dist)
                                                    <option value="{{ $dist->id }}"
                                                        {{ $dist->id == $section->office->district->id ? 'selected' : '' }}>
                                                        {{ $dist->district }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <label>Office Type</label>
                                            <select id="editOfficeTypeSelect" class="form-select">
                                                <option value="">-- Choose Office Type --</option>
                                                @foreach ($officeTypes as $type)
                                                    <option value="{{ $type->id }}"
                                                        {{ $type->id == $section->office->officeType->id ? 'selected' : '' }}>
                                                        {{ $type->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <label>Office</label>
                                            <select id="editOfficeSelect" class="form-select">
                                                <option value="{{ $section->office->id }}">{{ $section->office->name }}
                                                </option>
                                            </select>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <label>Default Reporting Seat</label>
                                            <select id="editDefaultReportingSeatId" class="form-select"
                                                name="default_reporting_seat_id">
                                                <option value="">-- None --</option>
                                            </select>
                                        </div>


                                        <!-- Default Reporting Seat -->
                                        <!-- <div class="col-md-6 mt-3">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <label>Default Reporting Seat</label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <select id="editDefaultReportingSeatId" class="form-select" name="default_reporting_seat_id">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <option value="">-- None --</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      </select>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <small id="editDefaultSeatError" class="text-danger"></small>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        -->
                                    </div>
                                </form>
                            </div>

                            <div class="modal-footer">
                                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button class="btn btn-primary" id="saveEditSeatBtn">Save Changes</button>
                            </div>

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

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

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

            // 1. Enable office-type dropdown
            $('#districtSelect').on('change', function() {
                $('#officeTypeSelect').prop('disabled', false);
            });

            // 2. Load Offices
            $('#officeTypeSelect').on('change', function() {
                let district_id = $('#districtSelect').val();
                let office_type_id = $(this).val();

                if (!district_id || !office_type_id) return;

                $('#officeSelect')
                    .empty()
                    .append('<option value="">Loading...</option>')
                    .prop('disabled', true);

                $.ajax({
                    url: "{{ route('admin.seatmanagement.get.offices') }}",
                    type: "GET",
                    data: {
                        district_id,
                        office_type_id
                    },
                    success: function(response) {
                        $('#officeSelect')
                            .empty()
                            .append('<option value="">-- Select Office --</option>');

                        $.each(response.offices, function(i, office) {
                            $('#officeSelect').append(
                                `<option value="${office.id}">${office.name}</option>`
                            );
                        });

                        $('#officeSelect').prop('disabled', false);
                    }
                });
            });

            // 3. Load Reporting Seats
            $('select[name="role_id"], #districtSelect, #officeTypeSelect, #officeSelect')
                .on('change', function() {

                    let role_id = $('select[name="role_id"]').val();
                    let district_id = $('#districtSelect').val();
                    let office_type_id = $('#officeTypeSelect').val();
                    let office_id = $('#officeSelect').val();

                    // Skip invalid "Loading..." state
                    if (office_id === "Loading...") return;

                    // Require all filters
                    if (!role_id || !district_id || !office_type_id || !office_id) {
                        $('#default_reporting_seat_id')
                            .empty()
                            .append('<option value="">-- Select all filters --</option>')
                            .prop('disabled', true);
                        return;
                    }

                    // Encrypt role_id first
                    $.get('/encrypt-id/' + role_id, function(res) {

                        let encryptedRoleId = res.encrypted;

                        $.ajax({
                            url: "{{ route('admin.seatmanagement.get.seats.by.filters') }}",
                            type: "GET",
                            data: {
                                role_id: encryptedRoleId, // ✅ encrypted
                                district_id,
                                office_type_id,
                                office_id
                            },
                            success: function(response) {
                                let $dr = $('#default_reporting_seat_id');
                                $dr.empty();

                                if (response.seats.length > 0) {
                                    $dr.append(
                                        '<option value="">-- Select Reporting Seat --</option>'
                                    );
                                    $.each(response.seats, function(i, seat) {

                                        $.get('/encrypt-id/' + seat.id, function(
                                            encSeat) {

                                            let officeName = seat.section
                                                ?.office?.name ?? '—';

                                            $dr.append(
                                                `<option value="${encSeat.encrypted}">
                ${seat.name} (${officeName})
            </option>`
                                            );
                                        });

                                    });

                                    $dr.prop('disabled', false);
                                } else {
                                    $dr.append('<option value="">No seats found</option>')
                                        .prop('disabled', true);
                                }
                            }
                        });
                    });

                });

        });


        $('#seatForm').on('submit', function(e) {
            e.preventDefault();

            // Clear old errors
            $('#nameError, #roleError, #defaultseatError').text('');

            // Get form data
            let name = $('input[name="name"]').val().trim();
            let role_id = $('select[name="role_id"]').val();
            let default_reporting_seat_id = $('select[name="default_reporting_seat_id"]').val();
            let sectionId = "{{ Crypt::encryptString($section->id) }}";

            // Client-side validation
            if (name === '') {
                $('#nameError').text('Seat name is required.');
                return;
            }
            if (!role_id) {
                $('#roleError').text('Role selection is required.');
                return;
            }

            if (!default_reporting_seat_id) {
                default_reporting_seat_id = null;
            }

            // Encrypt role_id first
            $.get('/encrypt-id/' + role_id, function(resRole) {

                let encryptedRoleId = resRole.encrypted;
                let encryptedDefaultSeatId = default_reporting_seat_id ? null : default_reporting_seat_id;

                if (default_reporting_seat_id) {
                    $.get('/encrypt-id/' + default_reporting_seat_id, function(resSeat) {
                        encryptedDefaultSeatId = resSeat.encrypted;
                        submitSeat(encryptedRoleId, encryptedDefaultSeatId);
                    });
                } else {
                    submitSeat(encryptedRoleId, null);
                }

                function submitSeat(encRoleId, encSeatId) {
                    $.ajax({
                        url: "{{ route('admin.seatmanagement.seats.store', ':section') }}"
                            .replace(':section', sectionId),
                        type: "POST",
                        data: {
                            _token: '{{ csrf_token() }}',
                            name: name,
                            role_id: encRoleId,
                            default_reporting_seat_id: encSeatId
                        },
                        success: function(response) {
                            Swal.close();
                            if (response.status === 'success') {
                                location.reload();
                            } else {
                                Swal.fire('Error', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            Swal.close();

                            if (xhr.status === 422) {
                                let errors = xhr.responseJSON.errors;

                                if (errors.name) {
                                    $('#nameError').text(errors.name[0]);
                                }

                                if (errors.role_id) {
                                    $('#roleError').text(errors.role_id[0]);
                                }

                                if (errors.default_reporting_seat_id) {
                                    $('#defaultseatError').text(errors
                                        .default_reporting_seat_id[0]);
                                }
                            } else {
                                Swal.fire('Error', 'Something went wrong. Please try again.',
                                    'error');
                            }
                        }
                    });
                }


            });

        });



        $(document).on('click', '.toggle-status-btn', function(e) {
            e.preventDefault();

            let url = $(this).data('url');
            let status = $(this).data('status'); // 1 or 0
            let action = status == 1 ? 'deactivate' : 'activate';

            Swal.fire({
                title: `Are you sure you want to ${action} this seat?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, proceed'
            }).then((result) => {
                if (result.isConfirmed) {

                    $.post(url, {
                        _token: "{{ csrf_token() }}"
                    }, function(response) {

                        if (response.status === 'success') {
                            Swal.fire('Success', response.message, 'success')
                                .then(() => location.reload());
                        } else {
                            Swal.fire('Error', response.message, 'error');
                        }

                    }).fail(function() {
                        Swal.fire('Error', 'Something went wrong.', 'error');
                    });
                }
            });
        });




        // Handle Edit Button Click


        // Load reporting seats inside Edit Modal
        // When district changes, enable office type
        $('#editDistrictSelect').on('change', function() {
            $('#editOfficeTypeSelect').prop('disabled', false);
        });

        $('#editOfficeTypeSelect').on('change', function() {
            let district_id = $('#editDistrictSelect').val();
            let office_type_id = $(this).val();
            if (!district_id || !office_type_id) return;

            $('#editOfficeSelect')
                .empty()
                .append('<option value="">Loading...</option>')
                .prop('disabled', true);

            $.ajax({
                url: "{{ route('admin.seatmanagement.get.offices') }}",
                type: "GET",
                data: {
                    district_id,
                    office_type_id
                },
                success: function(res) {
                    let $office = $('#editOfficeSelect')
                        .empty()
                        .append('<option value="">-- Select Office --</option>');

                    res.offices.forEach(o => {
                        $office.append(`<option value="${o.id}">${o.name}</option>`);
                    });

                    $office.prop('disabled', false);
                }
            });
        });


        $('#editRoleId, #editDistrictSelect, #editOfficeTypeSelect, #editOfficeSelect')
            .on('change', function() {

                let role_id = $('#editRoleId').val(); // plain
                let district_id = $('#editDistrictSelect').val();
                let office_type_id = $('#editOfficeTypeSelect').val();
                let office_id = $('#editOfficeSelect').val();
                let current = $('#editDefaultReportingSeatId').data('current');

                if (!role_id || !district_id || !office_type_id || !office_id) {
                    $('#editDefaultReportingSeatId')
                        .html('<option value="">-- Select all filters --</option>')
                        .prop('disabled', true);
                    return;
                }


                // 🔐 Encrypt role_id
                $.get('/encrypt-id/' + role_id, function(resRole) {

                    let encryptedRoleId = resRole.encrypted;

                    $.ajax({
                        url: "{{ route('admin.seatmanagement.get.seats.by.filters') }}",
                        type: "GET",
                        data: {
                            role_id: encryptedRoleId,
                            district_id,
                            office_type_id,
                            office_id
                        },
                        success: function(res) {

                            let $dr = $('#editDefaultReportingSeatId').empty();

                            // GET PLAIN ID HERE (once)
                            let currentPlain = $dr.data('current_plain');

                            if (!res.seats.length) {
                                $dr.append('<option value="">No seats found</option>')
                                    .prop('disabled', true);
                                return;
                            }

                            $dr.append('<option value="">-- Select Reporting Seat --</option>');

                            // NOW loop seats
                            res.seats.forEach(seat => {

                                $.get('/encrypt-id/' + seat.id, function(encSeat) {

                                    let option = `
                <option value="${encSeat.encrypted}" data-plain="${seat.id}">
                    ${seat.name} (${seat.section?.office?.name ?? '—'})
                </option>
            `;

                                    $dr.append(option);

                                    // ✅ SELECT MATCH USING PLAIN ID
                                    if (currentPlain && seat.id == currentPlain) {
                                        $dr.val(encSeat.encrypted);
                                    }

                                    $dr.prop('disabled', false);
                                });
                            });
                        }

                    });

                });
            });


        // Load filters into edit modal

        $(document).on('click', '.edit-seat-btn', function() {

            let encryptedId = $(this).data('id');
            let seatName = $(this).data('name');
            let roleId = $(this).data('role_id');
            let reportingSeatId = $(this).data('default_reporting_seat_id'); // encrypted
            let reportingSeatPlain = $(this).data('default_reporting_seat_plain');
            $('#editDefaultReportingSeatId').data('current_plain', reportingSeatPlain || null);

            let districtId = $(this).data('reporting-district');
            let officeTypeId = $(this).data('reporting-office-type');
            let officeId = $(this).data('reporting-office');

            //  STORE CURRENT SEAT FIRST
            $('#editDefaultReportingSeatId').data('current', reportingSeatId || null);

            $('#editSeatId').val(encryptedId);
            $('#editSeatName').val(seatName);
            $('#editRoleId').val(roleId);

            // preload filters
            $('#editDistrictSelect').val(districtId);
            $('#editOfficeTypeSelect').val(officeTypeId);


            // load offices → THEN trigger change
            $.ajax({
                url: "{{ route('admin.seatmanagement.get.offices') }}",
                type: "GET",
                data: {
                    district_id: districtId,
                    office_type_id: officeTypeId
                },
                success: function(res) {

                    let $office = $('#editOfficeSelect')
                        .empty()
                        .append('<option value="">-- Select Office --</option>');

                    res.offices.forEach(o => {
                        $office.append(`<option value="${o.id}">${o.name}</option>`);
                    });

                    //THIS triggers seat load AFTER current is set
                    $('#editOfficeSelect').val(officeId).trigger('change');
                }
            });

            $('#editSeatModal').modal('show');
        });




        // Handle Save Edit Button
        $('#saveEditSeatBtn').on('click', function() {

            let seatId = $('#editSeatId').val(); // encrypted
            let name = $('#editSeatName').val().trim();
            let roleId = $('#editRoleId').val(); // plain
            let defaultSeat = $('#editDefaultReportingSeatId').val() || null;

            if (!name || !roleId) {
                Swal.fire('Error', 'Name and role are required', 'error');
                return;
            }

            // encrypt role_id
            $.get('/encrypt-id/' + roleId, function(resRole) {

                let encryptedRoleId = resRole.encrypted;

                $.ajax({
                    url: "{{ route('admin.seatmanagement.seats.update', ':id') }}"
                        .replace(':id', seatId),
                    type: "POST",
                    data: {
                        _token: '{{ csrf_token() }}',
                        name: name,
                        role_id: encryptedRoleId, // ✅ encrypted
                        default_reporting_seat_id: defaultSeat // already encrypted
                    },
                    success: function(res) {
                        Swal.fire('Success', res.message, 'success')
                            .then(() => location.reload());
                    },
                    error: function(xhr) {
                        Swal.fire(
                            'Error',
                            xhr.responseJSON?.message || 'Something went wrong',
                            'error'
                        );
                    }
                });

            });
        });



        $('#editRoleId').on('change', function() {

            let role_id = $(this).val();

            let $dr = $('#editDefaultReportingSeatId')
                .empty()
                .append('<option value="">-- Loading... --</option>')
                .prop('disabled', true);

            if (!role_id) {
                $dr.empty().append('<option value="">-- Select Role First --</option>');
                return;
            }

            $.ajax({
                url: "{{ route('admin.seatmanagement.get.seats.by.role') }}",
                type: "GET",
                data: {
                    role_id: role_id // encrypted
                },
                success: function(response) {

                    $dr.empty();

                    if (!response.seats || response.seats.length === 0) {
                        $dr.append('<option value="">-- No Seats Found --</option>');
                        return;
                    }

                    $dr.append('<option value="">-- Select Reporting Seat --</option>');

                    // 🔐 encrypt EACH seat.id before appending
                    response.seats.forEach(function(seat) {

                        $.get('/encrypt-id/' + seat.id, function(encRes) {

                            let officeName =
                                seat.section?.office?.name ||
                                seat.office?.name ||
                                '—';

                            $dr.append(
                                `<option value="${encRes.encrypted}">
                            ${seat.name} (${officeName})
                        </option>`
                            );
                        });
                    });

                    $dr.prop('disabled', false);
                },
                error: function() {
                    $dr.empty()
                        .append('<option value="">-- Failed to Load Seats --</option>');
                }
            });
        });
    </script>
@endpush