@extends('layouts.invoicetab')

@section('invoice_content')
<div class="container-fluid px-0">
    <div class="zits-page">
        <section class="zits-hero card border-0 shadow-sm overflow-hidden">
            <div class="card-body p-4 p-lg-5">
                <div class="row align-items-center g-4">
                    <div class="col-lg-8">
                        <span class="zits-chip">Faster Invoice Workspace</span>
                        <h2 class="mt-3 mb-2">ZITS Proforma</h2>
                        <p class="text-muted mb-0 zits-hero-copy">
                            A dedicated proforma invoicing workspace with all essential business features, designed for a faster, more streamlined experience.
                        </p>
                        <form class="zits-hero-search" method="GET" action="{{ route('zits-proforma-invoices.index') }}">
                            <i class="mdi mdi-magnify"></i>
                            <input type="search"
                                id="zitsInvoiceSearch"
                                name="search"
                                class="form-control"
                                value="{{ $search ?? '' }}"
                                placeholder="Search client, invoice number, status, or amount">
                            <button type="button" class="btn btn-light btn-sm {{ empty($search) ? 'd-none' : '' }}" id="zitsInvoiceSearchClear">
                                Clear
                            </button>
                            <button type="submit" class="btn btn-primary btn-sm">
                                Search
                            </button>
                        </form>
                    </div>
                    <div class="col-lg-4">
                        <div class="zits-hero-actions">
                            
                            <a class="btn btn-outline-dark btn-lg" href="{{ url('technologies') }}">
                                <i class="mdi mdi-layers-outline me-1"></i>Technologies
                            </a>
                            <a class="btn btn-outline-dark btn-lg" href="{{ url('managedesignation') }}">
                                <i class="mdi mdi-account-tie-outline me-1"></i>Resources
                            </a>
                            <button class="btn btn-primary btn-lg" data-bs-toggle="offcanvas" data-bs-target="#createInvoiceCanvas">
                                <i class="mdi mdi-plus-circle-outline me-1"></i>Create ZITS Proforma
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="row g-3 mt-1 mb-4">
            <div class="col-sm-6 col-xl-3">
                <div class="card border-0 shadow-sm zits-stat">
                    <div class="card-body">
                        <div class="zits-stat__label">Total Invoices</div>
                        <div class="zits-stat__value">{{ number_format($summary['totalInvoices']) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="card border-0 shadow-sm zits-stat">
                    <div class="card-body">
                        <div class="zits-stat__label">Active Clients</div>
                        <div class="zits-stat__value">{{ number_format($summary['totalClients']) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="card border-0 shadow-sm zits-stat">
                    <div class="card-body">
                        <div class="zits-stat__label">Draft Pending</div>
                        <div class="zits-stat__value">{{ number_format($summary['draftInvoices']) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="card border-0 shadow-sm zits-stat">
                    <div class="card-body">
                        <div class="zits-stat__label">Invoice Value</div>
                        <div class="zits-value-card">
                            <div class="zits-value-card__total">Rs. {{ number_format($summary['totalAmount'], 2) }}</div>
                            <div class="zits-value-card__approved">
                                <span>Approved</span>
                                <strong>Rs. {{ number_format($summary['approvedAmount'], 2) }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @if(session('success'))
            <div class="alert alert-success border-0 shadow-sm">{{ session('success') }}</div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger border-0 shadow-sm">{{ session('error') }}</div>
        @endif

        <div id="zitsInvoiceResults">
            <section class="card border-0 shadow-sm zits-workspace">
                <div class="card-body p-0">
                    <div class="zits-workspace__header">
                        <div>
                            <h5 class="mb-1">Client Invoice Groups</h5>
                            <p class="text-muted mb-0">Open one client at a time, review all invoices, and use quick actions from the same screen.</p>
                        </div>
                    </div>

                    <div class="accordion zits-accordion" id="clientInvoiceAccordion">
                    @forelse($clientPage as $clientGroup)
                        @php
                            $clientId = $clientGroup->client_id;
                            $clientInvoices = $groupedInvoices->get($clientId, collect());
                        @endphp

                        @if($clientInvoices->isEmpty())
                            @continue
                        @endif

                        @php
                            $clientName = $clientInvoices->first()->client->name ?? 'N/A';
                            $latestInvoice = $clientInvoices->first();
                            $clientTotal = $latestInvoice?->total_amount ?? 0;
                        @endphp

                        <div class="accordion-item border-0 zits-client-group">
                            <h2 class="accordion-header" id="heading-{{ $clientId }}">
                                <button class="accordion-button collapsed zits-accordion__button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $clientId }}">
                                    <span class="zits-accordion__identity">
                                        <span class="zits-avatar">{{ strtoupper(substr($clientName, 0, 1)) }}</span>
                                        <span>
                                            <strong>{{ $clientName }}</strong>
                                            <small>{{ $clientInvoices->count() }} invoices • Latest {{ optional(\Carbon\Carbon::parse($latestInvoice?->date))->format('d M Y') }}</small>
                                        </span>
                                    </span>
                                    <span class="zits-accordion__meta">
                                        <span class="badge rounded-pill {{ $latestInvoice?->status === 'approved' ? 'bg-label-success' : ($latestInvoice?->status === 'sent' ? 'bg-label-primary' : ($latestInvoice?->status === 'cancelled' ? 'bg-label-danger' : 'bg-label-warning')) }}">
                                            {{ ucfirst($latestInvoice?->status ?? 'draft') }}
                                        </span>
                                        <span class="badge text-bg-light">Rs. {{ number_format($clientTotal, 2) }}</span>
                                    </span>

                                </button>
                            </h2>

                            <div id="collapse-{{ $clientId }}" class="accordion-collapse collapse" data-bs-parent="#clientInvoiceAccordion">
                                <div class="accordion-body">
                                    <div class="zits-inline-note">
                                        After cloning, use <strong>Save Before Revised Record</strong> before making changes to the new record.
                                    </div>

                                    <div class="d-flex justify-content-end mb-3">
                                        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#cloneModal_{{ $clientId }}">
                                            <i class="mdi mdi-content-copy me-1"></i>Duplicate to Another Client
                                        </button>
                                    </div>

                                    <div class="table-responsive">
                                        <table class="table align-middle zits-table mb-0">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Invoice No</th>
                                                    <th>Date</th>
                                                    <th>Total</th>
                                                    <th>Status</th>
                                                    <th class="text-end">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($clientInvoices as $index => $invoice)
                                                    <tr class="zits-invoice-row">
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>
                                                            <div class="fw-semibold">{{ $invoice->invoice_number }}</div>
                                                        </td>
                                                        <td>{{ \Carbon\Carbon::parse($invoice->date)->format('d-m-Y') }}</td>
                                                        <td>Rs. {{ number_format($invoice->total_amount, 2) }}</td>
                                                        <td>
                                                            <span class="badge {{ $invoice->status === 'approved' ? 'text-bg-success' : ($invoice->status === 'sent' ? 'text-bg-primary' : ($invoice->status === 'cancelled' ? 'text-bg-danger' : 'text-bg-warning')) }}">
                                                                {{ ucfirst($invoice->status) }}
                                                            </span>
                                                        </td>
                                                        <td class="text-end">
                                                            <div class="zits-action-bar">
                                                                <a href="{{ route('zits-proforma-invoices.preview', $invoice->id) }}" class="btn btn-light btn-sm" title="Preview">
                                                                    <i class="mdi mdi-eye-outline"></i>
                                                                </a>
                                                                <a href="{{ route('zits-proforma-invoices.envelope', $invoice->id) }}" class="btn btn-light btn-sm" target="_blank" title="Envelope">
                                                                    <i class="mdi mdi-printer-outline"></i>
                                                                </a>
                                                                <button type="button"
                                                                    class="btn btn-light btn-sm open-edit-canvas"
                                                                    title="Edit"
                                                                    data-edit-url="{{ route('zits-proforma-invoices.edit', ['zits_proforma_invoice' => $invoice->id, 'partial' => 1]) }}"
                                                                    data-bs-toggle="offcanvas"
                                                                    data-bs-target="#editInvoiceCanvas">
                                                                    <i class="mdi mdi-file-edit-outline"></i>
                                                                </button>
                                                                <button type="button"
                                                                    class="btn btn-light btn-sm open-missing-modal"
                                                                    title="Add missing"
                                                                    data-client-id="{{ $invoice->client_id }}"
                                                                    data-invoice-id="{{ $invoice->id }}"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#missingItemsModal">
                                                                    <i class="mdi mdi-note-plus-outline"></i>
                                                                </button>
                                                                <button type="button" class="btn btn-light btn-sm open-scope-modal"
                                                                    title="Scope"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#scopeModal"
                                                                    data-url="{{ route('zits-proforma-invoices.scope-items', $invoice->id) }}"
                                                                    data-invoice-id="{{ $invoice->id }}"
                                                                    data-invoice-number="{{ $invoice->invoice_number }}">
                                                                    <i class="mdi mdi-rocket-launch-outline"></i>
                                                                </button>

                                                                @if (!$invoice->revisions_count)
                                                                    <form action="{{ route('zits-proforma-invoices.revise', $invoice->id) }}" method="POST" class="d-inline">
                                                                        @csrf
                                                                        <input type="hidden" name="date" value="{{ $invoice->date }}">
                                                                        <input type="hidden" name="client_id" value="{{ $invoice->client_id }}">
                                                                        <input type="hidden" name="total_amount" value="{{ $invoice->total_amount }}">
                                                                        <input type="hidden" name="remarks" value="{{ $invoice->remarks }}">
                                                                        <input type="hidden" name="technologies" value="{{ json_encode(json_decode($invoice->technologies, true)) }}">
                                                                        <button type="submit" class="btn btn-warning btn-sm" onclick="return confirm('Are you sure you want to save this as a revised record?')">
                                                                            Save Before Revised
                                                                        </button>
                                                                    </form>
                                                                @endif
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="cloneModal_{{ $clientId }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <form action="{{ route('zits-proforma-invoices.clone') }}" method="POST" class="modal-content border-0 shadow">
                                    @csrf
                                    <input type="hidden" name="source_client_id" value="{{ $clientId }}">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Duplicate Latest Invoice</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <label for="new_client_id_{{ $clientId }}" class="form-label">Select target client</label>
                                        <select class="form-select new-client-select"
                                            name="new_client_id"
                                            id="new_client_id_{{ $clientId }}"
                                            required>
                                            <option value="">Choose client</option>
                                            @foreach($clients as $client)
                                                @if($client->id != $clientId)
                                                    <option value="{{ $client->id }}" {{ old('new_client_id') == $client->id ? 'selected' : '' }}>
                                                        {{ $client->name }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-primary">Duplicate</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="p-4">
                            <div class="alert alert-info mb-0">
                                {{ !empty($search) ? 'No ZITS Proforma invoices matched your search.' : 'No ZITS Proforma invoices found.' }}
                            </div>
                        </div>
                    @endforelse
                    </div>
                </div>
            </section>

            @if(method_exists($clientPage, 'links'))
                <div class="mt-3 d-flex justify-content-end">
                    {{ $clientPage->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

<div class="modal fade" id="scopeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <form method="POST" action="{{ route('zits-proforma.scope.generate') }}" target="_blank" id="scopeForm" class="modal-content border-0 shadow">
            @csrf
            <input type="hidden" name="invoice_id" id="scope_invoice_id">
            <div class="modal-header">
                <h5 class="modal-title" id="scopeModalLabel">Select Scope Items</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="scopeModalBody">
                    <div class="text-muted">Loading scope items...</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Generate Scope PDF</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="missingItemsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <form id="missingItemForm" method="POST" action="{{ route('zits-proforma.missing.store') }}" class="modal-content border-0 shadow">
            @csrf
            <input type="hidden" name="proforma_invoice_id" id="missing_invoice_id">
            <div class="modal-header">
                <h5 class="modal-title">Add Missing Item or Designation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="client_id" id="missing_client_id">
                <div class="mb-3">
                    <label for="itemType" class="form-label">Select Type</label>
                    <select id="itemType" class="form-select" name="type" required>
                        <option value="">Select type</option>
                        <option value="module">Module</option>
                        <option value="other">Other Item</option>
                        <option value="designation">Designation</option>
                    </select>
                </div>
                <div id="missingItemFields" class="mt-3"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>

<div class="offcanvas offcanvas-end zits-offcanvas w-50" tabindex="-1" id="createInvoiceCanvas">
    <div class="offcanvas-header border-bottom">
        <div>
            <h5 class="mb-1">Create ZITS Proforma Invoice</h5>
            <small class="text-muted">A fresh screen built for the new workflow.</small>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        @include('zits_proforma_invoices._form', ['mode' => 'create'])
    </div>
</div>

<div class="offcanvas offcanvas-end zits-offcanvas w-50" tabindex="-1" id="editInvoiceCanvas">
    <div class="offcanvas-header border-bottom">
        <div>
            <h5 class="mb-1" id="editInvoiceCanvasTitle">Edit ZITS Proforma Invoice</h5>
            <small class="text-muted">Only this invoice form loads when you open edit.</small>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body" id="editInvoiceCanvasBody">
        <div class="text-muted">Loading invoice form...</div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
    .zits-page {
        --zits-bg: linear-gradient(135deg, #f7f2ea 0%, #eef4fb 55%, #f9fbff 100%);
        --zits-ink: #16324f;
        --zits-accent: #ca6b2c;
        --zits-accent-soft: #f7e4d6;
        --zits-line: #d8e1eb;
        --zits-surface: #ffffff;
    }

    .zits-hero {
        background: var(--zits-bg);
        border-radius: 24px;
    }

    .zits-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        color: var(--zits-ink);
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .zits-hero h2 {
        color: var(--zits-ink);
        font-size: 2.25rem;
        font-weight: 700;
    }

    .zits-hero-copy {
        max-width: 620px;
        font-size: 1rem;
    }

    .zits-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: flex-lg-end;
    }

    .zits-hero-search {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: 680px;
        margin-top: 22px;
        padding: 8px 10px 8px 14px;
        border: 1px solid rgba(22, 50, 79, 0.12);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 12px 30px rgba(22, 50, 79, 0.08);
    }

    .zits-hero-search i {
        color: #6c7a89;
        font-size: 1.25rem;
    }

    .zits-hero-search .form-control {
        border: 0;
        box-shadow: none;
        background: transparent;
        min-height: 42px;
        padding-left: 0;
    }

    .zits-stat {
        border-radius: 20px;
        height: 100%;
    }

    .zits-stat .card-body {
        min-height: 126px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .zits-stat__label {
        color: #6c7a89;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 10px;
    }

    .zits-stat__value {
        color: var(--zits-ink);
        font-size: 1.65rem;
        font-weight: 700;
    }

    .zits-value-card {
        display: grid;
        gap: 8px;
    }

    .zits-value-card__total {
        color: var(--zits-ink);
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .zits-value-card__approved {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 10px;
        border-radius: 999px;
        background: #ecf8f1;
        color: #23724a;
        font-size: 0.82rem;
    }

    .zits-value-card__approved span {
        font-weight: 700;
        text-transform: uppercase;
    }

    .zits-value-card__approved strong {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .zits-workspace {
        border-radius: 24px;
    }

    #zitsInvoiceResults {
        position: relative;
    }

    #zitsInvoiceResults.is-loading {
        opacity: 0.55;
        pointer-events: none;
        transition: opacity 0.18s ease;
    }

    .zits-workspace__header {
        padding: 24px 24px 0;
    }

    .zits-accordion {
        padding: 8px 16px 16px;
    }

    .zits-accordion .accordion-item {
        border-bottom: 1px solid var(--zits-line);
    }

    .zits-accordion .accordion-item:last-child {
        border-bottom: 0;
    }

    .zits-accordion__button {
        background: transparent;
        box-shadow: none;
        padding: 20px 12px;
    }

    .zits-accordion__identity {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .zits-accordion__identity small {
        display: block;
        color: #708090;
        margin-top: 4px;
    }

    .zits-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #e8f0fb;
        color: var(--zits-ink);
        font-weight: 700;
    }

    .zits-accordion__meta {
        margin-left: auto;
        margin-right: 18px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .zits-inline-note {
        margin-bottom: 16px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f7f9fc;
        color: #526170;
    }

    .zits-table thead th {
        background: #f5f8fb;
        border-bottom: 0;
        color: #5d6d7e;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .zits-table td,
    .zits-table th {
        padding: 14px 12px;
        vertical-align: middle;
    }

    .zits-action-bar {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .zits-offcanvas {
        width: min(1180px, 96vw);
        border-left: 0;
        background: #f5f8fb;
    }

    .zits-offcanvas .offcanvas-header {
        position: sticky;
        top: 0;
        z-index: 4;
        background: #ffffff;
        padding: 22px 28px;
    }

    .zits-offcanvas .offcanvas-body {
        padding: 24px 28px 0;
        overflow-x: hidden;
    }

    .zits-offcanvas .btn-close {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background-color: #f3f6fa;
        opacity: 1;
    }

    .zits-form-shell {
        display: grid;
        gap: 20px;
        max-width: 1080px;
        margin: 0 auto;
    }

    .zits-form-card {
        background: #fff;
        border: 1px solid var(--zits-line);
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 10px 26px rgba(22, 50, 79, 0.05);
    }

    .zits-form-card__header {
        margin-bottom: 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid #edf2f7;
    }

    .zits-form-card__header--space {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

    .zits-form .form-label {
        color: #435568;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .zits-form .form-control,
    .zits-form .form-select {
        min-height: 42px;
        border-color: #d7e1ec;
        border-radius: 10px;
    }

    .zits-form .module-select {
        min-height: 46px;
        white-space: normal;
        text-overflow: clip;
    }

    .zits-client-combobox {
        position: relative;
    }

    .zits-client-options {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 20;
        max-height: 240px;
        overflow-y: auto;
        padding: 8px;
        border: 1px solid #d7e1ec;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 16px 34px rgba(22, 50, 79, 0.14);
    }

    .zits-client-option {
        display: block;
        width: 100%;
        padding: 9px 10px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #2d4054;
        text-align: left;
    }

    .zits-client-option:hover,
    .zits-client-option:focus {
        background: #eef5fc;
        color: var(--zits-ink);
        outline: none;
    }

    .zits-line-item {
        border: 1px solid #dce6f1;
        border-radius: 14px;
        background: #fafcff;
        padding: 18px;
        margin-bottom: 14px;
    }

    .zits-line-item--soft {
        background: #fbfcf8;
    }

    .items-empty-state {
        border: 1px dashed #c9d6e4;
        border-radius: 14px;
        padding: 18px;
        color: #708090;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .items-empty-state i {
        font-size: 1.4rem;
    }

    .zits-technology-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 10px 16px;
        max-height: 220px;
        overflow-y: auto;
        padding: 30px;
        border: 1px solid #d8e2ee;
        border-radius: 14px;
        background: #fff;
    }

    .zits-technology-list .form-check {
        min-height: 34px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 10px;
    }

    .zits-technology-list .form-check:hover {
        background: #f5f8fb;
    }

    .zits-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin: 4px -28px 0;
        padding: 16px 28px;
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #dfe8f2;
        box-shadow: 0 -10px 24px rgba(22, 50, 79, 0.08);
    }

    @media (max-width: 991.98px) {
        .zits-offcanvas {
            width: 100vw;
        }

        .zits-offcanvas .offcanvas-header,
        .zits-offcanvas .offcanvas-body {
            padding-left: 16px;
            padding-right: 16px;
        }

        .zits-hero h2 {
            font-size: 1.85rem;
        }

        .zits-form-card__header--space {
            flex-direction: column;
        }

        .zits-action-bar {
            justify-content: flex-start;
        }

        .zits-form-card {
            padding: 18px;
        }

        .zits-form-actions {
            margin-left: -16px;
            margin-right: -16px;
            padding-left: 16px;
            padding-right: 16px;
        }
    }
</style>

<script>
    window.availableDesignations = @json($designations);
    window.availableModulesData = @json($modules->values());
    window.clientModulesLookup = @json($clientModules->map(fn ($group) => $group->values()));

    (function () {
        function initializeSelectPickers(container) {
            return container;
        }

        function initializeOffcanvasForm(container) {
            const form = container.find('.invoice-form');
            if (!form.length) {
                return;
            }

            initializeSelectPickers(form);
            setupInvoiceFormEvents(form);

            setTimeout(function () {
                initializeSelectPickers(form);
            }, 100);
        }

        function updateEmptyState(form) {
            const emptyState = form.find('.items-empty-state');
            const rows = form.find('.item-row');
            if (rows.length) {
                emptyState.addClass('d-none');
            } else {
                emptyState.removeClass('d-none');
            }
        }

        function setupInvoiceFormEvents(form) {
            if (form.data('zitsFormBound')) {
                form.removeData('zitsFormBound');
            }

            let itemIndex = form.find('.item-row').length || 0;
            let designationIndex = form.find('.designation-row').length || 0;
            let availableModules = form.data('available-modules') || [];
            const availableDesignations = window.availableDesignations || [];
            const modulesUrlTemplate = form.data('modules-url-template');
            const clientModulesLookup = window.clientModulesLookup || {};

            function updateModuleDropdowns() {
                const selectedModules = [];
                form.find('select[name^="items"][name$="[module_id]"]').each(function () {
                    const val = $(this).val();
                    if (val && val !== 'other') {
                        selectedModules.push(String(val));
                    }
                });

                form.find('select[name^="items"][name$="[module_id]"]').each(function () {
                    const currentSelect = $(this);
                    const currentVal = String(currentSelect.val() || '');
                    currentSelect.find('option').each(function () {
                        const optionVal = String($(this).val() || '');
                        if (!optionVal || optionVal === currentVal) {
                            $(this).prop('disabled', false);
                            return;
                        }
                        $(this).prop('disabled', selectedModules.includes(optionVal));
                    });
                });
            }

            function addItemRow() {
                if (!availableModules.length) {
                    alert('Please select a client to load modules first.');
                    return;
                }

                const itemRow = $(`
                    <div class="item-row zits-line-item" data-index="${itemIndex}">
                        <div class="row g-3 align-items-end">
                            <div class="col-lg-8 col-md-7">
                                <label class="form-label">Module</label>
                                <select name="items[${itemIndex}][module_id]" class="form-select module-select" required>
                                    <option value="">Select module</option>
                                    ${availableModules.map(module => `<option value="${module.id}" title="${module.name}">${module.name}</option>`).join('')}
                                </select>
                                <input type="hidden" name="items[${itemIndex}][type]" value="module">
                            </div>
                            <div class="col-lg-2 col-md-3">
                                <label class="form-label">Price</label>
                                <input type="number" step="0.01" min="0" name="items[${itemIndex}][price]" class="form-control" value="0" required>
                            </div>
                            <div class="col-lg-2 col-md-2">
                                <button type="button" class="btn btn-outline-danger w-100 remove-item">Remove</button>
                            </div>
                        </div>
                    </div>
                `);

                form.find('.items-container').append(itemRow);
                itemRow.find('.module-select').on('change', updateModuleDropdowns);
                itemIndex++;
                updateEmptyState(form);
                updateModuleDropdowns();
            }

            function addOtherItemRow() {
                const otherIndex = itemIndex++;
                const otherItemRow = $(`
                    <div class="item-row zits-line-item" data-index="${otherIndex}">
                        <div class="row g-3 align-items-end">
                            <div class="col-lg-8 col-md-7">
                                <label class="form-label">Custom Item</label>
                                <input type="text" name="items[${otherIndex}][custom_module]" class="form-control" required>
                                <input type="hidden" name="items[${otherIndex}][type]" value="other">
                            </div>
                            <div class="col-lg-2 col-md-3">
                                <label class="form-label">Price</label>
                                <input type="number" step="0.01" min="0" name="items[${otherIndex}][price]" class="form-control" value="0" required>
                            </div>
                            <div class="col-lg-2 col-md-2">
                                <button type="button" class="btn btn-outline-danger w-100 remove-item">Remove</button>
                            </div>
                        </div>
                    </div>
                `);

                form.find('.items-container').append(otherItemRow);
                updateEmptyState(form);
            }

            function addDesignationRow() {
                const options = availableDesignations.map(designation => (
                    `<option value="${designation.name}">${designation.name}</option>`
                )).join('');

                const designationRow = $(`
                    <div class="designation-row zits-line-item zits-line-item--soft">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-7">
                                <label class="form-label">Designation</label>
                                <select name="designations[${designationIndex}][designation]" class="form-select" required>
                                    <option value="">Select designation</option>
                                    ${options}
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Count</label>
                                <input type="number" min="1" name="designations[${designationIndex}][count]" class="form-control" value="1" required>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-outline-danger w-100 remove-designation">Remove</button>
                            </div>
                        </div>
                    </div>
                `);

                form.find('.designation-container').append(designationRow);
                designationIndex++;
            }

            function loadModulesForClient(clientId, shouldSeedFirstRow) {
                if (!clientId || !modulesUrlTemplate) {
                    return;
                }

                const localModules = clientModulesLookup[String(clientId)] || clientModulesLookup[clientId] || [];
                if (Array.isArray(localModules) && localModules.length) {
                    availableModules = localModules;
                    form.data('available-modules', availableModules);

                    if (shouldSeedFirstRow) {
                        form.find('.items-container').empty();
                        itemIndex = 0;
                        addItemRow();
                    }

                    updateModuleDropdowns();
                    return;
                }

                const loading = form.find('.module-loading');
                loading.removeClass('d-none');

                $.get(modulesUrlTemplate.replace('__CLIENT__', clientId), function (data) {
                    availableModules = Array.isArray(data) ? data : [];
                    form.data('available-modules', availableModules);

                    if (shouldSeedFirstRow) {
                        form.find('.items-container').empty();
                        itemIndex = 0;
                        if (availableModules.length) {
                            addItemRow();
                        } else {
                            updateEmptyState(form);
                        }
                    }
                }).fail(function () {
                    alert('Failed to load modules for the selected client.');
                }).always(function () {
                    loading.addClass('d-none');
                    updateModuleDropdowns();
                });
            }

            function bindClientSearch() {
                form.find('.zits-client-combobox').each(function () {
                    const combobox = $(this);
                    const input = combobox.find('.client-search-input');
                    const hiddenInput = combobox.find('.client-select');
                    const optionsBox = combobox.find('.zits-client-options');
                    const options = combobox.find('.zits-client-option');

                    function filterOptions() {
                        const term = input.val().toString().trim().toLowerCase();
                        let visibleCount = 0;

                        options.each(function () {
                            const option = $(this);
                            const matches = option.data('client-name').toString().toLowerCase().includes(term);
                            option.toggle(matches);
                            if (matches) {
                                visibleCount++;
                            }
                        });

                        optionsBox.toggleClass('d-none', visibleCount === 0);
                    }

                    input.off('.zitsClient').on('focus.zitsClient input.zitsClient', function () {
                        hiddenInput.val('');
                        filterOptions();
                    });

                    options.off('.zitsClient').on('click.zitsClient', function () {
                        const option = $(this);
                        input.val(option.data('client-name'));
                        hiddenInput.val(option.data('client-id')).trigger('change');
                        optionsBox.addClass('d-none');
                    });
                });
            }

            form.find('.add-item-btn').off('.zits');
            form.find('.add-other-item-btn').off('.zits');
            form.find('.add-designation').off('.zits');
            form.find('.client-select').off('.zits');
            form.find('.module-select').off('.zits');
            form.find('.client-search-input').off('.zitsClient');
            form.find('.zits-client-option').off('.zitsClient');
            form.off('click.zits', '.remove-item');
            form.off('click.zits', '.remove-designation');

            form.on('click.zits', '.remove-item', function () {
                $(this).closest('.item-row').remove();
                updateEmptyState(form);
                updateModuleDropdowns();
            });

            form.on('click.zits', '.remove-designation', function () {
                $(this).closest('.designation-row').remove();
            });

            form.find('.add-item-btn').on('click.zits', addItemRow);
            form.find('.add-other-item-btn').on('click.zits', addOtherItemRow);
            form.find('.add-designation').on('click.zits', addDesignationRow);
            form.find('.module-select').on('change.zits', updateModuleDropdowns);

            form.find('.client-select').on('change.zits', function () {
                loadModulesForClient($(this).val(), true);
            });

            bindClientSearch();
            updateEmptyState(form);
            updateModuleDropdowns();
            if (form.find('.client-select').length && form.find('.client-select').val() && form.find('.item-row').length === 0) {
                loadModulesForClient(form.find('.client-select').val(), true);
            }
            form.data('zitsFormBound', true);
        }

        function renderMissingItemFields(type, clientId) {
            const itemIndex = Date.now();
            let html = '';
            const modules = (window.availableModulesData || []).filter(module => {
                const currentClientId = module.activity ? parseInt(module.activity.client, 10) : null;
                return currentClientId === parseInt(clientId, 10);
            });

            if (type === 'module') {
                html = `
                    <div class="mb-3">
                        <label class="form-label">Module</label>
                        <select name="items[${itemIndex}][module_id]" class="form-select" required>
                            <option value="">Select module</option>
                            ${modules.map(module => `<option value="${module.id}">${module.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <input type="text" name="items[${itemIndex}][description]" class="form-control" required>
                    </div>
                    <input type="hidden" name="items[${itemIndex}][quantity]" value="1">
                    <div class="mb-3">
                        <label class="form-label">Rate</label>
                        <input type="number" step="0.01" name="items[${itemIndex}][rate]" class="form-control" required>
                    </div>
                `;
            } else if (type === 'other') {
                html = `
                    <div class="mb-3">
                        <label class="form-label">Custom Title</label>
                        <input type="text" name="items[${itemIndex}][custom_module]" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <input type="text" name="items[${itemIndex}][description]" class="form-control" required>
                    </div>
                    <input type="hidden" name="items[${itemIndex}][quantity]" value="1">
                    <div class="mb-3">
                        <label class="form-label">Rate</label>
                        <input type="number" step="0.01" name="items[${itemIndex}][rate]" class="form-control" required>
                    </div>
                `;
            } else if (type === 'designation') {
                html = `
                    <div class="mb-3">
                        <label class="form-label">Designation</label>
                        <select name="items[${itemIndex}][designation_id]" class="form-select" required>
                            ${window.availableDesignations.map(designation => `<option value="${designation.id}">${designation.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Count</label>
                        <input type="number" min="1" name="items[${itemIndex}][count]" class="form-control" value="1" required>
                    </div>
                `;
            }

            $('#missingItemFields').html(html);
        }

        window.renderMissingItemFields = renderMissingItemFields;
        window.initializeSelectPickers = initializeSelectPickers;
        window.setupInvoiceFormEvents = setupInvoiceFormEvents;

        $(document).ready(function () {
            initializeSelectPickers($(document.body));

            $('.invoice-form').each(function () {
                setupInvoiceFormEvents($(this));
            });

            $(document).on('click', '.open-edit-canvas', function () {
                const url = $(this).data('edit-url');
                const body = $('#editInvoiceCanvasBody');
                const title = $('#editInvoiceCanvasTitle');
                const invoiceNumber = $(this).closest('tr').find('td:nth-child(2)').text().trim();

                body.html('<div class="text-muted">Loading invoice form...</div>');
                title.text(`Edit ZITS Proforma Invoice #${invoiceNumber}`);

                $.get(url, function (html) {
                    body.html(html);
                    initializeOffcanvasForm(body);
                }).fail(function () {
                    body.html('<div class="alert alert-danger mb-0">Unable to load the invoice form.</div>');
                });
            });

            $(document).on('click', function (event) {
                if (!$(event.target).closest('.zits-client-combobox').length) {
                    $('.zits-client-options').addClass('d-none');
                }
            });

            $('#missingItemsModal').on('show.bs.modal', function (event) {
                const button = $(event.relatedTarget);
                $('#missing_invoice_id').val(button.data('invoice-id'));
                $('#missing_client_id').val(button.data('client-id'));
                $('#itemType').val('');
                $('#missingItemFields').empty();
            });

            $('#itemType').on('change', function () {
                renderMissingItemFields(this.value, $('#missing_client_id').val());
            });

            $('#scopeModal').on('show.bs.modal', function (event) {
                const button = $(event.relatedTarget);
                if (!button.length) {
                    return;
                }

                const url = button.data('url');
                const invoiceId = button.data('invoice-id');
                const invoiceNumber = button.data('invoice-number');

                $('#scope_invoice_id').val(invoiceId);
                $('#scopeModalLabel').text(`Select Scope Items for ${invoiceNumber}`);
                $('#scopeModalBody').html('<div class="text-muted">Loading scope items...</div>');

                $.get(url, function (response) {
                    if (!response.items || response.items.length === 0) {
                        $('#scopeModalBody').html('<div class="text-muted">No scope items found for this invoice.</div>');
                        return;
                    }

                    const itemsHtml = response.items.map(item => `
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" name="items[]" value="${item.id}" id="scopeSwitch_${item.id}" checked>
                            <label class="form-check-label" for="scopeSwitch_${item.id}">${item.label}</label>
                        </div>
                    `).join('');

                    $('#scopeModalBody').html(itemsHtml);
                }).fail(function () {
                    $('#scopeModalBody').html('<div class="text-danger">Failed to load scope items.</div>');
                });
            });

            const searchForm = $('.zits-hero-search');
            const searchInput = $('#zitsInvoiceSearch');
            const searchClear = $('#zitsInvoiceSearchClear');
            const resultsContainer = $('#zitsInvoiceResults');
            let searchTimer = null;
            let latestSearchRequest = 0;

            function fetchInvoiceResults(url, pushState = true) {
                const requestId = ++latestSearchRequest;
                resultsContainer.addClass('is-loading');

                $.get(url, function (html) {
                    if (requestId !== latestSearchRequest) {
                        return;
                    }

                    const parsed = $('<div>').append($.parseHTML(html));
                    const nextResults = parsed.find('#zitsInvoiceResults').html();

                    if (nextResults === undefined) {
                        window.location.href = url;
                        return;
                    }

                    resultsContainer.html(nextResults);

                    if (pushState) {
                        window.history.pushState({ zitsSearchUrl: url }, '', url);
                    }
                }).fail(function () {
                    window.location.href = url;
                }).always(function () {
                    if (requestId === latestSearchRequest) {
                        resultsContainer.removeClass('is-loading');
                    }
                });
            }

            function searchUrl() {
                const params = new URLSearchParams();
                const value = searchInput.val().toString().trim();

                searchClear.toggleClass('d-none', !value);

                if (value) {
                    params.set('search', value);
                }

                const queryString = params.toString();
                return searchForm.attr('action') + (queryString ? `?${queryString}` : '');
            }

            searchForm.on('submit', function (event) {
                event.preventDefault();
                fetchInvoiceResults(searchUrl());
            });

            searchInput.on('input', function () {
                clearTimeout(searchTimer);
                searchClear.toggleClass('d-none', !$(this).val().toString().trim());
                searchTimer = setTimeout(function () {
                    fetchInvoiceResults(searchUrl());
                }, 450);
            });

            searchClear.on('click', function () {
                searchInput.val('');
                searchClear.addClass('d-none');
                fetchInvoiceResults(searchForm.attr('action'));
                searchInput.trigger('focus');
            });

            $(document).on('click', '#zitsInvoiceResults .pagination a', function (event) {
                event.preventDefault();
                fetchInvoiceResults($(this).attr('href'));
            });

            window.addEventListener('popstate', function () {
                const currentUrl = window.location.href;
                const currentParams = new URL(currentUrl).searchParams;
                searchInput.val(currentParams.get('search') || '');
                fetchInvoiceResults(currentUrl, false);
            });

            const createOffcanvas = document.getElementById('createInvoiceCanvas');
            if (createOffcanvas) {
                createOffcanvas.addEventListener('show.bs.offcanvas', function () {
                    const form = $(createOffcanvas).find('.invoice-form');
                    if (!form.length) {
                        return;
                    }

                    form[0].reset();
                    form.find('.items-container').empty();
                    form.find('.designation-container').empty();
                    form.find('.items-empty-state').removeClass('d-none');
                    form.find('.client-select').val('');
                    form.find('.client-search-input').val('');
                    form.find('[name="status"]').val('draft');
                    form.find('[name="remarks"]').val('');
                    form.find('[name="technologies[]"]').prop('checked', false);
                    initializeSelectPickers(form);
                });

            createOffcanvas.addEventListener('shown.bs.offcanvas', function () {
                const form = $(createOffcanvas).find('.invoice-form');
                initializeSelectPickers(form);
                setupInvoiceFormEvents(form);
                setTimeout(function () {
                    initializeSelectPickers(form);
                }, 50);
            });
            }

            const editOffcanvas = document.getElementById('editInvoiceCanvas');
            if (editOffcanvas) {
                editOffcanvas.addEventListener('shown.bs.offcanvas', function () {
                    initializeOffcanvasForm($(editOffcanvas));
                });
            }
        });
    })();
</script>
@endsection