@extends('layouts.master')

@section('title', 'Judge List - ')

@section('content')
<style>
:root{--sky:#0ea5e9;--sky-deep:#0369a1;--sky-ghost:rgba(14,165,233,.07);--sky-border:rgba(14,165,233,.2);--ink-mid:#3f4a5a;--white:#fff;--off:#f7fbff;--surface:#eef6fd;--border:#daeaf8;--danger:#ef4444;--danger-bg:rgba(239,68,68,.08);--danger-border:rgba(239,68,68,.2);--amber:#f59e0b;--amber-bg:rgba(245,158,11,.08);--amber-border:rgba(245,158,11,.22);--fd:'Cormorant Garamond',Georgia,serif;--fb:'DM Sans',system-ui,sans-serif;--fm:'DM Mono',monospace}
.main-content{background:var(--off);font-family:var(--fb)}
.main-content .container,.main-content .tx-page,.main-content .page-wrap,.main-content .content-wrapper,.main-content .wrap{background:var(--white);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 24px rgba(14,165,233,.1)}
.main-content h1,.main-content h2,.main-content h3{font-family:var(--fd);color:var(--sky-deep)}
.main-content .btn,.main-content .back-btn,.main-content .option-btn,.main-content .submit-btn,.main-content .refresh-btn,.main-content .action-btn,.main-content .act-btn,.main-content .link{border-radius:10px!important;font-family:var(--fb)!important;font-weight:600!important}
.main-content .btn-secondary,.main-content .back-btn,.main-content .refresh-btn,.main-content .btn-muted,.main-content .btn-ghost{background:#fff!important;color:var(--ink-mid)!important;border:1px solid var(--sky-border)!important}
.main-content .btn-primary,.main-content .option-btn,.main-content .submit-btn{background:linear-gradient(135deg,var(--sky-deep),var(--sky))!important;color:#fff!important;border:1px solid var(--sky-deep)!important}
.main-content table,.main-content .table{border-color:var(--border)!important}
.main-content thead,.main-content thead tr,.main-content th,.main-content .table thead th,.main-content .table-head-row{background:var(--surface)!important;color:var(--ink-mid)!important;border-color:var(--border)!important}
.main-content tbody tr:hover,.main-content .tx-row:hover{background:var(--sky-ghost)!important}
.main-content input,.main-content select,.main-content textarea{border:1px solid var(--border)!important;border-radius:10px!important;font-family:var(--fb)!important}
.main-content input:focus,.main-content select:focus,.main-content textarea:focus{border-color:var(--sky)!important;box-shadow:0 0 0 3px rgba(14,165,233,.12)!important}
.main-content .rate-badge,.main-content .badge,.main-content .status-badge{font-family:var(--fm)}
.main-content .actions,.main-content .cell-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.main-content a[href*='/edit'],.main-content .act-edit,.main-content .btn-warning{background:var(--amber-bg)!important;color:#92400e!important;border:1px solid var(--amber-border)!important}
.main-content .act-delete,.main-content form button[type='submit'].btn-danger,.main-content form button[onclick*='delete']{background:var(--danger-bg)!important;color:#991b1b!important;border:1px solid var(--danger-border)!important}
.main-content a[href*='/show'],.main-content .act-view{background:var(--sky-ghost)!important;color:var(--sky-deep)!important;border:1px solid var(--sky-border)!important}
</style>
<style>
    .wrap { max-width: 1100px; margin: 24px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); padding: 20px; }
    .toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
    .btn { display: inline-block; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; }
    .btn-primary { background: #1d4ed8; color: #fff; }
    .btn-muted { background: #eef2ff; color: #1f2937; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left; }
    th { background: #f8fafc; font-size: 13px; color: #374151; }
    .actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .link { color: #1d4ed8; text-decoration: none; font-weight: 600; }
    .status { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
    .status.active { background: #dcfce7; color: #166534; }
    .status.inactive { background: #fee2e2; color: #991b1b; }
</style>

<div class="wrap">
    <div class="toolbar">
        <h2>All Judges</h2>
        <div>
            <a class="btn btn-muted" href="{{ route('modules.edit.judges') }}">Back</a>
            <a class="btn btn-primary" href="{{ route('modules.edit.judges.create') }}">Add Judge</a>
        </div>
    </div>

    @if(session('success'))
        <div style="margin-bottom:10px;color:#166534;background:#dcfce7;padding:10px;border-radius:8px;">{{ session('success') }}</div>
    @endif

    <table>
        <thead>
        <tr>
            <th>Code</th>
            <th>Full Name</th>
            <th>Court Area</th>
            <th>Court Type</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        @forelse($judges as $judge)
            <tr>
                <td>{{ $judge->judge_code }}</td>
                <td>{{ $judge->full_name }}</td>
                <td>{{ $judge->court_area_code ?: 'N/A' }}</td>
                <td>{{ $judge->court_type_name ?: 'N/A' }}</td>
                <td>
                    <span class="status {{ $judge->is_active ? 'active' : 'inactive' }}">{{ $judge->is_active ? 'Active' : 'Inactive' }}</span>
                </td>
                <td class="actions">
                    <a class="link" href="{{ route('modules.edit.judges.show', $judge->judge_code) }}">View</a>
                    <a class="link" href="{{ route('modules.edit.judges.edit', $judge->judge_code) }}">Edit</a>
                    <form action="{{ route('modules.edit.judges.destroy', $judge->judge_code) }}" method="POST" style="display:inline;" onsubmit="return confirm('Delete this judge?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="link" style="border:none;background:transparent;cursor:pointer;">Delete</button>
                    </form>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="6">No judges found.</td>
            </tr>
        @endforelse
        </tbody>
    </table>
</div>
@endsection