@php
    $c = $customer ?? null;
    $extraContacts = old('additional_contacts', $c?->additional_contacts ?? []);
    if (empty($extraContacts)) {
        $extraContacts = [['name' => '', 'phone' => '', 'email' => '']];
    }
@endphp

<div class="billing-entity-form row g-3">
    <div class="col-lg-5">
        <div class="card border-0 billing-form-card h-100">
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Company name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" value="{{ old('name', $c?->name) }}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Phone</label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone', $c?->phone) }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $c?->email) }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">GST Treatment</label>
                    <select name="gst_treatment" class="form-select">
                        <option value="">Select a GST Treatment</option>
                        @foreach($gstTreatments as $key => $label)
                            <option value="{{ $key }}" @selected(old('gst_treatment', $c?->gst_treatment) === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">GSTIN</label>
                    <div class="input-group">
                        <input type="text" name="gstin" id="gstin" class="form-control" value="{{ old('gstin', $c?->gstin) }}" maxlength="15">
                        <button type="button" class="btn btn-primary" id="btn-fetch-gstin">Fetch</button>
                    </div>
                    <small class="text-muted">Enter 15-digit GSTIN and click Fetch (manual entry supported).</small>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">PAN</label>
                        <input type="text" name="pan" class="form-control" value="{{ old('pan', $c?->pan) }}" maxlength="10">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">TAN</label>
                        <input type="text" name="tan" class="form-control" value="{{ old('tan', $c?->tan) }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">TIN</label>
                        <input type="text" name="tin" class="form-control" value="{{ old('tin', $c?->tin) }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">VAT</label>
                        <input type="text" name="vat" class="form-control" value="{{ old('vat', $c?->vat) }}">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Website</label>
                    <input type="text" name="website" class="form-control" value="{{ old('website', $c?->website) }}" placeholder="https://example.com">
                </div>
                <div class="mb-3">
                    <label class="form-label">Currency</label>
                    <select name="currency" class="form-select">
                        @foreach($currencies as $cur)
                            <option value="{{ $cur }}" @selected(old('currency', $c?->currency ?? 'INR') === $cur)>{{ $cur }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-2">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="also_use_as_vendor" value="1" id="also_use_as_vendor" @checked(old('also_use_as_vendor', $c?->also_use_as_vendor))>
                        <label class="form-check-label" for="also_use_as_vendor">Also use as Vendor</label>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="client_wise_item_price" value="1" id="client_wise_item_price" @checked(old('client_wise_item_price', $c?->client_wise_item_price))>
                        <label class="form-check-label" for="client_wise_item_price">Client Wise Item Price</label>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="is_active" @checked(old('is_active', $c?->is_active ?? true))>
                        <label class="form-check-label" for="is_active">Active Customer</label>
                    </div>
                </div>

                <h6 class="text-muted text-uppercase fs-12 mt-2 mb-3">Contact</h6>
                <div class="mb-3">
                    <label class="form-label">Contact person</label>
                    <input type="text" name="contact_person" class="form-control" value="{{ old('contact_person', $c?->contact_person) }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Contact phone</label>
                    <input type="text" name="contact_phone" class="form-control" value="{{ old('contact_phone', $c?->contact_phone) }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Contact email</label>
                    <input type="email" name="contact_email" class="form-control" value="{{ old('contact_email', $c?->contact_email) }}">
                </div>

                <div id="extra-contacts">
                    @foreach($extraContacts as $i => $contact)
                        <div class="extra-contact-row border rounded p-2 mb-2" data-index="{{ $i }}">
                            <div class="mb-2">
                                <label class="form-label">Contact person</label>
                                <input type="text" name="additional_contacts[{{ $i }}][name]" class="form-control" value="{{ $contact['name'] ?? '' }}">
                            </div>
                            <div class="mb-2">
                                <label class="form-label">Contact phone</label>
                                <input type="text" name="additional_contacts[{{ $i }}][phone]" class="form-control" value="{{ $contact['phone'] ?? '' }}">
                            </div>
                            <div class="mb-0">
                                <label class="form-label">Contact email</label>
                                <input type="email" name="additional_contacts[{{ $i }}][email]" class="form-control" value="{{ $contact['email'] ?? '' }}">
                            </div>
                        </div>
                    @endforeach
                </div>
                <button type="button" class="btn btn-sm btn-soft-primary" id="btn-add-contact">
                    <i class="ri-add-line"></i> Add new contact
                </button>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card border-0 billing-form-card h-100">
            <div class="card-body">
                <ul class="nav nav-tabs nav-tabs-custom nav-justified mb-3" role="tablist">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-address" role="tab">Address</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-other" role="tab">Other Info</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-notes" role="tab">Notes</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-opening" role="tab">Opening Balance</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="tab-address" role="tabpanel">
                        <h6 class="mb-3">Billing Address</h6>
                        <div class="mb-3">
                            <label class="form-label">Address line 1</label>
                            <input type="text" name="billing_address_line1" class="form-control" value="{{ old('billing_address_line1', $c?->billing_address_line1) }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Address line 2</label>
                            <input type="text" name="billing_address_line2" class="form-control" value="{{ old('billing_address_line2', $c?->billing_address_line2) }}">
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Country</label>
                                <select name="country" class="form-select">
                                    @foreach($countries as $country)
                                        <option value="{{ $country }}" @selected(old('country', $c?->country ?? 'India') === $country)>{{ $country }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">State</label>
                                <select name="state" class="form-select">
                                    <option value="">Select State</option>
                                    @foreach($indianStates as $state)
                                        <option value="{{ $state }}" @selected(old('state', $c?->state) === $state)>{{ $state }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">City</label>
                                <input type="text" name="city" class="form-control" value="{{ old('city', $c?->city) }}" placeholder="Enter city">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">PIN Code</label>
                                <input type="text" name="pincode" class="form-control" value="{{ old('pincode', $c?->pincode) }}">
                            </div>
                        </div>

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="has_shipping_address" value="1" id="has_shipping_address" @checked(old('has_shipping_address', $c?->has_shipping_address))>
                            <label class="form-check-label" for="has_shipping_address">Add shipping address</label>
                        </div>

                        <div id="shipping-fields" class="{{ old('has_shipping_address', $c?->has_shipping_address) ? '' : 'd-none' }}">
                            <h6 class="mb-3">Shipping Address</h6>
                            <div class="mb-3">
                                <label class="form-label">Address line 1</label>
                                <input type="text" name="shipping_address_line1" class="form-control" value="{{ old('shipping_address_line1', $c?->shipping_address_line1) }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Address line 2</label>
                                <input type="text" name="shipping_address_line2" class="form-control" value="{{ old('shipping_address_line2', $c?->shipping_address_line2) }}">
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Country</label>
                                    <select name="shipping_country" class="form-select">
                                        @foreach($countries as $country)
                                            <option value="{{ $country }}" @selected(old('shipping_country', $c?->shipping_country ?? 'India') === $country)>{{ $country }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">State</label>
                                    <select name="shipping_state" class="form-select">
                                        <option value="">Select State</option>
                                        @foreach($indianStates as $state)
                                            <option value="{{ $state }}" @selected(old('shipping_state', $c?->shipping_state) === $state)>{{ $state }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">City</label>
                                    <input type="text" name="shipping_city" class="form-control" value="{{ old('shipping_city', $c?->shipping_city) }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">PIN Code</label>
                                    <input type="text" name="shipping_pincode" class="form-control" value="{{ old('shipping_pincode', $c?->shipping_pincode) }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="tab-other" role="tabpanel">
                        <label class="form-label">Other Info</label>
                        <textarea name="other_info" class="form-control" rows="8" placeholder="Additional business information...">{{ old('other_info', $c?->other_info) }}</textarea>
                    </div>

                    <div class="tab-pane" id="tab-notes" role="tabpanel">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="8" placeholder="Internal notes about this customer...">{{ old('notes', $c?->notes) }}</textarea>
                    </div>

                    <div class="tab-pane" id="tab-opening" role="tabpanel">
                        <input type="hidden" name="balance_type" value="{{ old('balance_type', $c?->balance_type ?? 'debit') }}">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Opening Balance <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" name="opening_balance" class="form-control" value="{{ old('opening_balance', $c?->opening_balance ?? 0) }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Pending payment <span class="text-danger">*</span></label>
                                <input type="text" class="form-control bg-light" value="Pending payment" readonly tabindex="-1" aria-readonly="true">
                            </div>
                        </div>
                        <p class="text-muted small mb-0 mt-2">Used for customer balance and payment calculations (amount receivable from client).</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const shippingToggle = document.getElementById('has_shipping_address');
    const shippingFields = document.getElementById('shipping-fields');
    if (shippingToggle && shippingFields) {
        shippingToggle.addEventListener('change', function () {
            shippingFields.classList.toggle('d-none', !this.checked);
        });
    }

    let contactIndex = {{ count($extraContacts) }};
    const contactsWrap = document.getElementById('extra-contacts');
    document.getElementById('btn-add-contact')?.addEventListener('click', function () {
        const html = `
            <div class="extra-contact-row border rounded p-2 mb-2" data-index="${contactIndex}">
                <div class="mb-2"><label class="form-label">Contact person</label>
                <input type="text" name="additional_contacts[${contactIndex}][name]" class="form-control"></div>
                <div class="mb-2"><label class="form-label">Contact phone</label>
                <input type="text" name="additional_contacts[${contactIndex}][phone]" class="form-control"></div>
                <div class="mb-0"><label class="form-label">Contact email</label>
                <input type="email" name="additional_contacts[${contactIndex}][email]" class="form-control"></div>
            </div>`;
        contactsWrap.insertAdjacentHTML('beforeend', html);
        contactIndex++;
    });

    document.getElementById('btn-fetch-gstin')?.addEventListener('click', function () {
        const gstin = document.getElementById('gstin')?.value?.trim();
        if (!gstin || gstin.length !== 15) {
            alert('Please enter a valid 15-character GSTIN.');
            return;
        }
        alert('GSTIN fetch API can be connected here. For now, please enter details manually.');
    });
});
</script>
@endpush