{{-- resources/views/admin/destinations/index.blade.php --}}
{{-- Destinations listing with country filter --}}
{{-- Controller: Admin\DestinationController@index --}}

@extends('layouts.admin')

@section('title', 'Destinations')
@section('page_title', 'Destinations')

@section('page_css')
    <link rel="stylesheet" href="{{ asset('css/admin/tables.css') }}">
@endsection

@section('content')

    <x-admin.page-header
        title="Destinations"
        :breadcrumb="[['label' => 'Destinations']]"
        button-label="Add New Destination"
        :button-route="route('admin.destinations.create')"
        module="destinations"
    />

    <div class="table-toolbar">
        <form method="GET" action="{{ route('admin.destinations.index') }}" class="table-toolbar__search-form">
            <div class="table-toolbar__search-wrap">
                <i class="bi bi-search table-toolbar__search-icon"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search destinations..." class="table-toolbar__search-input">
            </div>
            <select name="country_id" class="table-toolbar__filter-select">
                <option value="">All Countries</option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}" {{ request('country_id') == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                @endforeach
            </select>
            <button type="submit" class="table-toolbar__search-btn">Filter</button>
            @if(request()->hasAny(['search', 'country_id']))
                <a href="{{ route('admin.destinations.index') }}" class="table-toolbar__clear-btn">Clear</a>
            @endif
        </form>
    </div>

    <x-admin.data-table :headers="['#', 'Image', 'Name', 'Category', 'Country', 'Slug', 'Status', 'Actions']">
        @forelse($destinations as $destination)
            <tr class="data-table__row">
                <td class="data-table__td">{{ $destinations->firstItem() + $loop->index }}</td>
                <td class="data-table__td">
                    <img src="{{ $destination->image ? asset('storage/' . $destination->image) : asset('images/placeholder.svg') }}" alt="{{ $destination->name }}" class="table-thumb">
                </td>
                <td class="data-table__td data-table__td--name">{{ $destination->name }}</td>
                <td class="data-table__td">
                    @if($destination->category)
                        <span class="role-badge">
                            @if($destination->category->icon)
                                <i class="bi {{ $destination->category->icon }}"></i>
                            @endif
                            {{ $destination->category->name }}
                        </span>
                    @else
                        <span class="text-muted-val">—</span>
                    @endif
                </td>
                <td class="data-table__td">{{ $destination->country->name ?? '—' }}</td>
                <td class="data-table__td data-table__td--slug">{{ $destination->slug }}</td>
                <td class="data-table__td">
                    <button type="button" class="status-toggle js-status-toggle"
                        data-route="{{ route('admin.destinations.toggle-status', $destination->id) }}"
                        data-status="{{ $destination->status }}">
                        <x-admin.status-badge :status="$destination->status" />
                    </button>
                </td>
                <td class="data-table__td">
                    <x-admin.action-buttons
                        module="destinations"
                        :edit-route="route('admin.destinations.edit', $destination->id)"
                        :delete-route="route('admin.destinations.destroy', $destination->id)"
                        :id="$destination->id"
                        :item-name="$destination->name"
                    />
                </td>
            </tr>
        @empty
            <tr><td colspan="7" class="data-table__empty">No destinations found.</td></tr>
        @endforelse
    </x-admin.data-table>

    <div class="table-pagination">
        <span class="pagination-info">
            Showing <strong>{{ $destinations->firstItem() }}</strong>–<strong>{{ $destinations->lastItem() }}</strong>
            of <strong>{{ $destinations->total() }}</strong> destinations
        </span>
        {{ $destinations->appends(request()->query())->links('vendor.pagination.bootstrap-5') }}
    </div>

    <x-admin.confirm-modal />

@endsection

@section('page_js')
    <script src="{{ asset('js/admin/confirm-delete.js') }}"></script>
    <script src="{{ asset('js/admin/status-toggle.js') }}"></script>
@endsection