@extends('layouts.app')

@section('title', 'Applicant Dashboard')

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">Applicant Dashboard</h1>
                    <p class="text-gray-600">Welcome, {{ auth()->user()->name }}</p>
                </div>
                <div class="flex items-center gap-3">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">Logout</button>
                    </form>
                </div>
            </div>
        </div>

        @if (session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        @php
            $hasProfile          = isset($profile) && $profile !== null;
            $hasCompanyDetails   = isset($companyDetails) && $companyDetails !== null;
            $hasOperationDetails = isset($operationDetails) && $operationDetails !== null;
            $hasVesselDetails    = isset($vesselDetails) && $vesselDetails !== null;

            $noVesselDeclared = $hasOperationDetails && isset($operationDetails->has_vessel) && !$operationDetails->has_vessel;
            $step4Complete    = $hasVesselDetails || $noVesselDeclared;
            $readyToSubmit    = $hasCompanyDetails && $hasOperationDetails && $step4Complete;

            $hasPendingOrApproved = false;
            if (isset($applications) && $applications->count() > 0) {
                foreach ($applications as $app) {
                    if (in_array($app->status, ['pending', 'approved'])) {
                        $hasPendingOrApproved = true;
                        break;
                    }
                }
            }

            // Lock all 5 cards when a pending/approved application exists.
            // Detect "applying for another" by checking if operation/vessel were
            // created/updated AFTER the most recent pending/approved application was submitted.
            $isLocked = $hasPendingOrApproved;
            $applyingForAnother = false;
            if ($isLocked && $hasOperationDetails) {
                $lastSubmittedApp = isset($applications)
                    ? $applications->whereIn('status', ['pending', 'approved'])->sortByDesc('created_at')->first()
                    : null;
                if ($lastSubmittedApp && $operationDetails->updated_at > $lastSubmittedApp->created_at) {
                    $applyingForAnother = true;
                }
            }
            $step1Locked = $isLocked;
            $step2Locked = $isLocked;
            $step3Locked = $isLocked && !$applyingForAnother;
            $step4Locked = $isLocked && !$applyingForAnother;
            $step5Locked = $isLocked && !$applyingForAnother;
        @endphp

        @if(!$hasProfile)
            <div class="bg-white rounded-lg shadow-md p-8">
                <div class="mb-6 text-center">
                    <svg class="mx-auto h-16 w-16 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    <h2 class="text-2xl font-bold text-gray-800 mt-4 mb-2">Step 1: Personal Details</h2>
                    <p class="text-gray-600">Let's start by registering your personal information.</p>
                </div>
                <div class="py-12">
                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                        @include('applicant.profile.create')
                    </div>
                </div>
            </div>
        @else

            <!-- Progress Steps -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h2 class="text-xl font-bold mb-6">License Application Process</h2>

                <!-- Progress Tracker -->
                <div class="flex items-center justify-between mb-8">
                    <div class="flex flex-col items-center flex-1">
                        <div class="w-12 h-12 rounded-full flex items-center justify-center font-bold bg-green-500 text-white">✓</div>
                        <p class="text-xs mt-2 font-medium text-center">Personal Details</p>
                    </div>
                    <div class="flex-1 h-1 bg-green-500"></div>
                    <div class="flex flex-col items-center flex-1">
                        <div class="w-12 h-12 rounded-full flex items-center justify-center font-bold {{ $hasCompanyDetails ? 'bg-green-500 text-white' : 'bg-gray-300 text-gray-600' }}">
                            {{ $hasCompanyDetails ? '✓' : '2' }}
                        </div>
                        <p class="text-xs mt-2 font-medium text-center">Company Details</p>
                    </div>
                    <div class="flex-1 h-1 {{ $hasCompanyDetails ? 'bg-green-500' : 'bg-gray-300' }}"></div>
                    <div class="flex flex-col items-center flex-1">
                        <div class="w-12 h-12 rounded-full flex items-center justify-center font-bold {{ $hasOperationDetails ? 'bg-green-500 text-white' : 'bg-gray-300 text-gray-600' }}">
                            {{ $hasOperationDetails ? '✓' : '3' }}
                        </div>
                        <p class="text-xs mt-2 font-medium text-center">Operation Details</p>
                    </div>
                    <div class="flex-1 h-1 {{ $hasOperationDetails ? 'bg-green-500' : 'bg-gray-300' }}"></div>
                    <div class="flex flex-col items-center flex-1">
                        <div class="w-12 h-12 rounded-full flex items-center justify-center font-bold {{ $step4Complete ? 'bg-green-500 text-white' : 'bg-gray-300 text-gray-600' }}">
                            @if($step4Complete) {{ $noVesselDeclared && !$hasVesselDetails ? '–' : '✓' }} @else 4 @endif
                        </div>
                        <p class="text-xs mt-2 font-medium text-center">Vessel Details</p>
                    </div>
                    <div class="flex-1 h-1 {{ $readyToSubmit ? 'bg-green-500' : 'bg-gray-300' }}"></div>
                    <div class="flex flex-col items-center flex-1">
                        <div class="w-12 h-12 rounded-full flex items-center justify-center font-bold {{ $readyToSubmit ? 'bg-green-500 text-white' : 'bg-gray-300 text-gray-600' }}">
                            {{ $readyToSubmit ? '✓' : '5' }}
                        </div>
                        <p class="text-xs mt-2 font-medium text-center">Submit Application</p>
                    </div>
                </div>

                <!-- Step Cards -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">

                    {{-- Step 1 — locked when pending/approved --}}
                    <div class="border rounded-lg p-4 {{ $isLocked ? 'bg-gray-100 border-gray-200 opacity-60' : 'bg-green-50 border-green-300' }}">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="font-semibold {{ $isLocked ? 'text-gray-400' : 'text-gray-800' }}">Personal Details</h3>
                            <span class="{{ $isLocked ? 'text-gray-400' : 'text-green-600' }} text-xl">✓</span>
                        </div>
                        <div class="text-xs text-gray-500 space-y-1 mb-4">
                            <p><strong>Name:</strong> {{ $profile->full_name }}</p>
                            <p><strong>DOB:</strong> {{ $profile->date_of_birth ? $profile->date_of_birth->format('d M Y') : 'N/A' }}</p>
                            <p><strong>Phone:</strong> {{ $profile->phone_number }}</p>
                            <p><strong>Email:</strong> {{ $profile->email }}</p>
                            <p><strong>Island:</strong> {{ $profile->home_island }}</p>
                            <p><strong>Nationality:</strong> {{ $profile->nationality }}</p>
                        </div>
                        @if($isLocked)
                            <button disabled class="block w-full text-center bg-gray-200 text-gray-400 px-4 py-2 rounded-lg cursor-not-allowed text-sm font-medium">🔒 Locked</button>
                        @else
                            <a href="{{ route('applicant.profile.edit', $profile->id) }}" class="block text-center bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium">Edit Details</a>
                        @endif
                    </div>

                    {{-- Step 2 — locked when pending/approved --}}
                    <div class="border rounded-lg p-4 {{ $step2Locked ? 'bg-gray-100 border-gray-200 opacity-60' : ($hasCompanyDetails ? 'bg-green-50 border-green-300' : 'bg-white border-gray-300') }}">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="font-semibold {{ $step2Locked ? 'text-gray-400' : 'text-gray-800' }}">Company Details</h3>
                            @if($step2Locked)
                                <span class="text-gray-400 text-xl">✓</span>
                            @elseif($hasCompanyDetails)
                                <span class="text-green-600 text-xl">✓</span>
                            @else
                                <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">Next</span>
                            @endif
                        </div>
                        <p class="text-sm {{ $step2Locked ? 'text-gray-400' : 'text-gray-600' }} mb-4">{{ $hasCompanyDetails ? 'Information submitted' : 'Provide your company information' }}</p>
                        @if($step2Locked)
                            <button disabled class="block w-full text-center bg-gray-200 text-gray-400 px-4 py-2 rounded-lg cursor-not-allowed text-sm font-medium">🔒 Locked</button>
                        @elseif($hasCompanyDetails)
                            <a href="{{ route('applicant.company.edit', $companyDetails->id) }}" class="block text-center bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium">Edit Details</a>
                        @else
                            <a href="{{ route('applicant.company.create') }}" class="block text-center bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 text-sm font-medium">Add Company Details</a>
                        @endif
                    </div>

                    {{-- Step 3 — unlocked when applying for another --}}
                    <div class="border rounded-lg p-4 {{ $step3Locked ? 'bg-gray-100 border-gray-200 opacity-60' : ($hasOperationDetails ? 'bg-green-50 border-green-300' : 'bg-white border-gray-300') }}">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="font-semibold {{ $step3Locked ? 'text-gray-400' : 'text-gray-800' }}">Operation Details</h3>
                            @if($step3Locked)
                                <span class="text-gray-400 text-xl">✓</span>
                            @elseif($hasOperationDetails)
                                <span class="text-green-600 text-xl">✓</span>
                            @else
                                <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">Next</span>
                            @endif
                        </div>
                        <p class="text-sm {{ $step3Locked ? 'text-gray-400' : 'text-gray-600' }} mb-4">{{ $hasOperationDetails ? 'Information submitted' : 'Describe your operations' }}</p>
                        @if($step3Locked)
                            <button disabled class="block w-full text-center bg-gray-200 text-gray-400 px-4 py-2 rounded-lg cursor-not-allowed text-sm font-medium">🔒 Locked</button>
                        @elseif($hasOperationDetails)
                            <a href="{{ route('applicant.operation.edit', $operationDetails->id) }}" class="block text-center bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium">Edit Details</a>
                        @else
                            <a href="{{ route('applicant.operation.create') }}" class="block text-center bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 text-sm font-medium">Add Operation Details</a>
                        @endif
                    </div>

                    {{-- Step 4 — unlocked when applying for another --}}
                    <div class="border rounded-lg p-4 {{ $step4Locked ? 'bg-gray-100 border-gray-200 opacity-60' : ($hasVesselDetails ? 'bg-green-50 border-green-300' : ($noVesselDeclared ? 'bg-gray-50 border-dashed border-gray-300' : 'bg-white border-gray-300')) }}">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="font-semibold {{ $step4Locked ? 'text-gray-400' : 'text-gray-800' }}">Vessel Details</h3>
                            @if($step4Locked)
                                <span class="text-gray-400 text-xl">✓</span>
                            @elseif($hasVesselDetails)
                                <span class="text-green-600 text-xl">✓</span>
                            @elseif($noVesselDeclared)
                                <span class="bg-gray-400 text-white text-xs px-2 py-1 rounded-full">Optional</span>
                            @else
                                <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">Next</span>
                            @endif
                        </div>
                        <p class="text-sm {{ $step4Locked ? 'text-gray-400' : 'text-gray-600' }} mb-4">
                            @if($step4Locked) Locked
                            @elseif($hasVesselDetails) Information submitted
                            @elseif($noVesselDeclared) Skipped — no vessel declared
                            @else Register your vessels
                            @endif
                        </p>
                        @if($step4Locked)
                            <button disabled class="block w-full text-center bg-gray-200 text-gray-400 px-4 py-2 rounded-lg cursor-not-allowed text-sm font-medium">🔒 Locked</button>
                        @elseif($hasVesselDetails)
                            <a href="{{ route('applicant.vessel.edit', $vesselDetails->id) }}" class="block text-center bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium">Edit Details</a>
                        @elseif($noVesselDeclared)
                            <a href="{{ route('applicant.vessel.create') }}" class="block text-center bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 text-sm font-medium">Add Vessel (Optional)</a>
                        @else
                            <a href="{{ route('applicant.vessel.create') }}" class="block text-center bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 text-sm font-medium">Add Vessel Details</a>
                        @endif
                    </div>

                    {{-- Step 5 — unlocked when applying for another --}}
                    <div class="border rounded-lg p-4 {{ $step5Locked ? 'bg-gray-100 border-gray-200 opacity-60' : ($hasPendingOrApproved && !$applyingForAnother ? 'bg-green-50 border-green-300' : ($readyToSubmit ? 'bg-white border-gray-300' : 'bg-gray-50 border-gray-200')) }}">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="font-semibold {{ $step5Locked ? 'text-gray-400' : ($readyToSubmit ? 'text-gray-800' : 'text-gray-400') }}">Submit Application</h3>
                            @if($step5Locked)
                                <span class="text-gray-400 text-xl">✓</span>
                            @elseif($hasPendingOrApproved && !$applyingForAnother)
                                <span class="text-green-600 text-xl">✓</span>
                            @elseif($readyToSubmit)
                                <span class="bg-green-600 text-white text-xs px-2 py-1 rounded-full">Ready</span>
                            @else
                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            @endif
                        </div>
                        <p class="text-sm {{ $step5Locked ? 'text-gray-400' : ($readyToSubmit || ($hasPendingOrApproved && !$applyingForAnother) ? 'text-gray-600' : 'text-gray-400') }} mb-4">
                            @if($step5Locked) Locked
                            @elseif($hasPendingOrApproved && !$applyingForAnother) Application submitted
                            @else Submit for review
                            @endif
                        </p>
                        @if($step5Locked)
                            <button disabled class="block w-full text-center bg-gray-200 text-gray-400 px-4 py-2 rounded-lg cursor-not-allowed text-sm font-medium">🔒 Locked</button>
                        @elseif($readyToSubmit)
                            <button onclick="showReviewModal()" class="block w-full text-center bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 text-sm font-medium">Review &amp; Submit</button>
                        @else
                            <button disabled class="block w-full text-center bg-gray-300 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed text-sm font-medium">Complete Steps First</button>
                        @endif
                    </div>
                </div>

                <!-- Progress Banner -->
                @if($isLocked && !$applyingForAnother)
                    <div class="mt-6 p-4 bg-amber-50 border-l-4 border-amber-500 rounded">
                        <p class="text-sm text-amber-800"><strong>🔒 Steps 1 &amp; 2 are locked.</strong><br>You have an active application in progress. Personal and Company details cannot be edited. To apply for another license, click <strong>"Apply for Another License"</strong> below — this will unlock Operation Details, Vessel Details, and Submit.</p>
                    </div>
                @elseif($applyingForAnother)
                    <div class="mt-6 p-4 bg-indigo-50 border-l-4 border-indigo-500 rounded">
                        <p class="text-sm text-indigo-700"><strong>📋 New License Application.</strong><br>Steps 3, 4 and 5 are now active. Complete your operation and vessel details, then submit.</p>
                    </div>
                @elseif(!$hasCompanyDetails)
                    <div class="mt-6 p-4 bg-indigo-50 border-l-4 border-indigo-500 rounded">
                        <p class="text-sm text-indigo-700"><strong>📋 Next Step:</strong><br>Add your company details to proceed.</p>
                    </div>
                @elseif(!$hasOperationDetails)
                    <div class="mt-6 p-4 bg-indigo-50 border-l-4 border-indigo-500 rounded">
                        <p class="text-sm text-indigo-700"><strong>⚙️ Next Step:</strong><br>Provide your operation details to continue.</p>
                    </div>
                @elseif(!$step4Complete)
                    <div class="mt-6 p-4 bg-indigo-50 border-l-4 border-indigo-500 rounded">
                        <p class="text-sm text-indigo-700"><strong>🚢 Next Step:</strong><br>Register your vessel details, or go back to Operation Details and select "No vessel" to skip.</p>
                    </div>
                @elseif($readyToSubmit)
                    <div class="mt-6 p-4 bg-green-50 border-l-4 border-green-500 rounded">
                        <p class="text-sm text-green-700"><strong>✅ Ready to Submit!</strong><br>All requirements completed. Click "Review &amp; Submit" to submit your license application.</p>
                    </div>
                @endif
            </div>

            <!---------------------------------------------------------------------------------------------------------------------------------------------------------->

            {{-- Cost Breakdown (only shown when there are applications with invoices) --}}
                @if(isset($applications) && $applications->count() > 0)
                    @php
                        $invoicedApplications = $applications->filter(fn($app) => $app->invoice !== null);
                    @endphp

                    @if($invoicedApplications->count() > 0)
                    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                        <div class="flex items-center justify-between mb-5">
                            <h2 class="text-xl font-bold text-gray-800">License Fee Breakdown</h2>
                            <span class="text-xs text-gray-400 font-medium uppercase tracking-wide">Amounts in AUD</span>
                        </div>

                        <div class="space-y-4">
                        @foreach($invoicedApplications as $app)
                            @php $inv = $app->invoice; @endphp
                            <div class="border border-gray-200 rounded-lg overflow-hidden">

                                {{-- Invoice header bar --}}
                                <div class="flex items-center justify-between px-5 py-3
                                    @if($inv->status === 'paid') bg-green-600
                                    @elseif($inv->status === 'overdue') bg-red-600
                                    @elseif($inv->status === 'cancelled') bg-gray-500
                                    @else bg-indigo-600 @endif">
                                    <div class="flex items-center gap-3">
                                        <svg class="w-4 h-4 text-white flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                                        </svg>
                                        <span class="text-white text-sm font-semibold">
                                            Invoice #{{ $inv->invoice_number }}
                                        </span>
                                        <span class="text-white/70 text-xs">·</span>
                                        <span class="text-white/80 text-xs">{{ $app->license_type }} License</span>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        @php
                                            $dueDate = $inv->due_date
                                                ? \Carbon\Carbon::parse($inv->due_date)
                                                : \Carbon\Carbon::parse($inv->created_at)->addWeek();
                                        @endphp
                                        <span class="text-white/70 text-xs">Due: {{ $dueDate->format('d M Y') }}</span>
                                        <span class="text-xs font-bold px-2.5 py-0.5 rounded-full
                                            @if($inv->status === 'paid') bg-green-100 text-green-800
                                            @elseif($inv->status === 'overdue') bg-red-100 text-red-800
                                            @elseif($inv->status === 'cancelled') bg-gray-100 text-gray-800
                                            @else bg-yellow-100 text-yellow-800 @endif">
                                            {{ ucfirst($inv->status ?? 'pending') }}
                                        </span>
                                    </div>
                                </div>

                                {{-- Fee rows --}}
                                <div class="divide-y divide-gray-100">
                                    @php
                                        $feeRows = [
                                            ['label' => 'Upfront License Fee',         'category' => 'Fixed Fee',         'amount' => $inv->upfront_fee],
                                            ['label' => 'Environmental Impact (EIA)',   'category' => 'Fixed Fee',         'amount' => $inv->eia_fee],
                                            ['label' => 'Registration Fee',             'category' => 'Fixed Fee',         'amount' => $inv->registration_fee],
                                            ['label' => 'Cost Recovery Fee',            'category' => 'Fixed Fee',         'amount' => $inv->recovery_fee],
                                            ['label' => 'Vessel Size Fee',              'category' => 'Vessel',            'amount' => $inv->vessel_fee],
                                            ['label' => 'Harvesting Methods Fee',       'category' => 'Harvesting Method', 'amount' => $inv->harvesting_fee],
                                            ['label' => 'Fish Families Fee',            'category' => 'Target Species',    'amount' => $inv->fish_family_fee],
                                        ];
                                        $activeRows = array_filter($feeRows, fn($r) => $r['amount'] > 0);
                                    @endphp

                                    {{-- Column headers (desktop) --}}
                                    <div class="hidden md:grid grid-cols-12 px-5 py-2 bg-gray-50">
                                        <div class="col-span-5 text-xs font-semibold text-gray-500 uppercase tracking-wide">Description</div>
                                        <div class="col-span-4 text-xs font-semibold text-gray-500 uppercase tracking-wide">Category</div>
                                        <div class="col-span-3 text-xs font-semibold text-gray-500 uppercase tracking-wide text-right">Amount</div>
                                    </div>

                                    @foreach($activeRows as $row)
                                    <div class="grid grid-cols-12 items-center px-5 py-3 hover:bg-gray-50 transition-colors">
                                        <div class="col-span-8 md:col-span-5">
                                            <span class="text-sm text-gray-800">{{ $row['label'] }}</span>
                                        </div>
                                        <div class="hidden md:block col-span-4">
                                            <span class="inline-block text-xs font-medium bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded-full">
                                                {{ $row['category'] }}
                                            </span>
                                        </div>
                                        <div class="col-span-4 md:col-span-3 text-right">
                                            <span class="text-sm font-semibold text-gray-900">
                                                ${{ number_format($row['amount'], 2) }}
                                            </span>
                                        </div>
                                    </div>
                                    @endforeach

                                    {{-- Fish family line-items --}}
                                    @if($inv->fishFamilies && $inv->fishFamilies->count() > 0)
                                        @foreach($inv->fishFamilies as $ff)
                                            @php $ffFee = $ff->pivot->fee ?? $ff->fee ?? null; @endphp
                                            @if($ffFee)
                                            <div class="grid grid-cols-12 items-center px-5 py-2.5 bg-indigo-50/40 hover:bg-indigo-50 transition-colors">
                                                <div class="col-span-8 md:col-span-5 pl-4 flex items-center gap-2">
                                                    <svg class="w-3 h-3 text-indigo-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                                                    </svg>
                                                    <span class="text-sm text-gray-700">{{ $ff->name }}</span>
                                                </div>
                                                <div class="hidden md:block col-span-4">
                                                    <span class="inline-block text-xs font-medium bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded-full">
                                                        Target Species
                                                    </span>
                                                </div>
                                                <div class="col-span-4 md:col-span-3 text-right">
                                                    <span class="text-sm font-semibold text-gray-900">
                                                        ${{ number_format($ffFee, 2) }}
                                                    </span>
                                                </div>
                                            </div>
                                            @endif
                                        @endforeach
                                    @endif

                                    {{-- Total row --}}
                                    <div class="grid grid-cols-12 items-center px-5 py-3.5 bg-gray-800">
                                        <div class="col-span-9 md:col-span-9">
                                            <span class="text-sm font-bold text-white uppercase tracking-wide">Total Amount Due</span>
                                        </div>
                                        <div class="col-span-3 text-right">
                                            <span class="text-base font-bold text-white">
                                                ${{ number_format($inv->total_amount, 2) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                {{-- Invoice footer --}}
                                <div class="px-5 py-4 bg-amber-50 border-t border-amber-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<!--                                    <div class="flex items-start gap-2">
                                        <svg class="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                                        </svg>
                                        <div class="text-xs text-amber-800 leading-relaxed">
                                            <span class="font-semibold block">Bank Transfer Details</span>
                                            ANZ Bank (Kiribati) Ltd &nbsp;·&nbsp; Acct: 268253 &nbsp;·&nbsp; BSB: 018970 &nbsp;·&nbsp; Swift: BKIRKIKI
                                        </div>
                                    </div>
                                    <a href="{{ route('applicant.invoice.show', $inv->id) }}"
                                    class="inline-flex items-center gap-2 text-sm bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 font-medium flex-shrink-0 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                                        </svg>
                                        View / Print Invoice
                                    </a>
                                </div>
-->
                                @if($inv->notes)
                                <div class="px-5 py-3 bg-gray-50 border-t border-gray-100 flex items-start gap-2">
                                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                                    </svg>
                                    <p class="text-xs text-gray-600"><span class="font-semibold">Note:</span> {{ $inv->notes }}</p>
                                </div>
                               @endif

                            </div>
                        @endforeach
                        </div>

                        @if($applications->whereNull('invoice')->where('status', 'approved')->count() > 0)
                        <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start gap-2">
                            <svg class="w-4 h-4 text-yellow-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <p class="text-xs text-yellow-800">
                                <span class="font-semibold">Invoice pending:</span>
                                Your approved application will receive an invoice within 5 working days via email.
                            </p>
                        </div>
                        @endif
                    </div>
                    @endif
                @endif

            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold">My License Applications</h2>
                    @if($hasProfile && $hasCompanyDetails)
                    <a href="{{ route('applicant.operation.create') }}"
                    class="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 text-sm font-medium transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        Apply for Another License
                    </a>
                    @endif
                </div>
                <div class="space-y-4">
                    @forelse($applications as $application)
                        <div class="border rounded-lg p-5 hover:bg-gray-50 transition">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <div class="flex items-center gap-3 mb-3">
                                        <h3 class="font-bold text-lg">{{ $application->license_type }} License</h3>
                                        <span class="px-3 py-1 rounded-full text-sm font-semibold
                                            @if($application->status === 'pending') bg-yellow-100 text-yellow-800
                                            @elseif($application->status === 'reviewed') bg-yellow-100 text-yellow-800
                                            @elseif($application->status === 'approved') bg-green-100 text-green-800
                                            @elseif($application->status === 'revoked') bg-red-100 text-red-800
                                            @else bg-red-100 text-red-800 @endif">
                                            @if(in_array($application->status, ['payment_uploaded']))
                                                waiting for final approval
                                            @else
                                                {{ ucfirst($application->status) }}
                                            @endif
                                        </span>
                                        <span class="text-xs text-gray-400">App #{{ $application->id }}</span>
                                    </div>

                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-3 text-sm">
                                        <div class="bg-gray-50 rounded p-2">
                                            <p class="text-xs text-gray-400 font-medium uppercase tracking-wide">Business</p>
                                            <p class="text-gray-800 font-semibold mt-0.5">{{ $application->business_name }}</p>
                                        </div>
                                        <div class="bg-gray-50 rounded p-2">
                                            <p class="text-xs text-gray-400 font-medium uppercase tracking-wide">Applicant</p>
                                            <p class="text-gray-800 font-semibold mt-0.5">{{ $application->ap_full_name ?? '—' }}</p>
                                        </div>
                                        <div class="bg-gray-50 rounded p-2">
                                            <p class="text-xs text-gray-400 font-medium uppercase tracking-wide">Submitted</p>
                                            <p class="text-gray-800 font-semibold mt-0.5">{{ $application->created_at->format('d M Y') }}</p>
                                        </div>
                                        <div class="bg-gray-50 rounded p-2">
                                            <p class="text-xs text-gray-400 font-medium uppercase tracking-wide">Vessel</p>
                                            <p class="text-gray-800 font-semibold mt-0.5">{{ $application->vd_vessel_name ?? ($application->od_has_vessel ? '—' : 'None') }}</p>
                                        </div>
                                    </div>

                                    @if($application->status === 'pending')
                                        <div class="mt-2 p-3 bg-yellow-50 border-l-4 border-yellow-500 rounded flex items-center gap-2">
                                            <span class="text-yellow-600">⏳</span>
                                            <div>
                                                <p class="text-sm text-yellow-800 font-semibold">Awaiting Reviewer</p>
                                                <p class="text-xs text-yellow-700">Your application is pending for reviewer</p>
                                            </div>
                                        </div>

                                    @elseif($application->status === 'reviewed')
                                        <div class="mt-2 p-3 bg-yellow-50 border-l-4 border-yellow-500 rounded flex items-center gap-2">
                                            <span class="text-yellow-600">⏳</span>
                                            <div>
                                                <p class="text-sm text-yellow-800 font-semibold">Under Review</p>
                                                <p class="text-xs text-yellow-700">Your application is currently being reviewed by a reviewer and you will receive an invoice within 5 working days.</p>
                                            </div>
                                        </div>
                                    @elseif($application->status === 'rejected')
                                        <div class="mt-2 p-3 bg-red-50 border-l-4 border-red-500 rounded">
                                            <p class="text-sm text-red-800 font-semibold">❌ Application Rejected</p>
                                            @if($application->rejection_reason)
                                                <p class="text-sm text-red-700 mt-1"><strong>Reason:</strong> {{ $application->rejection_reason }}</p>
                                            @endif
                                            <p class="text-xs text-red-600 mt-1">You may delete this and submit a new application with corrected information.</p>
                                        </div>
                                    @elseif($application->status === 'revoked' && $application->license)
                                        <div class="mt-2 p-3 bg-red-50 border-l-4 border-red-500 rounded">
                                            <p class="text-sm text-red-800 font-semibold">⚠️ License Revoked</p>
                                            <p class="text-sm text-red-700 mt-1"><strong>Reason:</strong> {{ $application->license->revoked_reason }}</p>
                                            <p class="text-xs text-red-600 mt-1">Revoked on: {{ $application->license->revoked_at->format('M d, Y') }}</p>
                                        </div>
                                    @endif

                                    @if($application->status === 'approved')
                                        @if($application->reviewer)
                                            <p class="text-xs text-gray-400 mt-2">Reviewed by {{ $application->reviewer->name }}{{ $application->reviewed_at ? ' on '.$application->reviewed_at->format('d M Y H:i') : '' }}</p>
                                        @endif
                                        <p class="text-xs text-green-700 mt-2 font-medium">✓ You will receive your license within 5 working days upon application approval via email.</p>

                                    @elseif($application->status === 'rejected')
                                        @if($application->reviewer)
                                            <p class="text-xs text-gray-400 mt-2">Reviewed by {{ $application->reviewer->name }}{{ $application->reviewed_at ? ' on '.$application->reviewed_at->format('d M Y H:i') : '' }}</p>
                                        @endif
                                        <p class="text-xs text-red-600 mt-2 font-medium">✗ Your application was not approved. Please delete this application and resubmit with corrected information.</p>

                                    @elseif($application->status === 'revoked')
                                        <p class="text-xs text-orange-600 mt-2 font-medium">⚠ Your license has been revoked by the Ministry of Fisheries. Please contact them directly for further assistance.</p>

                                    @elseif($application->status === 'pending')
                                        {{-- No reviewer message shown while still pending --}}
                                    @endif

                                    <div class="mt-3 flex gap-2">
                                        <button onclick="openAppModal({{ $application->id }})"
                                            class="text-sm bg-indigo-600 text-white px-4 py-1.5 rounded-lg hover:bg-indigo-700 font-medium">
                                            View Full Details
                                        </button>
                                    </div>
                                </div>

                                @if($application->status === 'rejected')
                                    <form method="POST" action="{{ route('applicant.application.delete', $application->id) }}"
                                          onsubmit="return confirm('Are you sure you want to delete this application?');" class="ml-4 flex-shrink-0">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 text-sm font-medium">Delete</button>
                                    </form>
                                @endif
                            </div>
                        </div>

                        {{-- Full Details Modal --}}
                        <div id="appModal{{ $application->id }}" class="hidden fixed inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full z-50">
                            <div class="relative top-6 mx-auto w-full max-w-4xl mb-10">
                                <div class="no-print flex justify-between items-center bg-gray-800 text-white px-6 py-3 rounded-t-xl">
                                    <span class="font-semibold text-sm">Application #{{ $application->id }} — Full Details</span>
                                    <div class="flex gap-3">
                                        <button onclick="printApp({{ $application->id }})"
                                            class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm px-4 py-1.5 rounded-lg font-medium">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                                            Print / Save PDF
                                        </button>
                                        <button onclick="closeAppModal({{ $application->id }})" class="text-gray-300 hover:text-white text-xl leading-none">✕</button>
                                    </div>
                                </div>

                                <div id="printArea{{ $application->id }}" class="bg-white shadow-2xl rounded-b-xl print-area" style="font-family: 'Georgia', serif;">
                                    <div style="border-bottom: 4px double #1a3a6e; padding: 28px 40px 20px; background: linear-gradient(135deg, #f8f9ff 0%, #eef1fa 100%);">
                                        <div style="display: flex; align-items: center; gap: 24px;">
                                            <div style="width:80px;height:80px;border:3px solid #1a3a6e;border-radius:50%;overflow:hidden;flex-shrink:0;background:white;">
                                                <img src="https://www.mfor.gov.ki/images/download1.jfif.png" alt="MFOR Logo"
                                                    style="width:100%;height:100%;object-fit:cover;">
                                            </div>
                                            <div style="flex: 1; text-align: center;">
                                                <p style="font-size: 11px; letter-spacing: 3px; color: #4a5568; text-transform: uppercase; margin: 0 0 2px;">Republic of Kiribati</p>
                                                <h1 style="font-size: 20px; font-weight: bold; color: #1a3a6e; margin: 0 0 2px; letter-spacing: 0.5px;">Ministry of Fisheries and Marine</h1>
                                                <p style="font-size: 13px; color: #2d5298; margin: 0 0 2px; font-style: italic;">Resources Development</p>
                                                <p style="font-size: 10px; color: #718096; margin: 0;">P.O. Box 64, Bairiki, Tarawa, Kiribati &nbsp;|&nbsp; Tel: +686 21099 &nbsp;|&nbsp; Fax: +686 21120</p>
                                            </div>
                                            <div style="text-align: center; flex-shrink: 0;">
                                                @php
                                                    $statusBorderColor = $application->status === 'approved' ? '#16a34a' : ($application->status === 'pending' ? '#d97706' : '#dc2626');
                                                @endphp
                                                <div style="border: 2px solid {{ $statusBorderColor }}; border-radius: 6px; padding: 6px 12px;">
                                                    <p style="font-size: 9px; letter-spacing: 2px; color: #4a5568; text-transform: uppercase; margin: 0 0 2px;">Status</p>
                                                    <p style="font-size: 14px; font-weight: bold; color: {{ $statusBorderColor }}; margin: 0; text-transform: uppercase; letter-spacing: 1px;">{{ $application->status }}</p>
                                                </div>
                                                <p style="font-size: 9px; color: #718096; margin: 6px 0 0; text-align: center;">Ref: APP-{{ str_pad($application->id, 5, '0', STR_PAD_LEFT) }}</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div style="background: #1a3a6e; color: white; text-align: center; padding: 10px 40px;">
                                        <h2 style="font-size: 15px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; margin: 0;">Local Fish Export / Re-export License Application</h2>
                                        <p style="font-size: 10px; margin: 3px 0 0; opacity: 0.8; letter-spacing: 1px;">
                                            License Type: {{ strtoupper($application->license_type) }}
                                            &nbsp;|&nbsp; Date Submitted: {{ $application->created_at->format('d F Y') }}
                                            &nbsp;|&nbsp; Application No: APP-{{ str_pad($application->id, 5, '0', STR_PAD_LEFT) }}
                                        </p>
                                    </div>

                                    <div style="padding: 28px 40px;">
                                        <div style="margin-bottom: 24px;">
                                            <div style="background: #1a3a6e; color: white; padding: 6px 14px; border-radius: 4px 4px 0 0;"><span style="font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;">Section 1 — Personal Details of Applicant</span></div>
                                            <div style="border: 1px solid #1a3a6e; border-top: none; padding: 14px 16px; border-radius: 0 0 4px 4px;">
                                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 12px;">
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Full Name</span><strong>{{ $application->ap_full_name ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Date of Birth</span><strong>{{ $application->ap_date_of_birth ? \Carbon\Carbon::parse($application->ap_date_of_birth)->format('d M Y') : '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Gender</span><strong>{{ ucfirst($application->ap_gender ?? '—') }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Nationality</span><strong>{{ $application->ap_nationality ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Home Island</span><strong>{{ $application->ap_home_island ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Phone Number</span><strong>{{ $application->ap_phone_number ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Email Address</span><strong>{{ $application->ap_email ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Residential Address</span><strong>{{ $application->ap_residential_address ?? '—' }}</strong></div>
                                                </div>
                                            </div>
                                        </div>

                                        <div style="margin-bottom: 24px;">
                                            <div style="background: #1a3a6e; color: white; padding: 6px 14px; border-radius: 4px 4px 0 0;"><span style="font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;">Section 2 — Company / Business Details</span></div>
                                            <div style="border: 1px solid #1a3a6e; border-top: none; padding: 14px 16px; border-radius: 0 0 4px 4px;">
                                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 12px;">
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Business Name</span><strong>{{ $application->cd_business_name ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Registered Name</span><strong>{{ $application->cd_registered_name ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Nature of Business</span><strong>{{ $application->cd_nature_of_business ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Registration Number</span><strong>{{ $application->cd_registration_number ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Company Type</span><strong>{{ $application->cd_company_type ?? '—' }}{{ $application->cd_company_type_other ? ' — '.$application->cd_company_type_other : '' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Date Established</span><strong>{{ $application->cd_date_established ? \Carbon\Carbon::parse($application->cd_date_established)->format('d M Y') : '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Telephone</span><strong>{{ $application->cd_telephone_number ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Email</span><strong>{{ $application->cd_email_address ?? '—' }}</strong></div>
                                                    <div style="grid-column: span 2;"><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Main Branch Address</span><strong>{{ $application->cd_main_branch_address ?? '—' }}</strong></div>
                                                    @if($application->cd_branch_address)
                                                    <div style="grid-column: span 2;"><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Branch Address</span><strong>{{ $application->cd_branch_address }}</strong></div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div style="margin-bottom: 24px;">
                                            <div style="background: #1a3a6e; color: white; padding: 6px 14px; border-radius: 4px 4px 0 0;"><span style="font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;">Section 3 — Fishing Operation Details</span></div>
                                            <div style="border: 1px solid #1a3a6e; border-top: none; padding: 14px 16px; border-radius: 0 0 4px 4px;">
                                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 12px;">
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Has Vessel</span><strong>{{ $application->od_has_vessel ? 'Yes' : 'No' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Supplying / Foreign Buyer Companies</span><strong>{{ $application->od_supplying_companies ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Harvest Islands</span><strong>
                                                        @php
                                                            $modalOpDetail = $application->operationDetail;
                                                            $islandNames   = $modalOpDetail?->harvestIslands?->pluck('island_name')->filter()->join(', ');
                                                            $extraIslands  = $application->od_harvest_islands;
                                                            $allIslands    = collect([$islandNames, $extraIslands])->filter()->join(' | ');
                                                        @endphp
                                                        {{ $allIslands ?: '—' }}
                                                        </strong></div>
                                                        <div>
                                                            <span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Target Fish Families</span>
                                                            <strong>
                                                                @php
                                                                    $modalFishNames = $modalOpDetail?->targetFishFamilies?->map(function($ff) {
                                                                        if ($ff->is_other && $ff->pivot?->other_value) {
                                                                            return $ff->pivot->other_value;
                                                                        }
                                                                        return $ff->name;
                                                                    })->filter()->join(', ');
                                                                @endphp
                                                                {{ $modalFishNames ?: '—' }}
                                                            </strong>
                                                        </div>
                                                        <div>
                                                            <span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Harvesting Methods</span>
                                                            <strong>
                                                                @php
                                                                    $modalHarvestNames = $modalOpDetail?->harvestingMethods?->map(function($hm) {
                                                                        if ($hm->is_other && $hm->pivot?->other_value) {
                                                                            return $hm->pivot->other_value;
                                                                        }
                                                                        return $hm->name;
                                                                    })->filter()->join(', ');
                                                                @endphp
                                                                {{ $modalHarvestNames ?: '—' }}
                                                            </strong>
                                                        </div>
                                                        <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">License Duration</span><strong>{{ $modalOpDetail?->licenseDuration?->name ?? '—' }}</strong></div>
                                                </div>
                                            </div>
                                        </div>

                                        @if($application->vd_vessel_name)
                                        <div style="margin-bottom: 24px;">
                                            <div style="background: #1a3a6e; color: white; padding: 6px 14px; border-radius: 4px 4px 0 0;"><span style="font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;">Section 4 — Vessel Details</span></div>
                                            <div style="border: 1px solid #1a3a6e; border-top: none; padding: 14px 16px; border-radius: 0 0 4px 4px;">
                                                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 24px; font-size: 12px;">
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Vessel Name</span><strong>{{ $application->vd_vessel_name ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Vessel Type</span><strong>{{ $application->vd_vessel_type ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">IMO / Reg. Number</span><strong>{{ $application->vd_imo_registration_number ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Current Flag</span><strong>{{ $application->vd_current_flag ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Base Port</span><strong>{{ $application->vd_base_port ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Year Built</span><strong>{{ $application->vd_year_built ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Registered Length</span><strong>{{ $application->vd_registered_length ? $application->vd_registered_length.' m' : '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Beam Length</span><strong>{{ $application->vd_beam_length ? $application->vd_beam_length.' m' : '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Draught</span><strong>{{ $application->vd_draught_length ? $application->vd_draught_length.' m' : '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Tonnage</span><strong>{{ $application->vd_tonnage ? $application->vd_tonnage.' t' : '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">No. of Crew</span><strong>{{ $application->vd_number_of_crew ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">No. of Vessels</span><strong>{{ $application->vd_number_of_vessels ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Captain / Master</span><strong>{{ $application->vd_captain_master_name ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">VMS Number</span><strong>{{ $application->vd_vms_number ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Hull Color</span><strong>{{ $application->vd_hull_color ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Hull Material</span><strong>{{ $application->vd_hull_material ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Max Speed</span><strong>{{ $application->vd_maximum_speed ? $application->vd_maximum_speed.' kts' : '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Service Speed</span><strong>{{ $application->vd_service_speed ? $application->vd_service_speed.' kts' : '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Call Sign</span><strong>{{ $application->vd_international_call_sign ?? '—' }}</strong></div>
                                                    <div><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Previous Name</span><strong>{{ $application->vd_previous_vessel_name ?? '—' }}</strong></div>
                                                    <div style="grid-column: span 3;"><span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;">Fishing Gears Onboard</span><strong>{{ $application->vd_fishing_gears_onboard ?? '—' }}</strong></div>
                                                </div>
                                                @php
                                                    $modalPhotos = $hasVesselDetails ? array_filter([$vesselDetails->photo_1,$vesselDetails->photo_2,$vesselDetails->photo_3,$vesselDetails->photo_4,$vesselDetails->photo_5,$vesselDetails->photo_6]) : [];
                                                @endphp
                                                @if(!empty($modalPhotos))
                                                <div style="margin-top: 16px; border-top: 1px solid #e2e8f0; padding-top: 14px;">
                                                    <span style="color: #718096; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Vessel Photos</span>
                                                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;">
                                                        @foreach($modalPhotos as $photo)
                                                            <img src="{{ Storage::url($photo) }}" alt="Vessel photo" style="width: 100%; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0;">
                                                        @endforeach
                                                    </div>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                        @else
                                        <div style="margin-bottom: 24px; border: 1px dashed #cbd5e0; padding: 12px 16px; border-radius: 6px; text-align: center; color: #718096; font-size: 12px; font-style: italic;">No vessel declared for this application.</div>
                                        @endif

                                        <div style="margin-top: 32px; border-top: 2px solid #1a3a6e; padding-top: 20px;">
                                            <p style="font-size: 11px; color: #4a5568; margin-bottom: 20px; line-height: 1.6;">I, the undersigned, hereby declare that the information provided in this application is true, accurate and complete to the best of my knowledge and belief. I understand that providing false or misleading information may result in the rejection of this application or revocation of any license granted.</p>
                                            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 24px;">
                                                <div>
                                                    <div style="border-bottom: 1px solid #4a5568; height: 40px; margin-bottom: 6px;"></div>
                                                    <p style="font-size: 10px; color: #718096; text-transform: uppercase; letter-spacing: 0.5px;">Applicant's Signature</p>
                                                    <p style="font-size: 11px; font-weight: bold; margin-top: 2px;">{{ $application->ap_full_name ?? '' }}</p>
                                                </div>
                                                <div>
                                                    <div style="border-bottom: 1px solid #4a5568; height: 40px; margin-bottom: 6px;"></div>
                                                    <p style="font-size: 10px; color: #718096; text-transform: uppercase; letter-spacing: 0.5px;">Date</p>
                                                    <p style="font-size: 11px; font-weight: bold; margin-top: 2px;">{{ $application->created_at->format('d F Y') }}</p>
                                                </div>
                                                <div>
                                                    <div style="border-bottom: 1px solid #4a5568; height: 40px; margin-bottom: 6px;"></div>
                                                    <p style="font-size: 10px; color: #718096; text-transform: uppercase; letter-spacing: 0.5px;">For Official Use Only</p>
                                                    <p style="font-size: 10px; color: #a0aec0; margin-top: 2px; font-style: italic;">Authorised Officer</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div style="margin-top: 28px; border-top: 1px solid #e2e8f0; padding-top: 10px; text-align: center;">
                                            <p style="font-size: 9px; color: #a0aec0; letter-spacing: 0.5px;">Ministry of Fisheries and Marine Resources Development &nbsp;|&nbsp; Republic of Kiribati &nbsp;|&nbsp; Printed: {{ now()->format('d F Y H:i') }} &nbsp;|&nbsp; APP-{{ str_pad($application->id, 5, '0', STR_PAD_LEFT) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @empty
                        <div class="text-center py-8">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            <p class="text-gray-500 mt-4">No applications submitted yet</p>
                            <p class="text-sm text-gray-400">Complete all steps above to submit your first license application</p>
                        </div>
                    @endforelse
                </div>
            </div>
        @endif
    </div>
</div>

@verbatim
<style>
@media print {
    body > *:not(#currentPrintTarget) { display: none !important; }
    #currentPrintTarget { display: block !important; position: static !important; background: white !important; }
    .no-print { display: none !important; }
    .print-area { box-shadow: none !important; border-radius: 0 !important; }
}
@page { margin: 1cm; size: A4; }
</style>
@endverbatim

{{-- ════════════════════════════════════════
     REVIEW & SUBMIT MODAL
════════════════════════════════════════ --}}
<div id="reviewModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-10 mx-auto p-5 border w-full max-w-5xl shadow-lg rounded-md bg-white mb-10">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-2xl font-bold text-gray-900">Review Your Information</h3>
                <button onclick="closeReviewModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
                <p class="text-sm text-blue-700"><strong>📋 Please review all information carefully</strong><br>Make sure everything is correct before submitting.</p>
            </div>

            <form method="POST" action="{{ route('applicant.submit') }}" id="applicationForm" class="space-y-6">
                @csrf

                @if($hasProfile)
                    <input type="hidden" name="applicant_profile_id" value="{{ $profile->id }}">
                @endif
                @if($hasCompanyDetails)
                    <input type="hidden" name="company_detail_id" value="{{ $companyDetails->id }}">
                @endif
                @if($hasOperationDetails)
                    <input type="hidden" name="operation_detail_id" value="{{ $operationDetails->id }}">
                @endif

                {{-- Personal Details --}}
                @if($hasProfile)
                <div class="border rounded-lg overflow-hidden">
                    <div class="bg-indigo-50 px-5 py-3 flex items-center gap-2 border-b">
                        <svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/></svg>
                        <h4 class="font-semibold text-indigo-800">Personal Details</h4>
                    </div>
                    <div class="p-5 grid grid-cols-2 gap-x-8 gap-y-4 text-sm bg-white">
                        <div><p class="text-gray-500 font-medium mb-1">Full Name</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $profile->full_name ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Date of Birth</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $profile->date_of_birth?->format('d M Y') ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Gender</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $profile->gender ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Nationality</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $profile->nationality ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Home Island</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $profile->home_island ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Phone Number</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $profile->phone_number ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Email Address</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $profile->email ?? '—' }}</p></div>
                        <div class="col-span-2"><p class="text-gray-500 font-medium mb-1">Residential Address</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $profile->residential_address ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Police Clearance</p><p class="bg-gray-50 px-3 py-2 rounded border {{ $profile->police_clearance_path ? 'text-green-700' : 'text-red-500' }}">{{ $profile->police_clearance_path ? '✓ Uploaded' : '✗ Not uploaded' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Passport Biodata</p><p class="bg-gray-50 px-3 py-2 rounded border {{ $profile->passport_biodata_path ? 'text-green-700' : 'text-red-500' }}">{{ $profile->passport_biodata_path ? '✓ Uploaded' : '✗ Not uploaded' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Birth Certificate</p><p class="bg-gray-50 px-3 py-2 rounded border {{ $profile->birth_certificate_path ? 'text-green-700' : 'text-red-500' }}">{{ $profile->birth_certificate_path ? '✓ Uploaded' : '✗ Not uploaded' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">National ID</p><p class="bg-gray-50 px-3 py-2 rounded border {{ $profile->national_id_path ? 'text-green-700' : 'text-red-500' }}">{{ $profile->national_id_path ? '✓ Uploaded' : '✗ Not uploaded' }}</p></div>
                    </div>
                </div>
                @endif

                {{-- Company Details --}}
                @if($hasCompanyDetails)
                <div class="border rounded-lg overflow-hidden">
                    <div class="bg-indigo-50 px-5 py-3 flex items-center gap-2 border-b">
                        <svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/><path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd"/></svg>
                        <h4 class="font-semibold text-indigo-800">Company Details</h4>
                    </div>
                    <div class="p-5 grid grid-cols-2 gap-x-8 gap-y-4 text-sm bg-white">
                        <div><p class="text-gray-500 font-medium mb-1">Business Name</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->business_name ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Registered Name</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->registered_name ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Nature of Business</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->nature_of_business ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Registration Number</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->registration_number ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Company Type</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->company_type ?? '—' }}{{ $companyDetails->company_type_other ? ' — '.$companyDetails->company_type_other : '' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Date Established</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->date_established?->format('d M Y') ?? '—' }}</p></div>
                        @if($companyDetails->company_type === 'Semi-foreign' && ($companyDetails->shareholders ?? collect())->count() > 0)
                        <div class="col-span-2">
                            <p class="text-gray-500 font-medium mb-2">Shareholders</p>
                            <table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
                                <thead><tr class="bg-indigo-50 text-indigo-800"><th class="text-left px-4 py-2 font-semibold border-b border-gray-200">#</th><th class="text-left px-4 py-2 font-semibold border-b border-gray-200">Full Name</th><th class="text-left px-4 py-2 font-semibold border-b border-gray-200">Country</th></tr></thead>
                                <tbody>
                                    @foreach($companyDetails->shareholders as $i => $shareholder)
                                        <tr class="{{ $loop->even ? 'bg-gray-50' : 'bg-white' }}">
                                            <td class="px-4 py-2 text-gray-500 border-b border-gray-100">{{ $i + 1 }}</td>
                                            <td class="px-4 py-2 text-gray-900 font-medium border-b border-gray-100">{{ $shareholder->fullname }}</td>
                                            <td class="px-4 py-2 text-gray-600 border-b border-gray-100">{{ $shareholder->country?->name ?? '—' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @endif
                        <div><p class="text-gray-500 font-medium mb-1">Telephone</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->telephone_number ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Email</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->email_address ?? '—' }}</p></div>
                        <div class="col-span-2"><p class="text-gray-500 font-medium mb-1">Main Branch Address</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $companyDetails->main_branch_address ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Bank Statement</p><p class="bg-gray-50 px-3 py-2 rounded border {{ $companyDetails->bank_statement_path ? 'text-green-700' : 'text-red-500' }}">{{ $companyDetails->bank_statement_path ? '✓ Uploaded' : '✗ Not uploaded' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Company License</p><p class="bg-gray-50 px-3 py-2 rounded border {{ $companyDetails->company_license_path ? 'text-green-700' : 'text-red-500' }}">{{ $companyDetails->company_license_path ? '✓ Uploaded' : '✗ Not uploaded' }}</p></div>
                    </div>
                </div>
                @endif

                {{-- Operation Details --}}
                @if($hasOperationDetails)
                <div class="border rounded-lg overflow-hidden">
                    <div class="bg-indigo-50 px-5 py-3 flex items-center gap-2 border-b">
                        <svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/></svg>
                        <h4 class="font-semibold text-indigo-800">Operation Details</h4>
                    </div>
                    <div class="p-5 grid grid-cols-2 gap-x-8 gap-y-4 text-sm bg-white">
                        <div><p class="text-gray-500 font-medium mb-1">Has Vessel</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $operationDetails->has_vessel ? 'Yes' : 'No' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Foreign Buyer / Supplying Companies</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $operationDetails->supplying_companies ?? '—' }}</p></div>
                        <div class="col-span-2">
                            <p class="text-gray-500 font-medium mb-1">Harvest Islands</p>
                            <p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">
                                @php
                                    $islandNames  = $operationDetails->harvestIslands?->pluck('island_name')->filter()->join(', ');
                                    $extraIslands = $operationDetails->harvest_islands;
                                    $allIslands   = collect([$islandNames, $extraIslands])->filter()->join(' | ');
                                @endphp
                                {{ $allIslands ?: '—' }}
                            </p>
                        </div>
                        <div class="col-span-2">
                            <p class="text-gray-500 font-medium mb-1">Target Fish Families</p>
                            <p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">
                                @php
                                    $fishNames = $operationDetails->targetFishFamilies?->map(function($ff) {
                                        if ($ff->is_other && $ff->pivot?->other_value) {
                                            return $ff->pivot->other_value;
                                        }
                                        return $ff->name;
                                    })->filter()->join(', ');
                                @endphp
                                {{ $fishNames ?: '—' }}
                            </p>
                        </div>
                        <div class="col-span-2">
                            <p class="text-gray-500 font-medium mb-1">Harvesting Methods</p>
                            <p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">
                                @php
                                    $harvestNames = $operationDetails->harvestingMethods?->map(function($hm) {
                                        if ($hm->is_other && $hm->pivot?->other_value) {
                                            return $hm->pivot->other_value;
                                        }
                                        return $hm->name;
                                    })->filter()->join(', ');
                                @endphp
                                {{ $harvestNames ?: '—' }}
                            </p>
                        </div>
                        <div><p class="text-gray-500 font-medium mb-1">License Duration</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $operationDetails->licenseDuration?->name ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Business Plan</p><p class="bg-gray-50 px-3 py-2 rounded border {{ $operationDetails->business_plan_path ? 'text-green-700' : 'text-red-500' }}">{{ $operationDetails->business_plan_path ? '✓ Uploaded' : '✗ Not uploaded' }}</p></div>
                    </div>
                </div>
                @endif

                {{-- Vessel Details --}}
                @if($hasVesselDetails)
                <div class="border rounded-lg overflow-hidden">
                    <div class="bg-indigo-50 px-5 py-3 flex items-center gap-2 border-b">
                        <svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"/><path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"/><path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"/></svg>
                        <h4 class="font-semibold text-indigo-800">Vessel Details</h4>
                    </div>
                <div class="p-5 grid grid-cols-2 gap-x-8 gap-y-4 text-sm bg-white">
                        <div><p class="text-gray-500 font-medium mb-1">Vessel Name</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->vessel_name ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Vessel Type</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->vessel_type ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Previous Vessel Name</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->previous_vessel_name ?? '—' }}</p></div>
                        <div>
                            <p class="text-gray-500 font-medium mb-1">Vessel in Kiribati</p>
                            @if(is_null($vesselDetails->vessel_in_kiribati))
                                <p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">—</p>
                            @elseif($vesselDetails->vessel_in_kiribati)
                                <p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border border-gray-200 flex items-center gap-1">
                                    <span class="text-green-600 font-semibold">✓ Yes</span>
                                </p>
                            @else
                                <p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border border-gray-200 flex items-center gap-1">
                                    <span class="text-red-600 font-semibold">✗ No</span>
                                </p>
                            @endif
                        </div>
                        <div><p class="text-gray-500 font-medium mb-1">Registered Length</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->registered_length ? $vesselDetails->registered_length.' m' : '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Beam Length</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->beam_length ? $vesselDetails->beam_length.' m' : '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Draught</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->draught_length ? $vesselDetails->draught_length.' m' : '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Tonnage</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->tonnage ? $vesselDetails->tonnage.' t' : '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Year Built</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->year_built ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Current Flag</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->current_flag ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Base Port</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->base_port ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">IMO / Reg. Number</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->imo_registration_number ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">International Call Sign</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->international_call_sign ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Max Speed</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->maximum_speed ? $vesselDetails->maximum_speed.' kts' : '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Service Speed</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->service_speed ? $vesselDetails->service_speed.' kts' : '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Hull Color</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->hull_color ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Hull Material</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->hull_material ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Number of Crew</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->number_of_crew ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">Captain / Master</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->captain_master_name ?? '—' }}</p></div>
                        <div><p class="text-gray-500 font-medium mb-1">VMS Number</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->vms_number ?? '—' }}</p></div>
                        <div class="col-span-2"><p class="text-gray-500 font-medium mb-1">Fishing Gears Onboard</p><p class="text-gray-900 bg-gray-50 px-3 py-2 rounded border">{{ $vesselDetails->fishing_gears_onboard ?? '—' }}</p></div>
                        @php $reviewPhotos = array_filter([$vesselDetails->photo_1,$vesselDetails->photo_2,$vesselDetails->photo_3,$vesselDetails->photo_4,$vesselDetails->photo_5,$vesselDetails->photo_6]); @endphp
                        @if(!empty($reviewPhotos))
                        <div class="col-span-2">
                            <p class="text-gray-500 font-medium mb-2">Vessel Photos</p>
                            <div class="grid grid-cols-3 gap-2">
                                @foreach($reviewPhotos as $photo)
                                    <img src="{{ Storage::url($photo) }}" alt="Vessel photo" class="w-full h-24 object-cover rounded-lg border border-gray-200">
                                @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                @elseif($noVesselDeclared)
                <div class="border border-dashed border-gray-300 rounded-lg p-4 bg-gray-50 text-center text-sm text-gray-500">
                    🚢 No vessel declared — Vessel Details step was skipped.
                </div>
                @endif

                {{-- Application Fields --}}
                <div class="border rounded-lg overflow-hidden">
                    <div class="bg-indigo-50 px-5 py-3 flex items-center gap-2 border-b">
                        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        <h4 class="font-semibold text-indigo-800">Application Details</h4>
                    </div>
                    <div class="p-5 grid grid-cols-2 gap-x-8 gap-y-4 text-sm bg-white">
                        <div>
                            <label class="block text-gray-500 font-medium mb-1">License Type *</label>
                            <select name="license_type" required class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 bg-white text-sm">
                                <option value="">Select a license type</option>
                                @php $selectedLicense = old('license_type', $hasCompanyDetails ? $companyDetails->company_type : ''); @endphp
                                <option value="Local"        @selected($selectedLicense === 'Local')>Local</option>
                                <option value="Foreign"      @selected($selectedLicense === 'Foreign')>Foreign</option>
                                <option value="Semi-foreign" @selected($selectedLicense === 'Semi-foreign')>Semi-foreign</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-500 font-medium mb-1">Business Name *</label>
                            <input type="text" name="business_name" required
                                value="{{ old('business_name', $hasCompanyDetails ? $companyDetails->registered_name : '') }}"
                                placeholder="Enter your business name"
                                class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm">
                        </div>
                    </div>
                </div>

                {{-- Declaration --}}
                <div class="border-2 border-indigo-600 rounded-lg overflow-hidden" id="licenseConditionsSection">
                    <div class="bg-indigo-600 px-5 py-3 flex items-center gap-3">
                        <svg class="w-6 h-6 text-white flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                        <div>
                            <h4 class="font-bold text-white text-sm uppercase tracking-wide">Declaration</h4>
                            <p class="text-indigo-200 text-xs mt-0.5">You must accept all declarations before your application can be submitted.</p>
                        </div>
                        <span class="ml-auto flex-shrink-0 bg-indigo-800 text-indigo-100 text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wide">Required</span>
                    </div>

                    <div class="bg-indigo-50 p-5">
                        <div class="text-center pb-4 mb-4 border-b border-indigo-200">
                            <p class="text-xs font-bold text-indigo-800 uppercase tracking-widest">Republic of Kiribati</p>
                            <p class="text-xs text-indigo-700 mt-0.5">Ministry of Fisheries and Marine Resources</p>
                            <p class="text-xs font-semibold text-indigo-900 mt-1 uppercase tracking-wide">Local Fish Export / Re-export License — Declaration</p>
                        </div>

                        <p class="text-sm font-semibold text-gray-800 mb-4">This is to declare that:</p>

                        <div id="conditionsBox" class="space-y-3">
                            <div class="flex items-start gap-3 bg-white rounded-lg border border-indigo-200 px-4 py-3">
                                <input type="checkbox" id="declarationCheckbox1" name="declaration_1" value="1" onchange="toggleSubmitBtn()"
                                    class="mt-0.5 w-5 h-5 flex-shrink-0 rounded border-2 border-indigo-400 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                                <label for="declarationCheckbox1" class="text-sm text-gray-800 leading-relaxed cursor-pointer">
                                    I confirm that <strong>all information provided in this application is true and correct</strong>.
                                </label>
                            </div>
                            <div class="flex items-start gap-3 bg-white rounded-lg border border-indigo-200 px-4 py-3">
                                <input type="checkbox" id="declarationCheckbox2" name="declaration_2" value="1" onchange="toggleSubmitBtn()"
                                    class="mt-0.5 w-5 h-5 flex-shrink-0 rounded border-2 border-indigo-400 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                                <label for="declarationCheckbox2" class="text-sm text-gray-800 leading-relaxed cursor-pointer">
                                    I confirm that <strong>all attached documents are genuine copies and not fraudulent</strong>.
                                </label>
                            </div>
                            <div class="flex items-start gap-3 bg-white rounded-lg border border-indigo-200 px-4 py-3">
                                <input type="checkbox" id="declarationCheckbox3" name="declaration_3" value="1" onchange="toggleSubmitBtn()"
                                    class="mt-0.5 w-5 h-5 flex-shrink-0 rounded border-2 border-indigo-400 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                                <label for="declarationCheckbox3" class="text-sm text-gray-800 leading-relaxed cursor-pointer">
                                    I agree to <strong>comply with all Fisheries legislation, regulations, and all laws of the Republic of Kiribati</strong>.
                                </label>
                            </div>
                            <div class="flex items-start gap-3 bg-white rounded-lg border border-indigo-200 px-4 py-3">
                                <input type="checkbox" id="declarationCheckbox4" name="declaration_4" value="1" onchange="toggleSubmitBtn()"
                                    class="mt-0.5 w-5 h-5 flex-shrink-0 rounded border-2 border-indigo-400 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                                <label for="declarationCheckbox3" class="text-sm text-gray-800 leading-relaxed cursor-pointer">
                                    I agree that <strong>editing will be disabled once application submitted</strong>.
                                </label>
                            </div>
                            <div id="conditionsWarning" class="hidden mt-2 flex items-center gap-2 text-sm text-indigo-800 font-semibold bg-indigo-100 border border-indigo-300 rounded-lg px-4 py-2.5">
                                <svg class="w-5 h-5 flex-shrink-0 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                                You must accept all four declarations above before you can submit your application.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-green-50 border-l-4 border-green-500 rounded">
                    <p class="text-sm text-green-700"><strong>✓ Information Verified:</strong><br>By submitting, you confirm all information is accurate, complete, and that you accept all declarations above.</p>
                </div>

                <div class="flex gap-3 pb-2">
                    <button type="button" onclick="closeReviewModal()"
                        class="flex-1 px-4 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 font-medium transition-colors">
                        Go Back to Edit
                    </button>
                    <button type="button" id="submitBtn" onclick="handleSubmit(this)"
                            class="flex-1 px-4 py-3 rounded-lg font-semibold transition-all duration-200 bg-gray-300 text-gray-500 cursor-not-allowed select-none"
                            aria-disabled="true">
                        <span id="submitBtnText">☐ Accept Declarations to Enable Submission</span>
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
function showReviewModal() {
    document.getElementById('reviewModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    ['declarationCheckbox1','declarationCheckbox2','declarationCheckbox3'].forEach(id => {
        const cb = document.getElementById(id);
        if (cb) cb.checked = false;
    });
    resetSubmitBtn();
}
function closeReviewModal() {
    document.getElementById('reviewModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}
function openAppModal(id) {
    document.getElementById('appModal' + id).classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}
function closeAppModal(id) {
    document.getElementById('appModal' + id).classList.add('hidden');
    document.body.style.overflow = 'auto';
}
function printApp(id) {
    const area = document.getElementById('printArea' + id);
    if (!area) return;
    const win = window.open('', '_blank', 'width=950,height=750');
    const pageRule = '@' + 'page { margin:1cm; size:A4; }';
    win.document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>Application #' + id + '</title>'
        + '<style>* { margin:0; padding:0; box-sizing:border-box; } body { font-family: Georgia, serif; } ' + pageRule + '</style>'
        + '</head><body>' + area.innerHTML + '</body></html>');
    win.document.close();
    win.focus();
    setTimeout(() => win.print(), 600);
}
function allDeclarationsChecked() {
    return (
        document.getElementById('declarationCheckbox1')?.checked &&
        document.getElementById('declarationCheckbox2')?.checked &&
        document.getElementById('declarationCheckbox3')?.checked &&
        document.getElementById('declarationCheckbox4')?.checked
    );
}
function resetSubmitBtn() {
    const btn = document.getElementById('submitBtn');
    const txt = document.getElementById('submitBtnText');
    const box = document.getElementById('conditionsBox');
    if (!btn) return;
    btn.classList.remove('bg-indigo-600','text-white','hover:bg-indigo-700','cursor-pointer');
    btn.classList.add('bg-gray-300','text-gray-500','cursor-not-allowed');
    btn.setAttribute('aria-disabled','true');
    if (txt) txt.textContent = '☐ Accept Declarations to Enable Submission';
    if (box) {
        box.classList.remove('border-green-500','bg-green-50','ring-2','ring-red-500');
        box.classList.add('border-red-400');
    }
}
function toggleSubmitBtn() {
    const btn  = document.getElementById('submitBtn');
    const txt  = document.getElementById('submitBtnText');
    const warn = document.getElementById('conditionsWarning');
    const box  = document.getElementById('conditionsBox');
    if (allDeclarationsChecked()) {
        btn.classList.remove('bg-gray-300','text-gray-500','cursor-not-allowed');
        btn.classList.add('bg-indigo-600','text-white','hover:bg-indigo-700','cursor-pointer');
        btn.removeAttribute('aria-disabled');
        if (txt)  txt.textContent = '✓ Confirm & Submit Application';
        if (warn) warn.classList.add('hidden');
        if (box) {
            box.classList.remove('border-red-400','ring-2','ring-red-500');
            box.classList.add('border-green-500','bg-green-50');
        }
    } else {
        resetSubmitBtn();
    }
}
function handleSubmit(btn) {
    const warn = document.getElementById('conditionsWarning');
    const box  = document.getElementById('conditionsBox');
    if (!allDeclarationsChecked()) {
        if (warn) warn.classList.remove('hidden');
        if (box) {
            box.classList.add('ring-2','ring-red-500');
            box.scrollIntoView({ behavior:'smooth', block:'center' });
            setTimeout(() => box.classList.remove('ring-2','ring-red-500'), 2500);
        }
        return;
    }
    btn.disabled = true;
    const txt = document.getElementById('submitBtnText');
    if (txt) txt.textContent = 'Submitting…';
    btn.classList.add('opacity-75','cursor-not-allowed');
    document.getElementById('applicationForm').submit();
}
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('reviewModal')?.addEventListener('click', function(e) {
        if (e.target === this) closeReviewModal();
    });
    document.addEventListener('click', function(e) {
        if (e.target.id && e.target.id.startsWith('appModal')) {
            closeAppModal(e.target.id.replace('appModal',''));
        }
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeReviewModal();
            document.querySelectorAll('[id^="appModal"]').forEach(el => {
                if (!el.classList.contains('hidden')) {
                    closeAppModal(el.id.replace('appModal',''));
                }
            });
        }
    });
});
</script>

@endsection