@php
    $v = $vendor ?? null;
    $extraContacts = old('additional_contacts', $v?->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', $v?->name) }}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Phone</label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone', $v?->phone) }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $v?->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', $v?->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', $v?->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', $v?->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', $v?->tan) }}">
                    </div>
                    <div class="col-md-12 mb-3">
                        <label class="form-label">VAT</label>
                        <input type="text" name="vat" class="form-control" value="{{ old('vat', $v?->vat) }}">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Website</label>
                    <input type="text" name="website" class="form-control" value="{{ old('website', $v?->website) }}" placeholder="https://example.com">
                </div>
                <div class="mb-3">
                    <label class="form-label">Vendor code</label>
                    <input type="text" name="vendor_code" class="form-control" value="{{ old('vendor_code', $v?->vendor_code) }}">
                </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', $v?->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_client" value="1" id="also_use_as_client" @checked(old('also_use_as_client', $v?->also_use_as_client))>
                        <label class="form-check-label" for="also_use_as_client">Also use as Client</label>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="use_for_dispatch" value="1" id="use_for_dispatch" @checked(old('use_for_dispatch', $v?->use_for_dispatch))>
                        <label class="form-check-label" for="use_for_dispatch">Use for Dispatch (billing address will be shown)</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', $v?->is_active ?? true))>
                        <label class="form-check-label" for="is_active">Active Vendor</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', $v?->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', $v?->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', $v?->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', $v?->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', $v?->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', $v?->country ?? 'India') === $country)>{{ $country }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">State @if($required)<span class="text-danger">*</span>@endif</label>
                                <select name="state" class="form-select" {{ $req }}>
                                    <option value="">Select State</option>
                                    @foreach($indianStates as $state)
                                        <option value="{{ $state }}" @selected(old('state', $v?->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', $v?->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', $v?->pincode) }}">
                            </div>
                        </div>

                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="ship_to_my_address" value="1" id="ship_to_my_address" @checked(old('ship_to_my_address', $v?->ship_to_my_address ?? true))>
                            <label class="form-check-label" for="ship_to_my_address">Ship to my address</label>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="ship_to_different_address" value="1" id="ship_to_different_address" @checked(old('ship_to_different_address', $v?->ship_to_different_address))>
                            <label class="form-check-label" for="ship_to_different_address">Ship to a different address</label>
                        </div>

                        <div id="shipping-fields" class="{{ old('ship_to_different_address', $v?->ship_to_different_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', $v?->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', $v?->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', $v?->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', $v?->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', $v?->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', $v?->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', $v?->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 vendor...">{{ old('notes', $v?->notes) }}</textarea>
                    </div>

                    <div class="tab-pane" id="tab-opening" role="tabpanel">
                        <input type="hidden" name="balance_type" value="{{ old('balance_type', $v?->balance_type ?? 'credit') }}">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Opening Balance</label>
                                <input type="number" step="0.01" min="0" name="opening_balance" class="form-control" value="{{ old('opening_balance', $v?->opening_balance ?? 0) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Pending payment</label>
                                <input type="text" class="form-control bg-light" value="Pending payment" readonly tabindex="-1" aria-readonly="true">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const shipMy = document.getElementById('ship_to_my_address');
    const shipDiff = document.getElementById('ship_to_different_address');
    const shippingFields = document.getElementById('shipping-fields');

    function syncShipping() {
        if (!shippingFields) return;
        if (shipDiff?.checked) {
            shippingFields.classList.remove('d-none');
            if (shipMy) shipMy.checked = false;
        } else {
            shippingFields.classList.add('d-none');
            if (shipMy && !shipMy.checked) shipMy.checked = true;
        }
    }

    shipDiff?.addEventListener('change', syncShipping);
    shipMy?.addEventListener('change', function () {
        if (this.checked && shipDiff) {
            shipDiff.checked = false;
            syncShipping();
        }
    });

    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