@extends('layouts.location')

@section('title', 'Zoho Sales Orders')
@section('page-title', 'Zoho Sales Orders')

@section('content')
    <div class="card">
        <div class="card-header">Search Sales Order</div>
        <div class="card-body">

            {{-- Search Form --}}
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">SO Number(s)</label>
                <div class="col-sm-6">
                    <textarea id="so_number" class="form-control" rows="3" placeholder="Enter one or multiple Sales Order Numbers, separated by comma or newline"></textarea>
                </div>
                <div class="col-sm-4">
                    <button id="searchBtn" class="btn btn-primary">Search</button>
                </div>
            </div>

            {{-- Status Message --}}
            <div id="statusMessage" class="mb-3" style="display:none;"></div>

            {{-- Multi Results Container --}}
            <div id="multiResults"></div>
        </div>
    </div>
@endsection


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchBtn = document.getElementById('searchBtn');
        const soInput = document.getElementById('so_number');
        const statusMessage = document.getElementById('statusMessage');
        const multiResults = document.getElementById('multiResults');
        // quick tabs removed

        let currentSalesOrder = null;

        // Helper to show messages
        function showMessage(msg, type = 'danger') {
            statusMessage.className = `alert alert-${type} mb-3`;
            statusMessage.textContent = msg;
            statusMessage.style.display = 'block';
        }

        function clearMessage() {
            statusMessage.style.display = 'none';
            statusMessage.textContent = '';
        }

        // Render helpers
        function createResultCard(title) {
            const card = document.createElement('div');
            card.className = 'card mb-3';
            const body = document.createElement('div');
            body.className = 'card-body';
            const h5 = document.createElement('h5');
            h5.textContent = title;
            body.appendChild(h5);
            card.appendChild(body);
            return { card, body };
        }

        async function renderOrderResult(container, soLabel, data) {
            const { card, body } = createResultCard(`SO: ${soLabel}`);

            if (data?.salesorder) {
                const so = data.salesorder;
                // Order details table
                const detailsTable = document.createElement('table');
                detailsTable.className = 'table table-bordered';
                detailsTable.innerHTML = `
                    <tbody>
                        <tr><th>Sales Order Number</th><td>${so.salesorder_number || ''}</td></tr>
                        <tr><th>Contact Person</th><td>${(() => {
                            const c = Array.isArray(so.contact_person_details) && so.contact_person_details.length ? so.contact_person_details[0] : null;
                            return c ? `${(c.first_name||'')} ${(c.last_name||'')}`.trim() : '';
                        })()}</td></tr>
                        <tr><th>Mobile</th><td>${(Array.isArray(so.contact_person_details) && so.contact_person_details[0]?.mobile) || ''}</td></tr>
                        <tr><th>Email</th><td>${(Array.isArray(so.contact_person_details) && so.contact_person_details[0]?.email) || ''}</td></tr>
                        <tr><th>Source</th><td>${so.source || ''}</td></tr>
                        <tr><th>GST No</th><td>${so.gst_no || ''}</td></tr>
                        <tr><th>Remark</th><td>${so.reference_number || ''}</td></tr>
                    </tbody>`;
                body.appendChild(detailsTable);

                // Line items table
                if (Array.isArray(so.line_items) && so.line_items.length) {
                    const itemsTable = document.createElement('table');
                    itemsTable.className = 'table table-bordered';
                    itemsTable.innerHTML = `
                        <thead>
                            <tr>
                                <th>SKU</th>
                                <th>Item Name</th>
                                <th>Quantity</th>
                                <th>Rate</th>
                                <th>Category</th>
                                <th>HSN/SAC</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${so.line_items.map(item => {
                                const category = Array.isArray(item.item_custom_fields)
                                    ? (item.item_custom_fields.find(f => f.label === 'Category')?.value_formatted || item.item_custom_fields.find(f => f.label === 'Category')?.value || '')
                                    : '';
                                return `
                                    <tr>
                                        <td>${item.sku || ''}</td>
                                        <td>${item.name}</td>
                                        <td>${item.quantity}</td>
                                        <td>${item.rate}</td>
                                        <td>${category}</td>
                                        <td>${item.hsn_or_sac || ''}</td>
                                    </tr>`;
                            }).join('')}
                        </tbody>`;
                    body.appendChild(itemsTable);
                }

                // Auto-insert after successful fetch
                const saveStatus = document.createElement('div');
                saveStatus.className = 'mt-2';
                saveStatus.textContent = 'Saving this sales order...';
                body.appendChild(saveStatus);

                try {
                    const payload = {
                        sales_order_id: so.salesorder_id,
                        sales_order_number: so.salesorder_number,
                        reference_number: so.reference_number || '',
                        // delivery_method from Zoho response (if present)
                        delivery_method: so.delivery_method || '',
                        mobile: (Array.isArray(so.contact_person_details) && so.contact_person_details[0]?.mobile) || '',
                        customer_name: so.customer_name || '',
                        salesperson_name: so.salesperson_name || '',
                        items: (so.line_items || []).map(item => {
                            const category = Array.isArray(item.item_custom_fields)
                                ? (item.item_custom_fields.find(f => f.label === 'Category')?.value_formatted
                                    || item.item_custom_fields.find(f => f.label === 'Category')?.value
                                    || '')
                                : '';
                            return {
                                name: item.name,
                                sku: item.sku || null,
                                quantity: item.quantity,
                                rate: item.rate,
                                category: category,
                                hsn_or_sac: item.hsn_or_sac || null
                            };
                        })
                    };

                    const res = await fetch('{{ route('zoho.sales_orders.insert') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify(payload)
                    });
                    const saveData = await res.json();
                    if (saveData?.error) {
                        const err = String(saveData.error || '');

                        // Highlight duplicate picklist case clearly at the top (not inside the below table)
                        if (err.toLowerCase().includes('picklist')) {
                            showMessage(`Save failed: ${err}`, 'warning');
                            card.classList.add('border', 'border-warning');
                        }

                        saveStatus.style.color = 'red';
                        saveStatus.textContent = `Save failed: ${err}`;
                    } else if (saveData?.warning) {
                        // Saved but with warning (e.g., picking already started)
                        saveStatus.style.color = '#b26a00'; // orange/brown
                        saveStatus.textContent = `Saved with warning: ${saveData.warning}`;
                    } else {
                        saveStatus.style.color = 'green';
                        saveStatus.textContent = 'Saved successfully.';
                    }
                } catch (e) {
                    saveStatus.style.color = 'red';
                    saveStatus.textContent = 'Save failed: network or server error';
                }
            } else {
                const p = document.createElement('p');
                p.style.color = 'red';
                p.textContent = data?.error || 'No data found';
                body.appendChild(p);
            }

            container.appendChild(card);
        }

        async function searchSingle(soNumber) {
            try {
                const res = await fetch('{{ route('zoho.sales_orders.search') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ so_number: soNumber })
                });
                const data = await res.json();
                return data;
            } catch (e) {
                return { error: 'Error fetching sales order' };
            }
        }

        // Search Button Click
        searchBtn.addEventListener('click', async function () {
            if (searchBtn.disabled) return;
            searchBtn.disabled = true;
            searchBtn.textContent = 'Searching...';
            multiResults.innerHTML = '';
            clearMessage();

            const raw = soInput.value.trim();
            if (!raw) {
                showMessage('Please enter SO number(s)');
                searchBtn.disabled = false;
                searchBtn.textContent = 'Search';
                return;
            }

            const numbers = raw.split(/[\s,]+/).map(s => s.trim()).filter(Boolean);

            try {
                // Sequentially call API for each SO
                for (let i = 0; i < numbers.length; i++) {
                    const so = numbers[i];
                    const placeholderCard = document.createElement('div');
                    placeholderCard.className = 'alert alert-info';
                    placeholderCard.textContent = `Fetching SO ${so} ...`;
                    multiResults.appendChild(placeholderCard);

                    // 0.5s delay before each API call
                    await new Promise(res => setTimeout(res, 500));
                    const data = await searchSingle(so);
                    multiResults.removeChild(placeholderCard);
                    await renderOrderResult(multiResults, so, data);

                    // store last successful so
                    if (data?.salesorder) {
                        try {
                            localStorage.setItem('zoho_search_done', '1');
                            localStorage.setItem('zoho_last_so', so);
                        } catch (e) {}
                    }
                }
            } finally {
                searchBtn.disabled = false;
                searchBtn.textContent = 'Search';
            }
        });

        // Continue button removed
    });
</script>