@extends('backend.template.layouts.template-base')
@section('title', 'Delivery Setup - Create 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>Create New 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">

                        {{-- Zone Name --}}
                        <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"
                                    placeholder="e.g. Coimbatore North">
                            </div>
                        </div>

                        {{-- State + District --}}
                        <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>

                        {{-- PIN Codes section --}}
                        <div class="pin-title">PIN Code's</div>

                        <div id="pinEmptyState" class="empty-state-box text-center mb-3">
                            <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" id="pinTable">
                                        <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">
                                <span class="info-icon">!</span> No PINs selected yet!
                            </div>

                            <div id="selectionAlert" class="alert-box" style="display:none;">
                                <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="createZoneBtn" disabled
                                onclick="handleCreateZone()">Create Zone</button>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        {{-- Modal: no warehouse --}}
        <div class="modal fade" id="noWarehouseModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content zone-modal">
                    <div class="zone-modal-header">Create Zone without Warehouse?</div>
                    <div class="zone-modal-body">
                        <p>You're creating a zone without assigning a warehouse.
                            This zone will remain <span class="inactive-text">Inactive</span> until a warehouse is added.
                        </p>
                        <div class="zone-alert">
                            <span class="alert-icon">!</span>
                            <span>Inactive zones will not be used for order processing or delivery.</span>
                        </div>
                    </div>
                    <div class="zone-modal-footer">
                        <button class="zone-btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button class="zone-btn zone-btn-create" id="confirmNoWarehouse">Create Zone</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal: with warehouse --}}
        <div class="modal fade" id="withWarehouseModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content zone2-modal">
                    <div class="zone2-header">Create Zone?</div>
                    <div class="zone2-body">
                        <p>Your zone <span id="modalZoneName"></span> is now active and ready for configuration.
                            Your Warehouse was added under <span id="modalWarehousePin"></span>
                            as <span id="modalWarehouseName"></span>.</p>
                        <div class="zone2-info">
                            <svg class="zone2-info-icon" viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="10" x2="12" y2="16"></line>
                                <circle cx="12" cy="7" r="1.2" fill="currentColor" stroke="none">
                                </circle>
                            </svg>
                            <span class="text-green">To enable delivery pricing, set up fee bands for this zone.
                                Until fee band is set, it remains <b>Free Delivery</b> by default.</span>
                        </div>
                    </div>
                    <div class="zone2-footer">
                        <button class="zone2-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button class="zone-btn zone-btn-create" id="confirmWithWarehouse">Create 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 STORE_URL = "{{ route('backend.template.manage-zone.store') }}";
        const CSRF = "{{ csrf_token() }}";

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

        // ── Init Select2 + load states ───────────────────────────────────────────────
        $(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');

            $.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)));
            }).fail(() => toastr.error('Failed to load states.'));
        });

        // ── State change → load districts ────────────────────────────────────────────
        $('#stateSelect').on('change', function() {
            const state = $(this).val();

            // Reset district
            $('#districtSelect').empty().append(new Option('Select District', ''))
                .val(null).prop('disabled', true).trigger('change.select2');

            // Reset pins
            $('#pinTableWrap').hide();
            $('#pinEmptyState').show();
            $('#pinTableBody').empty();
            allPins = [];
            selectedPins = {};
            renderSelections();

            if (!state) return;

            // Show loading placeholder while fetching
            $('#districtSelect').empty().append(new Option('Loading districts…', ''))
                .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');
                },
                error: function() {
                    $('#districtSelect').empty().append(new Option('Select District', ''))
                        .val(null).prop('disabled', false).trigger('change.select2');
                    toastr.error('Failed to load districts.');
                }
            });
        });

        // ── District change → load pincodes ──────────────────────────────────────────
        $('#districtSelect').on('change', function() {
            const district = $(this).val();
            allPins = [];
            selectedPins = {};
            renderSelections();
            $('#pinTableBody').empty();

            if (!district) {
                $('#pinTableWrap').hide();
                $('#pinEmptyState').show();
                return;
            }

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

            $.get(PINCODES_URL + '/' + encodeURIComponent(district), 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 for this district.</td></tr>'
                        );
                    return;
                }
                allPins = res.pincodes;
                renderPinTable(allPins);
            }).fail(function() {
                $('#pinLoader').hide();
                toastr.error('Failed to load pincodes.');
            });
        });

        // ── Render pin table rows ─────────────────────────────────────────────────────
        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();
        }

        // ── PIN checkbox change ───────────────────────────────────────────────────────
        $(document).on('change', '.pin-check', function() {
            const area = $(this).data('area');
            const pin = $(this).data('pin');
            const 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();
        });

        // ── Select all ────────────────────────────────────────────────────────────────
        $('#selectAllPins').on('change', function() {
            const checked = $(this).is(':checked');
            $('.pin-check').prop('checked', checked).each(function() {
                const area = $(this).data('area');
                const pin = $(this).data('pin');
                const 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;
            const checked = $('.pin-check:checked').length;
            $('#selectAllPins').prop({
                checked: total > 0 && checked === total,
                indeterminate: checked > 0 && checked < total,
            });
        }

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

        // ── Render selections panel ───────────────────────────────────────────────────
        function renderSelections() {
            const keys = Object.keys(selectedPins);
            const $list = $('#selectionList');

            if (!keys.length) {
                $('#selectionEmpty').show();
                $('#selectionAlert').hide();
                $list.empty();
                $('#createZoneBtn').prop('disabled', true);
                return;
            }

            $('#selectionEmpty').hide();
            $('#selectionAlert').show();
            $('#createZoneBtn').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>`);
            });

            // Restore warehouse selection & values
            keys.forEach(key => {
                const p = selectedPins[key];
                if (p.is_warehouse) {
                    $(`#radio_${CSS.escape(key)}`).prop('checked', true);
                }
            });
        }

        // ── Capture warehouse inputs live ─────────────────────────────────────────────
        $(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 chosenKey = $(this).val();
            Object.keys(selectedPins).forEach(key => {
                selectedPins[key].is_warehouse = (key === chosenKey);
            });
        });

        // ── Create zone ───────────────────────────────────────────────────────────────
        function handleCreateZone() {
            const name = $('#zoneName').val().trim();
            const state = $('#stateSelect').val();
            const 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;
            }

            const hasWarehouse = Object.values(selectedPins).some(p => p.is_warehouse);

            if (!hasWarehouse) {
                new bootstrap.Modal(document.getElementById('noWarehouseModal')).show();
            } else {
                const wh = Object.values(selectedPins).find(p => p.is_warehouse);
                $('#modalZoneName').text(name);
                $('#modalWarehousePin').text(wh.pincode);
                $('#modalWarehouseName').text(wh.warehouse_name || '(unnamed)');
                new bootstrap.Modal(document.getElementById('withWarehouseModal')).show();
            }
        }

        function submitZone() {
            const payload = {
                _token: CSRF,
                name: $('#zoneName').val().trim(),
                state: $('#stateSelect').val(),
                district: $('#districtSelect').val(),
                pincodes: Object.values(selectedPins),
            };

            $('#confirmNoWarehouse, #confirmWithWarehouse').prop('disabled', true).text('Saving…');

            $.ajax({
                url: STORE_URL,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(payload),
                success: function() {
                    toastr.success('Zone created successfully!');
                    setTimeout(() => window.location.href = "{{ route('backend.template.manage-zone.index') }}",
                        1000);
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Failed to create zone.';
                    toastr.error(msg);
                    $('#confirmNoWarehouse, #confirmWithWarehouse').prop('disabled', false).text('Create Zone');
                }
            });
        }

        $('#confirmNoWarehouse').on('click', function() {
            bootstrap.Modal.getInstance(document.getElementById('noWarehouseModal'))?.hide();
            submitZone();
        });
        $('#confirmWithWarehouse').on('click', function() {
            bootstrap.Modal.getInstance(document.getElementById('withWarehouseModal'))?.hide();
            submitZone();
        });

        // ── Helpers ───────────────────────────────────────────────────────────────────
        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