@extends('layouts.location')

@section('title', 'Add Access Qty')
@section('page-title', 'Add Access Qty')

@section('content')
<div class="row">
    <div class="col-lg-8 d-none">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent">
                <h5 class="mb-0">Add Access Quantity</h5>
            </div>
            <div class="card-body">
                <div id="msgBox"></div>
                <form id="accessQtyForm" method="POST" action="{{ route('location.add_access_qty.post') }}">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="invoice_number" class="form-label">Invoice Number</label>
                            <select id="invoice_number" name="invoice_number" class="form-select" required>
                                <option value="" selected disabled>Loading...</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="description" class="form-label">Description</label>
                            <select id="description" class="form-select" required disabled>
                                <option value="" selected disabled>Select invoice first</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="part_no" class="form-label">Part No</label>
                            <select id="part_no" name="part_no" class="form-select" required disabled>
                                <option value="" selected disabled>Select invoice first</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">PCS</label>
                            <input type="text" id="pcs" class="form-control" value="-" disabled>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Inward Qty</label>
                            <input type="text" id="inward_qty" class="form-control" value="-" disabled>
                        </div>
                        <div class="col-md-6">
                            <label for="access_qty" class="form-label">Access Qty</label>
                            <input type="number" name="access_qty" id="access_qty" class="form-control" min="1" step="1" required disabled>
                        </div>
                    </div>
                    <div class="mt-3 d-flex gap-2">
                        <button type="submit" id="btnSave" class="btn btn-primary" disabled>Save</button>
                        <a href="{{ route('location.dashboard') }}" class="btn btn-secondary">Back</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-12 mt-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Approve Access Quantity</h5>
                @if(isset($pending) && $pending->count())
                    <span class="badge bg-primary">{{ $pending->count() }}</span>
                @endif
            </div>
            <div class="card-body">
                @if(isset($pending) && $pending->count())
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Invoice Number</th>
                                    <th>Part No</th>
                                    <th>Description</th>
                                    <th class="text-end">PCS</th>
                                    <th class="text-end">Inward Qty</th>
                                    <th class="text-end">Access Qty</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($pending as $row)
                                    <tr>
                                        <td>{{ $row->invoice_number }}</td>
                                        <td>{{ $row->part_no }}</td>
                                        <td>{{ $row->description }}</td>
                                        <td class="text-end">{{ (int)($row->pcs ?? 0) }}</td>
                                        <td class="text-end">{{ (int)($row->inward_qty ?? 0) }}</td>
                                        <td class="text-end">{{ (int)($row->access_qty ?? 0) }}</td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-success btn-approve"
                                                data-invoice="{{ $row->invoice_number }}"
                                                data-part="{{ $row->part_no }}">
                                                Update
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="alert alert-info mb-0">No pending ASN rows found for your location.</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const invoiceSel = document.getElementById('invoice_number');
    const descSel = document.getElementById('description');
    const partSel = document.getElementById('part_no');
    const pcsInput = document.getElementById('pcs');
    const inwardInput = document.getElementById('inward_qty');
    const accessQty = document.getElementById('access_qty');
    const btnSave = document.getElementById('btnSave');
    const msgBox = document.getElementById('msgBox');

    function setMsg(type, text) {
        msgBox.innerHTML = `<div class="alert alert-${type} alert-dismissible fade show" role="alert">${text}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>`;
    }

    function setLoading(sel, loading) {
        sel.disabled = loading;
    }

    // Load invoices
    fetch(`{{ route('location.asn.invoices') }}`)
        .then(r => r.json())
        .then(j => {
            invoiceSel.innerHTML = '';
            if (!j.success) throw new Error(j.error || 'Failed to load invoices');
            const list = j.data || [];
            if (!list.length) {
                invoiceSel.innerHTML = '<option value="" disabled selected>No invoices</option>';
                return;
            }
            invoiceSel.innerHTML = '<option value="" disabled selected>Select invoice</option>' +
                list.map(v => `<option value="${v}">${v}</option>`).join('');
        })
        .catch(err => {
            setMsg('danger', err.message || 'Unable to load invoices');
            invoiceSel.innerHTML = '<option value="" disabled selected>Error loading</option>';
        });

    // When invoice changes, load items
    invoiceSel.addEventListener('change', () => {
        const inv = invoiceSel.value;
        if (!inv) return;
        descSel.innerHTML = '<option selected disabled>Loading...</option>';
        partSel.innerHTML = '<option selected disabled>Loading...</option>';
        setLoading(descSel, true);
        setLoading(partSel, true);
        accessQty.value = '';
        pcsInput.value = '-';
        inwardInput.value = '-';
        btnSave.disabled = true;
        accessQty.disabled = true;

        fetch(`{{ route('location.asn.items') }}?invoice=${encodeURIComponent(inv)}`)
            .then(r => r.json())
            .then(j => {
                if (!j.success) throw new Error(j.error || 'Failed to load items');
                const items = Array.isArray(j.data) ? j.data : [];
                // Populate description and part lists
                descSel.innerHTML = '<option value="" disabled selected>Select description</option>' +
                    items.map(it => `<option value="${(it.description||'').replaceAll('"','&quot;')}" data-part="${it.part_no||''}">${it.description||''}</option>`).join('');
                partSel.innerHTML = '<option value="" disabled selected>Select part no</option>' +
                    items.map(it => `<option value="${it.part_no||''}" data-desc="${(it.description||'').replaceAll('"','&quot;')}">${it.part_no||''}</option>`).join('');
                setLoading(descSel, false);
                setLoading(partSel, false);
            })
            .catch(err => {
                setMsg('danger', err.message || 'Unable to load items');
                descSel.innerHTML = '<option value="" disabled selected>Error loading</option>';
                partSel.innerHTML = '<option value="" disabled selected>Error loading</option>';
                setLoading(descSel, false);
                setLoading(partSel, false);
            });
    });

    // Synchronize desc -> part
    descSel.addEventListener('change', () => {
        const opt = descSel.options[descSel.selectedIndex];
        const part = opt ? opt.getAttribute('data-part') : '';
        if (part) {
            partSel.value = part;
            triggerDetailsFetch();
        }
    });

    // Synchronize part -> desc
    partSel.addEventListener('change', () => {
        const opt = partSel.options[partSel.selectedIndex];
        const desc = opt ? opt.getAttribute('data-desc') : '';
        if (desc) {
            // Find matching option in desc
            for (let i=0;i<descSel.options.length;i++) {
                if (descSel.options[i].value === desc) { descSel.selectedIndex = i; break; }
            }
            triggerDetailsFetch();
        }
    });

    function triggerDetailsFetch() {
        const inv = invoiceSel.value;
        const part = partSel.value;
        if (!inv || !part) return;
        pcsInput.value = '...';
        inwardInput.value = '...';
        btnSave.disabled = true;
        accessQty.disabled = true;
        fetch(`{{ route('location.asn.item_details') }}?invoice=${encodeURIComponent(inv)}&part_no=${encodeURIComponent(part)}`)
            .then(r => r.json())
            .then(j => {
                if (!j.success) throw new Error(j.error || 'Failed to load details');
                const d = j.data || {};
                pcsInput.value = d.pcs ?? 0;
                inwardInput.value = d.inward_qty ?? 0;
                btnSave.disabled = false;
                accessQty.disabled = false;
            })
            .catch(err => {
                setMsg('danger', err.message || 'Unable to load item details');
                pcsInput.value = '-';
                inwardInput.value = '-';
            });
    }

    // Submit handler
    const form = document.getElementById('accessQtyForm');
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        setMsg('', '');
        btnSave.disabled = true;
        const payload = {
            invoice_number: invoiceSel.value,
            part_no: partSel.value,
            access_qty: parseInt(accessQty.value || '0', 10)
        };
        if (!payload.invoice_number || !payload.part_no || !payload.access_qty || payload.access_qty < 1) {
            setMsg('warning', 'Please select invoice, item and enter a valid Access Qty.');
            btnSave.disabled = false;
            return;
        }
        try {
            const res = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(payload)
            });
            const j = await res.json();
            if (!res.ok || !j.success) throw new Error(j.error || j.message || ('HTTP '+res.status));
            setMsg('success', 'Access qty applied successfully. New Access Qty: <strong>'+ (j.data?.access_qty ?? '-') +'</strong>');
            accessQty.value = '';
        } catch (err) {
            setMsg('danger', err.message || 'Failed to save');
        } finally {
            btnSave.disabled = false;
        }
    });

    // Approve handler: click on Update button in Action column
    document.addEventListener('click', async (e) => {
        const btn = e.target.closest('.btn-approve');
        if (!btn) return;
        const invoice = btn.getAttribute('data-invoice');
        const part = btn.getAttribute('data-part');
        if (!invoice || !part) return;
        btn.disabled = true;
        const row = btn.closest('tr');
        try {
            const res = await fetch(`{{ route('location.add_access_qty.approve') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ invoice_number: invoice, part_no: part })
            });
            const j = await res.json();
            if (!res.ok || !j.success) throw new Error(j.error || j.message || ('HTTP ' + res.status));
            // Remove row on success
            if (row) row.remove();
            // Update badge count if present
            const badge = document.querySelector('.card-header .badge');
            if (badge) {
                const n = Math.max(0, parseInt(badge.textContent.trim() || '0', 10) - 1);
                badge.textContent = n;
            }
        } catch (err) {
            alert(err.message || 'Failed to approve');
        } finally {
            btn.disabled = false;
        }
    });
});
</script>
@endpush