@extends('dashboard.layout')

@section('title', 'Scrapers')
@section('meta_description', 'Browse and filter scraper tracker jobs by city, state and page.')
@section('page_title', 'Scrapers')

@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">Scrapers</h2>
        <p class="text-sm text-gray-900 mt-0.5">
            {{ number_format($trackers->total()) }} tracker records
            @if($filters['state'] || $filters['city'] || $filters['page_filter'] !== null)
                &mdash; filtered
            @endif
        </p>
    </div>
</div>

{{-- ══════════════════════════════════════
     FILTER BAR
═══════════════════════════════════════ --}}
<form id="filter-form"
      method="GET"
      action="{{ route('scrapers.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">

        {{-- State --}}
        <div>
            <label class="block text-[10px] font-semibold uppercase tracking-wider text-gray-900 mb-1.5">State</label>
            <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 (Ajax-driven) --}}
        <div>
            <label class="block text-[10px] font-semibold uppercase tracking-wider text-gray-900 mb-1.5">City</label>
            <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>

        {{-- Page number --}}
        <div>
            <label class="block text-[10px] font-semibold uppercase tracking-wider text-gray-900 mb-1.5">Page</label>
            <select id="page-select"
                    name="page_filter"
                    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 Pages</option>
                @foreach($pages as $pg)
                    <option value="{{ $pg }}" @selected((string)$filters['page_filter'] === (string)$pg)>
                        Page {{ $pg }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Actions --}}
        <div class="flex items-end gap-2">
            <button id="btn-apply-filters"
                    type="submit"
                    class="flex-1 inline-flex items-center justify-center gap-1.5 px-4 py-2.5 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['state'] || $filters['city'] || $filters['page_filter'] !== null)
                <a id="btn-clear-filters"
                   href="{{ route('scrapers.index') }}"
                   class="p-2.5 rounded-xl bg-gray-100 text-gray-900 hover:bg-gray-200 active:scale-95 transition-all"
                   title="Clear filters">
                    <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>
                </a>
            @endif
        </div>
    </div>
</form>

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

    @if($trackers->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="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>
            <p class="text-sm font-medium text-gray-900">No scraper records found</p>
            <p class="text-xs text-gray-900 mt-1">Try adjusting your 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 w-14">#</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Keyword</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">City</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">State</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-16">Page</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-20">Results</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-24">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-36">Created</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-36">Updated</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($trackers as $tracker)
                        <tr class="hover:bg-violet-50/30 transition-colors">

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

                            {{-- Keyword --}}
                            <td class="px-4 py-3">
                                <span class="font-medium text-gray-900">{{ $tracker->keyword }}</span>
                            </td>

                            {{-- City --}}
                            <td class="px-4 py-3 text-gray-900">{{ $tracker->city_name }}</td>

                            {{-- State --}}
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-semibold
                                             bg-indigo-50 text-indigo-700 border border-indigo-200 font-mono tracking-wider">
                                    {{ $tracker->state_code }}
                                </span>
                            </td>

                            {{-- Page --}}
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium
                                             bg-gray-100 text-gray-900 border border-gray-200">
                                    {{ $tracker->page }}
                                </span>
                            </td>

                            {{-- Results --}}
                            <td class="px-4 py-3 text-gray-900 font-medium">
                                {{ number_format($tracker->results) }}
                            </td>

                            {{-- Lock status --}}
                            <td class="px-4 py-3">
                                @if($tracker->locked_at)
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-medium
                                                 bg-amber-100 text-amber-700 border border-amber-200">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
                                        </svg>
                                        Locked
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-medium
                                                 bg-emerald-100 text-emerald-700 border border-emerald-200">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="m4.5 12.75 6 6 9-13.5"/>
                                        </svg>
                                        Free
                                    </span>
                                @endif
                            </td>

                            {{-- Created --}}
                            <td class="px-4 py-3 text-xs text-gray-900 whitespace-nowrap"
                                title="{{ $tracker->created_at }}">
                                {{ \Carbon\Carbon::parse($tracker->created_at)->diffForHumans() }}
                            </td>

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

        {{-- Pagination --}}
        @if($trackers->hasPages())
            <div class="px-4 py-3 border-t border-gray-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <p class="text-xs text-gray-900">
                    Showing {{ $trackers->firstItem() }}–{{ $trackers->lastItem() }}
                    of {{ number_format($trackers->total()) }}
                </p>
                <div class="text-sm">
                    {{ $trackers->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') }}';

    if (stateSelect.value) {
        citySelect.disabled = false;
    }

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

        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