@php
    $editing = isset($customer);
@endphp


<div class="row g-3">
    <div class="col-12">
        <div class="form-section"><div class="form-section-title"><i class="ph-duotone ph-user"></i> Basic Information</div></div>
    </div>
    <div class="col-md-6">
        <label class="form-label">Customer name<span class="text-danger">*</span></label>
        <input name="name" value="{{ old('name', $customer->name ?? '') }}" class="form-control" required>
    </div>

    <div class="col-md-3">
        <label class="form-label">Mobile number<span class="text-danger">*</span></label>
        <input name="mobile" minlength="10" maxlength="10" value="{{ old('mobile', $customer->mobile ?? '') }}" class="form-control" required>
    </div>

    <div class="col-md-3">
        <label class="form-label">GST number</label>
        <input name="gst_number" minlength="15" maxlength="15" value="{{ old('gst_number', $customer->gst_number ?? '') }}" class="form-control">
    </div>
    {{-- NEW: MSME Input --}}
    <div class="col-md-3">
        <label class="form-label">MSME Number</label>
        <input name="msme_number" value="{{ old('msme_number', $customer->msme_number ?? '') }}" class="form-control">
    </div>
    <div class="col-md-3 d-flex align-items-end">
        <div class="form-check mb-2">
            <input type="hidden" name="is_sez" value="0"> {{-- Fallback for unchecked --}}
            <input class="form-check-input" type="checkbox" name="is_sez" value="1" id="isSezCheck"
                @checked(old('is_sez', $customer->is_sez ?? false))>
            <label class="form-check-label fw-bold" for="isSezCheck">
                SEZ?
            </label>
        </div>
    </div>
    <div class="col-md-3">
        <label class="form-label">Contact Person</label>
        <input name="contact_person" value="{{ old('contact_person', $customer->contact_person ?? '') }}"
            class="form-control">
    </div>
    <div class="col-md-3">
        <label class="form-label">Transportation name</label>
        <input name="transportation_name" value="{{ old('transportation_name', $customer->transportation_name ?? '') }}"
            class="form-control">
    </div>

    <div class="col-12">
        <div class="form-section"><div class="form-section-title"><i class="ph-duotone ph-map-pin"></i> Address</div></div>
    </div>
    <div class="col-12">
        <label class="form-label">Billing Address</label>
        <textarea name="billing_address" rows="2"
            class="form-control">{{ old('billing_address', $customer->billing_address ?? '') }}</textarea>
    </div>

    <div class="col-md-6">
        <label class="form-label">State<span class="text-danger">*</span></label>
        <input name="state" value="{{ old('state', $customer->state ?? '') }}" class="form-control" list="states"
            required />
        <datalist id="states">
            <!-- States -->
            <option value="Andhra Pradesh">
            <option value="Arunachal Pradesh">
            <option value="Assam">
            <option value="Bihar">
            <option value="Chhattisgarh">
            <option value="Goa">
            <option value="Gujarat">
            <option value="Haryana">
            <option value="Himachal Pradesh">
            <option value="Jharkhand">
            <option value="Karnataka">
            <option value="Kerala">
            <option value="Madhya Pradesh">
            <option value="Maharashtra">
            <option value="Manipur">
            <option value="Meghalaya">
            <option value="Mizoram">
            <option value="Nagaland">
            <option value="Odisha">
            <option value="Punjab">
            <option value="Rajasthan">
            <option value="Sikkim">
            <option value="Tamil Nadu">
            <option value="Telangana">
            <option value="Tripura">
            <option value="Uttar Pradesh">
            <option value="Uttarakhand">
            <option value="West Bengal">

                <!-- Union Territories -->
            <option value="Andaman and Nicobar Islands">
            <option value="Chandigarh">
            <option value="Dadra and Nagar Haveli and Daman and Diu">
            <option value="Delhi">
            <option value="Jammu and Kashmir">
            <option value="Ladakh">
            <option value="Lakshadweep">
            <option value="Puducherry">
        </datalist>
    </div>

    <div class="col-md-6">
        <label class="form-label">Pincode<span class="text-danger">*</span></label>
        <input name="pincode" value="{{ old('pincode', $customer->pincode ?? '') }}" class="form-control" required />
    </div>

    <div class="col-12">
        <div class="form-section"><div class="form-section-title"><i class="ph-duotone ph-receipt"></i> Tax Details</div></div>
    </div>
    <div class="col-md-3">
        <label class="form-label">VPP (COD)<span class="text-danger">*</span></label>
        <select name="vpp_cod" class="form-select" required>
            <option value="1" @selected(old('vpp_cod', $customer->vpp_cod ?? false))>Yes</option>
            <option value="0" @selected(!old('vpp_cod', $customer->vpp_cod ?? false))>No</option>
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">Type of party<span class="text-danger">*</span></label>
        @php
            $partyTypes = [
                'sales' => 'Sales',
                'purchase' => 'Purchase',
                'both' => 'Both (Sales & Purchase)',
            ];
        @endphp
        <select name="party_type" class="form-select" required>
            @foreach ($partyTypes as $value => $label)
                <option value="{{ $value }}" @selected(old('party_type', $customer->party_type ?? '') === $value)>
                    {{ $label }}</option>
            @endforeach
        </select>
    </div>

    <!--<div class="col-md-4">
        <label class="form-label">Type of mode<span class="text-danger">*</span></label>
        <select name="mode_type" class="form-select" required>
            @foreach (['cash', 'bill'] as $opt)
                <option value="{{ $opt }}" @selected(old('mode_type', $customer->mode_type ?? '') === $opt)>
                    {{ ucfirst($opt) }}</option>
            @endforeach
        </select>
    </div>-->

    <div class="col-md-3">
        <label class="form-label">Mode of Payment<span class="text-danger">*</span></label>
        @php
            $paymentTypes = [
                'cash' => '100% Advance',
                'credit' => '15 Days Credit',
            ];
        @endphp
        <select name="payment_type" class="form-select" onchange="toggleCashOption()" required>
            @foreach ($paymentTypes as $value => $label)
                <option value="{{ $value }}" @selected(old('payment_type', $customer->payment_type ?? '') === $value)>
                    {{ $label }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-12">
        <label class="form-label">Shipping Address(es)</label>
        <div id="shipping-wrapper">
            @php
                $existing = $customer->shippingAddresses ?? collect();
                $oldRows  = old('shipping_addresses', []);
            @endphp

            @foreach ($existing as $i => $addr)
                @php $old = $oldRows[$i] ?? [] @endphp
                <div class="shipping-row card p-2 mb-2">
                    <div class="row g-2">
                        <div class="col-12">
                            <textarea name="shipping_addresses[{{ $i }}][address]" rows="2"
                                class="form-control form-control-sm" placeholder="Address">{{ old("shipping_addresses.$i.address", $addr->address) }}</textarea>
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[{{ $i }}][pincode]"
                                class="form-control form-control-sm" placeholder="Pincode"
                                value="{{ old("shipping_addresses.$i.pincode", $addr->pincode) }}">
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[{{ $i }}][contact_person]"
                                class="form-control form-control-sm" placeholder="Contact Person"
                                value="{{ old("shipping_addresses.$i.contact_person", $addr->contact_person) }}">
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[{{ $i }}][mobile]"
                                class="form-control form-control-sm" placeholder="Mobile"
                                value="{{ old("shipping_addresses.$i.mobile", $addr->mobile) }}">
                        </div>
                    </div>
                    <div class="text-end mt-1">
                        <button type="button" class="btn btn-outline-danger btn-sm remove-ship-row">Remove</button>
                    </div>
                </div>
            @endforeach
        </div>
        <button type="button" class="btn btn-outline-secondary btn-sm" id="addShippingBtn">+ Add another</button>
    </div>

    {{-- Opening Balance (only on create) --}}
    @if(!$editing)
    <div class="col-12">
        <div class="form-section"><div class="form-section-title"><i class="ph-duotone ph-scales"></i> Opening Balances</div></div>
    </div>
    <div class="col-12">
        <div class="card p-3 bg-light">
            <h6 class="mb-3">Opening Balance (per Company)</h6>
            <div class="table-responsive">
                <table class="table table-hover table-sm align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Company</th>
                            <th>As of Date</th>
                            <th>Fiscal Year</th>
                            <th>Direction</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $cashModeOn = currentCompany()?->mode === 'cash'; @endphp
                        @foreach($companies as $company)
                            @if($company->mode === 'cash' && !$cashModeOn) @continue @endif
                            <tr>
                                <td><strong>{{ $company->name }}</strong></td>
                                <td>
                                    <input type="date" name="opening_balances[{{ $company->id }}][as_of_date]"
                                           class="form-control form-control-sm ob-date-input"
                                           data-company="{{ $company->id }}"
                                           value="{{ old('opening_balances.'.$company->id.'.as_of_date', now()->toDateString()) }}">
                                </td>
                                <td>
                                    <input type="text" name="opening_balances[{{ $company->id }}][fiscal_year]"
                                           class="form-control form-control-sm ob-fiscal-year"
                                           id="fiscal_year_{{ $company->id }}"
                                           value="{{ old('opening_balances.'.$company->id.'.fiscal_year', '') }}"
                                           placeholder="Auto" readonly>
                                </td>
                                <td>
                                    <select name="opening_balances[{{ $company->id }}][direction]" class="form-select form-select-sm">
                                        <option value="receive" @selected(old('opening_balances.'.$company->id.'.direction', 'receive') === 'receive')>Receive</option>
                                        <option value="payable" @selected(old('opening_balances.'.$company->id.'.direction') === 'payable')>Payable</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="number" name="opening_balances[{{ $company->id }}][amount]"
                                           class="form-control form-control-sm text-end"
                                           step="0.01" min="0" placeholder="0"
                                           value="{{ old('opening_balances.'.$company->id.'.amount', '') }}">
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <p class="text-muted small mt-2 mb-0">
                <i class="ph-duotone ph-info"></i> Enter opening balance for each company. Leave amount empty or 0 to skip. Fiscal year is auto-calculated from date (April-March).
            </p>
        </div>
    </div>
    @endif

</div>

@push('scripts')
    <script>
        (function () {
            const wrapper = document.getElementById('shipping-wrapper');
            const addBtn = document.getElementById('addShippingBtn');
            const copyBtn = document.getElementById('copyBillingBtn');

            function nextIndex() {
                return wrapper.querySelectorAll('.shipping-row').length;
            }

            function rowTemplate(i) {
                return `
                <div class="shipping-row card p-2 mb-2">
                    <div class="row g-2">
                        <div class="col-12">
                            <textarea name="shipping_addresses[${i}][address]" rows="2"
                                class="form-control form-control-sm" placeholder="Address"></textarea>
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[${i}][pincode]"
                                class="form-control form-control-sm" placeholder="Pincode">
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[${i}][contact_person]"
                                class="form-control form-control-sm" placeholder="Contact Person">
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[${i}][mobile]"
                                class="form-control form-control-sm" placeholder="Mobile">
                        </div>
                    </div>
                    <div class="text-end mt-1">
                        <button type="button" class="btn btn-outline-danger btn-sm remove-ship-row">Remove</button>
                    </div>
                </div>`;
            }

            addBtn?.addEventListener('click', function () {
                wrapper.insertAdjacentHTML('beforeend', rowTemplate(nextIndex()));
            });

            wrapper.addEventListener('click', function (e) {
                if (e.target.classList.contains('remove-ship-row')) {
                    e.target.closest('.shipping-row').remove();
                    // Re-index remaining rows so names stay sequential
                    wrapper.querySelectorAll('.shipping-row').forEach((row, i) => {
                        row.querySelectorAll('[name]').forEach(el => {
                            el.name = el.name.replace(/shipping_addresses\[\d+\]/, `shipping_addresses[${i}]`);
                        });
                    });
                }
            });

            // Basic HTML escaping for safety
            function escapeHtml(str) {
                return String(str ?? '')
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;");
            }
        })();

        // Auto-calculate fiscal year from as_of_date (Indian FY: April-March)
        function calculateFiscalYear(dateStr) {
            if (!dateStr) return '';
            const date = new Date(dateStr);
            const month = date.getMonth() + 1; // 1-12
            const year = date.getFullYear();
            // Indian FY: April (4) to March (3)
            // If month >= 4 (April), FY is year to year+1
            // If month < 4 (Jan-Mar), FY is year-1 to year
            if (month >= 4) {
                return year + '-' + String(year + 1).slice(-2);
            } else {
                return (year - 1) + '-' + String(year).slice(-2);
            }
        }

        // Attach event listeners to all opening balance date inputs
        document.querySelectorAll('.ob-date-input').forEach(function(input) {
            const companyId = input.dataset.company;
            const fiscalYearInput = document.getElementById('fiscal_year_' + companyId);

            // Calculate on load
            if (input.value && fiscalYearInput) {
                fiscalYearInput.value = calculateFiscalYear(input.value);
            }

            // Calculate on change
            input.addEventListener('change', function() {
                if (fiscalYearInput) {
                    fiscalYearInput.value = calculateFiscalYear(this.value);
                }
            });
        });
    </script>
@endpush