@extends('layouts.master')

@section('title', 'Client Invoice - ')

@section('content')
@php
$PermissionsAdd = Auth::check() ? Auth::user()->hasFeaturePermission('client-invoices', 'add') : false;
$PermissionsEdit = Auth::check() ? Auth::user()->hasFeaturePermission('client-invoices', 'edit') : false;
$PermissionsDelete = Auth::check() ? Auth::user()->hasFeaturePermission('client-invoices', 'delete') : false;
$PermissionsPrint = Auth::check() ? Auth::user()->hasFeaturePermission('client-invoices', 'print') : false;
@endphp

<style>
    /* Modern UI Enhancements */
    body {
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        min-height: 100vh;
    }

    .container-fluid {
        animation: fadeInUp 0.8s ease forwards;
        opacity: 0;
        transform: translateY(20px);
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Enhanced Page Heading */
    .page-heading {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        color: white;
        padding: 20px;
        border-radius: 15px;
        margin-bottom: 30px;
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
        animation: slideInLeft 0.6s ease forwards;
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .page-heading h1 {
        margin: 0;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    /* Enhanced Cards */
    .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    }

    .card-header {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-bottom: 2px solid #e2e8f0;
        padding: 20px;
    }

    .card-header h6 {
        color: #1e293b;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .card-header h6::before {
        content: "📋";
        font-size: 1.2em;
    }

    .card-body {
        padding: 25px;
    }

    /* Enhanced Form Styling */
    .form-group {
        margin-bottom: 20px;
        position: relative;
    }

    .form-group label {
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-control {
        border: 2px solid #e5e7eb;
        border-radius: 10px;
        padding: 12px 15px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: #f9fafb;
    }

    .form-control:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background: white;
        transform: translateY(-2px);
    }

    .form-control::placeholder {
        color: #9ca3af;
    }

    /* Form Icons */
    .form-group::before {
        content: "";
        position: absolute;
        right: 15px;
        top: 45px;
        width: 20px;
        height: 20px;
        opacity: 0.5;
        pointer-events: none;
    }

    .form-group:nth-child(1)::before { content: "👤"; } /* Client */
    .form-group:nth-child(2)::before { content: "📄"; } /* Invoice Number */
    .form-group:nth-child(3)::before { content: "📅"; } /* Date */
    .form-group:nth-child(4)::before { content: "⚖️"; } /* Case Reference */
    .form-group:nth-child(5)::before { content: "💼"; } /* Description */
    .form-group:nth-child(6)::before { content: "👨‍⚖️"; } /* Lawyer */
    .form-group:nth-child(7)::before { content: "📝"; } /* Narration */
    .form-group:nth-child(8)::before { content: "🏷️"; } /* GL Account */
    .form-group:nth-child(9)::before { content: "💰"; } /* Tax */
    .form-group:nth-child(10)::before { content: "🏷️"; } /* Discount */
    .form-group:nth-child(11)::before { content: "💵"; } /* Price */
    .form-group:nth-child(12)::before { content: "⏱️"; } /* Quantity */
    .form-group:nth-child(13)::before { content: "💱"; } /* Currency */
    .form-group:nth-child(14)::before { content: "📊"; } /* Disbursements */

    /* Enhanced Buttons */
    .btn {
        border-radius: 10px;
        font-weight: 600;
        padding: 12px 24px;
        transition: all 0.3s ease;
        border: none;
        position: relative;
        overflow: hidden;
    }

    .btn-primary {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
    }

    .btn-secondary {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
    }

    .btn-secondary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(107, 114, 128, 0.6);
    }

    .btn-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    }

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    }

    /* Enhanced Table */
    .table {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .table thead th {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        color: white;
        border: none;
        padding: 15px 10px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .table tbody tr {
        transition: all 0.3s ease;
        border-bottom: 1px solid #f1f5f9;
    }

    .table tbody tr:hover {
        background: #f0f9ff;
        transform: scale(1.01);
    }

    .table tbody td {
        padding: 12px 10px;
        vertical-align: middle;
        border: none;
    }

    /* Action Buttons */
    .btn-circle {
        border-radius: 50%;
        width: 35px;
        height: 35px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        margin: 0 2px;
    }

    .btn-circle:hover {
        transform: scale(1.1);
    }

    /* Enhanced Alerts */
    .alert {
        border-radius: 10px;
        border: none;
        padding: 15px 20px;
        margin-bottom: 20px;
        animation: slideInRight 0.5s ease forwards;
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .alert-success {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        color: #166534;
        border-left: 4px solid #16a34a;
    }

    /* Totals Section */
    .totals-card {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        color: white;
        border-radius: 15px;
        padding: 20px;
        margin-top: 20px;
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    }

    .totals-card p {
        margin: 5px 0;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
    }

    .totals-card .total-label {
        opacity: 0.9;
    }

    .totals-card .total-value {
        font-weight: 700;
        font-size: 1.1em;
    }

    /* Modal Enhancements */
    .modal-content {
        border-radius: 15px;
        border: none;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }

    .modal-header {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
        border-bottom: none;
        border-radius: 15px 15px 0 0;
        padding: 20px;
    }

    .modal-body {
        padding: 25px;
        font-size: 16px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .container-fluid {
            padding: 15px;
        }

        .page-heading {
            padding: 15px;
            margin-bottom: 20px;
        }

        .card-body {
            padding: 15px;
        }

        .table-responsive {
            font-size: 12px;
        }

        .table thead th,
        .table tbody td {
            padding: 8px 5px;
        }

        .btn {
            padding: 10px 20px;
            font-size: 14px;
        }

        .totals-card {
            padding: 15px;
        }

        .totals-card p {
            font-size: 14px;
        }
    }

    /* Loading States */
    .loading {
        position: relative;
        pointer-events: none;
        opacity: 0.6;
    }

    .loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid #3b82f6;
        border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Tooltips */
    .tooltip-inner {
        background: #1e40af;
        border-radius: 8px;
        font-size: 12px;
    }

    .tooltip.bs-tooltip-top .arrow::before {
        border-top-color: #1e40af;
    }
</style>

<div class="container-fluid">
    <!-- Enhanced Page Heading -->
    <div class="page-heading">
        <h1>Client Invoice Management</h1>
    </div>

    <!-- Form Section - Full Width -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card shadow mb-4">
                <!-- Card Header -->
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary" id="formHeader">Process Invoice</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success" id="successMessage" style="margin: 20px;">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="form-group" id="errorMessage" style="margin: 20px;">
                            <div class="card bg-warning text-white shadow">
                                <div class="card-body">
                                    @foreach ($errors->all() as $error)
                                        <div style="color: red;">{{ $error }}</div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif

                    <form class="card-body" action="{{ route('modules.processing.client-invoice.store') }}" method="post" id="invoiceForm">
                        @csrf
                        <input type="hidden" name="_method" id="_method" value="POST">
                        <input type="hidden" id="invoiceId" name="id" value="">
                        <input type="hidden" name="source" value="client-invoice">

                        <div class="row">
                            <div class="col-md-6">
                                @php
                                    $oldClientId = old('client_id');
                                    $oldClientName = '';
                                    if ($oldClientId) {
                                        $matchedClient = $clients->firstWhere('id', (int) $oldClientId);
                                        $oldClientName = $matchedClient
                                            ? ($matchedClient->full_name ?? ($matchedClient->client_name ?? trim(($matchedClient->first_name ?? '') . ' ' . ($matchedClient->last_name ?? ''))))
                                            : '';
                                    }
                                @endphp
                                <div class="form-group">
                                    <label for="client_search">Select / Enter Client Name</label>
                                    <div class="position-relative">
                                        <input
                                            type="text"
                                            class="form-control form-control-user"
                                            id="client_search"
                                            name="client_search"
                                            placeholder="Search client"
                                            autocomplete="off"
                                            value="{{ old('client_search', $oldClientName) }}"
                                            required
                                        >
                                        <input type="hidden" id="client_id" name="client_id" value="{{ old('client_id') }}" required>
                                        <div id="client_suggestions" class="list-group position-absolute w-100 shadow-sm" style="z-index: 20; max-height: 220px; overflow-y: auto; display: none;"></div>
                                    </div>
                                    <small class="text-muted d-block mt-1">Start typing to search and select a client.</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="invoice_number">Invoice Number</label>
                                    <input type="text" class="form-control form-control-user" id="invoice_number" placeholder="e.g. INV-20250926-162120" name="invoice_number" value="{{ old('invoice_number', $nextInvoiceNumber ?? ('INV-' . now()->format('Ymd-His'))) }}" data-default="{{ old('invoice_number', $nextInvoiceNumber ?? ('INV-' . now()->format('Ymd-His'))) }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="invoice_date">Date of Invoice</label>
                                    <input type="date" class="form-control form-control-user" id="invoice_date" placeholder="26/09/2025" name="invoice_date" value="{{ old('invoice_date', now()->format('Y-m-d')) }}" data-default="{{ old('invoice_date', now()->format('Y-m-d')) }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="case_reference">Matter Reference</label>
                                    <select class="form-control form-control-user" id="case_reference" name="case_reference" required>
                                        <option value="" disabled selected>Select Matter</option>
                                        @foreach ($matters as $matter)
                                            @php
                                                $matterClientIds = $matter->clients?->pluck('id') ?? [];
                                                $matterLawyers = $matter->lawyers->map(function ($lawyer) {
                                                    return [
                                                        'id' => $lawyer->id,
                                                        'name' => $lawyer->name,
                                                        'is_lead' => (bool) ($lawyer->pivot->is_lead_lawyer ?? false),
                                                    ];
                                                })->values();
                                            @endphp
                                            <option value="{{ $matter->matter_number }}"
                                                data-matter-id="{{ $matter->id }}"
                                                data-case-id="{{ $matter->case_id ?? '' }}"
                                                data-client-ids='@json($matterClientIds)'
                                                data-lawyers='@json($matterLawyers)'>
                                                {{ $matter->matter_number }} - {{ $matter->matter_title }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" id="matter_id" name="matter_id" value="{{ old('matter_id') }}">
                                    <input type="hidden" id="case_id" name="case_id" value="{{ old('case_id') }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="description">Description of Legal Services</label>
                                    <input type="text" class="form-control form-control-user" id="description" placeholder="(e.g. Consultation, Contract Drafting, Court Appearance)" name="description" value="{{ old('description') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="responsible_lawyer">Responsible Lawyer / Partner</label>
                                    <input type="text" class="form-control form-control-user" id="responsible_lawyer" placeholder="(Name of solicitor handling the matter)" name="responsible_lawyer" value="{{ old('responsible_lawyer') }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="narration">Narration / Additional Notes</label>
                                    <input type="text" class="form-control form-control-user" id="narration" placeholder="(Optional remarks on service provided)" name="narration" value="{{ old('narration') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="gl_account">Billing Category / GL Account</label>
                                    <select class="form-control form-control-user" id="gl_account" name="gl_account" required>
                                        <option value="" disabled selected>(Professional Fees, Disbursements, Court Costs, etc.)</option>
                                        @if(isset($groupedGlAccounts) && $groupedGlAccounts->count() > 0)
                                            @foreach($groupedGlAccounts as $category => $accounts)
                                                <optgroup label="{{ $category }}">
                                                    @foreach($accounts as $gl)
                                                        <option value="{{ $gl->code }}">{{ $gl->code . ' - ' . $gl->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        @else
                                            @foreach ($glAccounts as $gl)
                                                <option value="{{ $gl->code }}">{{ $gl->code . ' - ' . $gl->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Invoice Status</label>
                                    <select class="form-control form-control-user" id="status" name="status">
                                        @php
                                            $statusValue = old('status', 'draft');
                                        @endphp
                                        <option value="draft" {{ $statusValue === 'draft' ? 'selected' : '' }}>Draft</option>
                                        <option value="sent" {{ $statusValue === 'sent' ? 'selected' : '' }}>Sent</option>
                                        <option value="partial" {{ $statusValue === 'partial' ? 'selected' : '' }}>Partial</option>
                                        <option value="paid" {{ $statusValue === 'paid' ? 'selected' : '' }}>Paid</option>
                                        <option value="overdue" {{ $statusValue === 'overdue' ? 'selected' : '' }}>Overdue</option>
                                        <option value="cancelled" {{ $statusValue === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                        <option value="written_off" {{ $statusValue === 'written_off' ? 'selected' : '' }}>Written Off</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="discount">Discount %</label>
                                    <input type="number" class="form-control form-control-user" id="discount" placeholder="(If client agreement allows)" name="discount" value="{{ old('discount') }}" step="0.01" required oninput="recalculateSummary()">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Currency</label>
                                    <input type="hidden" id="currency_id" name="currency_id" value="{{ old('currency_id', $homeCurrency?->currency_id) }}">
                                    <div class="form-control form-control-user" style="display:flex;align-items:center;gap:10px;background:#f9fafb;">
                                        <span style="font-weight:600;">
                                            {{ $homeCurrency?->currency?->currency_name ?? 'Home Currency' }}
                                        </span>
                                        <span class="text-muted">
                                            {{ $homeCurrency?->currency?->currency_code ?? '' }} {{ $homeCurrency?->currency?->symbol ? '• '.$homeCurrency?->currency?->symbol : '' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Multiple Tariffs Section -->
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label style="display: flex; justify-content: space-between; align-items: center;">
                                        <span>Add Tariffs / Services</span>
                                        <button type="button" class="btn btn-sm btn-primary" onclick="addTariffRow()">
                                            <i class="fas fa-plus"></i> Add Tariff
                                        </button>
                                    </label>
                                    <div id="tariffs-container"></div>
                                    <p class="text-muted" style="font-size: 12px; margin-top: 5px;">
                                        Add multiple tariffs (hourly uses minutes; fixed/per case uses quantity; percentage uses base amount).
                                    </p>
                                </div>
                            </div>
                        </div>

                          <!-- Multiple Disbursements Section -->
                          <div class="row">
                              <div class="col-12">
                                  <div class="form-group">
                                      <label style="display: flex; justify-content: space-between; align-items: center;">
                                          <span>Add Multiple Disbursements</span>
                                          <button type="button" class="btn btn-sm btn-success" onclick="addDisbursementRow()">
                                              <i class="fas fa-plus"></i> Add Disbursement
                                          </button>
                                      </label>
                                      <div id="disbursements-container">
                                          <!-- Disbursement rows will be added here -->
                                      </div>
                                      <p class="text-muted" style="font-size: 12px; margin-top: 5px;">
                                          Add multiple disbursements (e.g., Court filing fees, Travel, Photocopying, Courier, etc.)
                                      </p>
                                  </div>
                              </div>
                          </div>

                          <!-- GL Split Section -->
                          <div class="row mt-3">
                              <div class="col-12">
                                  <div class="form-group">
                                      <label style="display: flex; justify-content: space-between; align-items: center;">
                                          <span>GL Account Splits</span>
                                          <button type="button" class="btn btn-sm btn-primary" onclick="addGlSplitRow()">
                                              <i class="fas fa-plus"></i> Add GL Split
                                          </button>
                                      </label>
                                      <div id="gl-splits-container">
                                          <!-- GL split rows will be added here -->
                                      </div>
                                      <p class="text-muted" style="font-size: 12px; margin-top: 5px;">
                                          Allocate totals across multiple GL accounts (optional).
                                      </p>
                                  </div>
                              </div>
                          </div>

                        <!-- Multiple Taxes Section -->
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label style="display: flex; justify-content: space-between; align-items: center;">
                                        <span>Add Multiple Taxes</span>
                                        <button type="button" class="btn btn-sm btn-info" onclick="addTaxRow()">
                                            <i class="fas fa-plus"></i> Add Tax
                                        </button>
                                    </label>
                                    <div id="taxes-container">
                                        <!-- Tax rows will be added here -->
                                    </div>
                                    <p class="text-muted" style="font-size: 12px; margin-top: 5px;">
                                        Add multiple taxes (e.g., VAT, Withholding Tax, etc.) - Total tax will be calculated as combined percentage
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div style="display: flex; justify-content: center; margin-top: 30px;">
                            <input type="submit" style="width: 150px; height: 45px; margin-right: 15px;" value="Save" class="btn btn-primary btn-user btn-block" id="submitButton" onclick="updateURLAndSubmit(event)"/>
                            <input style="width: 150px; height: 45px;" type="reset" value="Refresh" class="btn btn-secondary btn-user btn-block" onclick="refreshForm()"/>
                        </div>
                        <hr>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Section - Full Width Below Form -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 style="float: left;" class="m-0 font-weight-bold text-primary">Client Transactions</h6>
                    @if($PermissionsAdd)
                        <a id="process" href="{{ route('modules.processing.client-invoice.process', ['invoice' => $batch ?? '']) }}" style="float: right; margin-top: -5px;" class="btn btn-success btn-icon-split">
                            <span class="icon text-white-50">
                                <i class="fas fa-check"></i>
                            </span>
                            <span class="text">Process</span>
                        </a>
                    @endif
                    <a href="{{ route('modules.processing.client') }}" style="float: right; margin-top: -5px; margin-left: 10px;" class="btn btn-primary btn-icon-split">
                        <span class="icon text-white-50">
                            <i class="fas fa-arrow-left"></i>
                        </span>
                        <span class="text">Back to Client</span>
                    </a>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
                        <div class="fw-semibold text-muted">Filter</div>
                        <div>
                            <select id="invoiceStatusFilter" class="form-select form-select-sm" style="min-width: 220px;">
                                <option value="all">All</option>
                                <option value="unpaid">Unpaid</option>
                                <option value="partially_paid">Partially Paid</option>
                                <option value="fully_paid">Fully Paid</option>
                            </select>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0" style="font-size: 14px;">
                            <thead>
                                <tr>
                                    <th style="padding: 12px;">Entry Date</th>
                                    <th style="padding: 12px;">Description</th>
                                    <th style="padding: 12px;">Matter</th>
                                    <th style="padding: 12px;">Tariff Total</th>
                                    <th style="padding: 12px;">Disbursements</th>
                                    <th style="padding: 12px;">Discount %</th>
                                    <th style="padding: 12px;">Tax Total</th>
                                    <th style="padding: 12px;">Total</th>
                                    <th style="padding: 12px;">Status</th>
                                    <th style="padding: 12px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($clientTransactions as $transaction)
                                    @php
                                        $amountPaid = (float) ($transaction->amount_paid ?? 0);
                                        $totalAmount = (float) ($transaction->total ?? 0);
                                        $balanceAmount = isset($transaction->balance_due)
                                            ? (float) $transaction->balance_due
                                            : max($totalAmount - $amountPaid, 0);
                                        if ($totalAmount > 0 && $balanceAmount <= 0) {
                                            $invoiceStatusKey = 'fully_paid';
                                        } elseif ($amountPaid > 0) {
                                            $invoiceStatusKey = 'partially_paid';
                                        } else {
                                            $invoiceStatusKey = 'unpaid';
                                        }
                                        $invoiceData = [
                                            'id' => $transaction->id,
                                            'client_id' => $transaction->client_id,
                                            'invoice_number' => $transaction->invoice_number,
                                            'invoice_date' => optional($transaction->invoice_date)->format('Y-m-d'),
                                            'due_date' => optional($transaction->due_date)->format('Y-m-d'),
                                            'status' => $transaction->status,
                                            'matter_id' => $transaction->matter_id,
                                            'case_id' => $transaction->case_id,
                                            'case_reference' => $transaction->case_reference,
                                            'description' => $transaction->description,
                                            'responsible_lawyer' => $transaction->responsible_lawyer,
                                            'narration' => $transaction->narration,
                                            'gl_account' => $transaction->gl_account,
                                            'discount' => ($transaction->subtotal - $transaction->disbursement_total) > 0
                                                ? round(($transaction->discount_total / max(($transaction->subtotal - $transaction->disbursement_total), 1)) * 100, 2)
                                                : 0,
                                            'currency_id' => $transaction->currency_id,
                                            'billing_period_from' => optional($transaction->billing_period_from)->format('Y-m-d'),
                                            'billing_period_to' => optional($transaction->billing_period_to)->format('Y-m-d'),
                                        ];
                                        $tariffLines = $transaction->lines->map(fn($line) => [
                                            'tariff_id' => $line->tariff_id,
                                            'minutes_used' => $line->total_raw_minutes ?? 0,
                                            'quantity' => $line->quantity,
                                            'base_amount' => $line->base_amount,
                                        ])->values();
                                        $taxLines = $transaction->taxesList->map(fn($line) => [
                                            'tax_id' => $line->tax_id,
                                            'tax_rate' => $line->tax_rate,
                                        ])->values();
                                        $disbursementLines = $transaction->disbursementsList->map(fn($line) => [
                                            'description' => $line->description,
                                            'amount' => $line->amount,
                                            'gl_account_id' => $line->gl_account_id ?? null,
                                        ])->values();
                                        $glSplits = $transaction->glAccounts->map(fn($line) => [
                                            'gl_account_id' => $line->gl_account_id ?? null,
                                            'gl_account_code' => $line->gl_account_code ?? null,
                                            'amount' => $line->amount ?? 0,
                                            'line_type' => $line->line_type ?? null,
                                            'description' => $line->description ?? null,
                                        ])->values();
                                    @endphp
                                    <tr data-invoice-status="{{ $invoiceStatusKey }}">
                                        <td>{{ $transaction->created_at->format('Y-m-d') }}</td>
                                        <td>{{ $transaction->description }}</td>
                                        <td>{{ $transaction->case_reference }}</td>
                                        <td>{{ number_format($transaction->subtotal, 2) }}</td>
                                        <td>{{ number_format($transaction->disbursement_total, 2) }}</td>
                                        <td>{{ number_format($transaction->discount_total, 2) }}</td>
                                        <td>{{ number_format($transaction->tax_total, 2) }}</td>
                                        <td>{{ number_format($transaction->total, 2) }}</td>
                                        <td>{{ ucfirst((string) $transaction->status) }}</td>
                                        <td style="justify-content: center; align-items: center;">
                                            @if($PermissionsEdit)
                                                <a href="#" class="btn btn-primary btn-sm me-1"
                                                   data-invoice='@json($invoiceData)'
                                                   data-tariffs='@json($tariffLines)'
                                                   data-taxes='@json($taxLines)'
                                                   data-disbursements='@json($disbursementLines)'
                                                   data-gl-splits='@json($glSplits)'
                                                   onclick="editTransaction(event, this)">Edit</a>
                                            @endif
                                            @if($PermissionsAdd)
                                                <a href="{{ route('modules.processing.client-invoice.process', ['invoice' => $transaction->id]) }}" class="btn btn-success btn-sm me-1">Process</a>
                                            @endif
                                            @if($PermissionsPrint)
                                                <a href="{{ route('modules.processing.client-invoice.pdf', $transaction->id) }}" target="_blank" class="btn btn-info btn-sm me-1">Print</a>
                                            @endif
                                            @if($PermissionsDelete)
                                                <a href="#" class="btn btn-danger btn-sm" onclick="confirmDelete('{{ $transaction->description }}', '{{ $transaction->case_reference }}', '{{ route('modules.processing.client-invoice.destroy', $transaction->id) }}'); return false;">Delete</a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="totals-card" style="margin-top: 30px;">
                            <h6 style="margin-bottom: 20px; text-align: center; font-weight: 700; font-size: 1.2em;">Invoice Summary</h6>
                            <p><span class="total-label">Tariff Subtotal:</span> <span class="total-value" id="summarySubtotal">0.00</span></p>
                            <p><span class="total-label">Disbursements:</span> <span class="total-value" id="summaryDisbursements">0.00</span></p>
                            <p><span class="total-label">Discount:</span> <span class="total-value" id="summaryDiscount">0.00</span></p>
                            <p><span class="total-label">Tax Total:</span> <span class="total-value" id="summaryTax">0.00</span></p>
                            <p style="border-top: 2px solid rgba(255,255,255,0.3); padding-top: 15px; margin-top: 15px;">
                                <span class="total-label">Net Total:</span>
                                <span class="total-value" id="summaryTotal" style="font-size: 1.3em; color: #fbbf24;">0.00</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Confirmation Modal -->
    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete: <span id="deleteItemName"></span>?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteButton">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const clientLookup = @json($clients->map(function ($client) {
        $name = $client->full_name ?? ($client->client_name ?? trim(($client->first_name ?? '') . ' ' . ($client->last_name ?? '')));
        return [
            'id' => $client->id,
            'name' => $name,
        ];
    })->values());
    const clientNameById = new Map(clientLookup.map(client => [String(client.id), client.name]));

    document.addEventListener('DOMContentLoaded', () => {
        addTariffRow();
        addDisbursementRow();
        addGlSplitRow();
        addTaxRow();
        recalculateSummary();

        const statusFilter = document.getElementById('invoiceStatusFilter');
        const tableBody = document.querySelector('#dataTable tbody');
        const applyStatusFilter = () => {
            if (!statusFilter || !tableBody) return;
            const value = statusFilter.value || 'all';
            tableBody.querySelectorAll('tr').forEach(row => {
                const rowStatus = row.dataset.invoiceStatus || '';
                row.style.display = (value === 'all' || rowStatus === value) ? '' : 'none';
            });
        };

        if (statusFilter) {
            statusFilter.addEventListener('change', applyStatusFilter);
            applyStatusFilter();
        }

        const clientSearchInput = document.getElementById('client_search');
        const clientIdInput = document.getElementById('client_id');
        const clientSuggestions = document.getElementById('client_suggestions');
        const matterSelect = document.getElementById('case_reference');
        const matterIdInput = document.getElementById('matter_id');
        const caseIdInput = document.getElementById('case_id');
        const matterOptions = matterSelect ? Array.from(matterSelect.options) : [];

        function getSelectedMatterLawyers(option) {
            if (!option) return [];
            try {
                return JSON.parse(option.dataset.lawyers || '[]');
            } catch (e) {
                return [];
            }
        }

        function setResponsibleFromMatter(force = false) {
            const responsibleInput = document.getElementById('responsible_lawyer');
            if (!responsibleInput || !matterSelect) return;
            if (!force && responsibleInput.value && responsibleInput.value.trim() !== '') {
                return;
            }

            const selectedOption = matterSelect.options[matterSelect.selectedIndex];
            const lawyers = getSelectedMatterLawyers(selectedOption);
            if (!Array.isArray(lawyers) || lawyers.length === 0) {
                if (force) {
                    responsibleInput.value = '';
                }
                return;
            }

            const lead = lawyers.find(lawyer => lawyer.is_lead);
            const chosen = lead || lawyers[0];
            responsibleInput.value = chosen?.name || '';
        }

        function syncMatterMeta() {
            if (!matterSelect) return;
            const selectedOption = matterSelect.options[matterSelect.selectedIndex];
            if (matterIdInput) {
                matterIdInput.value = selectedOption?.dataset?.matterId || '';
            }
            if (caseIdInput) {
                caseIdInput.value = selectedOption?.dataset?.caseId || '';
            }
        }

        window.setResponsibleFromMatter = setResponsibleFromMatter;
        window.syncMatterMeta = syncMatterMeta;

        function filterMattersByClient() {
            if (!clientIdInput || !matterSelect) return;
            const clientId = clientIdInput.value;

            matterSelect.innerHTML = '';
            matterOptions.forEach(option => {
                if (!option.value) {
                    matterSelect.appendChild(option);
                    return;
                }

                let clientIds = [];
                try {
                    clientIds = JSON.parse(option.dataset.clientIds || '[]');
                } catch (e) {
                    clientIds = [];
                }

                if (!clientId) {
                    matterSelect.appendChild(option);
                    return;
                }

                if (clientIds.includes(parseInt(clientId, 10))) {
                    matterSelect.appendChild(option);
                }
            });

            if (!Array.from(matterSelect.options).some(opt => opt.value === matterSelect.value)) {
                matterSelect.value = '';
            }
        }

        function closeClientSuggestions() {
            if (clientSuggestions) {
                clientSuggestions.style.display = 'none';
                clientSuggestions.innerHTML = '';
            }
        }

        function renderClientSuggestions(matches) {
            if (!clientSuggestions) return;
            clientSuggestions.innerHTML = '';
            if (!matches.length) {
                closeClientSuggestions();
                return;
            }

            matches.forEach(match => {
                const item = document.createElement('button');
                item.type = 'button';
                item.className = 'list-group-item list-group-item-action';
                item.textContent = match.name;
                item.dataset.id = String(match.id);
                item.addEventListener('mousedown', (event) => {
                    event.preventDefault();
                    clientIdInput.value = String(match.id);
                    clientSearchInput.value = match.name;
                    closeClientSuggestions();
                    filterMattersByClient();
                });
                clientSuggestions.appendChild(item);
            });

            clientSuggestions.style.display = 'block';
        }

        function syncClientIdFromSearch() {
            if (!clientSearchInput || !clientIdInput) return;
            const searchValue = clientSearchInput.value.trim().toLowerCase();

            if (!searchValue) {
                clientIdInput.value = '';
                closeClientSuggestions();
                filterMattersByClient();
                return;
            }

            const matches = clientLookup.filter(client => client.name.toLowerCase().includes(searchValue));
            renderClientSuggestions(matches.slice(0, 20));

            const exactMatch = matches.find(client => client.name.toLowerCase() === searchValue);
            clientIdInput.value = exactMatch ? String(exactMatch.id) : '';
            filterMattersByClient();
        }

        if (clientSearchInput && clientIdInput && matterSelect) {
            clientSearchInput.addEventListener('input', syncClientIdFromSearch);
            clientSearchInput.addEventListener('change', syncClientIdFromSearch);
            matterSelect.addEventListener('change', () => {
                setResponsibleFromMatter(true);
                syncMatterMeta();
            });

            if (clientIdInput.value && !clientSearchInput.value) {
                clientSearchInput.value = clientNameById.get(String(clientIdInput.value)) || '';
            }

            syncClientIdFromSearch();
            syncMatterMeta();
        }

        document.addEventListener('click', (event) => {
            if (!clientSuggestions || !clientSearchInput) return;
            const isInside = clientSuggestions.contains(event.target) || clientSearchInput.contains(event.target);
            if (!isInside) {
                closeClientSuggestions();
            }
        });
    });

    function editTransaction(event, button) {
        event.preventDefault();
        const form = document.getElementById('invoiceForm');
        form.classList.add('loading');

        const invoice = JSON.parse(button.dataset.invoice || '{}');
        const tariffs = JSON.parse(button.dataset.tariffs || '[]');
        const taxes = JSON.parse(button.dataset.taxes || '[]');
        const disbursements = JSON.parse(button.dataset.disbursements || '[]');
        const glSplits = JSON.parse(button.dataset.glSplits || '[]');

        setTimeout(() => {
            setFormValues(invoice, tariffs, taxes, disbursements, glSplits, 'Edit Invoice', 'Update');
            form.classList.remove('loading');
        }, 300);
    }

    function refreshForm() {
        const form = document.getElementById('invoiceForm');
        form.classList.add('loading');

        setTimeout(() => {
            setFormValues({}, [], [], [], [], 'Process Invoice', 'Save');
            hideMessages();
            form.classList.remove('loading');
        }, 300);
    }

    function setFormValues(invoice, tariffs, taxes, disbursements, glSplits, headerText, buttonText) {
        document.getElementById('invoiceId').value = invoice.id || '';
        const clientSearchInput = document.getElementById('client_search');
        const clientIdInput = document.getElementById('client_id');
        if (clientSearchInput && clientIdInput) {
            const clientId = invoice.client_id ? String(invoice.client_id) : '';
            clientIdInput.value = clientId;
            clientSearchInput.value = clientNameById.get(clientId) || '';
            clientSearchInput.dispatchEvent(new Event('input'));
        }
        const invoiceNumberInput = document.getElementById('invoice_number');
        const invoiceDateInput = document.getElementById('invoice_date');
        invoiceNumberInput.value = invoice.invoice_number || invoiceNumberInput.dataset.default || '';
        invoiceDateInput.value = invoice.invoice_date || invoiceDateInput.dataset.default || '';
        const caseReferenceSelect = document.getElementById('case_reference');
        if (caseReferenceSelect) {
            caseReferenceSelect.value = invoice.case_reference || '';
        }
        document.getElementById('description').value = invoice.description || '';
        document.getElementById('responsible_lawyer').value = invoice.responsible_lawyer || '';
        if (!invoice.responsible_lawyer) {
            if (window.setResponsibleFromMatter) {
                window.setResponsibleFromMatter();
            }
        }
        if (window.syncMatterMeta) {
            window.syncMatterMeta();
        }
        document.getElementById('narration').value = invoice.narration || '';
        document.getElementById('gl_account').value = invoice.gl_account || '';
        const statusInput = document.getElementById('status');
        if (statusInput) {
            statusInput.value = invoice.status || statusInput.value || 'draft';
        }
        document.getElementById('discount').value = invoice.discount ?? 0;
        const currencyInput = document.getElementById('currency_id');
        if (currencyInput) {
            currencyInput.value = invoice.currency_id || currencyInput.value || '';
        }
        document.getElementById('formHeader').innerText = headerText;
        document.getElementById('submitButton').value = buttonText;

        resetTariffRows(tariffs);
        resetDisbursementRows(disbursements);
        resetGlSplitRows(glSplits);
        resetTaxRows(taxes);

        recalculateSummary();

        if (buttonText === 'Update') {
            document.getElementById('_method').value = 'PUT';
            document.getElementById('invoiceForm').action = '/modules/processing/client-invoice/update/' + (invoice.id || '');
        } else {
            document.getElementById('_method').value = 'POST';
            document.getElementById('invoiceForm').action = '{{ route("modules.processing.client-invoice.store") }}';
        }
    }

    function confirmDelete(name, reference, deleteUrl) {
        document.getElementById('deleteItemName').innerText = `${name} => ${reference}`;
        $('#confirmDeleteModal').modal('show');
        document.getElementById('confirmDeleteButton').onclick = function() {
            // Add loading state to modal
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Deleting...';
            this.disabled = true;
            window.location.href = deleteUrl;
        };
    }

    function updateURLAndSubmit(event) {
        event.preventDefault();
        const form = document.getElementById('invoiceForm');
        const submitBtn = document.getElementById('submitButton');

        // Add loading state
        form.classList.add('loading');
        submitBtn.disabled = true;
        submitBtn.value = 'Processing...';

        const batchValue = document.getElementById('invoice_number').value.trim();
        const processButton = document.getElementById('process');
        if (processButton) {
            processButton.href = processButton.href.replace(/invoice=[^&]*/, `invoice=${batchValue}`);
        }

        // Simulate processing delay for better UX
        setTimeout(() => {
            form.submit();
        }, 800);
    }

    function hideMessages() {
        const successMsg = document.getElementById('successMessage');
        const errorMsg = document.getElementById('errorMessage');
        if (successMsg) successMsg.style.display = 'none';
        if (errorMsg) errorMsg.style.display = 'none';
    }

    // Add ripple effect to buttons
    document.querySelectorAll('.btn').forEach(button => {
        button.addEventListener('click', function(e) {
            const ripple = document.createElement('span');
            ripple.classList.add('ripple');
            this.appendChild(ripple);

            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            ripple.style.width = ripple.style.height = size + 'px';

            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';

            ripple.addEventListener('animationend', () => {
                ripple.remove();
            });
        });
    });

// Auto-hide success messages after 5 seconds
    setTimeout(() => {
        const successMsg = document.getElementById('successMessage');
        if (successMsg) {
            successMsg.style.transition = 'opacity 0.5s ease';
            successMsg.style.opacity = '0';
            setTimeout(() => successMsg.style.display = 'none', 500);
        }
    }, 5000);

    // Dynamic Tariff Management
    let tariffCounter = 0;
    const tariffsData = @json($tariffs ?? []);
    const taxesData = @json($taxes ?? []);
    const defaultCurrencySymbol = @json($homeCurrency?->currency?->symbol ?? '');
    const defaultCurrencyCode = @json($homeCurrency?->currency?->currency_code ?? '');

    function addTariffRow(existing = {}) {
        const container = document.getElementById('tariffs-container');
        if (!container) return;

        const index = tariffCounter++;
        const rowId = 'tariff-row-' + index;
        let optionsHtml = '<option value="">Select Tariff</option>';
        tariffsData.forEach(function(tariff) {
            const rateAmount = parseFloat(tariff.rate_amount || 0).toFixed(2);
            const rateType = tariff.rate_type || 'UNKNOWN';
            const serviceName = tariff.service_name || 'Service';
            optionsHtml += `<option value="${tariff.tariff_id}" 
                data-rate="${tariff.rate_amount || 0}"
                data-rate-type="${rateType}"
                data-billing-increment="${tariff.billing_increment || ''}"
                data-min-rate="${tariff.minimum_fee || ''}"
                data-max-rate="${tariff.maximum_fee || ''}"
                data-service="${serviceName}"
                data-billing-method="${tariff.billing_method || ''}">
                ${serviceName} (${rateType} - ${rateAmount})
            </option>`;
        });

        const rowHtml = `
            <div class="row mb-2 tariff-row" id="${rowId}" style="align-items: center;">
                <div class="col-md-5">
                    <select class="form-control" name="tariff_items[${index}][tariff_id]" onchange="updateTariffRow('${rowId}')">
                        ${optionsHtml}
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control" id="tariff-value-${rowId}" placeholder="Qty / Minutes / Base" step="0.01" min="0" oninput="updateTariffRow('${rowId}')">
                    <small class="text-muted d-block" id="tariff-label-${rowId}">Quantity</small>
                    <input type="hidden" name="tariff_items[${index}][minutes_used]" id="tariff-minutes-${rowId}" value="0">
                    <input type="hidden" name="tariff_items[${index}][quantity]" id="tariff-quantity-${rowId}" value="1">
                    <input type="hidden" name="tariff_items[${index}][base_amount]" id="tariff-base-${rowId}" value="0">
                </div>
                <div class="col-md-2">
                    <input type="number" class="form-control" id="tariff-rate-${rowId}" placeholder="Rate" readonly>
                </div>
                <div class="col-md-1">
                    <input type="number" class="form-control tariff-line-total" id="tariff-total-${rowId}" placeholder="Total" readonly>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeTariffRow('${rowId}')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', rowHtml);

        if (existing.tariff_id) {
            const row = document.getElementById(rowId);
            const select = row.querySelector('select');
            select.value = existing.tariff_id;
            const valueInput = document.getElementById(`tariff-value-${rowId}`);
            if (existing.minutes_used && parseFloat(existing.minutes_used) > 0) {
                valueInput.value = existing.minutes_used;
            } else if (existing.base_amount && parseFloat(existing.base_amount) > 0) {
                valueInput.value = existing.base_amount;
            } else {
                valueInput.value = existing.quantity ?? 1;
            }
            updateTariffRow(rowId);
        }
    }

    function removeTariffRow(rowId) {
        const row = document.getElementById(rowId);
        if (row) {
            row.remove();
            recalculateSummary();
        }
    }

    function updateTariffRow(rowId) {
        const row = document.getElementById(rowId);
        if (!row) return;

        const select = row.querySelector('select');
        const selectedOption = select?.options[select.selectedIndex];
        const valueInput = document.getElementById(`tariff-value-${rowId}`);
        const rateInput = document.getElementById(`tariff-rate-${rowId}`);
        const totalInput = document.getElementById(`tariff-total-${rowId}`);
        const label = document.getElementById(`tariff-label-${rowId}`);
        const minutesInput = document.getElementById(`tariff-minutes-${rowId}`);
        const quantityInput = document.getElementById(`tariff-quantity-${rowId}`);
        const baseInput = document.getElementById(`tariff-base-${rowId}`);

        if (!selectedOption || !selectedOption.value) {
            rateInput.value = '';
            totalInput.value = '';
            minutesInput.value = 0;
            quantityInput.value = 1;
            baseInput.value = 0;
            recalculateSummary();
            return;
        }

        const rate = parseFloat(selectedOption.dataset.rate || 0);
        const rateType = selectedOption.dataset.rateType || 'PER_CASE';
        const billingIncrement = parseInt(selectedOption.dataset.billingIncrement || 60, 10);
        const minRate = parseFloat(selectedOption.dataset.minRate || 0);
        const maxRate = parseFloat(selectedOption.dataset.maxRate || 0);

        rateInput.value = rate.toFixed(2);

        let inputValue = parseFloat(valueInput.value || 0);
        let lineTotal = 0;

        if (rateType === 'PER_HOUR') {
            label.textContent = 'Minutes Used';
            const increment = Math.max(billingIncrement, 1);
            const billedMinutes = Math.ceil(inputValue / increment) * increment;
            const hours = billedMinutes / 60;
            minutesInput.value = inputValue || 0;
            quantityInput.value = 1;
            baseInput.value = 0;
            lineTotal = hours * rate;
        } else if (rateType === 'PERCENTAGE') {
            label.textContent = 'Base Amount';
            baseInput.value = inputValue || 0;
            minutesInput.value = 0;
            quantityInput.value = 1;
            lineTotal = (inputValue * rate) / 100;
        } else {
            label.textContent = 'Quantity';
            const qty = inputValue > 0 ? inputValue : 1;
            quantityInput.value = qty;
            minutesInput.value = 0;
            baseInput.value = 0;
            lineTotal = qty * rate;
        }

        if (minRate && lineTotal < minRate) {
            lineTotal = minRate;
        }
        if (maxRate && lineTotal > maxRate) {
            lineTotal = maxRate;
        }

        totalInput.value = lineTotal.toFixed(2);
        recalculateSummary();
    }

    function resetTariffRows(items) {
        const container = document.getElementById('tariffs-container');
        if (!container) return;
        container.innerHTML = '';
        tariffCounter = 0;
        if (items && items.length) {
            items.forEach(item => addTariffRow(item));
        } else {
            addTariffRow();
        }
    }

    function parseNumber(value) {
        const parsed = parseFloat(value);
        return Number.isFinite(parsed) ? parsed : 0;
    }

    function getTariffSubtotal() {
        let subtotal = 0;
        document.querySelectorAll('.tariff-line-total').forEach(input => {
            subtotal += parseNumber(input.value);
        });
        return subtotal;
    }

    function getDisbursementTotal() {
        let total = 0;
        document.querySelectorAll('input[name^="disbursement_items"][name$="[amount]"]').forEach(input => {
            total += parseNumber(input.value);
        });
        return total;
    }

    function recalculateSummary() {
        const subtotal = getTariffSubtotal();
        const disbursements = getDisbursementTotal();
        const discountPercent = parseNumber(document.getElementById('discount')?.value);
        const discountAmount = (subtotal - disbursements) * discountPercent / 100;
        const netBeforeTax = subtotal - disbursements - discountAmount;

        let taxTotal = 0;
        document.querySelectorAll('.tax-row').forEach(row => {
            const select = row.querySelector('select');
            const rateInput = row.querySelector(`[name^="tax_items"][name$="[tax_rate]"]`);
            const amountInput = row.querySelector(`[name^="tax_items"][name$="[tax_amount]"]`);

            let rate = parseNumber(rateInput?.value);
            if (select && select.value) {
                const parts = select.value.split(':');
                if (parts.length > 1) {
                    rate = parseNumber(parts[1]);
                    if (rateInput) rateInput.value = rate;
                }
            }

            const taxableBase = Math.max(netBeforeTax, 0);
            const amount = (taxableBase * rate) / 100;
            if (amountInput) amountInput.value = amount.toFixed(2);
            taxTotal += amount;
        });

        const total = netBeforeTax + taxTotal;

        const subtotalEl = document.getElementById('summarySubtotal');
        const disbursementsEl = document.getElementById('summaryDisbursements');
        const discountEl = document.getElementById('summaryDiscount');
        const taxEl = document.getElementById('summaryTax');
        const totalEl = document.getElementById('summaryTotal');

        if (subtotalEl) subtotalEl.textContent = formatCurrency(subtotal);
        if (disbursementsEl) disbursementsEl.textContent = formatCurrency(disbursements);
        if (discountEl) discountEl.textContent = formatCurrency(discountAmount);
        if (taxEl) taxEl.textContent = formatCurrency(taxTotal);
        if (totalEl) totalEl.textContent = formatCurrency(total);
    }

    function getSelectedCurrency() {
        return { symbol: defaultCurrencySymbol, code: defaultCurrencyCode };
    }

    function formatCurrency(amount) {
        const currency = getSelectedCurrency();
        const prefix = currency.symbol || currency.code || '';
        const value = Number.isFinite(amount) ? amount.toFixed(2) : '0.00';
        return prefix ? `${prefix} ${value}` : value;
    }

    const glAccountOptions = `
        <option value="">Select GL Account</option>
        @if(isset($groupedGlAccounts) && $groupedGlAccounts->count() > 0)
            @foreach($groupedGlAccounts as $category => $accounts)
                <optgroup label="{{ $category }}">
                    @foreach($accounts as $gl)
                        @if(!empty($gl->id))
                            <option value="{{ $gl->id }}">{{ $gl->code . ' - ' . $gl->name }}</option>
                        @endif
                    @endforeach
                </optgroup>
            @endforeach
        @endif
    `;

    // Dynamic Disbursement Management
    let disbursementCounter = 0;

    function addDisbursementRow(existing = {}) {
        const container = document.getElementById('disbursements-container');
        const index = disbursementCounter++;
        const rowId = 'disbursement-row-' + index;

        const rowHtml = `
            <div class="row mb-2 disbursement-row" id="${rowId}" style="align-items: center;">
                <div class="col-md-5">
                    <input type="text" class="form-control" name="disbursement_items[${index}][description]" 
                        placeholder="Description (e.g., Court filing fees, Travel, Courier)">
                </div>
                <div class="col-md-4">
                    <select class="form-control" name="disbursement_items[${index}][gl_account_id]">
                        ${glAccountOptions}
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="number" class="form-control" name="disbursement_items[${index}][amount]" 
                        placeholder="Amount" step="0.01" min="0" oninput="recalculateSummary()">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeDisbursementRow('${rowId}')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', rowHtml);

        if (existing.description || existing.amount) {
            const row = document.getElementById(rowId);
            const descInput = row.querySelector(`input[name="disbursement_items[${index}][description]"]`);
            const amountInput = row.querySelector(`input[name="disbursement_items[${index}][amount]"]`);
            const glInput = row.querySelector(`select[name="disbursement_items[${index}][gl_account_id]"]`);
            if (descInput) descInput.value = existing.description || '';
            if (amountInput) amountInput.value = existing.amount ?? '';
            if (glInput) glInput.value = existing.gl_account_id ?? '';
        }
    }

    function removeDisbursementRow(rowId) {
        const row = document.getElementById(rowId);
        if (row) {
            row.remove();
            recalculateSummary();
        }
    }

    // Dynamic Tax Management
    let taxCounter = 0;

    function addTaxRow(existing = {}) {
        const container = document.getElementById('taxes-container');
        const index = taxCounter++;
        const rowId = 'tax-row-' + index;
        
        let optionsHtml = '<option value="">Select Tax</option>';
        taxesData.forEach(function(tax) {
            optionsHtml += `<option value="${tax.tax_id}:${tax.tax_rate}" data-rate="${tax.tax_rate}">${tax.tax_rate}% ${tax.tax_name}</option>`;
        });
        
        const rowHtml = `
            <div class="row mb-2 tax-row" id="${rowId}" style="align-items: center;">
                <div class="col-md-5">
                    <select class="form-control" name="tax_items[${index}][tax_id]" onchange="recalculateSummary()">
                        ${optionsHtml}
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control" name="tax_items[${index}][tax_rate]" 
                        placeholder="Rate %" step="0.01" min="0" oninput="recalculateSummary()" id="tax-rate-${rowId}">
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control" name="tax_items[${index}][tax_amount]" 
                        placeholder="Amount" step="0.01" min="0" id="tax-amount-${rowId}" readonly>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeTaxRow('${rowId}')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', rowHtml);

        if (existing.tax_id) {
            const row = document.getElementById(rowId);
            const select = row.querySelector('select');
            if (select) {
                const targetPrefix = String(existing.tax_id) + ':';
                const match = Array.from(select.options).find(option => option.value === String(existing.tax_id) || option.value.startsWith(targetPrefix));
                if (match) {
                    select.value = match.value;
                }
            }
            const rateInput = row.querySelector(`[name="tax_items[${index}][tax_rate]"]`);
            if (rateInput && existing.tax_rate !== undefined) {
                rateInput.value = existing.tax_rate;
            }
        }
    }

    function removeTaxRow(rowId) {
        const row = document.getElementById(rowId);
        if (row) {
            row.remove();
            recalculateSummary();
        }
    }

    function resetDisbursementRows(items) {
        const container = document.getElementById('disbursements-container');
        if (!container) return;
        container.innerHTML = '';
        disbursementCounter = 0;
        if (items && items.length) {
            items.forEach(item => addDisbursementRow(item));
        } else {
            addDisbursementRow();
        }
    }

    // Dynamic GL Split Management
    let glSplitCounter = 0;

    function addGlSplitRow(existing = {}) {
        const container = document.getElementById('gl-splits-container');
        if (!container) return;
        const index = glSplitCounter++;
        const rowId = 'gl-split-row-' + index;

        const rowHtml = `
            <div class="row mb-2 gl-split-row" id="${rowId}" style="align-items: center;">
                <div class="col-md-5">
                    <select class="form-control" name="gl_items[${index}][gl_account_id]">
                        ${glAccountOptions}
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="number" class="form-control" name="gl_items[${index}][amount]" 
                        placeholder="Amount" step="0.01" min="0">
                </div>
                <div class="col-md-2">
                    <select class="form-control" name="gl_items[${index}][line_type]">
                        <option value="invoice">Invoice</option>
                        <option value="disbursement">Disbursement</option>
                        <option value="tax">Tax</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" name="gl_items[${index}][description]" 
                        placeholder="Description">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeGlSplitRow('${rowId}')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', rowHtml);

        if (existing.gl_account_id || existing.amount || existing.description || existing.line_type) {
            const row = document.getElementById(rowId);
            const acctInput = row.querySelector(`select[name="gl_items[${index}][gl_account_id]"]`);
            const amountInput = row.querySelector(`input[name="gl_items[${index}][amount]"]`);
            const typeInput = row.querySelector(`select[name="gl_items[${index}][line_type]"]`);
            const descInput = row.querySelector(`input[name="gl_items[${index}][description]"]`);
            if (acctInput) acctInput.value = existing.gl_account_id ?? '';
            if (amountInput) amountInput.value = existing.amount ?? '';
            if (typeInput) typeInput.value = existing.line_type || 'invoice';
            if (descInput) descInput.value = existing.description || '';
        }
    }

    function removeGlSplitRow(rowId) {
        const row = document.getElementById(rowId);
        if (row) {
            row.remove();
        }
    }

    function resetGlSplitRows(items) {
        const container = document.getElementById('gl-splits-container');
        if (!container) return;
        container.innerHTML = '';
        glSplitCounter = 0;
        if (items && items.length) {
            items.forEach(item => addGlSplitRow(item));
        } else {
            addGlSplitRow();
        }
    }

    function resetTaxRows(items) {
        const container = document.getElementById('taxes-container');
        if (!container) return;
        container.innerHTML = '';
        taxCounter = 0;
        if (items && items.length) {
            items.forEach(item => addTaxRow(item));
        } else {
            addTaxRow();
        }
        recalculateSummary();
    }
</script>
@endsection