@extends('layouts.admin')

@section('title', 'States')

@section('content')
<div class="admin-page-header">
    <div>
        <h1>All States</h1>
        <p class="admin-page-subtitle mb-0">View and filter states linked to countries.</p>
    </div>
</div>

<div class="admin-card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="admin-form-label">Search</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" value="{{ $search }}" class="admin-form-control form-control" placeholder="Type state name">
                </div>
            </div>
            <div class="col-md-3">
                <label class="admin-form-label">Country</label>
                <select name="country_id" class="admin-form-control form-select">
                    <option value="">Select country</option>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}" {{ (string)$countryId === (string)$country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Status</label>
                <select name="status" class="admin-form-control form-select">
                    <option value="">All status</option>
                    <option value="1" {{ $status === '1' ? 'selected' : '' }}>Show</option>
                    <option value="0" {{ $status === '0' ? 'selected' : '' }}>Hidden</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="admin-btn-primary w-100" style="margin-top: 28px;">
                    <i class="bi bi-filter"></i> Filter
                </button>
            </div>
            <div class="col-md-1">
                <a href="{{ route('admin.settings.shipping.states') }}" class="btn btn-outline-secondary w-100" style="margin-top: 28px;">
                    <i class="bi bi-arrow-counterclockwise"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th style="width:80px;">#</th>
                        <th>Name</th>
                        <th>Country</th>
                        <th style="width:140px;">Show/Hide</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($states as $state)
                        <tr>
                            <td>{{ $state->id }}</td>
                            <td class="fw-semibold">{{ $state->name }}</td>
                            <td>{{ $state->country->name ?? '—' }}</td>
                            <td>
                                <form method="POST" action="{{ route('admin.settings.shipping.states.status', $state) }}" class="d-inline">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="status" value="{{ $state->status ? 0 : 1 }}">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" {{ $state->status ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label class="form-check-label text-muted small">{{ $state->status ? 'Visible' : 'Hidden' }}</label>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-geo-alt"></i>
                                    <h3>No States Found</h3>
                                    <p>No states match your current filters.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination - Right Aligned -->
        @if($states->hasPages())
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $states->firstItem() ?? 0 }}</strong>–<strong>{{ $states->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $states->total() }}</strong> states
                </div>
                <div class="pagination-controls">
                    {{ $states->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection