@extends('admin.layout')

@section('content')
<div class="flex justify-between items-center mb-6">
    <div>
        <h1 class="text-3xl font-bold text-gray-800">Cities</h1>
        <p class="text-gray-600 mt-1">Manage cities and their service radius</p>
    </div>
    <a href="{{ route('cities.create') }}" style="background-color: #2563eb;" class="inline-flex items-center text-white px-5 py-2.5 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
        <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
        </svg>
        Add City
    </a>
</div>

@if(session('success'))
    <div class="mb-6 bg-green-50 border-l-4 border-green-500 text-green-800 px-6 py-4 rounded-lg shadow-sm flex items-center">
        <svg class="w-6 h-6 mr-3" style="fill: #059669;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-medium">{{ session('success') }}</span>
    </div>
@endif

<div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <table class="w-full">
        <thead style="background-color: #f9fafb;">
            <tr>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">ID</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">City Name</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">Radius (km)</th>
                <th class="px-6 py-3 text-center text-sm font-medium text-gray-600">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($cities as $city)
            <tr class="hover:bg-gray-50 border-b border-gray-100">
                <td class="px-6 py-4 text-sm text-gray-600">#{{ $city->id }}</td>
                <td class="px-6 py-4 text-sm text-gray-800 font-medium">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 mr-2" style="fill: #3b82f6;" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                        </svg>
                        {{ $city->name }}
                    </div>
                </td>
                <td class="px-6 py-4 text-sm text-gray-800">
                    <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                        {{ $city->radius }} km
                    </span>
                </td>
                <td class="px-6 py-4 text-sm">
                    <div class="flex items-center justify-center space-x-3">
                        {{-- Edit Button --}}
                        <a href="{{ route('cities.edit', $city) }}" style="background-color: #3b82f6;" class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                            <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                            </svg>
                            Edit
                        </a>

                        {{-- Delete Button --}}
                        <form action="{{ route('cities.destroy', $city) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this city?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" style="background-color: #ef4444;" class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                </svg>
                                Delete
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-6 py-12 text-center text-gray-500">
                    <svg class="w-16 h-16 mx-auto mb-4" style="fill: #d1d5db;" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                    <p class="text-lg font-medium">No cities found</p>
                    <p class="text-sm mt-1">Get started by adding your first city</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection