File: /home/u756937133/domains/swingersnest.com/public_html/resources/views/admin/cities/index.blade.php
@extends('layouts.admin')
@section('title', 'Manage Cities - Admin Panel')
@section('page-title', 'Cities Management')
@section('content')
<div class="pt-[14px] pb-8 flex justify-between items-center flex-wrap gap-4">
<div>
<h2 class="text-[#0A0A0A] text-[24px] font-medium font-['poppins']">Cities Management</h2>
<p class="text-[#717182] font-['poppins']">Manage cities and their settings</p>
</div>
<a href="{{ route('admin.cities.create') }}" class="bg-[#FF8FA3] hover:bg-[#FF7A91] text-white px-6 py-2.5 rounded-xl font-semibold transition-colors flex items-center gap-2">
<i class="ri-add-line"></i>
<span>Add City</span>
</a>
</div>
@if(session('success'))
<div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-xl">
{{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl">
{{ session('error') }}
</div>
@endif
<!-- Search and Filter Bar -->
<div class="bg-white rounded-xl shadow-sm border border-[#0000001A] p-4 mb-6">
<form method="GET" action="{{ route('admin.cities.index') }}" class="flex flex-wrap gap-4">
<div class="flex-1 min-w-[200px]">
<input
type="text"
name="search"
value="{{ $searchQuery }}"
placeholder="Search by name, state, or country..."
class="w-full px-4 py-2 border border-[#0000001A] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#FF8FA3]"
>
</div>
<div class="min-w-[200px]">
<select name="country_id" id="filter_country_id" class="w-full px-4 py-2 border border-[#0000001A] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#FF8FA3]">
<option value="">All Countries</option>
@foreach($countries as $country)
<option value="{{ $country->id }}" {{ $countryId == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
@endforeach
</select>
</div>
<div class="min-w-[200px]">
<select name="state_id" id="filter_state_id" class="w-full px-4 py-2 border border-[#0000001A] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#FF8FA3]">
<option value="">All States</option>
@foreach($states as $state)
<option value="{{ $state->id }}" {{ $stateId == $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
@endforeach
</select>
</div>
<div class="min-w-[120px]">
<select name="active" class="w-full px-4 py-2 border border-[#0000001A] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#FF8FA3]">
<option value="">All Status</option>
<option value="1" {{ $active === '1' ? 'selected' : '' }}>Active</option>
<option value="0" {{ $active === '0' ? 'selected' : '' }}>Inactive</option>
</select>
</div>
<button type="submit" class="px-6 py-2 bg-[#FF8FA3] text-white rounded-xl hover:bg-[#FF6F61] transition">
Search
</button>
@if($searchQuery || $countryId || $stateId || $active !== null)
<a href="{{ route('admin.cities.index') }}" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition">
Clear
</a>
@endif
</form>
</div>
<!-- Cities Table -->
<div class="bg-white rounded-xl shadow-sm border border-[#0000001A] overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-sm text-gray-500">
<thead class="text-xs text-[#0A0A0A] bg-[#FFF5F7] border-b border-[#0000001A]">
<tr>
<th scope="col" class="py-4 px-6 text-left font-bold">City Name</th>
<th scope="col" class="py-4 px-6 text-left font-semibold">State</th>
<th scope="col" class="py-4 px-6 text-left font-semibold">Country</th>
<th scope="col" class="py-4 px-6 text-center font-semibold">Status</th>
<th scope="col" class="py-4 px-6 text-center font-semibold">Actions</th>
</tr>
</thead>
<tbody>
@forelse($cities as $city)
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="py-4 px-6 font-medium text-gray-900">
{{ $city->name }}
</td>
<td class="py-4 px-6 text-gray-600">
{{ $city->state->name }}
</td>
<td class="py-4 px-6 text-gray-600">
{{ $city->state->country->name }}
</td>
<td class="py-4 px-6 text-center">
<span class="px-3 py-1 rounded-full text-xs {{ $city->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
{{ $city->is_active ? 'Active' : 'Inactive' }}
</span>
</td>
<td class="py-4 px-6 text-center">
<div class="flex items-center justify-center gap-2">
<a href="{{ route('admin.cities.show', $city) }}" class="text-blue-600 hover:text-blue-800" title="View">
<i class="ri-eye-line text-lg"></i>
</a>
<a href="{{ route('admin.cities.edit', $city) }}" class="text-green-600 hover:text-green-800" title="Edit">
<i class="ri-pencil-line text-lg"></i>
</a>
<form action="{{ route('admin.cities.destroy', $city) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this city? This action cannot be undone.');">
@csrf
@method('DELETE')
<button type="submit" class="text-red-600 hover:text-red-800" title="Delete">
<i class="ri-delete-bin-line text-lg"></i>
</button>
</form>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="5" class="py-8 px-6 text-center text-gray-500">
No cities found.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
<!-- Pagination -->
<div class="mt-6">
{{ $cities->links() }}
</div>
<script>
// Update states dropdown when country changes
document.getElementById('filter_country_id')?.addEventListener('change', function() {
const countryId = this.value;
const stateSelect = document.getElementById('filter_state_id');
if (countryId) {
// Fetch states for selected country
fetch(`/admin/states-by-country/${countryId}`)
.then(response => response.json())
.then(states => {
stateSelect.innerHTML = '<option value="">All States</option>';
states.forEach(state => {
stateSelect.innerHTML += `<option value="${state.id}">${state.name}</option>`;
});
})
.catch(error => console.error('Error:', error));
} else {
stateSelect.innerHTML = '<option value="">All States</option>';
}
});
</script>
@endsection