@extends('dashboard.layout')

@section('title', 'Databanks')
@section('meta_description', 'Browse, search and filter all hotel databank records.')
@section('page_title', 'Databanks')

@section('content')

{{-- ══════════════════════════════════════
     PAGE HEADER
═══════════════════════════════════════ --}}
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
        <h2 class="text-xl font-bold text-gray-900">Databanks</h2>
        <p class="text-sm text-gray-900 mt-0.5">
            {{ number_format($databanks->total()) }} records
            @if($filters['search'] || $filters['state'] || $filters['city'])
                &mdash; filtered
            @endif
        </p>
    </div>
</div>

{{-- ══════════════════════════════════════
     FILTER BAR
═══════════════════════════════════════ --}}
<form id="filter-form"
      method="GET"
      action="{{ route('databank.index') }}"
      class="bg-white border border-gray-200 rounded-2xl shadow-sm p-4 mb-6">

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">

        {{-- Search --}}
        <div class="relative lg:col-span-2">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg class="w-4 h-4 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                </svg>
            </div>
            <input id="search-input"
                   type="text"
                   name="search"
                   value="{{ $filters['search'] }}"
                   placeholder="Search name, address, phone, category…"
                   class="w-full pl-9 pr-4 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-xl
                          focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                          placeholder:text-gray-900 transition">
        </div>

        {{-- State --}}
        <div>
            <select id="state-select"
                    name="state"
                    class="w-full px-3 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-xl
                           focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                           text-gray-900 transition appearance-none cursor-pointer">
                <option value="">All States</option>
                @foreach($states as $s)
                    <option value="{{ $s->state_code }}" @selected($filters['state'] == $s->state_code)>
                        {{ $s->state_name }} ({{ $s->state_code }})
                    </option>
                @endforeach
            </select>
        </div>

        {{-- City (populated by JS) --}}
        <div>
            <select id="city-select"
                    name="city"
                    class="w-full px-3 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-xl
                           focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                           text-gray-900 transition appearance-none cursor-pointer
                           disabled:opacity-50 disabled:cursor-not-allowed"
                    @if(!$filters['state']) disabled @endif>
                <option value="">All Cities</option>
                @foreach($cities as $c)
                    <option value="{{ $c }}" @selected($filters['city'] == $c)>{{ $c }}</option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- Actions --}}
    <div class="flex items-center gap-2 mt-3">
        <button id="btn-apply-filters"
                type="submit"
                class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-violet-600 text-white text-sm
                       font-medium shadow-sm hover:bg-violet-700 active:scale-95 transition-all">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"/>
            </svg>
            Apply
        </button>

        @if($filters['search'] || $filters['state'] || $filters['city'])
            <a id="btn-clear-filters"
               href="{{ route('databank.index') }}"
               class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-gray-100 text-gray-900 text-sm
                      font-medium hover:bg-gray-200 active:scale-95 transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12"/>
                </svg>
                Clear
            </a>
        @endif
    </div>
</form>

