@extends('layouts.layout-horizontal')

@section('title', 'Shipping Label')

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Print Shipping Label</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('shipping-labels.print') }}" target="_blank" id="labelForm">
                        @csrf

                        <div class="row g-3">
                            {{-- Party Selection --}}
                            <div class="col-md-12">
                                <label class="form-label">Party / Company Name</label>
                                <select name="party_id" id="party_id" class="form-select" required>
                                    <option value="">-- Select Party --</option>
                                    @foreach($parties as $p)
                                        <option value="{{ $p->id }}" data-gst="{{ $p->gst_number }}">{{ $p->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Address Type --}}
                            <div class="col-md-12">
                                <label class="form-label">Address</label>
                                <select name="address_type" id="address_type" class="form-select" required>
                                    <option value="billing">Billing Address</option>
                                    <option value="shipping">Shipping Address</option>
                                </select>
                            </div>

                            {{-- Shipping Address Dropdown (hidden by default) --}}
                            <div class="col-md-12 d-none" id="shippingAddressWrap">
                                <label class="form-label">Select Shipping Address</label>
                                <select name="shipping_address_id" id="shipping_address_id" class="form-select">
                                    <option value="">-- Select shipping address --</option>
                                </select>
                                <small class="text-muted" id="noAddressMsg" style="display:none;">No shipping addresses found for this party.</small>
                            </div>

                            {{-- Preview Card --}}
                            <div class="col-md-12 d-none" id="previewWrap">
                                <label class="form-label">Label Preview</label>
                                <div class="border rounded p-3 bg-light" id="previewCard">
                                    <h5 class="mb-1 fw-bold" id="prevName">-</h5>
                                    <p class="mb-1" id="prevAddress">-</p>
                                    <p class="mb-1" id="prevStatePin">-</p>
                                    <p class="mb-0 fw-bold" id="prevMobile">-</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary" id="printBtn" disabled>
                            <i class="ph-duotone ph-printer me-1"></i> Print Shipping Label
                        </button>
                    </div>
                    </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const tomPartySelect = new TomSelect('#party_id', {
        allowEmptyOption: true, placeholder: 'Search party or GST...', maxOptions: null,
        searchField: ['text', 'gst'],
        render: {
            option: function(data, escape) { const gst = data.gst ? '<span style="color:#999;font-size:.7rem;margin-left:6px">GST: ' + escape(data.gst) + '</span>' : ''; return '<div>' + escape(data.text) + gst + '</div>'; },
            item: function(data, escape) { return '<div>' + escape(data.text) + '</div>'; }
        }
    });
    const partySelect = document.getElementById('party_id');
    const addressType = document.getElementById('address_type');
    const shippingWrap = document.getElementById('shippingAddressWrap');
    const shippingSelect = document.getElementById('shipping_address_id');
    const noAddressMsg = document.getElementById('noAddressMsg');
    const previewWrap = document.getElementById('previewWrap');
    const printBtn = document.getElementById('printBtn');

    // Party data cache
    const partyData = @json($partyDataMap);

    let shippingAddresses = {};

    // When party changes, fetch shipping addresses
    partySelect.addEventListener('change', async function() {
        const partyId = this.value;
        shippingSelect.innerHTML = '<option value="">-- Select shipping address --</option>';
        noAddressMsg.style.display = 'none';
        shippingAddresses = {};

        if (!partyId) {
            previewWrap.classList.add('d-none');
            printBtn.disabled = true;
            return;
        }

        // Fetch shipping addresses
        try {
            const res = await fetch(`{{ url('api/customers') }}/${partyId}/shipping-addresses`);
            const data = await res.json();
            data.forEach(addr => {
                shippingAddresses[addr.id] = addr.address;
                const opt = document.createElement('option');
                opt.value = addr.id;
                opt.textContent = addr.address;
                shippingSelect.appendChild(opt);
            });

            if (data.length === 0) {
                noAddressMsg.style.display = 'block';
            }
        } catch(e) {
            console.error('Error fetching shipping addresses:', e);
        }

        updatePreview();
    });

    // When address type changes
    addressType.addEventListener('change', function() {
        if (this.value === 'shipping') {
            shippingWrap.classList.remove('d-none');
        } else {
            shippingWrap.classList.add('d-none');
        }
        updatePreview();
    });

    // When shipping address changes
    shippingSelect.addEventListener('change', updatePreview);

    function updatePreview() {
        const partyId = partySelect.value;
        if (!partyId) {
            previewWrap.classList.add('d-none');
            printBtn.disabled = true;
            return;
        }

        const party = partyData[partyId];
        if (!party) return;

        let address = '';
        if (addressType.value === 'shipping' && shippingSelect.value) {
            address = shippingAddresses[shippingSelect.value] || '';
        } else if (addressType.value === 'billing') {
            address = party.billing_address || '';
        }

        document.getElementById('prevName').textContent = party.name;
        document.getElementById('prevAddress').textContent = address || '-';
        document.getElementById('prevStatePin').textContent =
            (party.state || '') + (party.pincode ? ' - ' + party.pincode : '');
        document.getElementById('prevMobile').textContent = party.mobile ? '+91 ' + party.mobile : '-';

        previewWrap.classList.remove('d-none');

        // Enable print only if we have a valid address selection
        if (addressType.value === 'billing') {
            printBtn.disabled = false;
        } else {
            printBtn.disabled = !shippingSelect.value;
        }
    }
</script>
@endpush