@php
    $editing = isset($customer);
    $selectedTransporterIds = collect(old(
        'transporter_ids',
        $editing ? $customer->transporters->pluck('id')->all() : []
    ))->map(fn ($id) => (string) $id)->all();
@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" maxlength="255" required>
    </div>

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

    <div class="col-md-3">
        <label class="form-label">GST number</label>
        <input name="gst_number" maxlength="20" 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" maxlength="50">
    </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" maxlength="255">
    </div>
    <div class="col-md-3">
        <div class="d-flex align-items-center justify-content-between gap-2">
            <label class="form-label">Preferred transporters</label>
            <a href="{{ route('transporters.index') }}" target="_blank" class="small">Manage</a>
        </div>
        <select name="transporter_ids[]" class="form-select js-transporter-select" data-placeholder="Search and select transporters..." multiple>
            @foreach(($transporters ?? collect()) as $transporter)
                <option value="{{ $transporter->id }}" data-gstin="{{ $transporter->gstin }}"
                    @selected(in_array((string) $transporter->id, $selectedTransporterIds, true))>
                    {{ $transporter->name }}@if($transporter->gstin) [{{ $transporter->gstin }}]@endif
                </option>
            @endforeach
        </select>
        <div class="form-text">Choose all transporters preferred by this customer. Leave empty to allow every transporter on invoices.</div>
        @error('transporter_ids')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        @error('transporter_ids.*')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
    </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" maxlength="100"
            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" maxlength="10" 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>

    @php
        $showBillingCustomerMap = ($companyMode ?? null) === 'cash'
            || old('mode_type', $customer->mode_type ?? null) === 'cash';
    @endphp
    @if($showBillingCustomerMap)
    <div class="col-md-6">
        <label class="form-label">Billing customer mapping</label>
        <select name="billing_customer_id" class="form-select js-billing-customer-select" data-placeholder="Search billing customer...">
            <option value="">-- Select billing customer --</option>
            @foreach(($billingCustomers ?? collect()) as $billingCustomer)
                <option value="{{ $billingCustomer->id }}" @selected(old('billing_customer_id', $customer->billing_customer_id ?? '') == $billingCustomer->id)>
                    {{ $billingCustomer->name }}@if($billingCustomer->contact_person) &mdash; {{ $billingCustomer->contact_person }}@endif
                    @if($billingCustomer->gst_number) [{{ $billingCustomer->gst_number }}] @endif
                    @if($billingCustomer->mobile) - {{ $billingCustomer->mobile }} @endif
                </option>
            @endforeach
        </select>
    </div>
    @endif

    <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" required>{{ 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" maxlength="10"
                                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" maxlength="255"
                                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" maxlength="20"
                                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" required></textarea>
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[${i}][pincode]"
                                class="form-control form-control-sm" placeholder="Pincode" maxlength="10">
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[${i}][contact_person]"
                                class="form-control form-control-sm" placeholder="Contact Person" maxlength="255">
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="shipping_addresses[${i}][mobile]"
                                class="form-control form-control-sm" placeholder="Mobile" maxlength="20">
                        </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);
                }
            });
        });

        document.querySelectorAll('.js-billing-customer-select').forEach(function(selectEl) {
            if (!window.TomSelect || selectEl.tomselect) return;
            new TomSelect(selectEl, {
                allowEmptyOption: true,
                maxOptions: null,
                closeAfterSelect: true,
                placeholder: selectEl.dataset.placeholder || 'Search...',
                searchField: ['text'],
                onItemAdd: function() {
                    this.control_input.value = '';
                }
            });
        });

        document.querySelectorAll('.js-transporter-select').forEach(function(selectEl) {
            if (!window.TomSelect || selectEl.tomselect) return;
            new TomSelect(selectEl, {
                allowEmptyOption: true,
                plugins: ['remove_button'],
                maxOptions: null,
                closeAfterSelect: false,
                placeholder: selectEl.dataset.placeholder || 'Search transporter...',
                searchField: ['text'],
                onItemAdd: function() {
                    this.control_input.value = '';
                }
            });
        });
    </script>
@endpush