@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        .max-limit-info { font-size: 0.8rem; color: #82868b; }
        #tdsCalcTable th, #tdsCalcTable td { padding: 0.5rem 0.75rem; vertical-align: middle; }
        #tdsCalcTable .row-label { font-weight: 500; }
        #tdsCalcTable .row-sub { padding-left: 1.5rem; color: #6e6b7b; font-size: 0.9rem; }
        #tdsCalcTable .row-comp { padding-left: 2.5rem; color: #82868b; font-size: 0.85rem; }
        #tdsCalcTable .row-total { font-weight: 700; background-color: #f8f8f8; }
        #tdsCalcTable .row-grand { font-weight: 700; background-color: #e8f5e9; font-size: 1.05rem; }
        #tdsCalcTable .text-amount { text-align: right; font-variant-numeric: tabular-nums; }
        .calc-collapse-icon { transition: transform 0.2s; }
        .collapsed .calc-collapse-icon { transform: rotate(-90deg); }
        .ctc-loading { display: none; color: #7367f0; font-size: 0.85rem; }
        .ctc-components-table th, .ctc-components-table td { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
        /* Accordion sections */
        .sec-accordion .accordion-item { border: 1px solid #ebe9f1; margin-bottom: 0; }
        .sec-accordion .accordion-item:first-child { border-radius: 6px 6px 0 0; }
        .sec-accordion .accordion-item:last-child { border-radius: 0 0 6px 6px; }
        .sec-accordion .accordion-item:only-child { border-radius: 6px; }
        .sec-accordion .accordion-button { padding: 0.6rem 1rem; font-size: 0.9rem; background: #fff; }
        .sec-accordion .accordion-button:not(.collapsed) { background: #f6f6ff; color: #7367f0; box-shadow: none; }
        .sec-accordion .accordion-button::after { width: 0.9rem; height: 0.9rem; background-size: 0.9rem; }
        .sec-accordion .accordion-body { padding: 0.75rem 1rem; }
        .sec-accordion .sec-code { font-weight: 600; color: #7367f0; min-width: 60px; display: inline-block; }
        .sec-accordion .sec-limit { font-size: 0.78rem; color: #82868b; margin-left: 0.5rem; }
        .sec-accordion .sec-total-badge { font-size: 0.78rem; font-weight: 600; }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Investment Declaration</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/dashboard">TDS</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/declarations">Declarations</a></li>
                    <li class="breadcrumb-item active">
                        {{ isset($declaration) && $declaration->id ? 'Edit' : 'New' }} Declaration
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-declaration-form">
        <div class="row">
            <div class="col-12">
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <div class="alert-body">{{ session('error') }}</div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
        </div>

        <form action="@if(isset($declaration) && $declaration->id){{ '/'.$alias.'/tdx/declarations/'.$declaration->id.'/save-draft' }}@else{{ '/'.$alias.'/tdx/declarations/store' }}@endif"
              method="POST" id="declarationForm" enctype="multipart/form-data">
            @csrf

            {{-- Step 1: Employee & Income Details --}}
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Step 1: Employee & Income Details</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Employee Selection --}}
                        <div class="col-md-4">
                            <div class="mb-1 {{ $errors->has('employee_id') ? 'has-error' : '' }}">
                                <label class="form-label" for="employee_id">
                                    Employee <span class="mendatory-field text-danger">*</span>
                                </label>
                                <select class="form-select select2" name="employee_id" id="employee_id" required
                                    {{ isset($declaration) && $declaration->id ? 'disabled' : '' }}>
                                    <option value="">-- Select Employee --</option>
                                    @foreach($employees as $emp)
                                        <option value="{{ $emp->id }}"
                                            {{ (old('employee_id', $declaration->employee_id ?? '') == $emp->id) ? 'selected' : '' }}>
                                            {{ $emp->name }} ({{ $emp->employee_code }})
                                        </option>
                                    @endforeach
                                </select>
                                @if(isset($declaration) && $declaration->id)
                                    <input type="hidden" name="employee_id" value="{{ $declaration->employee_id }}">
                                @endif
                                {!! $errors->first('employee_id', '<label class="error">:message</label>') !!}
                            </div>
                        </div>

                        {{-- Regime Selection --}}
                        <div class="col-md-4">
                            <div class="mb-1">
                                <label class="form-label">
                                    Tax Regime <span class="mendatory-field text-danger">*</span>
                                </label>
                                <div class="d-flex gap-2 mt-50">
                                    <div class="form-check form-check-primary me-2">
                                        <input class="form-check-input" type="radio" name="regime" id="regime_old" value="old"
                                            {{ old('regime', $profile->regime ?? 'old') === 'old' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="regime_old">
                                            <strong>Old Regime</strong>
                                        </label>
                                    </div>
                                    <div class="form-check form-check-success">
                                        <input class="form-check-input" type="radio" name="regime" id="regime_new" value="new"
                                            {{ old('regime', $profile->regime ?? '') === 'new' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="regime_new">
                                            <strong>New Regime</strong>
                                        </label>
                                    </div>
                                </div>
                                {!! $errors->first('regime', '<label class="error">:message</label>') !!}
                            </div>
                        </div>

                    </div>

                    {{-- Declaration Type --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1">
                                <label class="form-label">
                                    Declaration Type <span class="mendatory-field text-danger">*</span>
                                </label>
                                <div class="d-flex gap-2 mt-50">
                                    <div class="form-check form-check-warning me-2">
                                        <input class="form-check-input" type="radio" name="declaration_type" id="type_provisional" value="provisional"
                                            {{ old('declaration_type', $declaration->declaration_type ?? 'provisional') === 'provisional' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="type_provisional">
                                            <strong>Provisional</strong>
                                            <small class="d-block text-muted">Based on assumed investments (no proofs required)</small>
                                        </label>
                                    </div>
                                    <div class="form-check form-check-success">
                                        <input class="form-check-input" type="radio" name="declaration_type" id="type_final" value="final"
                                            {{ old('declaration_type', $declaration->declaration_type ?? '') === 'final' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="type_final">
                                            <strong>Final</strong>
                                            <small class="d-block text-muted">With proofs – uses approved amounts for calculation</small>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-1">

                    {{-- CTC Components (Auto-fetched from CTC Master) --}}
                    <div id="ctcComponentsSection">
                        <div class="d-flex align-items-center mb-75">
                            <h6 class="mb-0">Salary Components (from CTC Master)</h6>
                            <span class="ctc-loading ms-1" id="ctcLoading">
                                <span class="spinner-border spinner-border-sm me-25"></span> Loading...
                            </span>
                            <div class="ms-auto d-flex gap-1">
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnRefreshCtc" title="Refresh display from CTC Master (does not save)">
                                    <i data-feather="refresh-cw" class="font-small-3"></i> Refresh from CTC
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="btnSyncProfile" title="Save latest CTC data to Tax Profile in database">
                                    <i data-feather="save" class="font-small-3"></i> Sync Profile
                                </button>
                            </div>
                        </div>
                        <div id="ctcNoData" class="alert alert-warning py-50 px-1" style="display: none;">
                            <i data-feather="alert-circle" class="me-25"></i>
                            No CTC structure found. Please select an employee with a CTC master configured.
                        </div>
                        <div id="ctcComponentsWrapper" style="display: none;">
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered ctc-components-table mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Component</th>
                                            <th class="text-end">Monthly (&#8377;)</th>
                                            <th class="text-end">Annual (&#8377;)</th>
                                            <th class="text-center">Taxable</th>
                                        </tr>
                                    </thead>
                                    <tbody id="ctcComponentsBody"></tbody>
                                    <tfoot>
                                        <tr class="table-light fw-bold">
                                            <td>Total CTC</td>
                                            <td class="text-end" id="ctcMonthlyTotal">0</td>
                                            <td class="text-end" id="ctcAnnualTotal">0</td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- Hidden fields for backward compatibility --}}
                    <input type="hidden" name="annual_ctc" id="annual_ctc" value="{{ old('annual_ctc', $profile->annual_ctc ?? 0) }}">
                    <input type="hidden" name="basic_salary" id="basic_salary" value="{{ old('basic_salary', $profile->basic_salary ?? 0) }}">
                    <input type="hidden" name="hra_received" id="hra_received" value="{{ old('hra_received', $profile->hra_received ?? 0) }}">

                    <hr class="my-1">

                    <div class="row">
                        {{-- Rent Paid --}}
                        <div class="col-md-3">
                            <div class="mb-1">
                                <label class="form-label" for="rent_paid">Annual Rent Paid (&#8377;)</label>
                                <input type="number" class="form-control" name="rent_paid" id="rent_paid"
                                       value="{{ old('rent_paid', $profile->rent_paid ?? '') }}"
                                       placeholder="0" step="0.01" min="0">
                            </div>
                        </div>

                        {{-- Rent Proof Upload --}}
                        <div class="col-md-3">
                            <div class="mb-1">
                                <label class="form-label">Rent Receipt / Agreement</label>
                                @if(!empty($profile->rent_proof_file))
                                    <div class="mb-25">
                                        <a href="{{ \App\Helpers\GeneralHelper::getDownloadUrl($profile->rent_proof_file) }}" target="_blank"
                                           class="btn btn-sm btn-outline-success py-25 px-50">
                                            <i data-feather="eye" class="font-small-4"></i> View Proof
                                        </a>
                                        @if(($profile->rent_proof_status ?? '') === 'verified')
                                            <span class="badge badge-light-success">Verified</span>
                                        @elseif(($profile->rent_proof_status ?? '') === 'rejected')
                                            <span class="badge badge-light-danger">Rejected</span>
                                        @endif
                                    </div>
                                @endif
                                <input type="file" class="form-control form-control-sm" name="rent_proof_file"
                                       accept=".pdf,.jpg,.jpeg,.png" style="font-size: 0.8rem;">
                                <small class="text-muted">PDF, JPG, PNG (max 5MB)</small>
                            </div>
                        </div>

                        {{-- Metro City --}}
                        <div class="col-md-3">
                            <div class="mb-1">
                                <label class="form-label">Metro City?</label>
                                <select class="form-select" name="is_metro_city" id="is_metro_city">
                                    <option value="0" {{ old('is_metro_city', $profile->is_metro_city ?? 0) == 0 ? 'selected' : '' }}>No</option>
                                    <option value="1" {{ old('is_metro_city', $profile->is_metro_city ?? 0) == 1 ? 'selected' : '' }}>Yes (Delhi, Mumbai, Chennai, Kolkata)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Step 2: Section-wise Declarations (Old Regime Only) --}}
            <div class="card" id="declarationSectionsCard">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">Step 2: Investment Declarations (Section-wise)</h4>
                    <div class="d-flex gap-50">
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btnToggleAllSections">
                            <i data-feather="maximize-2" class="me-25" style="width:14px;height:14px;"></i> Open All
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div id="oldRegimeSections">
                        @php
                            $existingDetails = [];
                            if (isset($declaration) && $declaration->id && $declaration->details) {
                                foreach ($declaration->details as $detail) {
                                    if ($detail->tax_section_head_id) {
                                        $existingDetails[$detail->tax_section_id]['heads'][$detail->tax_section_head_id] = $detail;
                                    } else {
                                        $existingDetails[$detail->tax_section_id] = $detail;
                                    }
                                }
                            }
                        @endphp

                        <div class="accordion sec-accordion" id="sectionsAccordion">
                            @foreach($taxSections as $index => $section)
                                <div class="accordion-item section-item" data-regime="{{ $section->regime_applicable }}">
                                    <h2 class="accordion-header" id="secHead{{ $index }}">
                                        <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#secBody{{ $index }}"
                                                aria-expanded="false" aria-controls="secBody{{ $index }}">
                                            <span class="sec-code">{{ $section->section_code }}</span>
                                            <span class="text-truncate">{{ $section->name }}</span>
                                            @if($section->max_limit > 0)
                                                <span class="sec-limit">(Max: &#8377;{{ number_format($section->max_limit, 0) }})</span>
                                            @endif
                                            <span class="ms-auto me-2 sec-total-badge text-success" id="sec-badge-{{ $index }}"></span>
                                        </button>
                                    </h2>
                                    <div id="secBody{{ $index }}" class="accordion-collapse collapse"
                                         aria-labelledby="secHead{{ $index }}" data-bs-parent="#sectionsAccordion">
                                        <div class="accordion-body">
                                            <input type="hidden" name="sections[{{ $index }}][section_id]" value="{{ $section->id }}">

                                            @if($section->activeHeads->count() > 0)
                                                {{-- Section has heads — show head-level inputs --}}
                                                <div class="table-responsive">
                                                    <table class="table table-sm table-bordered mb-0">
                                                        <thead class="table-light">
                                                            <tr>
                                                                <th width="20%">Head Name</th>
                                                                <th width="15%">Declared (&#8377;)</th>
                                                                <th width="15%">Approved (&#8377;)</th>
                                                                <th width="20%">Description</th>
                                                                <th width="30%">Proof</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach($section->activeHeads as $hIdx => $head)
                                                                @php
                                                                    $existingHead = $existingDetails[$section->id]['heads'][$head->id] ?? null;
                                                                @endphp
                                                                <tr>
                                                                    <td>
                                                                        <strong>{{ $head->name }}</strong>
                                                                        @if($head->code)
                                                                            <small class="text-muted">({{ $head->code }})</small>
                                                                        @endif
                                                                        @if($head->max_limit > 0)
                                                                            <br><small class="text-muted">Max: &#8377;{{ number_format($head->max_limit, 0) }}</small>
                                                                        @endif
                                                                        <input type="hidden" name="sections[{{ $index }}][heads][{{ $hIdx }}][head_id]" value="{{ $head->id }}">
                                                                    </td>
                                                                    <td>
                                                                        <input type="number" class="form-control form-control-sm section-head-amount"
                                                                               name="sections[{{ $index }}][heads][{{ $hIdx }}][amount]"
                                                                               value="{{ old('sections.'.$index.'.heads.'.$hIdx.'.amount', $existingHead ? $existingHead->declared_amount : 0) }}"
                                                                               placeholder="0" step="0.01" min="0"
                                                                               @if($head->max_limit > 0) max="{{ $head->max_limit }}" @endif
                                                                               data-section-index="{{ $index }}">
                                                                    </td>
                                                                    <td>
                                                                        <input type="number" class="form-control form-control-sm section-head-approved"
                                                                               name="sections[{{ $index }}][heads][{{ $hIdx }}][approved_amount]"
                                                                               value="{{ old('sections.'.$index.'.heads.'.$hIdx.'.approved_amount', $existingHead ? $existingHead->approved_amount : '') }}"
                                                                               placeholder="0" step="0.01" min="0"
                                                                               data-section-index="{{ $index }}"
                                                                               data-head-name="{{ $head->name }}">
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" class="form-control form-control-sm"
                                                                               name="sections[{{ $index }}][heads][{{ $hIdx }}][description]"
                                                                               value="{{ old('sections.'.$index.'.heads.'.$hIdx.'.description', $existingHead ? $existingHead->description : '') }}"
                                                                               placeholder="Brief description...">
                                                                    </td>
                                                                    <td>
                                                                        @if($existingHead && $existingHead->proof_file)
                                                                            <a href="{{ \App\Helpers\GeneralHelper::getDownloadUrl($existingHead->proof_file) }}" target="_blank"
                                                                               class="btn btn-sm btn-outline-success py-25 px-50 mb-25">
                                                                                <i data-feather="eye" class="font-small-4"></i> View
                                                                            </a>
                                                                            @if(($existingHead->proof_status ?? '') === 'verified')
                                                                                <span class="badge badge-light-success">Verified</span>
                                                                            @elseif(($existingHead->proof_status ?? '') === 'rejected')
                                                                                <span class="badge badge-light-danger">Rejected</span>
                                                                            @endif
                                                                        @endif
                                                                        <input type="file" class="form-control form-control-sm mt-25"
                                                                               name="proof_files[{{ $section->id }}][{{ $head->id }}]"
                                                                               accept=".pdf,.jpg,.jpeg,.png"
                                                                               style="font-size: 0.75rem;">
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                        <tfoot>
                                                            <tr class="table-light">
                                                                <td class="text-end fw-bold">Total:</td>
                                                                <td>
                                                                    <span class="fw-bold section-total" id="section-total-{{ $index }}">&#8377; 0</span>
                                                                    @if($section->max_limit > 0)
                                                                        <small class="text-muted">/ &#8377;{{ number_format($section->max_limit, 0) }}</small>
                                                                    @endif
                                                                </td>
                                                                <td colspan="2"></td>
                                                            </tr>
                                                        </tfoot>
                                                    </table>
                                                </div>
                                            @else
                                                {{-- Section without heads — single amount field --}}
                                                @php
                                                    $existingSection = isset($existingDetails[$section->id]) && !isset($existingDetails[$section->id]['heads']) ? $existingDetails[$section->id] : null;
                                                @endphp
                                                <div class="row align-items-end">
                                                    <div class="col-md-3">
                                                        <label class="form-label">Declared Amount (&#8377;)</label>
                                                        <input type="number" class="form-control form-control-sm section-amount"
                                                               name="sections[{{ $index }}][amount]"
                                                               value="{{ old('sections.'.$index.'.amount', $existingSection ? $existingSection->declared_amount : 0) }}"
                                                               placeholder="0" step="0.01" min="0"
                                                               data-max="{{ $section->max_limit }}"
                                                               data-section-index="{{ $index }}">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label">Approved Amount (&#8377;)</label>
                                                        <input type="number" class="form-control form-control-sm section-approved"
                                                               name="sections[{{ $index }}][approved_amount]"
                                                               value="{{ old('sections.'.$index.'.approved_amount', $existingSection ? $existingSection->approved_amount : '') }}"
                                                               placeholder="0" step="0.01" min="0"
                                                               data-section-index="{{ $index }}">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label">Description</label>
                                                        <input type="text" class="form-control form-control-sm"
                                                               name="sections[{{ $index }}][description]"
                                                               value="{{ old('sections.'.$index.'.description', $existingSection ? $existingSection->description : '') }}"
                                                               placeholder="Brief description...">
                                                    </div>
                                                    <div class="col-md-3">
                                                        @if($existingSection && $existingSection->proof_file)
                                                            <a href="{{ \App\Helpers\GeneralHelper::getDownloadUrl($existingSection->proof_file) }}" target="_blank"
                                                               class="btn btn-sm btn-outline-success mb-25">
                                                                <i data-feather="eye" class="font-small-4"></i> View Proof
                                                            </a>
                                                            @if(($existingSection->proof_status ?? '') === 'verified')
                                                                <span class="badge badge-light-success">Verified</span>
                                                            @elseif(($existingSection->proof_status ?? '') === 'rejected')
                                                                <span class="badge badge-light-danger">Rejected</span>
                                                            @endif
                                                        @endif
                                                        <label class="form-label">Upload Proof</label>
                                                        <input type="file" class="form-control form-control-sm"
                                                               name="proof_files[{{ $section->id }}][0]"
                                                               accept=".pdf,.jpg,.jpeg,.png"
                                                               style="font-size: 0.75rem;">
                                                        <small class="text-muted">PDF, JPG, PNG (max 5MB)</small>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        @if($taxSections->isEmpty())
                            <div class="alert alert-warning mt-1">
                                No tax sections configured. Please contact administrator to set up tax sections.
                            </div>
                        @endif
                    </div>

                    <div id="newRegimeNotice" style="display: none;">
                        <div class="alert alert-info">
                            <h5 class="alert-heading">New Tax Regime Selected</h5>
                            <div class="alert-body">
                                <p class="mb-0">Under the New Regime, most deductions and exemptions are not applicable.
                                Only Standard Deduction of &#8377;75,000 will be applied automatically. You do not need to declare investments.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- TDS Calculation Sheet --}}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">
                        <a class="d-flex align-items-center" data-bs-toggle="collapse" href="#tdsCalcBody" role="button" aria-expanded="true">
                            <i data-feather="chevron-down" class="font-medium-3 me-50 calc-collapse-icon"></i>
                            TDS Calculation Sheet
                        </a>
                        <small class="text-muted d-block ms-4 mt-25">(This is an estimated computation only)</small>
                    </h4>
                    <button type="button" class="btn btn-outline-primary" id="btnCalculateTds">Calculate</button>
                </div>
                <div class="collapse show" id="tdsCalcBody">
                    <div class="card-body pt-0">
                        <div class="table-responsive">
                            <table class="table table-bordered mb-0" id="tdsCalcTable">
                                <thead class="table-light">
                                    <tr>
                                        <th width="46%">Description</th>
                                        <th width="18%" class="text-amount">Projected</th>
                                        <th width="18%" class="text-amount">Old Regime</th>
                                        <th width="18%" class="text-amount">New Regime</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- Income --}}
                                    <tr class="row-sub">
                                        <td class="row-label ps-3 text-muted" style="font-size:0.85em;">Actual Salary (past months from payslips)</td>
                                        <td class="text-amount text-muted" id="calc-gross-actual" style="font-size:0.85em;">0</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount"></td>
                                    </tr>
                                    <tr class="row-sub">
                                        <td class="row-label ps-3 text-muted" style="font-size:0.85em;">Projected Salary (current &amp; future months from CTC)</td>
                                        <td class="text-amount text-muted" id="calc-gross-future" style="font-size:0.85em;">0</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount"></td>
                                    </tr>
                                    <tr>
                                        <td class="row-label fw-semibold">Projected Gross Salary (Total)</td>
                                        <td class="text-amount fw-semibold" id="calc-gross-projected">0</td>
                                        <td class="text-amount" id="calc-gross-old">0</td>
                                        <td class="text-amount" id="calc-gross-new">0</td>
                                    </tr>
                                </tbody>
                                <tbody>
                                    <tr>
                                        <td class="row-label">Less: Standard Deduction u/s 16</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-std-old">0</td>
                                        <td class="text-amount" id="calc-std-new">0</td>
                                    </tr>
                                    <tr class="row-total">
                                        <td>Gross Total Income</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-gti-old">0</td>
                                        <td class="text-amount" id="calc-gti-new">0</td>
                                    </tr>

                                    {{-- Deductions --}}
                                    <tr class="old-regime-calc-row">
                                        <td class="row-label">Less: HRA Exemption</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-hra-old">0</td>
                                        <td class="text-amount" id="calc-hra-new">—</td>
                                    </tr>
                                    <tr class="old-regime-calc-row">
                                        <td class="row-label">Less: Deductions under Chapter VI-A</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-chap6-old">0</td>
                                        <td class="text-amount" id="calc-chap6-new">—</td>
                                    </tr>
                                    <tr id="calc-chap6-detail-row" class="old-regime-calc-row" style="display:none;">
                                        <td colspan="4" class="p-0">
                                            <table class="table table-sm mb-0" style="background:#fafafa; --bs-table-border-color: transparent;">
                                                <colgroup>
                                                    <col style="width:46%">
                                                    <col style="width:18%">
                                                    <col style="width:18%">
                                                    <col style="width:18%">
                                                </colgroup>
                                                <tbody id="calc-chap6-breakdown"></tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr class="row-total">
                                        <td>Total Taxable Income</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-taxable-old">0</td>
                                        <td class="text-amount" id="calc-taxable-new">0</td>
                                    </tr>

                                    {{-- Tax --}}
                                    <tr>
                                        <td class="row-label">Tax on Total Income</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-tax-old">0</td>
                                        <td class="text-amount" id="calc-tax-new">0</td>
                                    </tr>
                                    <tr>
                                        <td class="row-sub">Add: Surcharge</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-surcharge-old">0</td>
                                        <td class="text-amount" id="calc-surcharge-new">0</td>
                                    </tr>
                                    <tr>
                                        <td class="row-sub">Less: Rebate u/s 87A</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-rebate-old">0</td>
                                        <td class="text-amount" id="calc-rebate-new">0</td>
                                    </tr>
                                    <tr>
                                        <td class="row-sub">Add: Health &amp; Education Cess (4%)</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-cess-old">0</td>
                                        <td class="text-amount" id="calc-cess-new">0</td>
                                    </tr>
                                    <tr class="row-total">
                                        <td>Total Tax Liability</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-total-old">0</td>
                                        <td class="text-amount" id="calc-total-new">0</td>
                                    </tr>
                                    <tr>
                                        <td class="row-label">Less: Tax Deducted Till Date</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-deducted-old">0</td>
                                        <td class="text-amount" id="calc-deducted-new">0</td>
                                    </tr>
                                    <tr>
                                        <td class="row-label">Tax to be Deducted (Balance)</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-balance-old">0</td>
                                        <td class="text-amount" id="calc-balance-new">0</td>
                                    </tr>
                                    <tr class="row-total">
                                        <td>Remaining Months in FY</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-months-old" colspan="2" style="text-align:center;"></td>
                                    </tr>
                                    <tr class="row-grand" style="background-color: #e3f2fd;">
                                        <td>Monthly TDS (estimated)</td>
                                        <td class="text-amount"></td>
                                        <td class="text-amount" id="calc-monthly-old">0</td>
                                        <td class="text-amount" id="calc-monthly-new">0</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Submit --}}
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row-reverse gap-2">
                        <!-- Save/Update Button - DISABLED until Calculate clicked -->
                        <button type="submit" class="btn btn-success btn-submit" id="btnUpdateDeclaration" disabled
                                title="Please click 'Calculate TDS' first">
                            <i data-feather="save" class="me-25"></i>
                            {{ isset($declaration) && $declaration->id ? 'Update Declaration' : 'Save Declaration' }}
                        </button>

                        <!-- Preview Button (only show if saved) -->
                        @if(isset($declaration) && $declaration->id)
                            <a href="/{{ $alias }}/tdx/declarations/{{ $declaration->id }}/preview" class="btn btn-outline-info">
                                <i data-feather="eye" class="me-25"></i>
                                Preview
                            </a>
                        @endif

                        <!-- Cancel Button -->
                        <a href="/{{ $alias }}/tdx/declarations" class="btn btn-outline-secondary">
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </section>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script>
        $(document).ready(function () {
            if (feather) feather.replace();

            // Init Select2
            $('.select2').select2();

            // ========== CTC FETCH LOGIC ==========
            var ctcComponents = []; // Stored globally for calc
            var ctcActualSalary   = 0; // actual earned (past months from payslips)
            var ctcFutureSalary   = 0; // projected (current + future months from CTC)
            var ctcProjectedGross = 0; // actual + future total — used for TDS calc, NOT submitted
            var ctcProjectedBasic = 0; // projected annual basic — used for HRA exemption calc
            var ctcProjectedHra   = 0; // projected annual HRA — used for HRA exemption calc

            function fetchEmployeeCtc(employeeId) {
                if (!employeeId) {
                    $('#ctcComponentsWrapper').hide();
                    $('#ctcNoData').hide();
                    ctcComponents = [];
                    return;
                }

                $('#ctcLoading').show();
                $('#ctcNoData').hide();
                $('#ctcComponentsWrapper').hide();

                $.ajax({
                    url: '/{{ $alias }}/tdx/declarations/employee-ctc/' + employeeId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        $('#ctcLoading').hide();
                        if (res.success && res.components && res.components.length > 0) {
                            ctcComponents = res.components;
                            renderCtcComponents(res.components, res.ctc_amount);
                            populateHiddenFields(res.components, res.ctc_amount, res);
                            $('#ctcComponentsWrapper').show();
                            $('#ctcNoData').hide();
                        } else {
                            ctcComponents = [];
                            ctcActualSalary = 0;
                            ctcFutureSalary = 0;
                            $('#ctcComponentsWrapper').hide();
                            $('#ctcNoData').show();
                        }
                        // Always recalculate after CTC data loads so the sheet stays in sync
                        runTdsCalculation();
                    },
                    error: function() {
                        $('#ctcLoading').hide();
                        ctcComponents = [];
                        ctcActualSalary = ctcFutureSalary = ctcProjectedGross = ctcProjectedBasic = ctcProjectedHra = 0;
                        $('#ctcComponentsWrapper').hide();
                        $('#ctcNoData').show();
                    }
                });
            }

            function renderCtcComponents(components, ctcAmount) {
                var html = '';
                var totalMonthly = 0, totalAnnual = 0;
                $.each(components, function(i, comp) {
                    html += '<tr>' +
                        '<td>' + comp.type_name + '</td>' +
                        '<td class="text-end">' + fmt(comp.monthly_amount) + '</td>' +
                        '<td class="text-end">' + fmt(comp.annual_amount) + '</td>' +
                        '<td class="text-center"><span class="badge badge-light-danger">Taxable</span></td>' +
                        '</tr>';
                    totalMonthly += comp.monthly_amount;
                    totalAnnual += comp.annual_amount;
                });
                $('#ctcComponentsBody').html(html);
                $('#ctcMonthlyTotal').text(fmt(totalMonthly));
                $('#ctcAnnualTotal').text(fmt(totalAnnual));
            }

            function populateHiddenFields(components, ctcAmount, res) {
                var totalAnnual = 0, basic = 0, hra = 0;
                $.each(components, function(i, comp) {
                    totalAnnual += comp.annual_amount;
                    var alias = (comp.alias || '').toLowerCase();
                    if (alias === 'basic_salary') basic = comp.annual_amount;
                    else if (alias === 'hra')      hra   = comp.annual_amount;
                });

                // JS-only globals for TDS calculation display (NOT submitted in form)
                ctcActualSalary   = (res && res.actual_salary   != null) ? res.actual_salary   : 0;
                ctcFutureSalary   = (res && res.future_salary   != null) ? res.future_salary   : totalAnnual;
                ctcProjectedGross = (res && res.projected_gross != null) ? res.projected_gross : totalAnnual;
                ctcProjectedBasic = (res && res.projected_basic != null) ? res.projected_basic : basic;
                ctcProjectedHra   = (res && res.projected_hra   != null) ? res.projected_hra   : hra;

                // Hidden form fields — always store CTC MASTER values so profile->annual_ctc
                // stays as the raw CTC (calculateGrossBreakdown uses profile->annual_ctc/12 for
                // future-month projection; storing projected_gross here would corrupt that).
                $('#annual_ctc').val(totalAnnual);
                $('#basic_salary').val(basic);
                $('#hra_received').val(hra);
                $('#special_allowance').val(0);
            }

            // On employee change
            $('#employee_id').on('change', function() {
                fetchEmployeeCtc($(this).val());
            });

            // Refresh CTC from master (JS only — does not persist)
            $('#btnRefreshCtc').on('click', function() {
                var empId = $('#employee_id').val();
                if (empId) fetchEmployeeCtc(empId);
            });

            // Sync Profile — persists latest CTC data to TdxEmployeeTaxProfile in DB
            $('#btnSyncProfile').on('click', function() {
                var empId = $('#employee_id').val();
                if (!empId) {
                    Swal.fire({ icon: 'warning', title: 'Select Employee', text: 'Please select an employee first.', timer: 2000 });
                    return;
                }
                var $btn = $(this);
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-25"></span>Syncing...');
                $.ajax({
                    url: '/{{ $alias }}/tdx/declarations/employee-ctc/' + empId + '/sync-profile',
                    type: 'POST',
                    dataType: 'json',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function(res) {
                        if (res.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Profile Synced',
                                html: 'Tax profile updated:<br>' +
                                    '<b>Annual CTC:</b> ₹' + Math.round(res.annual_ctc).toLocaleString('en-IN') + '<br>' +
                                    '<b>Basic Salary:</b> ₹' + Math.round(res.basic_salary).toLocaleString('en-IN') + '<br>' +
                                    '<b>HRA:</b> ₹' + Math.round(res.hra_received).toLocaleString('en-IN'),
                                timer: 3000,
                                timerProgressBar: true,
                            });
                            fetchEmployeeCtc(empId); // also refresh display
                        } else {
                            Swal.fire({ icon: 'error', title: 'Sync Failed', text: res.message || 'Could not sync profile.' });
                        }
                    },
                    error: function() {
                        Swal.fire({ icon: 'error', title: 'Error', text: 'Server error while syncing profile.' });
                    },
                    complete: function() {
                        $btn.prop('disabled', false).html('<i data-feather="save" class="font-small-3"></i> Sync Profile');
                        if (feather) feather.replace();
                    }
                });
            });

            // Auto-fetch on page load if employee already selected (edit mode)
            var initialEmpId = $('#employee_id').val();
            if (initialEmpId) {
                fetchEmployeeCtc(initialEmpId);
            }

            // ---------- Regime toggle logic ----------
            function toggleRegimeSections() {
                var regime = $('input[name="regime"]:checked').val();
                if (regime === 'new') {
                    $('#oldRegimeSections').hide();
                    $('#newRegimeNotice').show();
                    $('#btnToggleAllSections').hide();
                    $('.section-item').each(function () {
                        if ($(this).data('regime') === 'old') $(this).hide();
                    });
                    $('.old-regime-calc-row').hide();
                } else {
                    $('#oldRegimeSections').show();
                    $('#newRegimeNotice').hide();
                    $('#btnToggleAllSections').show();
                    $('.section-item').show();
                    $('.old-regime-calc-row').show();
                }
            }
            $('input[name="regime"]').on('change', toggleRegimeSections);
            toggleRegimeSections();

            // ---------- Toggle All Accordion ----------
            var allOpen = false;
            $('#btnToggleAllSections').on('click', function() {
                allOpen = !allOpen;
                if (allOpen) {
                    // Open all visible sections (remove data-bs-parent to allow multiple open)
                    $('#sectionsAccordion .accordion-collapse').each(function() {
                        $(this).removeAttr('data-bs-parent');
                    });
                    $('#sectionsAccordion .section-item:visible .accordion-collapse').collapse('show');
                    $(this).html('<i data-feather="minimize-2" class="me-25" style="width:14px;height:14px;"></i> Close All');
                } else {
                    // Close all and restore parent
                    $('#sectionsAccordion .accordion-collapse').collapse('hide');
                    $('#sectionsAccordion .accordion-collapse').each(function() {
                        $(this).attr('data-bs-parent', '#sectionsAccordion');
                    });
                    $(this).html('<i data-feather="maximize-2" class="me-25" style="width:14px;height:14px;"></i> Open All');
                }
                if (feather) feather.replace();
            });

            // ---------- Max limit enforcement (flat sections) ----------
            $('.section-amount').on('change', function () {
                var maxLimit = parseFloat($(this).data('max'));
                var val = parseFloat($(this).val()) || 0;
                if (maxLimit > 0 && val > maxLimit) {
                    $(this).val(maxLimit);
                    alert('Maximum limit for this section is ₹' + maxLimit.toLocaleString('en-IN'));
                }
            });

            // ---------- Section totals & badge update ----------
            function updateSectionBadge(sectionIndex, total) {
                var badge = $('#sec-badge-' + sectionIndex);
                if (total > 0) {
                    badge.text('₹ ' + Math.round(total).toLocaleString('en-IN'));
                } else {
                    badge.text('');
                }
            }

            function updateSectionTotal(sectionIndex) {
                var total = 0;
                $('input.section-head-approved[data-section-index="' + sectionIndex + '"]').each(function() {
                    total += parseFloat($(this).val()) || 0;
                });
                var el = $('#section-total-' + sectionIndex);
                el.html('₹ ' + total.toLocaleString('en-IN', {minimumFractionDigits: 0, maximumFractionDigits: 2}));
                updateSectionBadge(sectionIndex, total);
            }
            $('.section-head-amount, .section-head-approved').on('input change', function() {
                updateSectionTotal($(this).data('section-index'));
            });
            // Update badge for flat sections too
            $('.section-amount, .section-approved').on('input change', function() {
                var idx = $(this).data('section-index');
                var $container = $(this).closest('.row');
                var val = parseFloat($container.find('.section-approved').val()) || 0;
                updateSectionBadge(idx, val);
            });
            // Init on load
            var sectionIndices = [];
            $('input.section-head-approved').each(function() {
                var idx = $(this).data('section-index');
                if (sectionIndices.indexOf(idx) === -1) sectionIndices.push(idx);
            });
            $.each(sectionIndices, function(i, idx) { updateSectionTotal(idx); });
            // Init flat section badges
            $('input.section-approved').each(function() {
                var idx = $(this).data('section-index');
                var val = parseFloat($(this).val()) || 0;
                updateSectionBadge(idx, val);
            });

            // ========== AUTO-COPY DECLARED → APPROVED ==========
            // When declared amount changes, auto-copy to approved (if approved is empty or equals old declared)
            $(document).on('input change', '.section-head-amount', function() {
                var $row = $(this).closest('tr');
                var $approved = $row.find('.section-head-approved');
                var declaredVal = parseFloat($(this).val()) || 0;
                var approvedVal = parseFloat($approved.val()) || 0;
                // Auto-copy if approved is 0/empty or was same as declared (not manually changed)
                if (approvedVal === 0 || $approved.data('auto-synced') !== false) {
                    $approved.val(declaredVal).data('auto-synced', true);
                }
            });
            // Mark approved as manually edited when user changes it directly
            $(document).on('input', '.section-head-approved', function() {
                $(this).data('auto-synced', false);
            });

            // Same for flat sections (without heads)
            $(document).on('input change', '.section-amount', function() {
                var $container = $(this).closest('.row');
                var $approved = $container.find('.section-approved');
                var declaredVal = parseFloat($(this).val()) || 0;
                var approvedVal = parseFloat($approved.val()) || 0;
                if (approvedVal === 0 || $approved.data('auto-synced') !== false) {
                    $approved.val(declaredVal).data('auto-synced', true);
                }
            });
            $(document).on('input', '.section-approved', function() {
                $(this).data('auto-synced', false);
            });

            // ========== TDS CALCULATION LOGIC ==========
            @php
                $sectionsForCalc = $taxSections->map(function($s) {
                    return [
                        'id' => $s->id,
                        'code' => $s->section_code,
                        'name' => $s->name,
                        'max_limit' => (float)$s->max_limit,
                        'regime' => $s->regime_applicable,
                        'heads_count' => $s->activeHeads->count(),
                    ];
                })->values();
            @endphp
            var taxSectionsData = @json($sectionsForCalc);

            function fmt(val) {
                return Math.round(val).toLocaleString('en-IN');
            }

            // Get approved amount per section from form (used for calculation)
            function getSectionDeclaredAmount(sectionIndex, section) {
                var total = 0;
                if (section.heads_count > 0) {
                    $('input.section-head-approved[data-section-index="' + sectionIndex + '"]').each(function() {
                        total += parseFloat($(this).val()) || 0;
                    });
                } else {
                    var inp = $('input.section-approved[data-section-index="' + sectionIndex + '"]');
                    total = parseFloat(inp.val()) || 0;
                }
                if (section.max_limit > 0 && total > section.max_limit) {
                    total = section.max_limit;
                }
                return total;
            }

            // Collect sections payload for live-calc API
            function collectSectionsForCalc() {
                var sections = [];
                for (var i = 0; i < taxSectionsData.length; i++) {
                    var sec = taxSectionsData[i];
                    var amount = getSectionDeclaredAmount(i, sec);
                    if (amount > 0) {
                        sections.push({ section_id: sec.id, amount: amount });
                    }
                }
                return sections;
            }

            // Apply backend calc result to the DOM — single source of truth
            function applyCalcResult(data) {
                var o = data.regimes.old;
                var n = data.regimes['new'];

                $('#calc-gross-actual').text(fmt(data.actual_salary));
                $('#calc-gross-future').text(fmt(data.future_salary));
                $('#calc-gross-projected').text(fmt(data.gross_salary));
                $('#calc-gross-old').text(fmt(data.gross_salary));
                $('#calc-gross-new').text(fmt(data.gross_salary));

                $('#calc-std-old').text(fmt(o.standard_deduction));
                $('#calc-std-new').text(fmt(n.standard_deduction));


                $('#calc-gti-old').text(fmt(o.gross_total_income));
                $('#calc-gti-new').text(fmt(n.gross_total_income));

                $('#calc-hra-old').text(fmt(o.hra_exemption));

                $('#calc-chap6-old').text(fmt(o.chap6_deductions));

                // Chapter VI-A breakdown rows
                var breakdownHtml = '';
                if (o.section_deductions && o.section_deductions.length > 0) {
                    $.each(o.section_deductions, function(i, sd) {
                        breakdownHtml += '<tr><td class="row-sub" style="padding-left:2.5rem;">' +
                            sd.section_code + ' — ' + sd.section_name + '</td>' +
                            '<td class="text-amount"></td>' +
                            '<td class="text-amount">' + fmt(sd.eligible_amount) + '</td>' +
                            '<td class="text-amount">—</td></tr>';
                    });
                    $('#calc-chap6-breakdown').html(breakdownHtml);
                    $('#calc-chap6-detail-row').show();
                } else {
                    $('#calc-chap6-detail-row').hide();
                }

                $('#calc-taxable-old').text(fmt(o.taxable_income));
                $('#calc-taxable-new').text(fmt(n.taxable_income));

                $('#calc-tax-old').text(fmt(o.tax_amount));
                $('#calc-tax-new').text(fmt(n.tax_amount));

                $('#calc-surcharge-old').text(fmt(o.surcharge));
                $('#calc-surcharge-new').text(fmt(n.surcharge));

                $('#calc-rebate-old').text(o.rebate > 0 ? '-' + fmt(o.rebate) : '0');
                $('#calc-rebate-new').text(n.rebate > 0 ? '-' + fmt(n.rebate) : '0');

                $('#calc-cess-old').text(fmt(o.education_cess));
                $('#calc-cess-new').text(fmt(n.education_cess));

                $('#calc-total-old').text(fmt(o.total_tax));
                $('#calc-total-new').text(fmt(n.total_tax));

                $('#calc-deducted-old').text(fmt(o.tax_already_deducted));
                $('#calc-deducted-new').text(fmt(n.tax_already_deducted));

                $('#calc-balance-old').text(fmt(Math.max(0, o.remaining_tax)));
                $('#calc-balance-new').text(fmt(Math.max(0, n.remaining_tax)));

                var months = o.remaining_months || 1;
                $('#calc-months-old').attr('colspan', 2).css('text-align', 'center').text(months + ' months');

                $('#calc-monthly-old').text(fmt(Math.max(0, o.monthly_tds)));
                $('#calc-monthly-new').text(fmt(Math.max(0, n.monthly_tds)));
            }

            // Main calculation — calls backend so edit form always matches preview
            function runTdsCalculation(onSuccess) {
                var employeeId = $('#employee_id').val() || $('input[name="employee_id"]').val();
                if (!employeeId) return;

                var payload = {
                    employee_id:     employeeId,
                    rent_paid:       parseFloat($('#rent_paid').val()) || 0,
                    is_metro_city:   parseInt($('#is_metro_city').val()) || 0,
                    house_properties: [],
                    other_incomes:   [],
                    sections:        collectSectionsForCalc(),
                    _token:          $('input[name="_token"]').val(),
                };

                var $btn = $('#btnCalculateTds');
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-25"></span> Calculating...');

                $.ajax({
                    url:         '/{{ $alias }}/tdx/declarations/live-calc',
                    method:      'POST',
                    data:        JSON.stringify(payload),
                    contentType: 'application/json',
                    success: function(res) {
                        if (!res.success) {
                            Swal.fire({ icon: 'error', title: 'Error', text: res.message || 'Calculation failed.' });
                            return;
                        }
                        applyCalcResult(res.data);
                        if (typeof onSuccess === 'function') onSuccess();
                    },
                    error: function(xhr) {
                        var msg = xhr.responseJSON ? (xhr.responseJSON.message || 'Server error') : 'Calculation failed. Please try again.';
                        Swal.fire({ icon: 'error', title: 'Calculation Error', text: msg });
                    },
                    complete: function() {
                        $btn.prop('disabled', false).html('Calculate');
                        if (typeof feather !== 'undefined') feather.replace();
                    },
                });
            }

            // ========== CALCULATE & UPDATE WORKFLOW ENFORCEMENT ==========
            // Define variables and enable function FIRST (before they're used)
            let isCalculationDone = false;
            const updateBtn = $('#btnUpdateDeclaration');
            const calculateBtn = $('#btnCalculateTds');
            const isEditMode = {{ isset($declaration) && $declaration->id ? 'true' : 'false' }};

            // On page load: Check if this is edit mode - if so, enable button immediately
            // Edit mode: button always enabled — server recalculates on save
            if (isEditMode) {
                isCalculationDone = true;
                updateBtn.prop('disabled', false)
                    .attr('title', 'Click to save and update declaration');
            }

            // Function to enable Update button after successful calculation
            window.enableUpdateButton = function(showAlert = true) {
                isCalculationDone = true;
                updateBtn.prop('disabled', false)
                    .attr('title', 'Click to save and update declaration')
                    .removeClass('btn-outline-secondary')
                    .addClass('btn-success');
                
                // Show success message only if explicitly requested (not on auto-load)
                if (showAlert) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Calculation Done!',
                        text: 'You can now update the declaration.',
                        timer: 2000,
                        timerProgressBar: true,
                    });
                }
            };

            // Calculate button - show alert on manual click
            $('#btnCalculateTds').on('click', function(e) {
                e.preventDefault();
                runTdsCalculation(function() {
                    enableUpdateButton(true);
                });
            });

            // ========== FORM SUBMISSION HANDLER ==========
            $('#declarationForm').on('submit', function(e) {
                e.preventDefault();
                
                var $form = $(this);
                var $submitBtn = $('.btn-submit');
                var originalBtnText = $submitBtn.html();
                var listingUrl = '/{{ $alias }}/tdx/declarations';
                
                // Check if calculation is required and not done (for NEW declarations only)
                // For edit mode, this check is skipped as isCalculationDone is already true
                if (!isEditMode && !isCalculationDone) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Calculation Required!',
                        html: '<strong>Please click "Calculate TDS"</strong> first to calculate your tax liability.',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK, I will calculate',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    });
                    return false;
                }
                
                // Disable submit button and show loading state
                $submitBtn.prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-25"></span>Processing...');
                
                // Create FormData with form content
                var formData = new FormData($form[0]);
                
                // Clean up empty section head fields before sending
                var sections = [];
                var sectionIndex = 0;
                while (formData.has('sections[' + sectionIndex + '][section_id]')) {
                    var sectionId = formData.get('sections[' + sectionIndex + '][section_id]');
                    var heads = [];
                    var headIndex = 0;
                    
                    // Collect all heads for this section (if any)
                    while (formData.has('sections[' + sectionIndex + '][heads][' + headIndex + '][head_id]')) {
                        var headId = formData.get('sections[' + sectionIndex + '][heads][' + headIndex + '][head_id]');
                        var amount = formData.get('sections[' + sectionIndex + '][heads][' + headIndex + '][amount]');
                        var description = formData.get('sections[' + sectionIndex + '][heads][' + headIndex + '][description]');
                        
                        // Only include if both head_id and amount are present
                        if (headId && amount) {
                            heads.push({
                                head_id: headId,
                                amount: amount,
                                description: description || ''
                            });
                        }
                        headIndex++;
                    }
                    
                    // Check if this is a section without heads (flat amount field)
                    var amount = formData.get('sections[' + sectionIndex + '][amount]');
                    var description = formData.get('sections[' + sectionIndex + '][description]');
                    
                    sections.push({
                        section_id: sectionId,
                        heads: heads,
                        amount: amount || '',  // For sections without heads
                        description: description || ''  // For sections without heads
                    });
                    sectionIndex++;
                }
                
                // Remove all section/head data from FormData and re-add only the clean ones
                for (var i = 0; i < 50; i++) {
                    for (var j = 0; j < 50; j++) {
                        formData.delete('sections[' + i + '][heads][' + j + '][head_id]');
                        formData.delete('sections[' + i + '][heads][' + j + '][amount]');
                        formData.delete('sections[' + i + '][heads][' + j + '][description]');
                    }
                    formData.delete('sections[' + i + '][section_id]');
                    formData.delete('sections[' + i + '][amount]');
                    formData.delete('sections[' + i + '][description]');
                }
                
                $.each(sections, function(idx, section) {
                    formData.set('sections[' + idx + '][section_id]', section.section_id);
                    
                    // Add heads if this section has them
                    if (section.heads && section.heads.length > 0) {
                        $.each(section.heads, function(hIdx, head) {
                            formData.set('sections[' + idx + '][heads][' + hIdx + '][head_id]', head.head_id);
                            formData.set('sections[' + idx + '][heads][' + hIdx + '][amount]', head.amount);
                            formData.set('sections[' + idx + '][heads][' + hIdx + '][description]', head.description);
                        });
                    } else {
                        // Add flat amount fields for sections without heads
                        if (section.amount) {
                            formData.set('sections[' + idx + '][amount]', section.amount);
                        }
                        if (section.description) {
                            formData.set('sections[' + idx + '][description]', section.description);
                        }
                    }
                });
                
                // Submit form via AJAX
                $.ajax({
                    url: $form.attr('action'),
                    method: 'POST',
                    headers: {
                        'X-HTTP-Method-Override': $form.find('input[name="_method"]').val() || 'POST'
                    },
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            var successMsg = isEditMode ? 'Declaration updated and calculated!' : 'Declaration saved and calculated!';
                            
                            // Redirect to preview if we have a declaration_id
                            var redirectUrl = response.declaration_id 
                                ? '/{{ $alias }}/tdx/declarations/' + response.declaration_id + '/preview'
                                : listingUrl;

                            // Show SweetAlert success message
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: successMsg,
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'View Preview',
                                allowOutsideClick: false,
                                allowEscapeKey: false
                            }).then(function(result) {
                                if (result.isConfirmed) {
                                    window.location.href = redirectUrl;
                                }
                            });
                        }
                    },
                    error: function(xhr) {
                        // Restore button state
                        $submitBtn.prop('disabled', false).html(originalBtnText);
                        
                        var errorMsg = 'An error occurred while saving. Please try again.';
                        
                        // Parse error from response
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        } else if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            // Validation errors
                            var errors = xhr.responseJSON.errors;
                            errorMsg = 'Please fix the following errors:\n\n';
                            $.each(errors, function(field, messages) {
                                if (Array.isArray(messages)) {
                                    errorMsg += '• ' + messages[0] + '\n';
                                } else {
                                    errorMsg += '• ' + messages + '\n';
                                }
                            });
                        }
                        
                        // Show error alert
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: errorMsg,
                            confirmButtonColor: '#d33',
                            confirmButtonText: 'Try Again'
                        });
                    }
                });
            });

            // In edit mode, the calculation fires automatically after fetchEmployeeCtc() AJAX completes
            // (inside the success callback above). No need for an early sync call here.
            @if(isset($declaration) && $declaration->id)
                enableUpdateButton(false);  // Enable update button immediately in edit mode (no alert)
            @endif
        });
    </script>
@endpush