@extends('layouts.app')

@section('title', 'Applications')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/invoice-create.css') }}">
<style>
    /* ── Index-specific overrides ── */
    .invoice-wrap { max-width: 1200px; }

    .index-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .index-toolbar-title {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text-primary, #1a202c);
    }

    .index-toolbar-title span {
        font-size: .85rem;
        font-weight: 400;
        color: var(--text-muted, #718096);
        margin-left: .4rem;
    }

    .btn-create {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .5rem 1.1rem;
        border-radius: 6px;
        font-size: .875rem;
        font-weight: 600;
        background: var(--primary, #2b6cb0);
        color: #fff;
        text-decoration: none;
        transition: opacity .15s;
    }
    .btn-create:hover { opacity: .88; }

    /* Table */
    .inv-table-wrap {
        overflow-x: auto;
        border-radius: 8px;
        border: 1px solid var(--border, #e2e8f0);
    }

    .inv-table {
        width: 100%;
        border-collapse: collapse;
        font-size: .875rem;
    }

    .inv-table thead tr {
        background: var(--surface-alt, #f7fafc);
        border-bottom: 2px solid var(--border, #e2e8f0);
    }

    .inv-table th {
        padding: .75rem 1rem;
        text-align: left;
        font-weight: 600;
        color: var(--text-muted, #718096);
        white-space: nowrap;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .inv-table td {
        padding: .8rem 1rem;
        border-bottom: 1px solid var(--border, #e2e8f0);
        color: var(--text-primary, #2d3748);
        vertical-align: middle;
    }

    .inv-table tbody tr:last-child td { border-bottom: none; }
    .inv-table tbody tr:hover { background: var(--surface-alt, #f7fafc); }

    .app-id {
        font-family: monospace;
        font-size: .82rem;
        color: var(--text-muted, #718096);
    }

    .applicant-name { font-weight: 600; }
    .applicant-sub  { font-size: .78rem; color: var(--text-muted, #718096); }

    /* Status badges */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .25rem .65rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 600;
        text-transform: capitalize;
        white-space: nowrap;
    }
    .badge-pending   { background: #fef3c7; color: #92400e; }
    .badge-approved  { background: #d1fae5; color: #065f46; }
    .badge-rejected  { background: #fee2e2; color: #991b1b; }
    .badge-reviewing { background: #dbeafe; color: #1e40af; }
    .badge-draft     { background: #e2e8f0; color: #4a5568; }

    /* Actions */
    .action-link {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        font-size: .8rem;
        font-weight: 600;
        color: var(--primary, #2b6cb0);
        text-decoration: none;
        padding: .3rem .6rem;
        border-radius: 4px;
        transition: background .15s;
    }
    .action-link:hover { background: var(--surface-alt, #ebf4ff); }

    /* Empty state */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--text-muted, #718096);
    }
    .empty-state svg { margin-bottom: 1rem; opacity: .4; }
    .empty-state p   { margin: 0; font-size: .95rem; }

    /* Pagination */
    .pagination-wrap {
        margin-top: 1.25rem;
        display: flex;
        justify-content: flex-end;
    }

    /* Filter bar */
    .filter-bar {
        display: flex;
        align-items: center;
        gap: .75rem;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }
    .filter-bar select,
    .filter-bar input {
        padding: .4rem .75rem;
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 6px;
        font-size: .85rem;
        color: var(--text-primary, #2d3748);
        background: #fff;
    }
    .filter-bar select:focus,
    .filter-bar input:focus {
        outline: none;
        border-color: var(--primary, #2b6cb0);
    }
    .filter-btn {
        padding: .4rem .9rem;
        border-radius: 6px;
        font-size: .85rem;
        font-weight: 600;
        background: var(--primary, #2b6cb0);
        color: #fff;
        border: none;
        cursor: pointer;
        transition: opacity .15s;
    }
    .filter-btn:hover { opacity: .88; }
    .filter-reset {
        font-size: .82rem;
        color: var(--text-muted, #718096);
        text-decoration: none;
    }
    .filter-reset:hover { color: var(--primary, #2b6cb0); }
</style>
@endpush

@section('content')

@php
    $role = auth()->user()?->role;
    $isAdmin    = $role === 'admin';
    $isReviewer = $role === 'user';
    $isApplicant = $role === 'applicant';
@endphp

<div class="invoice-page">
<div class="invoice-wrap">

    {{-- ── HEADER ── --}}
    <div class="invoice-header">
        <div class="gov-emblem">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5L12 1zm-1 14H9V9h2v6zm4 0h-2V9h2v6z"/>
            </svg>
        </div>
        <div>
            <h1 class="invoice-header-title">Applications</h1>
            <p class="invoice-header-sub">Ministry of Fisheries &amp; Ocean Resources &mdash; Local Fish Licensing System</p>
        </div>
    </div>

    <div class="invoice-card">

        {{-- ── TOOLBAR ── --}}
        <div class="index-toolbar">
            <div class="index-toolbar-title">
                {{ $isApplicant ? 'My Applications' : 'All Applications' }}
                <span>({{ $applications->total() }} total)</span>
            </div>
    <!--        @if($isApplicant)
                <a href="{{ route('applicant.application.new') }}" class="btn-create">
                    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    New Application
                </a>
            @endif
    -->
        </div>
        

        {{-- ── SUCCESS / ERROR FLASH ── --}}
        @if(session('success'))
            <div class="alert alert-success" style="margin-bottom:1rem">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger" style="margin-bottom:1rem">{{ session('error') }}</div>
        @endif

        {{-- ── STATUS FILTER (admin & reviewer only) ── --}}
        @if($isAdmin || $isReviewer)
            <form method="GET" class="filter-bar">
                <select name="status">
                    <option value="">All Statuses</option>
                    @foreach(['pending','reviewing','approved','rejected'] as $s)
                        <option value="{{ $s }}" @selected(request('status') === $s)>
                            {{ ucfirst($s) }}
                        </option>
                    @endforeach
                </select>
                <select name="license_type">
                    <option value="">All License Types</option>
                    @foreach(['local','foreign','semi-foreign'] as $lt)
                        <option value="{{ $lt }}" @selected(request('license_type') === $lt)>
                            {{ ucfirst($lt) }}
                        </option>
                    @endforeach
                </select>
                <input type="text"
                       name="search"
                       placeholder="Search by name or company…"
                       value="{{ request('search') }}"
                       style="min-width:220px">
                <button type="submit" class="filter-btn">Filter</button>
                @if(request()->hasAny(['status','license_type','search']))
                    <a href="{{ request()->url() }}" class="filter-reset">Clear</a>
                @endif
            </form>
        @endif

        {{-- ── TABLE ── --}}
        <div class="inv-table-wrap">
            <table class="inv-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Applicant</th>
                        <th>Company</th>
                        <th>License Type</th>
                        <th>Status</th>
                        @if($isAdmin || $isReviewer)
                            <th>Reviewer</th>
                        @endif
                        <th>Submitted</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($applications as $app)
                        @php
                            $showRoute = match($role) {
                                'admin'     => route('admin.applications.show', $app),
                                'user'      => route('reviewer.applications.show', $app),
                                default     => route('applicant.applications.show', $app),
                            };

                            $badgeClass = match($app->status) {
                                'approved'  => 'badge-approved',
                                'rejected'  => 'badge-rejected',
                                'reviewing' => 'badge-reviewing',
                                'draft'     => 'badge-draft',
                                default     => 'badge-pending',
                            };
                        @endphp
                        <tr>
                            {{-- ID --}}
                            <td class="app-id">#{{ $app->id }}</td>

                            {{-- Applicant --}}
                            <td>
                                <div class="applicant-name">
                                    {{ $app->ap_full_name ?? $app->user?->name ?? '—' }}
                                </div>
                                <div class="applicant-sub">
                                    {{ $app->ap_email ?? $app->user?->email ?? '' }}
                                </div>
                            </td>

                            {{-- Company --}}
                            <td>
                                <div>{{ $app->cd_business_name ?? $app->cd_registered_name ?? '—' }}</div>
                                <div class="applicant-sub">{{ ucfirst($app->cd_company_type ?? '') }}</div>
                            </td>

                            {{-- License type --}}
                            <td>{{ ucfirst($app->license_type ?? '—') }}</td>

                            {{-- Status --}}
                            <td>
                                <span class="badge {{ $badgeClass }}">
                                    {{ ucfirst($app->status ?? 'pending') }}
                                </span>
                            </td>

                            {{-- Reviewer (admin/reviewer only) --}}
                            @if($isAdmin || $isReviewer)
                                <td>{{ $app->reviewer?->name ?? '—' }}</td>
                            @endif

                            {{-- Submitted --}}
                            <td>
                                {{ $app->created_at?->format('d M Y') ?? '—' }}
                            </td>

                            {{-- View --}}
                        <!--    <td>
                                <a href="{{ $showRoute }}" class="action-link">
                                    <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                        <circle cx="12" cy="12" r="3"/>
                                    </svg>
                                    View
                                </a>
                            </td> -->
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ ($isAdmin || $isReviewer) ? 8 : 7 }}">
                                <div class="empty-state">
                                    <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                        <polyline points="14 2 14 8 20 8"/>
                                        <line x1="16" y1="13" x2="8" y2="13"/>
                                        <line x1="16" y1="17" x2="8" y2="17"/>
                                    </svg>
                                    <p>No applications found.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- ── PAGINATION ── --}}
        @if($applications->hasPages())
            <div class="pagination-wrap">
                {{ $applications->links() }}
            </div>
        @endif

    </div>{{-- /.invoice-card --}}
</div>{{-- /.invoice-wrap --}}
</div>{{-- /.invoice-page --}}

@endsection