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

@section('content')
    @php $wh = $zone->warehouse; @endphp

    {{-- Page Header --}}
    <div class=" zone-details d-flex  justify-content-between mb-4">
        <a href="{{ route('backend.template.manage-zone.index') }}"
            class="d-inline-flex align-items-center gap-1 text-dark text-decoration-none">
            <i class="ri-arrow-left-s-line" style="font-size:26px;"></i>
            <h2 class="text-title fw-semibold mb-0">Zone Details</h2>
        </a>
        <div class="zone-items d-flex gap-2 align-items-center">

            @if ($zone->status === 'active')
                <button id="statusBtn" class="btn-inactive" data-current="active" data-next="inactive">Mark as
                    Inactive</button>
            @else
                <button id="statusBtn" class="btn-active" data-current="{{ $zone->status }}" data-next="active">Mark as
                    Active</button>
            @endif
            <div class="zones">
                <a href="{{ route('backend.template.manage-zone.manage-zone-edit', $zone->id) }}" class="btn-edit">
                    <img src="{{ asset('backend/template/svg-icon/edit-outline-w.svg') }}" alt="">
                    Edit Zone
                </a>
                <button class="btn-delete" onclick="confirmDelete()">
                    <img src="{{ asset('backend/template/svg-icon/delete-outline-w.svg') }}" alt="">
                    Delete Zone
                </button>
            </div>
        </div>
    </div>

    <div class="zone-detail-wrapper">

        {{-- Zone Info Card --}}
        <div class="zone-detail-card">
            <div class="zone-detail-header">
                <div>
                    <div class="zone-title mb-1">{{ $zone->name }}</div>
                    <div class="zone-meta">
                        {{ $zone->zone_code }}
                        &nbsp;|&nbsp; State <b>{{ $zone->state }}</b>
                        &nbsp;|&nbsp; <b>{{ $zone->pincodes->count() }}</b> PIN codes
                        &nbsp;|&nbsp; Last updated on <b>{{ $zone->updated_at->format('d M Y') }}</b>
                    </div>
                </div>
                <div class="zone-warehouse">
                    @if ($wh)
                        <div class="warehouse-label">Warehouse</div>
                        <div class="warehouse-name">{{ $wh->warehouse_name }}</div>
                        @if ($wh->max_km)
                            <div class="warehouse-km">Max delivery radius: {{ $wh->max_km }} km</div>
                        @endif
                    @else
                        <div class="no-warehouse-notice">
                            <span>!</span> No warehouse assigned yet.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Added PINs Card --}}
        <div class="zone-table-card">
            <div class="zone-table-title">Added PINs</div>
            <div class="zone-table-head">
                <div class="zone-table-head-place">Place</div>
                <div class="zone-table-head-pin">PIN Code</div>
            </div>
            @forelse($zone->pincodes as $pin)
                <div class="zone-row {{ $pin->is_warehouse ? 'active' : '' }}">
                    <div class="zone-place">
                        <span>{{ $pin->area_name }}</span>
                        @if ($pin->is_warehouse)
                            <span class="warehouse-badge">WAREHOUSE</span>
                        @endif
                    </div>
                    <div class="zone-pin">{{ $pin->pincode }}</div>
                </div>
            @empty
                <div class="text-center text-muted py-4">No PIN codes found.</div>
            @endforelse
        </div>

    </div>

    {{-- Status Modals --}}
    <div id="inactiveModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header inactive-header" style="height:60px;">
                    <h5 class="mt-2">Inactivate Zone</h5>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to inactivate <strong>{{ $zone->name }}</strong>?</p>
                    <p class="text-muted" style="font-size:13px;">This zone will no longer be available for new assignments.
                    </p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="confirmInactive" class="btn-inactive-action">Inactivate Zone</button>
                </div>
            </div>
        </div>
    </div>

    <div id="activateModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header activate-header" style="height:60px;">
                    <h5 class="mt-2">Activate Zone</h5>
                </div>
                <div class="modal-body">
                    <p>Activate <strong>{{ $zone->name }}</strong>?</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="confirmActivate" class="btn-activate-action">Activate Zone</button>
                </div>
            </div>
        </div>
    </div>

    <div id="deleteModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header delete-header" style="height:60px;">
                    <h5 class="mt-2">Delete Zone?</h5>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete <strong>{{ $zone->name }}</strong>?</p>
                    <p class="text-muted" style="font-size:13px;">This action cannot be undone. All PIN codes, fee bands and
                        configurations will be permanently removed.</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="confirmDeleteBtn" class="btn-delete-action">Delete Zone</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const STATUS_URL = "{{ route('backend.template.manage-zone.status', $zone->id) }}";
        const DELETE_URL = "{{ route('backend.template.manage-zone.destroy', $zone->id) }}";
        const CSRF = "{{ csrf_token() }}";
        const INDEX_URL = "{{ route('backend.template.manage-zone.index') }}";

        const statusBtn = document.getElementById('statusBtn');
        const inactiveModal = new bootstrap.Modal(document.getElementById('inactiveModal'));
        const activateModal = new bootstrap.Modal(document.getElementById('activateModal'));

        statusBtn.addEventListener('click', function() {
            if (this.dataset.next === 'inactive') inactiveModal.show();
            else activateModal.show();
        });

        function applyStatus(newStatus) {
            $.ajax({
                url: STATUS_URL,
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'PATCH',
                    status: newStatus
                },
                success: function() {
                    inactiveModal.hide();
                    activateModal.hide();
                    const btn = document.getElementById('statusBtn');
                    if (newStatus === 'inactive') {
                        btn.textContent = 'Mark as Active';
                        btn.className = 'btn-active';
                        btn.dataset.next = 'active';
                    } else {
                        btn.textContent = 'Mark as Inactive';
                        btn.className = 'btn-inactive';
                        btn.dataset.next = 'inactive';
                    }
                    toastr.success('Zone status updated.');
                },
                error: function() {
                    toastr.error('Failed to update status.');
                }
            });
        }

        document.getElementById('confirmInactive').addEventListener('click', () => applyStatus('inactive'));
        document.getElementById('confirmActivate').addEventListener('click', () => applyStatus('active'));

        const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));

        function confirmDelete() {
            deleteModal.show();
        }

        document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
            $(this).prop('disabled', true).text('Deleting…');
            $.ajax({
                url: DELETE_URL,
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'DELETE'
                },
                success: function() {
                    toastr.success('Zone deleted.');
                    setTimeout(() => window.location.href = INDEX_URL, 800);
                },
                error: function() {
                    toastr.error('Failed to delete zone.');
                    document.getElementById('confirmDeleteBtn').disabled = false;
                    document.getElementById('confirmDeleteBtn').textContent = 'Delete Zone';
                }
            });
        });
    </script>
@endsection