@extends('layouts.admin')

@section('title', 'Countries')

@section('content')
<div class="admin-page-header">
    <div>
        <h1>Countries</h1>
        <p class="admin-page-subtitle mb-0">View and filter reference countries used for addresses.</p>
    </div>
</div>

<div class="admin-card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end justify-content-end">
            <div class="col-md-3 col-lg-2">
                <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 country name or code">
                </div>
            </div>
            <div class="col-md-3 col-lg-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-auto">
                <label class="admin-form-label">&nbsp;</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="admin-btn-primary">
                        <i class="bi bi-filter"></i> Filter
                    </button>
                    <a href="{{ route('admin.settings.shipping.countries') }}" title="Reset" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                </div>
            </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 style="width:140px;">Code</th>
                        <th style="width:140px;">Show/Hide</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($countries as $country)
                        <tr>
                            <td>{{ $country->id }}</td>
                            <td class="fw-semibold">{{ $country->name }}</td>
                            <td>{{ $country->code }}</td>
                            <td>
                                <form method="POST" action="{{ route('admin.settings.shipping.countries.status', $country) }}" class="d-inline">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="status" value="{{ $country->status ? 0 : 1 }}">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" {{ $country->status ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label class="form-check-label text-muted small">{{ $country->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-flag"></i>
                                    <h3>No Countries Found</h3>
                                    <p>No countries match your current filters.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination - Right Aligned -->
        @if($countries->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>{{ $countries->firstItem() ?? 0 }}</strong>–<strong>{{ $countries->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $countries->total() }}</strong> countries
                </div>
                <div class="pagination-controls">
                    {{ $countries->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection