@extends('backend.template.layouts.template-base')
@section('title', 'Delivery Setup - Edit Zone')


@section('content')
    <section class="create-zones">
        <div class="page-head-title mb-4">
            <a href="{{ route('backend.template.manage-zone.index') }}" class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0 d-flex align-items-center">
                    <i class="ri-arrow-left-s-line fs-1 me-2"></i>Edit Zone
                </h2>
            </a>
        </div>

        <div class="container-fluid mt-3">
            <div class="row g-3">

                {{-- ── LEFT ──────────────────────────────────────────────────────── --}}
                <div class="col-lg-8 col-md-8">
                    <div class="card custom-card p-3">

                        <div class="row g-3 mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Zone Name <span class="text-danger">*</span></label>
                                <input type="text" id="zoneName" class="form-control custom-input"
                                    value="{{ $zone->name }}" placeholder="e.g. Coimbatore North">
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-6 ">
                                <label class="form-label">State <span class="text-danger">*</span></label>
                                <select id="stateSelect" class="form-select custom-input w-100">
                                    <option value="">Select State</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">District <span class="text-danger">*</span></label>
                                <select id="districtSelect" class="form-select custom-input w-100">
                                    <option value="">Select District</option>
                                </select>
                            </div>
                        </div>

                        <div class="pin-title">PIN Code's</div>

                        <div id="pinEmptyState" class="empty-state-box text-center mb-3" style="display:none;">
                            <div class="empty-icon">i</div>
                            <div class="empty-title mt-2">No District selected yet!</div>
                            <div class="empty-subtext">Select a district to load the PIN Codes.</div>
                        </div>

                        <div id="pinTableWrap" style="display:none;">
                            <div class="table-search-box mb-2" style="width:60%;">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search">
                                <input type="text" id="pinSearch" placeholder="Search by place or PIN Code"
                                    class="table-search-input">
                            </div>
                            <div class="pin-section">
                                <div class="pin-header d-flex align-items-center gap-3">
                                    <input type="checkbox" id="selectAllPins" class="form-check-input">
                                    <span style="flex:1;">Place</span>
                                    <span style="width:100px;">PIN Code</span>
                                </div>
                                <div style="max-height:360px;overflow-y:auto;">
                                    <table class="pin-table">
                                        <tbody id="pinTableBody"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="pinLoader" class="text-center py-3" style="display:none;">
                                <span class="spin"></span> Loading pincodes…
                            </div>
                        </div>

                    </div>
                </div>

                {{-- ── RIGHT ─────────────────────────────────────────────────────── --}}
                <div class="col-lg-4 col-md-4">
                    <div class="d-flex flex-column gap-3">

                        <div class="selection-card">
                            <h6 class="section-title mb-3">Selections</h6>
                            <div id="selectionEmpty" class="selection-empty mb-2" style="display:none;">
                                <span>!</span> No PINs selected yet!
                            </div>
                            <div id="selectionAlert" class="alert-box">
                                <svg class="alert-svg" viewBox="0 0 24 24">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="7.5" x2="12" y2="13"></line>
                                    <circle cx="12" cy="17" r="1.4"></circle>
                                </svg>
                                <span>Add warehouse in any of your selected PINs. Until Warehouse added, Zone doesn't get
                                    activate.</span>
                            </div>
                            <div id="selectionList"></div>
                        </div>

                        <div class="zone-btn-wrap d-flex justify-content-end gap-2">
                            <a href="{{ route('backend.template.manage-zone.index') }}"
                                class="zone-btn zone-btn-cancel text-decoration-none">Cancel</a>
                            <button class="zone-btn zone-btn-create" id="updateZoneBtn" onclick="handleUpdateZone()">Update
                                Zone</button>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        {{-- Confirm modal --}}
        <div class="modal fade" id="updateZoneModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content zone2-modal">
                    <div class="zone2-header">Update Zone?</div>
                    <div class="zone2-body">
                        <p>Zone <span id="modalZoneName"></span> will be updated with the new PIN codes and warehouse
                            settings.</p>
                    </div>
                    <div class="zone2-footer">
                        <button class="zone2-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button class="zone-btn zone-btn-create1" id="confirmUpdate">Update Zone</button>
                    </div>
                </div>
            </div>
        </div>

    </section>
