@extends('backend.partials.master')
@section('title', isset($invoice) ? 'Edit Purchase Invoice' : 'Create Purchase Invoice')

@section('maincontent')
<main class="content">
<div class="container-fluid p-0">
    <div class="mb-3">
        <h1 class="h3">{{ isset($invoice) ? 'Edit Purchase Invoice' : 'New Purchase Invoice' }}</h1>
    </div>

    <div class="card">
        <div class="card-body">
            <form action="{{ isset($invoice) ? route('purchaseinvoice.update', $invoice->id) : route('purchaseinvoice.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @if(isset($invoice))
                    @method('PUT')
                @endif

                <div class="row">
                    {{-- Supplier --}}
                  <div class="col-md-3 mb-3">
                    <label class="form-label">Supplier <span class="text-danger">*</span></label>
                    <select id="supplier_id" name="supplier_id" class="form-control choices-single " >
                        <option value="" selected disabled>Select Supplier</option>
                        @foreach($suppliers as $s)
                            <option value="{{ $s->id }}"
                                title="{{ $s->name }} - {{ $s->company_name ?? 'N/A' }} "
                                {{ old('supplier_id', $invoice->supplier_id ?? '') == $s->id ? 'selected' : '' }}>
                                {{ $s->name }} - {{ $s->company_name ?? 'N/A' }}
                            </option>
                        @endforeach
                    </select>

                    @error('supplier_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                    <div class="col-md-3 mb-3">
                        <label>Lot No</label>
                        <input type="text" name="lot_no" id="lot_no" class="form-control" value="{{ old('lot_no', $lot_no ?? '') }}" readonly>
                    </div>


                    <div class="col-md-3 mb-3">
                        <label>Invoice No</label>
                        <input type="text" name="invoice_no" class="form-control" value="{{ old('invoice_no', $invoice->invoice_no ?? $invoice_no ?? '') }}" readonly>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label>Invoice Date</label>
                        <input type="date" name="invoice_date" class="form-control" value="{{ old('invoice_date', $invoice->invoice_date ?? date('Y-m-d')) }}">
                    </div>

                    {{-- GST State --}}
                    <div class="col-md-3 mb-3" id="gst_state_div">
                        <label class="form-label">GST State <span class="text-danger">*</span></label>
                        <div>
                            <label class="form-check form-check-inline">
                                <input class="form-check-input gst_state_radio" type="radio" name="gst_state" value="Maha" {{ (old('gst_state', $invoice->gst_state ?? 'Maha') == 'Maha') ? 'checked' : '' }}> Maha
                            </label>
                            <label class="form-check form-check-inline">
                                <input class="form-check-input gst_state_radio" type="radio" name="gst_state" value="Other" {{ (old('gst_state', $invoice->gst_state ?? '') == 'Other') ? 'checked' : '' }}> Other State
                            </label>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label">Upload Invoice Document (Optional)</label>
                        <input type="file" name="invoice_document" class="form-control">

                        @error('invoice_document')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror

                        @if(isset($invoice) && $invoice->attachment)
                            <a href="{{ asset('purchase_invoice/' . $invoice->attachment) }}" target="_blank" class="mt-1 d-block">
                                View Existing Document
                            </a>
                        @endif
                    </div>

                </div>

                {{-- Product Table --}}
                <div class="table-responsive">
                    <table class="table table-bordered" id="poTable">
                        <thead>
                            <tr>
                                <th>Product<span class="text-danger">*</span></th>

                                <th>HSN</th>
                                <th>Quantity<span class="text-danger">*</span></th>
                                <th>GST %</th>
                                <th>Rate<span class="text-danger">*</span></th>
                                <th class="col-cgst">CGST</th>
                                <th class="col-sgst">SGST</th>
                                <th class="col-igst">IGST</th>
                                <th>Total</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($invoice) && $invoice->products)
                                @foreach($invoice->products as $i => $p)
                                    <tr id="row_{{ $i+1 }}">
                                        <td>
                                            <select name="product_id[]" class="form-control product-select">
                                                <option value="">Select Product</option>
                                                @foreach($products as $p2)
                                                    <option value="{{ $p2->id }}" {{ $p2->id == $p->material_id ? 'selected' : '' }}>
                                                        {{ $p2->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <input type="hidden" class="form-control" name="product_name[]" value="{{ $p->product->name ?? '' }}" readonly>
                                        </td>

                                        <td><input type="text" class="form-control" name="hsn[]" value="{{ $p->hsn }}" readonly></td>
                                        <td><input type="number"  step="0.001" class="form-control quantity" name="quantity[]" value="{{ $p->quantity }}" ></td>
                                        <td><input type="number" class="form-control gst" name="gst[]" value="{{ $p->gst }}" readonly></td>
                                        <td><input type="number" class="form-control rate" name="rate[]" value="{{ $p->rate }}" ></td>
                                        <td><input type="number" class="form-control cgst-col" name="cgst[]" value="{{ $p->cgst }}" readonly></td>
                                        <td><input type="number" class="form-control sgst-col" name="sgst[]" value="{{ $p->sgst }}" readonly></td>
                                        <td><input type="number" class="form-control igst-col" name="igst[]" value="{{ $p->igst }}" readonly></td>
                                        <td><input type="number" class="form-control total" name="total[]" value="{{ $p->total }}" readonly></td>
                                        <td><i class="fa fa-trash text-danger removeRow" style="cursor:pointer;"></i></td>
                                    </tr>
                                @endforeach
                                <input type="hidden" id="cnt" value="{{ count($invoice->products) }}">
                            @else
                                <input type="hidden" id="cnt" value="0">
                            @endif
                        </tbody>
                      <tfoot>
<tr>
      <!-- GST % पर्यंत -->
    <th></th>
    <th colspan="3" class="text-end">Total</th>                                  <!-- GST % column empty -->
    <th id="total_rate">0.00</th>               <!-- Rate total -->
    <th id="total_cgst">0.00</th>
    <th id="total_sgst">0.00</th>
    <th id="total_igst">0.00</th>
    <th id="grand_total">0.00</th>
    <th></th>
</tr>
</tfoot>
                    </table>
                </div>

                <button type="button" id="addRowBtn" class="btn btn-success mb-3">Add Product</button>

                <div class="mt-3">
                    <button type="submit" class="btn btn-primary">{{ isset($invoice) ? 'Update' : 'Save' }}</button>
                    <a href="{{ route('purchaseinvoice.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
</main>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    function recalcTotals() {
        let totalRate = 0, totalCGST = 0, totalSGST = 0, totalIGST = 0, grandTotal = 0;

        document.querySelectorAll('#poTable tbody tr').forEach(function(row) {
            const rate = parseFloat(row.querySelector('.rate')?.value) || 0;
            const qty = parseFloat(row.querySelector('.quantity')?.value) || 0;
            const gst = parseFloat(row.querySelector('.gst')?.value) || 0;

            const total = rate * qty;
            const cgst = (row.querySelector('.cgst-col') ? parseFloat(row.querySelector('.cgst-col').value) : 0);
            const sgst = (row.querySelector('.sgst-col') ? parseFloat(row.querySelector('.sgst-col').value) : 0);
            const igst = (row.querySelector('.igst-col') ? parseFloat(row.querySelector('.igst-col').value) : 0);

            totalRate += rate;
            totalCGST += cgst;
            totalSGST += sgst;
            totalIGST += igst;
            grandTotal += total + cgst + sgst + igst;
        });

        document.getElementById('total_rate').textContent = totalRate.toFixed(2);
        document.getElementById('total_cgst').textContent = totalCGST.toFixed(2);
        document.getElementById('total_sgst').textContent = totalSGST.toFixed(2);
        document.getElementById('total_igst').textContent = totalIGST.toFixed(2);
        document.getElementById('grand_total').textContent = grandTotal.toFixed(2);
    }

    // Run it once on page load
    recalcTotals();

    // Optional: attach it to your existing event listeners for dynamic updates
    document.querySelectorAll('.quantity, .rate, .gst').forEach(input => {
        input.addEventListener('input', recalcTotals);
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const addRowBtn = document.getElementById('addRowBtn');
    const poTableBody = document.querySelector('#poTable tbody');
    const cntInput = document.getElementById('cnt');
    const company_state = "Maha";

    let rowCount = parseInt(document.getElementById('cnt').value) || 0;

    // AUTO ADD FIRST ROW (CREATE MODE ONLY)
    @if(!isset($invoice))
    setTimeout(() => {
        const addRowBtnElement = document.getElementById('addRowBtn');
        if (addRowBtnElement && rowCount === 0) {
            addRowBtnElement.click();
        }
    }, 50);
    @endif

    /* --------------------------
        HELPER FUNCTIONS
    -----------------------------*/

   function toggleGSTColumns(state) {
    const isOtherState = state !== "Maha";

    const showCGST = !isOtherState;
    const showSGST = !isOtherState;
    const showIGST = isOtherState;

    // HEADER
    document.querySelector('.col-cgst').style.display = showCGST ? '' : 'none';
    document.querySelector('.col-sgst').style.display = showSGST ? '' : 'none';
    document.querySelector('.col-igst').style.display = showIGST ? '' : 'none';

    // BODY
    document.querySelectorAll('#poTable tbody tr').forEach(tr => {
        tr.children[5].style.display = showCGST ? '' : 'none'; // CGST
        tr.children[6].style.display = showSGST ? '' : 'none'; // SGST
        tr.children[7].style.display = showIGST ? '' : 'none'; // IGST
    });

    // FOOTER
    document.getElementById('total_cgst').style.display = showCGST ? '' : 'none';
    document.getElementById('total_sgst').style.display = showSGST ? '' : 'none';
    document.getElementById('total_igst').style.display = showIGST ? '' : 'none';
}



   function recalcTotals() {
    let totalRate = 0, totalCGST = 0, totalSGST = 0, totalIGST = 0, grand = 0;

    poTableBody.querySelectorAll('tr').forEach(tr => {
        const qty   = parseFloat(tr.querySelector('[name="quantity[]"]').value) || 0;
        const rate  = parseFloat(tr.querySelector('[name="rate[]"]').value) || 0;
        const cgst  = parseFloat(tr.querySelector('[name="cgst[]"]').value) || 0;
        const sgst  = parseFloat(tr.querySelector('[name="sgst[]"]').value) || 0;
        const igst  = parseFloat(tr.querySelector('[name="igst[]"]').value) || 0;

        const rowTotal = qty * rate;

        totalRate += rate; // ✅ Quantity × Rate
        totalCGST += cgst;
        totalSGST += sgst;
        totalIGST += igst;

        grand += rowTotal + cgst + sgst + igst;
    });

    document.getElementById('total_rate').innerText  = totalRate.toFixed(2);
    document.getElementById('total_cgst').innerText  = totalCGST.toFixed(2);
    document.getElementById('total_sgst').innerText  = totalSGST.toFixed(2);
    document.getElementById('total_igst').innerText  = totalIGST.toFixed(2);
    document.getElementById('grand_total').innerText = grand.toFixed(2);
}

function calculateGST(tr) {
    const qty  = parseFloat(tr.querySelector('[name="quantity[]"]').value) || 0;
    const rate = parseFloat(tr.querySelector('[name="rate[]"]').value) || 0;
    const gst  = parseFloat(tr.querySelector('[name="gst[]"]').value) || 0;

    const totalAmount = qty * rate;

    // ALWAYS company_state = "Maha"
    const gst_state = company_state;

    if (gst_state === company_state) {
        const half = ((gst / 2) / 100) * totalAmount;
        tr.querySelector('[name="cgst[]"]').value = half.toFixed(2);
        tr.querySelector('[name="sgst[]"]').value = half.toFixed(2);
        tr.querySelector('[name="igst[]"]').value = "0.00";
    } else {
        tr.querySelector('[name="cgst[]"]').value = "0.00";
        tr.querySelector('[name="sgst[]"]').value = "0.00";
        tr.querySelector('[name="igst[]"]').value = ((gst / 100) * totalAmount).toFixed(2);
    }

    // Total = qty * rate
    const totalInput = tr.querySelector('[name="total[]"]');
    if (totalInput) {
        totalInput.value = totalAmount.toFixed(2);
        totalInput.parentElement.style.display = ''; // Ensure total column visible
    }

    recalcTotals();
}

function clearTable() {
    poTableBody.innerHTML = '';
    cntInput.value = 0;
    rowCount = 0;
    recalcTotals();
    addRowBtn.click(); // always auto-add blank row
}

    /* --------------------------
        EVENT HANDLERS
    -----------------------------*/

    // GST State toggle
    document.querySelectorAll('.gst_state_radio').forEach(radio => {
        radio.addEventListener('change', function(){
            const selectedState = document.querySelector('.gst_state_radio:checked')?.value || company_state;
            toggleGSTColumns(selectedState);
            poTableBody.querySelectorAll('tr').forEach(tr => calculateGST(tr));
        });
    });

    // Add product row
    addRowBtn.addEventListener('click', function(){
        rowCount++;
        const i = rowCount;
        const tr = document.createElement('tr');
        tr.id = 'row_'+i;
        tr.innerHTML = `
            <td>
                <select name="product_id[]" class="form-control product_select" data-row="${i}" required>
                    <option value="">Select Product</option>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                    @endforeach
                </select>
                <input type="hidden" name="product_name[]" class="product_name">
            </td>

            <td><input type="text" name="hsn[]" class="form-control" readonly required></td>
            <td><input type="number" name="quantity[]" class="form-control quantity" value="1"  step="0.001" required></td>
            <td><input type="number" name="gst[]" class="form-control gst" readonly></td>
            <td><input type="number" name="rate[]" class="form-control rate"  required></td>
            <td><input type="number" name="cgst[]" class="form-control" readonly></td>
            <td><input type="number" name="sgst[]" class="form-control" readonly></td>
            <td><input type="number" name="igst[]" class="form-control" readonly></td>
            <td><input type="number" name="total[]" class="form-control" readonly></td>
            <td><i class="fa fa-trash text-danger removeRow" style="cursor:pointer;"></i></td>
        `;
        poTableBody.appendChild(tr);
        cntInput.value = rowCount;
        toggleGSTColumns(document.querySelector('.gst_state_radio:checked')?.value || company_state);
    });

    // Remove row
   poTableBody.addEventListener('click', e => {
    if (e.target.classList.contains('removeRow')) {
        const totalRows = poTableBody.querySelectorAll('tr').length;

        if (totalRows > 1) {
            e.target.closest('tr').remove();
            recalcTotals();
        } else {
            alert('At least one product row is required.');
        }
    }
});

    // Fetch product details
    poTableBody.addEventListener('change', async e => {
        if(e.target.classList.contains('product_select')){
            const row = e.target.dataset.row;
            const productId = e.target.value;
            if(!productId) return;
            try {
                const url = "{{ route('purchaseinvoice.getProductDetails','PID') }}".replace('PID', productId);
                const res = await fetch(url);
                const data = await res.json();
                const tr = document.getElementById('row_'+row);
                tr.querySelector('[name="hsn[]"]').value = data.hsn;
                tr.querySelector('[name="gst[]"]').value = data.gst;
                tr.querySelector('[name="rate[]"]').value = data.rate;
                tr.querySelector('[name="product_name[]"]').value = data.name || e.target.selectedOptions[0].text;
                calculateGST(tr);
            } catch(err) {
                console.error(err);
                alert('Error loading product');
            }
        }
    });

    // Quantity change → recalc
     poTableBody.addEventListener('input', e => {
    if (
        e.target.classList.contains('quantity') ||
        e.target.classList.contains('rate') ||
        e.target.classList.contains('gst')
    ) {
        calculateGST(e.target.closest('tr'));
    }
});


    // Initialize GST columns
    toggleGSTColumns(company_state);
});

</script>
<script>
function fetchLotNumber() {
    let supplierId = document.getElementById('supplier_id').value;
    if(!supplierId) return;

    fetch("{{ url('/ajax/get-lot-number') }}/" + supplierId, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('lot_no').value = data.lot_no;
    })
    .catch(error => console.error('Error fetching lot number:', error));
}

// Event listener
document.getElementById('supplier_id').addEventListener('change', fetchLotNumber);
</script>

@endpush