@extends('layouts.app')

@section('title', 'Create Invoice')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/invoice-create.css') }}">
@endpush

@section('content')

{{--
    Config element — passes Blade-rendered values to invoice-create.js
    without embedding them inside the JS file itself.
--}}
<div id="invoice-config" style="display:none"
     data-lookup-url="{{ auth()->user()->role === 'admin' ? url('/admin/applicant-lookup') : url('/reviewer/applicant-lookup') }}"
     data-calculate-url="{{ auth()->user()->role === 'admin' ? route('admin.invoice.calculate') : url('/reviewer/invoice/calculate') }}"
     data-csrf="{{ csrf_token() }}"
     data-prefill-id="{{ $prefillApplicantId ?? '' }}"
     data-prefill-vessel="{{ $prefillVesselSizeId ?? '' }}"
     data-old-user-id="{{ old('applicant_user_id', '') }}">
</div>

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

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

    <div class="invoice-card">

        {{-- ── VALIDATION ERRORS ── --}}
        @if($errors->any())
        <div class="alert alert-danger">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;margin-top:1px" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12" y2="16.5"/>
            </svg>
            <div>
                <strong>Please correct the following errors:</strong>
                <ul style="margin:.3rem 0 0 1rem;padding:0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
        @endif

        {{-- ── APPLICANT LOOKUP ── --}}
        <div class="lookup-strip">
            <div class="form-group">
                <label for="applicant_profiles_id">
                    Application ID
                    <span style="opacity:.6;font-weight:400">(enter to load application details)</span>
                </label>
                <input type="text"
                       id="applicant_profiles_id"
                       name="applicant_profiles_id"
                       class="form-control"
                       placeholder="e.g. 42 or APP-00042"
                       value="{{ old('applicant_profiles_id', $prefillApplicantId ?? '') }}"
                       autocomplete="off">
            </div>
            <button type="button" class="btn-lookup" id="lookupBtn">
                <div class="lookup-spinner" id="lookupSpinner"></div>
                <svg id="lookupIcon" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
                Look Up
            </button>
        </div>

        {{-- ── APPLICANT INFO CARD ── --}}
        <div class="applicant-info-card" id="applicantInfoCard">
            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0" id="applicantInfoIcon" viewBox="0 0 24 24">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                <circle cx="12" cy="7" r="4"/>
            </svg>
            <div class="applicant-info-grid" id="applicantInfoGrid"></div>
        </div>

        <form id="invoiceForm"
              method="POST"
              action="{{ auth()->user()->role === 'admin' ? route('admin.invoice.store') : url('/reviewer/invoice') }}">
            @csrf
            <input type="hidden" name="applicant_user_id"     id="applicant_user_id"     value="{{ old('applicant_user_id') }}">
            <input type="hidden" name="applicant_user_hidden"  id="applicant_user_hidden"  value="{{ old('applicant_user_hidden') }}">
            {{-- Hidden inputs for disabled checkboxes — populated by JS after lookup --}}
            <div id="hidden_harvesting_ids" style="display:none"></div>
            <div id="hidden_fish_ids"       style="display:none"></div>

            <div class="form-fields-wrapper" id="formFieldsWrapper">

                {{-- ══ SECTION 1: LICENSE DETAILS ══ --}}
                <div class="section-divider" style="margin-top:1.5rem">
                    <span>1 &nbsp;·&nbsp; License Details</span>
                    <span class="readonly-badge">
                        <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <rect x="3" y="11" width="18" height="11" rx="2"/>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                        </svg>
                        Read Only
                    </span>
                </div>

                <div class="section-readonly">
                    <div class="form-body">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="company_type">Company Type <span class="required">*</span></label>
                                <select id="company_type" name="company_type" class="form-control" required disabled>
                                    <option value="">— Auto-filled from profile —</option>
                                    <option value="local"        @selected(old('company_type') === 'local')>Local Company</option>
                                    <option value="foreign"      @selected(old('company_type') === 'foreign')>Foreign Company</option>
                                    <option value="semi-foreign" @selected(old('company_type') === 'semi-foreign')>Semi-Foreign Company</option>
                                </select>
                                <input type="hidden" name="company_type" id="company_type_hidden" value="{{ old('company_type') }}">
                            </div>
                            <div class="form-group">
                                <label for="duration">License Duration <span class="required">*</span></label>
                                <select id="duration" name="duration" class="form-control" required disabled>
                                    <option value="">— Select —</option>
                                    <option value="12months" @selected(old('duration') === '12months')>12 Months</option>
                                    <option value="6months"  @selected(old('duration') === '6months')>6 Months</option>
                                </select>
                                <input type="hidden" name="duration" id="duration_hidden" value="{{ old('duration') }}">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="vessel_size_id">Vessel Size</label>
                                <select id="vessel_size_id" name="vessel_size_id" class="form-control" disabled>
                                    <option value="">— None / Not Applicable —</option>
                                    @foreach($vesselSizes as $vs)
                                        <option value="{{ $vs->id }}" @selected(old('vessel_size_id', $prefillVesselSizeId ?? '') == $vs->id)>{{ $vs->label }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" name="vessel_size_id" id="vessel_size_id_hidden" value="{{ old('vessel_size_id', $prefillVesselSizeId ?? '') }}">
                            </div>
                            <div class="form-group">
                                <label for="due_date">Invoice Due Date</label>
                                <input type="date" id="due_date" name="due_date" class="form-control"
                                    value="{{ old('due_date', \Carbon\Carbon::now()->addDays(5)->format('Y-m-d')) }}">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label>Applicant Name</label>
                                <input type="text" id="display_name" class="form-control" readonly placeholder="Auto-filled after lookup">
                            </div>
                            <div class="form-group">
                                <label>Business Name</label>
                                <input type="text" id="display_business" class="form-control" readonly placeholder="Auto-filled after lookup">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label>Email</label>
                                <input type="text" id="display_email" class="form-control" readonly placeholder="Auto-filled after lookup">
                            </div>
                            <div class="form-group">
                                <label>License Type (from profile)</label>
                                <input type="text" id="display_license_type" class="form-control" readonly placeholder="Auto-filled after lookup">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ══ SECTION 2: HARVESTING METHODS ══ --}}
                <div class="section-divider">
                    <span>2 &nbsp;·&nbsp; Harvesting Methods</span>
                    <span class="readonly-badge">
                        <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <rect x="3" y="11" width="18" height="11" rx="2"/>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                        </svg>
                        Read Only
                    </span>
                </div>

                <div class="section-readonly">
                    <div class="form-body">
                        <div class="form-row full">
                            <div class="form-group">
                                <label>Select Applicable Harvesting Methods</label>
                                <div class="checkbox-grid" id="harvestingGrid">
                                    @foreach($harvestingMethods as $hm)
                                        @if(!in_array(strtolower(trim($hm->name)), ['others','other']))
                                            <label class="checkbox-item">
                                                <input type="checkbox"
                                                       value="{{ $hm->id }}"
                                                       class="fee-trigger harvesting-cb"
                                                       @checked(in_array($hm->id, old('harvesting_method_ids', [])))
                                                       disabled>
                                                {{ $hm->name }}
                                            </label>
                                        @endif
                                    @endforeach
                                    @foreach($harvestingMethods as $hm)
                                        @if(in_array(strtolower(trim($hm->name)), ['others','other']))
                                            <label class="checkbox-item">
                                                <input type="checkbox"
                                                       value="{{ $hm->id }}"
                                                       id="harvesting_others_cb"
                                                       class="fee-trigger harvesting-cb"
                                                       @checked(in_array($hm->id, old('harvesting_method_ids', [])))
                                                       disabled>
                                                {{ $hm->name }}
                                            </label>
                                        @endif
                                    @endforeach
                                </div>

                                <div class="other-container" id="harvesting_other_container">
                                    <p>Specify the harvesting method(s) — fee = "Others" base price &times; number of entries:</p>
                                    <div id="harvesting_other_list"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ══ SECTION 3: FISH FAMILIES ══ --}}
                <div class="section-divider">
                    <span>3 &nbsp;·&nbsp; Target Fish Families</span>
                    <span class="readonly-badge">
                        <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <rect x="3" y="11" width="18" height="11" rx="2"/>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                        </svg>
                        Read Only
                    </span>
                </div>

                <div class="section-readonly">
                    <div class="form-body">
                        <div class="form-row full">
                            <div class="form-group">
                                <label>Select Target Fish Families</label>
                                <div class="checkbox-grid" id="fishGrid">
                                    @foreach($fishFamilies as $ff)
                                        @if(!in_array(strtolower(trim($ff->name)), ['others','other']))
                                            <label class="checkbox-item">
                                                <input type="checkbox"
                                                       value="{{ $ff->id }}"
                                                       class="fee-trigger fish-cb"
                                                       @checked(in_array($ff->id, old('fish_family_ids', [])))
                                                       disabled>
                                                {{ $ff->name }}
                                            </label>
                                        @endif
                                    @endforeach
                                    @foreach($fishFamilies as $ff)
                                        @if(in_array(strtolower(trim($ff->name)), ['others','other']))
                                            <label class="checkbox-item">
                                                <input type="checkbox"
                                                       value="{{ $ff->id }}"
                                                       id="fish_others_cb"
                                                       class="fee-trigger fish-cb"
                                                       @checked(in_array($ff->id, old('fish_family_ids', [])))
                                                       disabled>
                                                {{ $ff->name }}
                                            </label>
                                        @endif
                                    @endforeach
                                </div>

                                <div class="other-container" id="fish_other_container">
                                    <p>Specify the fish family/families — fee = "Others" base price &times; number of entries:</p>
                                    <div id="fish_other_list"></div>
                                </div>
                            </div>
                        </div>

                        <div class="form-row full">
                            <div class="form-group">
                                <label for="notes">Notes / Special Instructions</label>
                                <textarea id="notes" name="notes" class="form-control" rows="3"
                                          placeholder="Optional notes for this invoice…"
                                          style="resize:vertical">{{ old('notes') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ══ FEE SUMMARY ══ --}}
                <div class="fee-summary" id="feeSummary" style="display:none">
                    <div class="fee-summary-header">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>
                        </svg>
                        Fee Breakdown (Live Estimate)
                    </div>
                    <div class="loading-indicator" id="loadingIndicator">
                        <div class="spinner"></div>
                        Calculating fees…
                    </div>
                    <table class="fee-table" id="feeTable">
                        <tbody>
                            <tr><td class="fee-label">Upfront Fee</td>           <td id="fee_upfront">$0.00</td></tr>
                            <tr><td class="fee-label">EIA Fee</td>               <td id="fee_eia">$0.00</td></tr>
                            <tr><td class="fee-label">Registration Fee</td>      <td id="fee_registration">$0.00</td></tr>
                            <tr><td class="fee-label">Recovery Fee</td>          <td id="fee_recovery">$0.00</td></tr>
                            <tr><td class="fee-label">Vessel Size Fee</td>       <td id="fee_vessel">$0.00</td></tr>
                            <tr id="row_harvesting"><td class="fee-label">Harvesting Methods Fee</td><td id="fee_harvesting">$0.00</td></tr>
                            <tr id="row_fish"><td class="fee-label">Fish Families Fee</td><td id="fee_fish">$0.00</td></tr>
                        </tbody>
                        <tfoot>
                            <tr class="fee-total-row">
                                <td>TOTAL AMOUNT DUE</td>
                                <td id="fee_total">$0.00</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

               {{-- ══ FORM FOOTER ══ --}}
                <div class="form-footer">
                    <a href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : route('reviewer.user.dashboard') }}"
                    class="btn btn-secondary">
                        ← Cancel
                    </a>

                    @if(isset($existingInvoice) && $existingInvoice)
                        {{-- Invoice already exists — show link instead of submit button --}}
                        <a href="{{ auth()->user()->role === 'admin'
                                    ? route('admin.invoice.show', $existingInvoice)
                                    : route('reviewer.invoice.show', $existingInvoice) }}"
                        class="btn btn-secondary"
                        style="background:#e2e8f0;color:#4a5568;cursor:default;pointer-events:none">
                            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                            </svg>
                            Invoice Already Generated
                        </a>
                        <a href="{{ auth()->user()->role === 'admin'
                                    ? route('admin.invoice.show', $existingInvoice)
                                    : route('reviewer.invoice.show', $existingInvoice) }}"
                        class="btn btn-primary">
                            View Invoice →
                        </a>
                    @else
                        <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                                <line x1="12" y1="18" x2="12" y2="12"/>
                                <line x1="9" y1="15" x2="15" y2="15"/>
                            </svg>
                            Generate Invoice
                        </button>
                    @endif
                </div>

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

@push('scripts')
<script src="{{ asset('js/invoice-create.js') }}"></script>
@endpush

@endsection