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

@section('content')
    <section class="manage-zone">

        <div class="d-flex align-items-center justify-content-between mb-4">
            <h2 class="text-title fw-semibold mb-0">Manage Zones</h2>
            <a href="{{ route('backend.template.manage-zone.manage-zone-create') }}"
                class="button-green d-flex align-items-center gap-2 px-3">
                <img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="plus">
                <span>Add New Zone</span>
            </a>
        </div>

        {{-- Outer container: white card wrapping filter + zone cards --}}
        <div class="fb-container">

            {{-- Filter Row --}}
            <form method="GET" action="{{ route('backend.template.manage-zone.index') }}" class="fb-filter-row">
                <div class="table-search-box" style="min-width:260px;">
                    <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}" alt="search">
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Search by ID, name or district" class="table-search-input">
                </div>
                <select name="status" class="table-filter-select" style="width:150px;" onchange="this.form.submit()">
                    <option value="">All Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                </select>
                <button type="submit" class="button-green px-3" style="height:40px;">Search</button>
            </form>

            {{-- Zone Cards --}}
            @if ($zones->isEmpty())
                <div class="text-center text-muted py-5">No zones found.</div>
            @else
                <div class="fb-list">
                    @foreach ($zones as $zone)
                        @php
                            $pinCount = $zone->pincodes->count();
                            $bandCount = $zone->feeBands->count();
                            $firstPins = $zone->pincodes->take(3)->pluck('pincode');
                            $morePins = max(0, $pinCount - 3);
                        @endphp
                        <div class="zone-card">

                            {{-- Top row: name + badge | actions --}}
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="zone-card-name">{{ $zone->name }}</span>
                                        <span class="status-badge-{{ $zone->status }}">{{ ucfirst($zone->status) }}</span>
                                    </div>
                                    <div class="zone-card-meta">
                                        @if ($zone->status === 'active')
                                            {{ $zone->zone_code }}
                                            &nbsp;|&nbsp; <strong>{{ $pinCount }} PIN
                                                {{ $pinCount === 1 ? 'code' : 'codes' }}</strong>
                                            &nbsp;|&nbsp; Last updated on {{ $zone->updated_at->format('d M Y') }}
                                            @if ($bandCount)
                                                &nbsp;|&nbsp; <strong>{{ $bandCount }} Fee
                                                    Band{{ $bandCount != 1 ? 's' : '' }}</strong>
                                            @endif
                                        @else
                                            {{ $zone->zone_code }}
                                            &nbsp;·&nbsp; {{ $pinCount }} PIN {{ $pinCount === 1 ? 'code' : 'codes' }}
                                            &nbsp;·&nbsp; Last updated on {{ $zone->updated_at->format('d M Y') }}
                                        @endif
                                    </div>
                                </div>
                                <div class=" d-flex align-items-center gap-2 flex-shrink-0">
                                    <button class="zone-icon-btn zone-icon-delete"
                                        onclick="openDeleteModal({{ $zone->id }}, '{{ addslashes($zone->name) }}')">
                                        <img src="{{ asset('backend/template/svg-icon/delete.svg') }}" alt="Delete">
                                    </button>
                                    <a href="{{ route('backend.template.manage-zone.manage-zone-edit', $zone->id) }}"
                                        class="zone-icon-btn zone-icon-edit">
                                        <img src="{{ asset('backend/template/svg-icon/edit.svg') }}" alt="Edit">
                                    </a>
                                    <a href="{{ route('backend.template.manage-zone.manage-zone-detail', $zone->id) }}"
                                        class="btn-view-zone">View Details</a>
                                </div>
                            </div>

                            <hr class="zone-card-divider">

                            {{-- Bottom row: warehouse | pins --}}
                            @if ($zone->warehouse)
                                <div class="d-flex align-items-center justify-content-between gap-3">
                                    <div>
                                        <span class="zone-wh-label">WAREHOUSE :</span>
                                        <span class="zone-wh-name">{{ $zone->warehouse->warehouse_name }}</span>
                                    </div>
                                    @if ($pinCount)
                                        <div class="zone-pins-text">
                                            PINs : {{ $firstPins->join(', ') }}{{ $morePins > 0 ? '....' : '' }}<span
                                                class="zone-pins-more">{{ $morePins > 0 ? '+' . $morePins . ' more' : '' }}</span>
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="zone-no-wh-bar">
                                    <span class="zone-no-wh-icon">i</span>
                                    No warehouse added yet. Assign a warehouse before activating this zone so that it won't
                                    affect the fee bands.
                                    <a href="{{ route('backend.template.manage-zone.manage-zone-edit', $zone->id) }}">Add
                                        Warehouse</a>
                                </div>
                            @endif

                        </div>
                    @endforeach
                </div>{{-- /.fb-list --}}
            @endif

        </div>{{-- /.fb-container --}}

    </section>

    {{-- Status Modal --}}
    <div class="modal fade" id="statusZoneModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header" id="statusZoneHeader" style="height:60px;">
                    <h5 class="mt-2" id="statusZoneTitle"></h5>
                </div>
                <div class="modal-body">
                    <p id="statusZoneBody" class="mb-1"></p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="statusZoneConfirm" class="btn-inactive-action">Confirm</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteZoneModal" 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 id="deleteZoneName"></strong>?
                        This action cannot be undone.</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="deleteZoneConfirm" class="btn-delete-action">Delete Zone</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        const CSRF = "{{ csrf_token() }}";
        const BASE_URL = "{{ url('/admin/manage-zone') }}";

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        var statusZoneId = null,
            statusZoneNext = null;

        function openStatusModal(id, current, name) {
            statusZoneId = id;
            statusZoneNext = current === 'active' ? 'inactive' : 'active';
            var isInact = statusZoneNext === 'inactive';
            $('#statusZoneTitle').text(isInact ? 'Inactivate Zone' : 'Activate Zone');
            $('#statusZoneHeader').attr('class', 'modal-header ' + (isInact ? 'inactive-header' : 'activate-header'));
            $('#statusZoneBody').html((isInact ? 'Inactivate ' : 'Activate ') + '<strong>' + name + '</strong>?');
            $('#statusZoneConfirm').attr('class', isInact ? 'btn-inactive-action' : 'btn-activate-action')
                .text(isInact ? 'Inactivate' : 'Activate');
            new bootstrap.Modal(document.getElementById('statusZoneModal')).show();
        }
        $('#statusZoneConfirm').on('click', function() {
            $(this).prop('disabled', true);
            $.ajax({
                url: BASE_URL + '/' + statusZoneId + '/status',
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'PATCH',
                    status: statusZoneNext
                },
                success: function() {
                    toastr.success('Status updated.');
                    setTimeout(() => location.reload(), 700);
                },
                error: function() {
                    toastr.error('Failed.');
                    $('#statusZoneConfirm').prop('disabled', false);
                }
            });
        });

        var deleteZoneId = null;

        function openDeleteModal(id, name) {
            deleteZoneId = id;
            $('#deleteZoneName').text(name);
            new bootstrap.Modal(document.getElementById('deleteZoneModal')).show();
        }
        $('#deleteZoneConfirm').on('click', function() {
            $(this).prop('disabled', true).text('Deleting…');
            $.ajax({
                url: BASE_URL + '/' + deleteZoneId + '/destroy',
                type: 'POST',
                data: {
                    _token: CSRF,
                    _method: 'DELETE'
                },
                success: function() {
                    toastr.success('Zone deleted.');
                    setTimeout(() => location.reload(), 700);
                },
                error: function() {
                    toastr.error('Failed.');
                    $('#deleteZoneConfirm').prop('disabled', false).text('Delete Zone');
                }
            });
        });
    </script>
@endsection