{{-- resources/views/admin/hotels/index.blade.php --}}
{{-- Hotels listing: search, paginated table with status toggle and CRUD actions --}}
{{-- Controller: Admin\HotelController@index --}}

@extends('layouts.admin')

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

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

@section('content')

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

    {{-- Search bar --}}
    <div class="table-toolbar">
        <form method="GET" action="{{ route('admin.hotels.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 hotels..."
                    class="table-toolbar__search-input"
                >
            </div>
            <button type="submit" class="table-toolbar__search-btn">Search</button>
            @if(request('search'))
                <a href="{{ route('admin.hotels.index') }}" class="table-toolbar__clear-btn">Clear</a>
            @endif
        </form>
    </div>

    {{-- Hotels table --}}
    <x-admin.data-table :headers="['#', 'Image', 'Name', 'Destination', 'Discount', 'Top', 'Popular', 'Status', 'Actions']">
        @forelse($hotels as $hotel)
            <tr class="data-table__row">
                <td class="data-table__td">{{ $hotels->firstItem() + $loop->index }}</td>
                <td class="data-table__td">
                    <img
                        src="{{ $hotel->image ? asset('storage/' . $hotel->image) : asset('images/placeholder.svg') }}"
                        alt="{{ $hotel->name }}"
                        class="table-thumb"
                    >
                </td>
                <td class="data-table__td data-table__td--name">
                    <a href="{{ $hotel->url }}" target="_blank" class="table-name-link">
                        {{ $hotel->name }}
                    </a>
                </td>
                <td class="data-table__td">{{ $hotel->destination->name ?? '—' }}</td>
                <td class="data-table__td">
                    @if($hotel->discount_percent)
                        <span class="discount-pill">{{ $hotel->discount_percent }}% OFF</span>
                    @else
                        <span class="text-muted-val">—</span>
                    @endif
                </td>
                <td class="data-table__td">
                    <span class="bool-badge {{ $hotel->is_top ? 'bool-badge--yes' : 'bool-badge--no' }}">
                        {{ $hotel->is_top ? 'Yes' : 'No' }}
                    </span>
                </td>
                <td class="data-table__td">
                    <span class="bool-badge {{ $hotel->is_popular ? 'bool-badge--yes' : 'bool-badge--no' }}">
                        {{ $hotel->is_popular ? 'Yes' : 'No' }}
                    </span>
                </td>
                <td class="data-table__td">
                    {{-- Quick status toggle via status-toggle.js --}}
                    <button
                        type="button"
                        class="status-toggle js-status-toggle"
                        data-route="{{ route('admin.hotels.toggle-status', $hotel->id) }}"
                        data-status="{{ $hotel->status }}"
                        title="Toggle status"
                    >
                        <x-admin.status-badge :status="$hotel->status" />
                    </button>
                </td>
                <td class="data-table__td">
                    <x-admin.action-buttons
                        module="hotels"
                        :edit-route="route('admin.hotels.edit', $hotel->id)"
                        :delete-route="route('admin.hotels.destroy', $hotel->id)"
                        :id="$hotel->id"
                        :item-name="$hotel->name"
                    />
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="9" class="data-table__empty">
                    <i class="bi bi-building data-table__empty-icon"></i>
                    <p>No hotels found{{ request('search') ? ' for "' . request('search') . '"' : '' }}.</p>
                </td>
            </tr>
        @endforelse
    </x-admin.data-table>

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

    {{-- Reusable confirm delete modal --}}
    <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