@extends('layouts.app')

@section('title', 'New Sales Tax Invoice')
@section('page_title', 'Create Sales Tax Invoice (GST)')

@section('content')
<div class="container-fluid p-0">
    <form action="{{ route('invoices.store') }}" method="POST" id="invoiceForm">
        @csrf

        <!-- Invoice Header & Party Details Card -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold"><i class="bi bi-receipt text-primary me-2"></i> Tax Invoice Details</h5>
                <span id="supplyBadge" class="badge bg-success-subtle text-success fs-6 border border-success-subtle px-3 py-2">
                    <i class="bi bi-geo-alt-fill me-1"></i> Intra-State (CGST + SGST)
                </span>
            </div>
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Invoice Number <span class="text-danger">*</span></label>
                        <input type="text" name="invoice_number" class="form-control fw-bold" value="{{ old('invoice_number', $nextInvoiceNumber) }}" required>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Invoice Date <span class="text-danger">*</span></label>
                        <input type="date" name="invoice_date" class="form-control" value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Due Date</label>
                        <input type="date" name="due_date" class="form-control" value="{{ old('due_date', date('Y-m-d', strtotime('+30 days'))) }}">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Place of Origin (Company)</label>
                        <input type="text" class="form-control bg-light" value="{{ $company->state }} [{{ $company->state_code }}]" readonly disabled>
                        <input type="hidden" id="companyStateCode" value="{{ $company->state_code }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Customer / Client <span class="text-danger">*</span></label>
                        <select name="party_id" id="customerSelect" class="form-select" required>
                            <option value="">-- Select Customer --</option>
                            @foreach($customers as $c)
                                <option value="{{ $c->id }}"
                                    data-gstin="{{ $c->gstin }}"
                                    data-state-code="{{ $c->state_code }}"
                                    data-state="{{ $c->state }}"
                                    data-address="{{ $c->billing_address }}"
                                    {{ old('party_id') == $c->id ? 'selected' : '' }}>
                                    {{ $c->business_name ? "{$c->business_name} ({$c->name})" : $c->name }}
                                    {{ $c->gstin ? "- GSTIN: {$c->gstin}" : '(B2C)' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Place of Supply (Customer State) <span class="text-danger">*</span></label>
                        <select name="place_of_supply_code" id="placeOfSupplySelect" class="form-select" required>
                            @foreach($states as $code => $name)
                                <option value="{{ $code }}" {{ old('place_of_supply_code', $company->state_code) == $code ? 'selected' : '' }}>
                                    [{{ $code }}] {{ $name }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted" id="supplyNotice">Same as company state: CGST + SGST applied equally.</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Line Items Table Card -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold"><i class="bi bi-box-seam text-primary me-2"></i> Invoice Line Items</h5>
                <button type="button" class="btn btn-sm btn-primary" id="addRowBtn">
                    <i class="bi bi-plus-circle me-1"></i> Add Product Row
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle mb-0" id="itemsTable">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 30%;">Product Item <span class="text-danger">*</span></th>
                                <th style="width: 10%;">HSN / SAC</th>
                                <th style="width: 10%;">Qty</th>
                                <th style="width: 12%;">Unit Price (₹)</th>
                                <th style="width: 8%;">Disc %</th>
                                <th style="width: 12%;">Taxable Value (₹)</th>
                                <th style="width: 10%;">GST Rate</th>
                                <th style="width: 12%;">Total (₹)</th>
                                <th style="width: 4%;" class="text-center"><i class="bi bi-trash"></i></th>
                            </tr>
                        </thead>
                        <tbody id="itemsBody">
                            <!-- Rows dynamically populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-white border-top py-3 text-end">
                <button type="button" class="btn btn-outline-primary btn-sm" id="addRowBtnSecondary">
                    <i class="bi bi-plus-lg me-1"></i> Add Another Item
                </button>
            </div>
        </div>

        <!-- Totals & Payment Summary Row -->
        <div class="row g-4 mb-4">
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white py-3">
                        <h6 class="mb-0 fw-bold"><i class="bi bi-cash-coin text-success me-2"></i> Payment & Notes</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Amount Paid Now (₹)</label>
                                <input type="number" step="0.01" name="paid_amount" id="paidAmountInput" class="form-control" value="0.00">
                                <small class="text-muted">Enter if advance or immediate payment was received.</small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Payment Mode</label>
                                <select name="payment_mode" class="form-select">
                                    <option value="bank_transfer">Bank Transfer (NEFT/RTGS/IMPS)</option>
                                    <option value="upi">UPI / QR Code</option>
                                    <option value="cash">Cash</option>
                                    <option value="cheque">Cheque</option>
                                </select>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Invoice Notes / Remarks</label>
                                <textarea name="notes" rows="3" class="form-control" placeholder="Optional notes visible on invoice...">Payment terms: 30 days. Thank you for your business!</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white py-3">
                        <h6 class="mb-0 fw-bold"><i class="bi bi-calculator text-primary me-2"></i> GST & Grand Total Summary</h6>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0">
                            <tbody>
                                <tr>
                                    <td class="ps-3 py-2 fw-semibold">Total Taxable Value</td>
                                    <td class="text-end pe-3 py-2 fw-semibold" id="sumTaxable">₹0.00</td>
                                </tr>
                                <tr id="cgstRow">
                                    <td class="ps-3 py-2 text-muted">Central GST (CGST)</td>
                                    <td class="text-end pe-3 py-2" id="sumCgst">₹0.00</td>
                                </tr>
                                <tr id="sgstRow">
                                    <td class="ps-3 py-2 text-muted">State GST (SGST)</td>
                                    <td class="text-end pe-3 py-2" id="sumSgst">₹0.00</td>
                                </tr>
                                <tr id="igstRow" style="display: none;">
                                    <td class="ps-3 py-2 text-primary fw-semibold">Integrated GST (IGST)</td>
                                    <td class="text-end pe-3 py-2 text-primary fw-semibold" id="sumIgst">₹0.00</td>
                                </tr>
                                <tr>
                                    <td class="ps-3 py-2 fw-semibold">Total Tax Amount</td>
                                    <td class="text-end pe-3 py-2 fw-semibold" id="sumTotalTax">₹0.00</td>
                                </tr>
                                <tr>
                                    <td class="ps-3 py-2 text-muted">Round Off</td>
                                    <td class="text-end pe-3 py-2 text-muted" id="sumRoundOff">₹0.00</td>
                                </tr>
                                <tr class="table-primary fs-5 fw-bold">
                                    <td class="ps-3 py-3">Grand Total (INR)</td>
                                    <td class="text-end pe-3 py-3" id="sumGrandTotal">₹0.00</td>
                                </tr>
                                <tr>
                                    <td class="ps-3 py-2 text-danger fw-semibold">Balance Due</td>
                                    <td class="text-end pe-3 py-2 text-danger fw-bold fs-6" id="sumBalanceDue">₹0.00</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Bar -->
        <div class="d-flex justify-content-between align-items-center bg-white p-3 rounded shadow-sm">
            <a href="{{ route('invoices.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-x-lg me-1"></i> Discard
            </a>
            <button type="submit" class="btn btn-success btn-lg px-5 fw-bold">
                <i class="bi bi-check2-circle me-1"></i> Generate & Save Invoice
            </button>
        </div>
    </form>
</div>

<!-- Product Data JSON for JavaScript Engine -->
<script>
    const availableProducts = @json($products);
</script>
@endsection

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
    const customerSelect = document.getElementById("customerSelect");
    const placeOfSupplySelect = document.getElementById("placeOfSupplySelect");
    const companyStateCode = document.getElementById("companyStateCode").value.trim();
    const supplyBadge = document.getElementById("supplyBadge");
    const supplyNotice = document.getElementById("supplyNotice");
    const cgstRow = document.getElementById("cgstRow");
    const sgstRow = document.getElementById("sgstRow");
    const igstRow = document.getElementById("igstRow");
    const itemsBody = document.getElementById("itemsBody");
    const addRowBtn = document.getElementById("addRowBtn");
    const addRowBtnSecondary = document.getElementById("addRowBtnSecondary");
    const paidAmountInput = document.getElementById("paidAmountInput");

    let rowCount = 0;

    // Auto-update place of supply when customer changes
    customerSelect.addEventListener("change", function () {
        const selectedOption = this.options[this.selectedIndex];
        const stateCode = selectedOption.getAttribute("data-state-code");
        if (stateCode) {
            placeOfSupplySelect.value = stateCode;
            updateTaxType();
        }
    });

    placeOfSupplySelect.addEventListener("change", updateTaxType);

    function isInterState() {
        return placeOfSupplySelect.value.trim() !== companyStateCode;
    }

    function updateTaxType() {
        const interState = isInterState();
        if (interState) {
            supplyBadge.className = "badge bg-purple text-primary fs-6 border border-primary-subtle px-3 py-2";
            supplyBadge.innerHTML = '<i class="bi bi-globe me-1"></i> Inter-State Transaction (IGST)';
            supplyNotice.textContent = "Customer state differs from origin state: 100% IGST applied.";
            cgstRow.style.display = "none";
            sgstRow.style.display = "none";
            igstRow.style.display = "";
        } else {
            supplyBadge.className = "badge bg-success-subtle text-success fs-6 border border-success-subtle px-3 py-2";
            supplyBadge.innerHTML = '<i class="bi bi-geo-alt-fill me-1"></i> Intra-State Transaction (CGST + SGST)';
            supplyNotice.textContent = "Same as company state: CGST + SGST split equally (50% each).";
            cgstRow.style.display = "";
            sgstRow.style.display = "";
            igstRow.style.display = "none";
        }
        recalculateTotals();
    }

    function createRow() {
        rowCount++;
        const rowId = rowCount;
        const tr = document.createElement("tr");
        tr.id = `row-${rowId}`;

        let productOptions = `<option value="">-- Choose Product --</option>`;
        availableProducts.forEach(p => {
            productOptions += `<option value="${p.id}" data-price="${p.selling_price}" data-gst="${p.gst_rate}" data-hsn="${p.hsn_code}" data-stock="${p.current_stock}" data-unit="${p.unit ? p.unit.short_code : 'PCS'}">${p.name} (Stock: ${Math.round(p.current_stock)})</option>`;
        });

        tr.innerHTML = `
            <td>
                <select name="items[${rowId}][product_id]" class="form-select product-select" required>
                    ${productOptions}
                </select>
                <div class="d-flex gap-2 mt-1">
                    <small class="stock-badge text-muted">Stock: -</small>
                </div>
            </td>
            <td>
                <input type="text" class="form-control form-control-sm hsn-input font-monospace bg-light" readonly>
            </td>
            <td>
                <input type="number" step="0.01" min="0.01" name="items[${rowId}][quantity]" class="form-control form-control-sm qty-input text-center" value="1" required>
            </td>
            <td>
                <input type="number" step="0.01" min="0" name="items[${rowId}][unit_price]" class="form-control form-control-sm price-input text-end" value="0.00" required>
            </td>
            <td>
                <input type="number" step="0.01" min="0" max="100" name="items[${rowId}][discount_percent]" class="form-control form-control-sm disc-input text-center" value="0">
            </td>
            <td>
                <input type="text" class="form-control form-control-sm taxable-input text-end fw-semibold bg-light" value="0.00" readonly>
            </td>
            <td>
                <span class="badge bg-primary-subtle text-primary gst-badge">18%</span>
            </td>
            <td>
                <input type="text" class="form-control form-control-sm total-input text-end fw-bold bg-light" value="0.00" readonly>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-outline-danger btn-sm border-0 remove-row-btn" title="Remove line">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        `;

        itemsBody.appendChild(tr);

        // Bind events
        const prodSelect = tr.querySelector(".product-select");
        const qtyInput = tr.querySelector(".qty-input");
        const priceInput = tr.querySelector(".price-input");
        const discInput = tr.querySelector(".disc-input");
        const removeBtn = tr.querySelector(".remove-row-btn");

        prodSelect.addEventListener("change", function () {
            const selectedOpt = this.options[this.selectedIndex];
            if (selectedOpt.value) {
                const price = parseFloat(selectedOpt.getAttribute("data-price") || 0);
                const gst = parseFloat(selectedOpt.getAttribute("data-gst") || 18);
                const hsn = selectedOpt.getAttribute("data-hsn") || "";
                const stock = parseFloat(selectedOpt.getAttribute("data-stock") || 0);
                const unit = selectedOpt.getAttribute("data-unit") || "PCS";

                priceInput.value = price.toFixed(2);
                tr.querySelector(".hsn-input").value = hsn;
                tr.querySelector(".gst-badge").textContent = `${gst}%`;
                tr.querySelector(".gst-badge").setAttribute("data-gst", gst);
                tr.querySelector(".stock-badge").innerHTML = `Avail: <strong>${stock} ${unit}</strong>`;
            } else {
                priceInput.value = "0.00";
                tr.querySelector(".hsn-input").value = "";
                tr.querySelector(".stock-badge").textContent = "Stock: -";
            }
            calculateRow(tr);
        });

        qtyInput.addEventListener("input", () => calculateRow(tr));
        priceInput.addEventListener("input", () => calculateRow(tr));
        discInput.addEventListener("input", () => calculateRow(tr));

        removeBtn.addEventListener("click", function () {
            if (itemsBody.querySelectorAll("tr").length > 1) {
                tr.remove();
                recalculateTotals();
            } else {
                alert("An invoice must have at least one product item.");
            }
        });

        calculateRow(tr);
    }

    function calculateRow(tr) {
        const qty = parseFloat(tr.querySelector(".qty-input").value) || 0;
        const price = parseFloat(tr.querySelector(".price-input").value) || 0;
        const disc = parseFloat(tr.querySelector(".disc-input").value) || 0;
        const gstRate = parseFloat(tr.querySelector(".gst-badge").getAttribute("data-gst")) || 18;

        const gross = qty * price;
        const discountAmt = (gross * disc) / 100;
        const taxable = Math.max(0, gross - discountAmt);
        const taxAmt = (taxable * gstRate) / 100;
        const total = taxable + taxAmt;

        tr.querySelector(".taxable-input").value = taxable.toFixed(2);
        tr.querySelector(".total-input").value = total.toFixed(2);
        tr.setAttribute("data-taxable", taxable);
        tr.setAttribute("data-gst-rate", gstRate);
        tr.setAttribute("data-tax-amt", taxAmt);

        recalculateTotals();
    }

    function recalculateTotals() {
        const interState = isInterState();
        let totalTaxable = 0;
        let totalCgst = 0;
        let totalSgst = 0;
        let totalIgst = 0;

        const rows = itemsBody.querySelectorAll("tr");
        rows.forEach(tr => {
            const taxable = parseFloat(tr.getAttribute("data-taxable")) || 0;
            const gstRate = parseFloat(tr.getAttribute("data-gst-rate")) || 0;

            totalTaxable += taxable;

            if (interState) {
                const igst = (taxable * gstRate) / 100;
                totalIgst += igst;
            } else {
                const halfRate = gstRate / 2;
                const halfTax = (taxable * halfRate) / 100;
                totalCgst += halfTax;
                totalSgst += halfTax;
            }
        });

        const totalTax = totalCgst + totalSgst + totalIgst;
        const rawGrandTotal = totalTaxable + totalTax;
        const roundedGrandTotal = Math.round(rawGrandTotal);
        const roundOff = (roundedGrandTotal - rawGrandTotal);

        const paid = parseFloat(paidAmountInput.value) || 0;
        const balanceDue = Math.max(0, roundedGrandTotal - paid);

        document.getElementById("sumTaxable").textContent = "₹" + totalTaxable.toLocaleString("en-IN", {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById("sumCgst").textContent = "₹" + totalCgst.toLocaleString("en-IN", {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById("sumSgst").textContent = "₹" + totalSgst.toLocaleString("en-IN", {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById("sumIgst").textContent = "₹" + totalIgst.toLocaleString("en-IN", {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById("sumTotalTax").textContent = "₹" + totalTax.toLocaleString("en-IN", {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById("sumRoundOff").textContent = (roundOff >= 0 ? "+₹" : "-₹") + Math.abs(roundOff).toFixed(2);
        document.getElementById("sumGrandTotal").textContent = "₹" + roundedGrandTotal.toLocaleString("en-IN", {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById("sumBalanceDue").textContent = "₹" + balanceDue.toLocaleString("en-IN", {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    paidAmountInput.addEventListener("input", recalculateTotals);
    addRowBtn.addEventListener("click", createRow);
    addRowBtnSecondary.addEventListener("click", createRow);

    // Initialize first row
    createRow();
    updateTaxType();
});
</script>
@endpush