{{-- ══════════════════════════════════════
     TABLE
═══════════════════════════════════════ --}}
<div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">

    @if($databanks->isEmpty())
        <div class="flex flex-col items-center justify-center py-20 text-center">
            <div class="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375"/>
                </svg>
            </div>
            <p class="text-sm font-medium text-gray-900">No databanks found</p>
            <p class="text-xs text-gray-900 mt-1">Try adjusting your search or filters.</p>
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/60">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">#</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Name</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Location</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Keywords</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Images</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Updated</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($databanks as $bank)
                        <tr class="hover:bg-violet-50/30 transition-colors group">

                            {{-- ID --}}
                            <td class="px-4 py-3 text-gray-900 text-xs font-mono">{{ $bank->id }}</td>

                            {{-- Name --}}
                            <td class="px-4 py-3">
                                @if($bank->place_id)
                                    <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($bank->name ?? '') }}&query_place_id={{ $bank->place_id }}" 
                                       target="_blank" 
                                       class="font-medium text-violet-600 hover:text-violet-800 underline truncate max-w-[200px] block" 
                                       title="View on Google Maps">
                                        {{ $bank->name ?? '—' }}
                                    </a>
                                @else
                                    <p class="font-medium text-gray-900 truncate max-w-[200px]">{{ $bank->name ?? '—' }}</p>
                                @endif
                                @if($bank->phone)
                                    <p class="text-xs text-gray-900 mt-0.5">{{ $bank->phone }}</p>
                                @endif
                            </td>

                            {{-- Location --}}
                            <td class="px-4 py-3">
                                <p class="text-gray-900">{{ $bank->city ?? '—' }}</p>
                                <p class="text-xs text-gray-900">{{ $bank->state ?? '' }}</p>
                            </td>


                            {{-- Keywords --}}
                            <td class="px-4 py-3 text-gray-900 text-xs truncate max-w-[160px]">{{ $bank->keywords ?? '—' }}</td>

                            {{-- Images count --}}

                            <td class="px-4 py-3">
                                @if($bank->images_count > 0)
                                    <span class="inline-flex items-center gap-1 text-violet-700 font-medium">
                                        <svg class="w-3.5 h-3.5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
                                        </svg>
                                        {{ $bank->images_count }}
                                    </span>
                                @else
                                    <span class="text-gray-900 text-xs">—</span>
                                @endif
                            </td>


                            <td class="px-4 py-3">
                                @php
                                    $statusMap = [
                                        'pending'   => 'bg-amber-100 text-amber-700 border-amber-200',
                                        'active'    => 'bg-emerald-100 text-emerald-700 border-emerald-200',
                                        'inactive'  => 'bg-gray-100 text-gray-900 border-gray-200',
                                        'scraped'   => 'bg-blue-100 text-blue-700 border-blue-200',
                                    ];
                                    $cls = $statusMap[$bank->status ?? 'pending'] ?? 'bg-gray-100 text-gray-900 border-gray-200';
                                @endphp
                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium border {{ $cls }}">
                                    {{ ucfirst($bank->status ?? 'pending') }}
                                </span>
                            </td>

                            {{-- Updated --}}
                            <td class="px-4 py-3 text-xs text-gray-900 whitespace-nowrap">
                                {{ \Carbon\Carbon::parse($bank->updated_at)->diffForHumans() }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($databanks->hasPages())
            <div class="px-4 py-3 border-t border-gray-100 flex items-center justify-between gap-4">
                <p class="text-xs text-gray-900">
                    Showing {{ $databanks->firstItem() }}–{{ $databanks->lastItem() }}
                    of {{ number_format($databanks->total()) }}
                </p>
                <div class="text-sm">
                    {{ $databanks->links() }}
                </div>
            </div>
        @endif
    @endif
</div>

@endsection

@push('scripts')
<script>
(function () {
    const stateSelect = document.getElementById('state-select');
    const citySelect  = document.getElementById('city-select');
    const ajaxUrl     = '{{ route('ajax.cities') }}';

    // Pre-selected state (server-rendered) — cities already in DOM, just enable
    if (stateSelect.value) {
        citySelect.disabled = false;
    }

    stateSelect.addEventListener('change', function () {
        const state = this.value;

        // Reset city dropdown
        citySelect.innerHTML = '<option value="">All Cities</option>';
        citySelect.disabled = true;

        if (!state) return;

        fetch(`${ajaxUrl}?state=${encodeURIComponent(state)}`)
            .then(r => r.json())
            .then(cities => {
                cities.forEach(city => {
                    const opt = document.createElement('option');
                    opt.value       = city;
                    opt.textContent = city;
                    citySelect.appendChild(opt);
                });
                citySelect.disabled = false;
            })
            .catch(err => console.error('City fetch failed:', err));
    });
})();
</script>
@endpush