@endsection

@section('scripts')
    <script>
        const STATES_URL = "{{ route('backend.template.manage-zone.api.states') }}";
        const DISTRICTS_URL = "{{ route('backend.template.manage-zone.api.districts') }}";
        const PINCODES_URL = "{{ url('/admin/manage-zone/api/pincodes') }}";
        const UPDATE_URL = "{{ route('backend.template.manage-zone.update', $zone->id) }}";
        const CSRF = "{{ csrf_token() }}";

        const ZONE = {!! json_encode([
            'id' => $zone->id,
            'name' => $zone->name,
            'state' => $zone->state,
            'district' => $zone->district,
        ]) !!};
        const SAVED_PINS = {!! json_encode(
            $zone->pincodes->map(
                    fn($p) => [
                        'pincode' => $p->pincode,
                        'area_name' => $p->area_name,
                        'is_warehouse' => (bool) $p->is_warehouse,
                        'warehouse_name' => $p->warehouse_name ?? '',
                        'max_km' => $p->max_km ?? '',
                    ],
                )->values()->toArray(),
        ) !!};

        let selectedPins = {};
        let allPins = [];

        // ── Init: Select2 + load states then chain to district + pincodes ─────────────
        $(function() {
            $('#stateSelect').select2({
                placeholder: 'Select State',
                allowClear: true,
                width: '100%'
            });
            $('#districtSelect').select2({
                    placeholder: 'Select District',
                    allowClear: true,
                    width: '100%'
                })
                .prop('disabled', true).trigger('change.select2');

            // Pre-load selectedPins from saved data
            SAVED_PINS.forEach(p => {
                selectedPins[p.area_name + '|' + p.pincode] = p;
            });
            renderSelections();

            // Load states → set saved state → load districts → set saved district → load pincodes
            $.get(STATES_URL, function(res) {
                if (!res.success) {
                    toastr.error('Failed to load states.');
                    return;
                }
                res.states.forEach(s => $('#stateSelect').append(new Option(s.name, s.name)));
                $('#stateSelect').val(ZONE.state).trigger('change.select2');
                loadDistricts(ZONE.state, function() {
                    $('#districtSelect').val(ZONE.district).trigger('change.select2');
                    loadPincodes(ZONE.district);
                });
            }).fail(() => toastr.error('Failed to load states.'));
        });

        // ── Reusable loaders ──────────────────────────────────────────────────────────
        function loadDistricts(state, onDone) {
            $('#districtSelect').empty().append(new Option('Loading districts…', ''))
                .prop('disabled', true).trigger('change.select2');

            $.ajax({
                url: DISTRICTS_URL,
                type: 'POST',
                data: {
                    state: state,
                    _token: CSRF
                },
                success: function(res) {
                    $('#districtSelect').empty().append(new Option('Select District', ''));
                    if (res.success) res.districts.forEach(d => $('#districtSelect').append(new Option(d.name, d
                        .name)));
                    $('#districtSelect').val(null).prop('disabled', false).trigger('change.select2');
                    if (onDone) onDone();
                },
                error: function() {
                    $('#districtSelect').empty().append(new Option('Select District', ''))
                        .val(null).prop('disabled', false).trigger('change.select2');
                    toastr.error('Failed to load districts.');
                }
            });
        }

        function loadPincodes(district) {
            allPins = [];
            $('#pinTableBody').empty();
            if (!district) {
                $('#pinTableWrap').hide();
                $('#pinEmptyState').show();
                return;
            }

            $('#pinTableWrap').show();
            $('#pinEmptyState').hide();
            $('#pinLoader').show();
            $('#selectAllPins').prop({
                checked: false,
                indeterminate: false
            });

            $.get(PINCODES_URL + '/' + encodeURIComponent(district) + '?zone_id=' + ZONE.id, function(res) {
                $('#pinLoader').hide();
                if (!res.success || !res.pincodes.length) {
                    $('#pinTableBody').html(
                        '<tr><td colspan="3" class="text-center text-muted py-3">No PIN codes found.</td></tr>');
                    return;
                }
                allPins = res.pincodes;
                renderPinTable(allPins);
            }).fail(function() {
                $('#pinLoader').hide();
                toastr.error('Failed to load pincodes.');
            });
        }

        // ── State change ──────────────────────────────────────────────────────────────
        $('#stateSelect').on('change', function() {
            const state = $(this).val();
            $('#districtSelect').empty().append(new Option('Select District', ''))
                .val(null).prop('disabled', true).trigger('change.select2');
            allPins = [];
            selectedPins = {};
            renderSelections();
            $('#pinTableWrap').hide();
            $('#pinEmptyState').show();
            $('#pinTableBody').empty();
            if (!state) return;
            loadDistricts(state, null);
        });

        // ── District change ───────────────────────────────────────────────────────────
        $('#districtSelect').on('change', function() {
            const district = $(this).val();
            if (!district) return;
            allPins = [];
            selectedPins = {};
            renderSelections();
            loadPincodes(district);
        });

        // ── Render pin table ──────────────────────────────────────────────────────────
        function renderPinTable(pins) {
            const tbody = $('#pinTableBody');
            tbody.empty();
            pins.forEach(p => {
                const key = p.area_name + '|' + p.pincode;
                const isUsed = !!p.used_by_zone;

                if (isUsed) {
                    tbody.append(`
                <tr class="pin-row-used">
                    <td style="width:40px;">
                        <input type="checkbox" class="form-check-input" disabled>
                    </td>
                    <td>
                        ${escHtml(p.area_name)}
                        <span class="pin-used-tag">In use: ${escHtml(p.used_by_zone)}</span>
                    </td>
                    <td>${p.pincode}</td>
                </tr>`);
                } else {
                    const checked = selectedPins[key] ? 'checked' : '';
                    tbody.append(`
                <tr>
                    <td style="width:40px;">
                        <input type="checkbox" class="form-check-input pin-check"
                            data-area="${escHtml(p.area_name)}" data-pin="${p.pincode}" ${checked}>
                    </td>
                    <td>${escHtml(p.area_name)}</td>
                    <td>${p.pincode}</td>
                </tr>`);
                }
            });
            updateSelectAll();
        }

        $(document).on('change', '.pin-check', function() {
            const area = $(this).data('area'),
                pin = $(this).data('pin'),
                key = area + '|' + pin;
            if ($(this).is(':checked')) {
                selectedPins[key] = {
                    area_name: area,
                    pincode: pin,
                    is_warehouse: false,
                    warehouse_name: '',
                    max_km: ''
                };
            } else {
                delete selectedPins[key];
            }
            updateSelectAll();
            renderSelections();
        });

        $('#selectAllPins').on('change', function() {
            const checked = $(this).is(':checked');
            $('.pin-check').prop('checked', checked).each(function() {
                const area = $(this).data('area'),
                    pin = $(this).data('pin'),
                    key = area + '|' + pin;
                if (checked) selectedPins[key] = {
                    area_name: area,
                    pincode: pin,
                    is_warehouse: false,
                    warehouse_name: '',
                    max_km: ''
                };
                else delete selectedPins[key];
            });
            $(this).prop('indeterminate', false);
            renderSelections();
        });

        function updateSelectAll() {
            const total = $('.pin-check').length,
                checked = $('.pin-check:checked').length;
            $('#selectAllPins').prop({
                checked: total > 0 && checked === total,
                indeterminate: checked > 0 && checked < total
            });
        }

        let pinSearchTimer;
        $('#pinSearch').on('input', function() {
            clearTimeout(pinSearchTimer);
            const q = $(this).val().toLowerCase();
            pinSearchTimer = setTimeout(() => {
                renderPinTable(q ? allPins.filter(p => p.area_name.toLowerCase().includes(q) || p.pincode
                    .includes(q)) : allPins);
            }, 250);
        });

        // ── Render selections panel ───────────────────────────────────────────────────
        function renderSelections() {
            const keys = Object.keys(selectedPins),
                $list = $('#selectionList');
            if (!keys.length) {
                $('#selectionEmpty').show();
                $('#selectionAlert').hide();
                $list.empty();
                $('#updateZoneBtn').prop('disabled', true);
                return;
            }
            $('#selectionEmpty').hide();
            $('#selectionAlert').show();
            $('#updateZoneBtn').prop('disabled', false);
            $list.empty();
            keys.forEach(key => {
                const p = selectedPins[key];
                $list.append(`
            <label class="list-item" for="radio_${escAttr(key)}">
                <input type="radio" id="radio_${escAttr(key)}" name="warehousePin" value="${escAttr(key)}">
                <div class="item-box">
                    <div class="normal-view">
                        <span class="place">${escHtml(p.area_name)}</span>
                        <span class="pin">${p.pincode}</span>
                    </div>
                    <div class="expanded-view">
                        <div class="warehouse-title">WAREHOUSE</div>
                        <div class="row-line"><span>${escHtml(p.area_name)}</span><span>${p.pincode}</span></div>
                        <div class="warehouse-input mb-2">
                            <label>Warehouse Name (Optional)</label>
                            <input type="text" class="wh-name" data-key="${escAttr(key)}"
                                value="${escAttr(p.warehouse_name || '')}" placeholder="Enter warehouse name">
                        </div>
                        <div class="warehouse-input">
                            <label>Max Delivery Radius from Warehouse (km)</label>
                            <input type="number" class="wh-km" data-key="${escAttr(key)}"
                                value="${p.max_km || ''}" min="0" step="0.1" placeholder="e.g. 15">
                            <div class="info-hint">Customers within this distance from the warehouse can place orders to this zone.</div>
                        </div>
                    </div>
                </div>
            </label>`);
            });
            keys.forEach(key => {
                if (selectedPins[key].is_warehouse) $(`#radio_${CSS.escape(key)}`).prop('checked', true);
            });
        }

        $(document).on('input', '.wh-name', function() {
            const key = $(this).data('key');
            if (selectedPins[key]) selectedPins[key].warehouse_name = $(this).val();
        });
        $(document).on('input', '.wh-km', function() {
            const key = $(this).data('key');
            if (selectedPins[key]) selectedPins[key].max_km = $(this).val();
        });
        $(document).on('change', 'input[name="warehousePin"]', function() {
            const chosen = $(this).val();
            Object.keys(selectedPins).forEach(k => selectedPins[k].is_warehouse = (k === chosen));
        });

        // ── Update zone ───────────────────────────────────────────────────────────────
        function handleUpdateZone() {
            const name = $('#zoneName').val().trim(),
                state = $('#stateSelect').val(),
                district = $('#districtSelect').val();
            if (!name) {
                toastr.warning('Please enter a zone name.');
                return;
            }
            if (!state) {
                toastr.warning('Please select a state.');
                return;
            }
            if (!district) {
                toastr.warning('Please select a district.');
                return;
            }
            if (!Object.keys(selectedPins).length) {
                toastr.warning('Please select at least one PIN code.');
                return;
            }
            $('#modalZoneName').text(name);
            new bootstrap.Modal(document.getElementById('updateZoneModal')).show();
        }

        $('#confirmUpdate').on('click', function() {
            bootstrap.Modal.getInstance(document.getElementById('updateZoneModal'))?.hide();
            $(this).prop('disabled', true).text('Saving…');

            $.ajax({
                url: UPDATE_URL,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    _token: CSRF,
                    _method: 'PUT',
                    name: $('#zoneName').val().trim(),
                    state: $('#stateSelect').val(),
                    district: $('#districtSelect').val(),
                    pincodes: Object.values(selectedPins),
                }),
                success: function() {
                    toastr.success('Zone updated successfully!');
                    setTimeout(() => window.location.href =
                        "{{ route('backend.template.manage-zone.index') }}", 1000);
                },
                error: function(xhr) {
                    toastr.error(xhr.responseJSON?.message || 'Failed to update zone.');
                    $('#confirmUpdate').prop('disabled', false).text('Update Zone');
                }
            });
        });

        function escHtml(s) {
            return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }

        function escAttr(s) {
            return String(s).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
        }
    </script>
@endsection