@extends('app-new')

@push('head-script')
    <link rel="stylesheet" href="/app-assets/vendors/css/forms/select/select2.min.css">
    <style>
        #tax-section-form .form-label { font-weight: 500; margin-bottom: 0.35rem; }
        #tax-section-form .field-hint { font-size: 0.72rem; color: #b9b9c3; display: block; margin-top: 0.2rem; }
        #tax-section-form .card-title { font-weight: 600; }
        /* Quick reference side panel */
        .tdx-ref-panel { background: #f8f8fc; border: 1px solid #ebe9f1; border-radius: 8px; padding: 1rem; }
        .tdx-ref-panel .ref-head { font-size: 0.8rem; font-weight: 600; color: #6e6b7b; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.6rem; display: flex; align-items: center; }
        .tdx-ref-panel .ref-head svg { width: 15px; height: 15px; }
        .tdx-ref-list { list-style: none; padding: 0; margin: 0; }
        .tdx-ref-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px dashed #ebe9f1; font-size: 0.78rem; }
        .tdx-ref-list li:last-child { border-bottom: 0; }
        .tdx-ref-list .ref-code { font-weight: 600; color: #7367f0; }
        .tdx-ref-list .ref-amt { color: #82868b; white-space: nowrap; }
        /* Section heads table */
        .section-head-table th { font-size: 0.78rem; font-weight: 600; color: #6e6b7b; white-space: nowrap; }
        .section-head-table td { vertical-align: middle; }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Tax Sections</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/global-config">TDS Global Config</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/tax-sections">Tax Sections</a></li>
                    <li class="breadcrumb-item active">
                        {{ isset($section) ? 'Edit' : 'Add New' }}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right col-md-3 col-12 mb-2 d-flex justify-content-md-end justify-content-start align-items-start gap-1">
        <a href="/{{ $alias }}/tdx/tax-sections" class="btn btn-outline-secondary">
            <i data-feather="arrow-left" class="font-small-4 me-25"></i> Back
        </a>
        <button type="button" class="btn btn-success" id="submit-text" data-request="ajax-submit" data-target="[role=post-data]">
            {{ isset($section) ? 'Update' : 'Submit' }}
        </button>
    </div>
@endpush

@section('content')
    <form method="POST"
          action="{{ isset($section) ? '/' . $alias . '/tdx/tax-sections/' . $section->id . '/update' : '/' . $alias . '/tdx/tax-sections/store' }}"
          role="post-data"
          redirect="/{{ $alias }}/tdx/tax-sections">
        @csrf
        @if(isset($section))
            <input type="hidden" name="_method" value="PUT">
        @endif

        <section id="tax-section-form">
            {{-- Section Details Card --}}
            <div class="card">
                <div class="card-header border-bottom">
                    <h4 class="card-title mb-0">
                        {{ isset($section) ? 'Edit Tax Section' : 'Add New Tax Section' }}
                    </h4>
                </div>
                <div class="card-body pt-2">
                    <div class="row">
                        {{-- Left: form fields --}}
                        <div class="col-lg-8 col-md-7">
                            <div class="row">
                                {{-- Section Code --}}
                                <div class="col-md-6 mb-1">
                                    <label class="form-label">Section Code <span class="text-danger">*</span></label>
                                    <input type="text" name="section_code"
                                           value="{{ old('section_code', $section->section_code ?? '') }}"
                                           class="form-control" placeholder="e.g. 80C, 80D, HRA">
                                    @error('section_code') <label class="error">{{ $message }}</label> @enderror
                                </div>

                                {{-- Name --}}
                                <div class="col-md-6 mb-1">
                                    <label class="form-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name"
                                           value="{{ old('name', $section->name ?? '') }}"
                                           class="form-control" placeholder="e.g. Section 80C">
                                    @error('name') <label class="error">{{ $message }}</label> @enderror
                                </div>

                                {{-- Section Group --}}
                                <div class="col-md-6 mb-1">
                                    <label class="form-label">Section Group</label>
                                    <select name="section_group_id" class="form-select">
                                        <option value="">-- None --</option>
                                        @foreach($sectionGroups as $groupId => $groupName)
                                            <option value="{{ $groupId }}" {{ old('section_group_id', $section->section_group_id ?? '') == $groupId ? 'selected' : '' }}>{{ $groupName }}</option>
                                        @endforeach
                                    </select>
                                    <span class="field-hint">Combined limit applies across all sections in the group.</span>
                                    @error('section_group_id') <label class="error">{{ $message }}</label> @enderror
                                </div>

                                {{-- Max Limit --}}
                                <div class="col-md-6 mb-1">
                                    <label class="form-label">Max Limit (&#8377;) <span class="text-danger">*</span></label>
                                    <input type="number" name="max_limit"
                                           value="{{ old('max_limit', $section->max_limit ?? '0') }}"
                                           class="form-control" step="0.01" min="0" placeholder="e.g. 150000">
                                    <span class="field-hint">Set <strong>0</strong> for no cap (e.g. HRA, 80E).</span>
                                    @error('max_limit') <label class="error">{{ $message }}</label> @enderror
                                </div>

                                {{-- Regime Applicable --}}
                                <div class="col-md-6 mb-1">
                                    <label class="form-label">Regime Applicable <span class="text-danger">*</span></label>
                                    <select name="regime_applicable" class="form-select">
                                        <option value="old" {{ old('regime_applicable', $section->regime_applicable ?? '') === 'old' ? 'selected' : '' }}>Old Regime</option>
                                        <option value="new" {{ old('regime_applicable', $section->regime_applicable ?? '') === 'new' ? 'selected' : '' }}>New Regime</option>
                                        <option value="both" {{ old('regime_applicable', $section->regime_applicable ?? '') === 'both' ? 'selected' : '' }}>Both</option>
                                    </select>
                                    @error('regime_applicable') <label class="error">{{ $message }}</label> @enderror
                                </div>

                                {{-- Status --}}
                                <div class="col-md-3 col-6 mb-1">
                                    <label class="form-label">Status <span class="text-danger">*</span></label>
                                    <select name="status" class="form-select">
                                        <option value="active" {{ old('status', $section->status ?? 'active') === 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status', $section->status ?? '') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                    @error('status') <label class="error">{{ $message }}</label> @enderror
                                </div>

                                {{-- Sort Order --}}
                                <div class="col-md-3 col-6 mb-1">
                                    <label class="form-label">Sort Order</label>
                                    <input type="number" name="sort_order"
                                           value="{{ old('sort_order', $section->sort_order ?? '0') }}"
                                           class="form-control" min="0" placeholder="0">
                                    @error('sort_order') <label class="error">{{ $message }}</label> @enderror
                                </div>

                                {{-- Description --}}
                                <div class="col-12 mb-0">
                                    <label class="form-label">Description</label>
                                    <textarea name="description" class="form-control" rows="2"
                                              placeholder="Brief description of what this section covers">{{ old('description', $section->description ?? '') }}</textarea>
                                    @error('description') <label class="error">{{ $message }}</label> @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Right: quick reference panel --}}
                        <div class="col-lg-4 col-md-5 mt-1 mt-md-0">
                            <div class="tdx-ref-panel h-100">
                                <div class="ref-head">
                                    <i data-feather="info" class="me-50"></i> Common Section Codes
                                </div>
                                <ul class="tdx-ref-list">
                                    <li><span class="ref-code">80C</span><span class="ref-amt">PPF, ELSS, LIC · ₹1,50,000</span></li>
                                    <li><span class="ref-code">80D</span><span class="ref-amt">Medical Insurance · ₹25,000</span></li>
                                    <li><span class="ref-code">80CCD(1B)</span><span class="ref-amt">NPS · ₹50,000</span></li>
                                    <li><span class="ref-code">80E</span><span class="ref-amt">Education Loan Interest</span></li>
                                    <li><span class="ref-code">80G</span><span class="ref-amt">Donations</span></li>
                                    <li><span class="ref-code">24(b)</span><span class="ref-amt">Home Loan Interest · ₹2,00,000</span></li>
                                    <li><span class="ref-code">HRA</span><span class="ref-amt">House Rent Allowance</span></li>
                                    <li><span class="ref-code">80TTA</span><span class="ref-amt">Savings Interest · ₹10,000</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Section Heads --}}
            <div class="card">
                <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="card-title mb-0">Section Heads</h4>
                        <small class="text-muted">Sub-items under this section (e.g. PPF, ELSS under 80C). Each can have its own Max Limit &mdash; <strong>0</strong> = no cap.</small>
                    </div>
                    <button type="button" class="btn btn-sm btn-success add-section-head">
                        <i data-feather="plus" class="font-small-4 me-25"></i> Add Head
                    </button>
                </div>
                <div class="card-body pt-2">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0 section-head-table">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:24%">Head Name <span class="text-danger">*</span></th>
                                    <th style="width:12%">Code</th>
                                    <th style="width:15%">Max Limit (&#8377;)</th>
                                    <th style="width:12%">Status</th>
                                    <th style="width:8%" class="text-center">Proof</th>
                                    <th style="width:21%">Description</th>
                                    <th style="width:8%" class="text-center">&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody class="section-head-box">
                                @if(isset($section) && $section->heads->count() > 0)
                                    @foreach($section->heads as $hIndex => $head)
                                        <tr class="section-head">
                                            <td>
                                                <input type="hidden" name="heads[{{ $hIndex }}][id]" value="{{ $head->id }}" class="in-head-id">
                                                <input type="text" name="heads[{{ $hIndex }}][name]" value="{{ $head->name }}" class="form-control form-control-sm in-head-name" placeholder="e.g. PPF">
                                            </td>
                                            <td><input type="text" name="heads[{{ $hIndex }}][code]" value="{{ $head->code }}" class="form-control form-control-sm in-head-code" placeholder="PPF"></td>
                                            <td><input type="number" name="heads[{{ $hIndex }}][max_limit]" value="{{ $head->max_limit ?? '0' }}" class="form-control form-control-sm in-head-limit" step="0.01" min="0" placeholder="0 = no cap"></td>
                                            <td>
                                                <select name="heads[{{ $hIndex }}][status]" class="form-select form-select-sm in-head-status">
                                                    <option value="active" {{ $head->status === 'active' ? 'selected' : '' }}>Active</option>
                                                    <option value="inactive" {{ $head->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                                </select>
                                            </td>
                                            <td class="text-center">
                                                <input type="hidden" name="heads[{{ $hIndex }}][is_proof_required]" value="0" class="in-head-proof-hidden">
                                                <input type="checkbox" name="heads[{{ $hIndex }}][is_proof_required]" value="1" class="form-check-input in-head-proof" {{ $head->is_proof_required ? 'checked' : '' }}>
                                            </td>
                                            <td><input type="text" name="heads[{{ $hIndex }}][description]" value="{{ $head->description }}" class="form-control form-control-sm in-head-desc" placeholder="Brief description"></td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-outline-danger remove-section-head" title="Remove head">
                                                    <i data-feather="trash-2" class="font-small-4"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr class="section-head">
                                        <td>
                                            <input type="text" name="heads[0][name]" value="" class="form-control form-control-sm in-head-name" placeholder="e.g. PPF">
                                        </td>
                                        <td><input type="text" name="heads[0][code]" value="" class="form-control form-control-sm in-head-code" placeholder="PPF"></td>
                                        <td><input type="number" name="heads[0][max_limit]" value="0" class="form-control form-control-sm in-head-limit" step="0.01" min="0" placeholder="0 = no cap"></td>
                                        <td>
                                            <select name="heads[0][status]" class="form-select form-select-sm in-head-status">
                                                <option value="active">Active</option>
                                                <option value="inactive">Inactive</option>
                                            </select>
                                        </td>
                                        <td class="text-center">
                                            <input type="hidden" name="heads[0][is_proof_required]" value="0" class="in-head-proof-hidden">
                                            <input type="checkbox" name="heads[0][is_proof_required]" value="1" class="form-check-input in-head-proof">
                                        </td>
                                        <td><input type="text" name="heads[0][description]" value="" class="form-control form-control-sm in-head-desc" placeholder="Brief description"></td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-outline-danger remove-section-head" title="Remove head">
                                                <i data-feather="trash-2" class="font-small-4"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <small class="text-muted d-block mt-50">Leave with no rows to create a section without heads (a single declared amount will be used instead).</small>
                </div>
            </div>

        </section>
    </form>
@endsection

@push('footer-script')
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>
    <script>
        $(document).ready(function() {
            if (typeof feather !== 'undefined') { feather.replace(); }

            function reindexHeads() {
                $(".section-head").each(function(index) {
                    $(this).find('.in-head-id').attr('name', 'heads[' + index + '][id]');
                    $(this).find('.in-head-name').attr('name', 'heads[' + index + '][name]');
                    $(this).find('.in-head-code').attr('name', 'heads[' + index + '][code]');
                    $(this).find('.in-head-limit').attr('name', 'heads[' + index + '][max_limit]');
                    $(this).find('.in-head-status').attr('name', 'heads[' + index + '][status]');
                    $(this).find('.in-head-desc').attr('name', 'heads[' + index + '][description]');
                    $(this).find('.in-head-proof-hidden').attr('name', 'heads[' + index + '][is_proof_required]');
                    $(this).find('.in-head-proof').attr('name', 'heads[' + index + '][is_proof_required]');
                });
            }

            var headRowHtml = '<tr class="section-head">' +
                '<td><input type="text" name="heads[0][name]" value="" class="form-control form-control-sm in-head-name" placeholder="e.g. PPF"></td>' +
                '<td><input type="text" name="heads[0][code]" value="" class="form-control form-control-sm in-head-code" placeholder="PPF"></td>' +
                '<td><input type="number" name="heads[0][max_limit]" value="0" class="form-control form-control-sm in-head-limit" step="0.01" min="0" placeholder="0 = no cap"></td>' +
                '<td><select name="heads[0][status]" class="form-select form-select-sm in-head-status"><option value="active">Active</option><option value="inactive">Inactive</option></select></td>' +
                '<td class="text-center"><input type="hidden" name="heads[0][is_proof_required]" value="0" class="in-head-proof-hidden"><input type="checkbox" name="heads[0][is_proof_required]" value="1" class="form-check-input in-head-proof"></td>' +
                '<td><input type="text" name="heads[0][description]" value="" class="form-control form-control-sm in-head-desc" placeholder="Brief description"></td>' +
                '<td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-section-head" title="Remove head"><i data-feather="trash-2" class="font-small-4"></i></button></td>' +
                '</tr>';

            $("body").on("click", ".add-section-head", function() {
                $(".section-head-box").append(headRowHtml);
                reindexHeads();
                if (typeof feather !== 'undefined') { feather.replace(); }
            });

            $("body").on("click", ".remove-section-head", function() {
                $(this).closest(".section-head").remove();
                reindexHeads();
            });
        });
    </script>
@endpush