@extends('admin.layouts.app')

@section('title', 'Countries')
@section('page-title', 'Countries')

@section('content')

{{-- Header bar --}}
<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-800">All Countries</h2>
        <p class="text-sm text-gray-500 mt-0.5">{{ $countries->total() }} {{ Str::plural('country', $countries->total()) }} total</p>
    </div>
    <a href="{{ route('admin.countries.create') }}"
       class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2.5 rounded-lg transition shadow-sm">
        <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 4v16m8-8H4"/>
        </svg>
        Add Country
    </a>
</div>

{{-- Search --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-4">
    <form method="GET" action="{{ route('admin.countries.index') }}" class="flex gap-3">
        <input
            type="text"
            name="search"
            value="{{ request('search') }}"
            placeholder="Search by country name…"
            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button type="submit"
                class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition">
            Search
        </button>
        @if(request('search'))
            <a href="{{ route('admin.countries.index') }}"
               class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition">
                Clear
            </a>
        @endif
    </form>
</div>

{{-- Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    @if($countries->isEmpty())
        <div class="text-center py-16">
            <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6H11l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/>
            </svg>
            <p class="text-gray-500 text-sm">No countries found.</p>
            <a href="{{ route('admin.countries.create') }}" class="mt-3 inline-block text-blue-600 text-sm hover:underline">
                Add your first country →
            </a>
        </div>
    @else
        <table class="min-w-full divide-y divide-gray-100">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">Country</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden md:table-cell">Slug</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden lg:table-cell">Status</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide hidden lg:table-cell">Order</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($countries as $country)
                <tr class="hover:bg-gray-50 transition" id="row-{{ $country->id }}">
                    {{-- Name + flag --}}
                    <td class="px-5 py-4">
                        <div class="flex items-center gap-3">
                            @if($country->flag_image)
                                <img src="{{ $country->flag_url }}"
                                     alt="{{ $country->name }} flag"
                                     class="w-8 h-6 object-cover rounded border border-gray-200 flex-shrink-0" />
                            @else
                                <div class="w-8 h-6 bg-gray-200 rounded flex items-center justify-center flex-shrink-0">
                                    <span class="text-gray-400 text-xs">🏳</span>
                                </div>
                            @endif
                            <div>
                                <p class="text-sm font-semibold text-gray-800">{{ $country->name }}</p>
                                @if($country->short_description)
                                    <p class="text-xs text-gray-400 truncate max-w-xs">{{ Str::limit($country->short_description, 60) }}</p>
                                @endif
                            </div>
                        </div>
                    </td>

                    {{-- Slug --}}
                    <td class="px-5 py-4 hidden md:table-cell">
                        <code class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">{{ $country->slug }}</code>
                    </td>

                    {{-- Status toggle --}}
                    <td class="px-5 py-4 hidden lg:table-cell">
                        <button
                            onclick="toggleStatus({{ $country->id }})"
                            id="status-btn-{{ $country->id }}"
                            class="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full transition
                                   {{ $country->is_active
                                       ? 'bg-green-100 text-green-700 hover:bg-green-200'
                                       : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                            <span class="w-1.5 h-1.5 rounded-full {{ $country->is_active ? 'bg-green-500' : 'bg-gray-400' }}"
                                  id="status-dot-{{ $country->id }}"></span>
                            <span id="status-label-{{ $country->id }}">
                                {{ $country->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </button>
                    </td>

                    {{-- Sort --}}
                    <td class="px-5 py-4 hidden lg:table-cell">
                        <span class="text-sm text-gray-500">{{ $country->sort_order }}</span>
                    </td>

                    {{-- Actions --}}
                    <td class="px-5 py-4">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ $country->public_url }}" target="_blank"
                               title="View on site"
                               class="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition">
                                <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                </svg>
                            </a>
                            <a href="{{ route('admin.countries.edit', $country) }}"
                               title="Edit"
                               class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition">
                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                </svg>
                            </a>
                            <form method="POST"
                                  action="{{ route('admin.countries.destroy', $country) }}"
                                  onsubmit="return confirm('Delete {{ addslashes($country->name) }}? This cannot be undone.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        title="Delete"
                                        class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition">
                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        {{-- Pagination --}}
        @if($countries->hasPages())
            <div class="px-5 py-4 border-t border-gray-100">
                {{ $countries->links() }}
            </div>
        @endif
    @endif
</div>

@endsection

@push('scripts')
<script>
function toggleStatus(id) {
    fetch(`/admin/countries/${id}/toggle`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        }
    })
    .then(r => r.json())
    .then(data => {
        const btn   = document.getElementById(`status-btn-${id}`);
        const dot   = document.getElementById(`status-dot-${id}`);
        const label = document.getElementById(`status-label-${id}`);

        if (data.is_active) {
            btn.className   = btn.className.replace('bg-gray-100 text-gray-600 hover:bg-gray-200', 'bg-green-100 text-green-700 hover:bg-green-200');
            dot.className   = dot.className.replace('bg-gray-400', 'bg-green-500');
            label.textContent = 'Active';
        } else {
            btn.className   = btn.className.replace('bg-green-100 text-green-700 hover:bg-green-200', 'bg-gray-100 text-gray-600 hover:bg-gray-200');
            dot.className   = dot.className.replace('bg-green-500', 'bg-gray-400');
            label.textContent = 'Inactive';
        }
    });
}
</script>
@endpush