@extends('master.app')
@section('title', 'Create Retail Invoice')

@section('pageCSS')
    <style>
        :root{
            --radius: 16px;
            --shadow: 0 10px 28px rgba(2, 6, 23, .06);
            --muted: #6b7280;
        }
        .card-soft { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
        .fade-in { animation: fadeIn .25s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        .pill{
            padding:.35rem .75rem;border-radius:999px;background:rgba(15,23,42,.06);
            display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;
        }
        .muted-hint{ font-size:.82rem; color:var(--muted); }

        .field label.form-label{
            font-size:.85rem;color:#111827;margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem;
        }
        .field .form-control,
        .field .select2-container--default .select2-selection--single{
            height:44px !important;border-radius:12px !important;
        }

        .select2-container--default .select2-selection--single{
            display:flex !important;align-items:center !important;border:1px solid #d1d5db !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height:44px !important;padding-left:12px !important;padding-right:34px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow{
            height:44px !important; right:8px !important;
        }

        .table thead th{ background:#fff; white-space:nowrap; }
        .table td{ vertical-align:middle; }
        .btn-rounded{ border-radius:999px; }
        .btn-soft{ background:rgba(2,132,199,.08); color:#0369a1; border:0; }
        .btn-soft:hover{ background:rgba(2,132,199,.14); }

        .section-title{ display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px; }
        .section-title h5{ margin:0; }
        .divider{ height:1px;background:#e5e7eb;margin:14px 0; }

        .hide{ display:none !important; }
    </style>
@endsection

@section('body')
<main class="app-content fade-in">

    @include('general.valert')

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('customer_retail_bill.store_full') }}" method="POST" id="retailInvoiceForm">
        @csrf

        {{-- ✅ HEADER --}}
        <div class="card card-soft mb-3">
            <div class="card-body">

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <div>
                        <h4 class="fw-bold mb-0">
                            <i class="fas fa-file-invoice-dollar me-1"></i> Create Retail Invoice
                        </h4>
                        <small class="text-muted">Single page • Fast • Professional</small>
                    </div>

                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <span class="pill">
                            <i class="fas fa-hashtag"></i>
                            <span id="invPreview">{{ old('invoice_number', $number) }}</span>
                        </span>
                        <span class="pill">
                            <i class="fas fa-layer-group"></i>
                            Items: <span id="itemsCount">0</span>
                        </span>
                        <span class="pill">
                            <i class="fas fa-wallet"></i>
                            Balance: <span id="balancePreview">0</span>
                        </span>
                        <a href="{{ route('customer_retail_bill.index') }}" class="btn btn-light btn-sm btn-rounded">
                            <i class="fas fa-arrow-left me-1"></i> Back
                        </a>
                    </div>
                </div>

                {{-- ✅ INVOICE INFO --}}
                <div class="row g-3">
                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-tags"></i> Type</label>
                        <select id="type_id" name="type_id" required class="form-control select2" style="width:100%;">
                            <option value="1" @selected(old('type_id',1)==1)>From Stock</option>
                            <option value="2" @selected(old('type_id')==2)>Without Stock</option>
                        </select>
                        <div class="muted-hint mt-1">Choose invoice item mode</div>
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-hashtag"></i> Invoice Number</label>
                        <input type="number" name="invoice_number" required value="{{ old('invoice_number', $number) }}"
                               id="invoice_number" class="form-control" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-calendar"></i> Date</label>
                        <input type="date" required name="date" value="{{ old('date', date('Y-m-d')) }}"
                               class="form-control" id="date" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-pen"></i> Title</label>
                        <input type="text" name="title" required id="title" value="{{ old('title') }}"
                               class="form-control" />
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-user"></i> Customer Name</label>
                        <input type="text" name="customer_name" required id="customer_name"
                               value="{{ old('customer_name') }}" class="form-control" />
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-phone"></i> Customer Phone</label>
                        <input type="text" name="customer_phone" required id="customer_phone"
                               value="{{ old('customer_phone') }}" class="form-control" />
                    </div>

                    <div class="col-md-4 field">
                        <label class="form-label"><i class="fas fa-coins"></i> Currency</label>
                        <select id="currency_id" required name="currency_id" class="form-control select2" style="width:100%;">
                            <option value="">Choose Currency</option>
                            @foreach ($currencies as $row)
                                <option value="{{ $row->id }}" @selected(old('currency_id',1)==$row->id)>
                                    {{ $row->title_en }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 field" id="exRateBox">
                        <label class="form-label"><i class="fas fa-exchange-alt"></i> Exchange Rate</label>
                        <input type="text" name="ex_rate" id="ex_rate" value="{{ old('ex_rate') }}"
                               class="form-control" placeholder="Optional" />
                    </div>

                    <div class="col-md-8 field">
                        <label class="form-label"><i class="fas fa-align-left"></i> Details (Optional)</label>
                        <input type="text" name="details" id="details" value="{{ old('details') }}"
                               class="form-control" placeholder="Note / details..." />
                    </div>

                </div>
            </div>
        </div>


        {{-- ✅ ITEMS --}}
        <div class="card card-soft mb-3">
            <div class="card-body">

                <div class="section-title">
                    <h5 class="fw-bold"><i class="fas fa-list me-1"></i> Add Items</h5>
                    <small class="text-muted"><i class="fas fa-shield-alt me-1"></i> Prevent empty invoice</small>
                </div>

                {{-- From Stock --}}
                <div id="stockBox">
                    <div class="row g-3">
                        <div class="col-md-6 field">
                            <label class="form-label"><i class="fas fa-box"></i> Stock (Search)</label>
                            <select id="stock_id" class="form-control select2" style="width:100%;">
                                <option value="">Search stock...</option>
                                @foreach ($stocks as $s)
                                    <option value="{{ $s->id }}"
                                        data-qty="{{ $s->qty ?? 0 }}"
                                        data-sale="{{ $s->sale_price ?? 0 }}"
                                        data-cost="{{ $s->cost_price ?? 0 }}">
                                        {{ optional($s->category)->title_en }} /
                                        {{ optional($s->sub_category)->title_en }} /
                                        {{ optional($s->weight)->title_en }} /
                                        {{ optional($s->unit)->title_en }}
                                        (Qty: {{ $s->qty ?? 0 }})
                                    </option>
                                @endforeach
                            </select>
                            <div class="muted-hint mt-1" id="stockHint"></div>
                        </div>

                        <div class="col-md-2 field">
                            <label class="form-label"><i class="fas fa-tag"></i> Sale Price</label>
                            <input type="number" step="0.01" id="sale_price" value="0" class="form-control" />
                        </div>

                        <div class="col-md-2 field">
                            <label class="form-label"><i class="fas fa-sort-numeric-up"></i> Qty</label>
                            <input type="number" step="0.01" id="qty_input" value="1" class="form-control" />
                        </div>

                        <div class="col-md-2 d-flex align-items-end">
                            <button type="button" class="btn btn-primary btn-rounded w-100" id="addStockBtn">
                                Add <i class="fa fa-plus ms-1"></i>
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Without Stock --}}
                <div id="noStockBox" class="hide">
                    <div class="row g-3">
                        <div class="col-md-6 field">
                            <label class="form-label"><i class="fas fa-align-left"></i> Item Name</label>
                            <input type="text" id="ns_name" class="form-control" placeholder="Item description..." />
                        </div>

                        <div class="col-md-2 field">
                            <label class="form-label"><i class="fas fa-tag"></i> Price</label>
                            <input type="number" step="0.01" id="ns_price" value="0" class="form-control" />
                        </div>

                        <div class="col-md-2 field">
                            <label class="form-label"><i class="fas fa-sort-numeric-up"></i> Qty</label>
                            <input type="number" step="0.01" id="ns_qty" value="1" class="form-control" />
                        </div>

                        <div class="col-md-2 d-flex align-items-end">
                            <button type="button" class="btn btn-primary btn-rounded w-100" id="addNoStockBtn">
                                Add <i class="fa fa-plus ms-1"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="divider"></div>

                {{-- Items table --}}
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead>
                            <tr>
                                <th style="width:60px;">#</th>
                                <th>Item</th>
                                <th style="width:130px;">Price</th>
                                <th style="width:110px;">Qty</th>
                                <th style="width:140px;">Total</th>
                                <th style="width:90px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="itemsBody">
                            <tr id="emptyRow">
                                <td colspan="6" class="text-center text-muted py-4">
                                    <i class="fas fa-box-open me-1"></i> No items yet
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                {{-- Hidden inputs injected here --}}
                <div id="itemsInputs"></div>

            </div>
        </div>


        {{-- ✅ STATEMENT --}}
        <div class="card card-soft">
            <div class="card-body">

                <div class="section-title">
                    <h5 class="fw-bold"><i class="fas fa-calculator me-1"></i> Invoice Statement</h5>
                    <small class="text-muted">Discount & Received auto-calc balance</small>
                </div>

                <div class="row g-3">
                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-sack-dollar"></i> Total</label>
                        <input type="text" readonly id="grand_total" name="grand_total" value="{{ old('grand_total', 0) }}"
                               class="form-control" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-percent"></i> Discount</label>
                        <input type="number" step="0.01" id="bill_discount" name="bill_discount"
                               value="{{ old('bill_discount', 0) }}" class="form-control" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-hand-holding-dollar"></i> Received</label>
                        <input type="number" step="0.01" id="received" name="received"
                               value="{{ old('received', 0) }}" class="form-control" />
                    </div>

                    <div class="col-md-3 field">
                        <label class="form-label"><i class="fas fa-wallet"></i> Balance</label>
                        <input type="text" readonly id="balance_value" name="balance_value"
                               value="{{ old('balance_value', 0) }}" class="form-control" />
                    </div>

                    <div class="col-md-6 field">
                        <label class="form-label"><i class="fas fa-bullseye"></i> Cash Target</label>
                        <select name="cash_id" class="form-control select2" required style="width:100%;">
                            <option value="">Define Cash Target</option>
                            <option value="1" @selected(old('cash_id')==1)>Target Cash Yes</option>
                            <option value="2" @selected(old('cash_id')==2)>Target Cash No</option>
                        </select>
                    </div>

                    <div class="col-md-6 field">
                        <label class="form-label"><i class="fas fa-user-check"></i> Received By</label>
                        <input type="text" name="received_by" value="{{ old('received_by') }}"
                               class="form-control" />
                    </div>

                    <div class="col-12 d-flex justify-content-end gap-2 mt-2">
                        <button type="button" class="btn btn-soft btn-rounded" id="resetBtn">
                            Reset <i class="fas fa-rotate-left ms-1"></i>
                        </button>
                        <button type="submit" class="btn btn-success btn-rounded" id="checkoutBtn">
                            Checkout <i class="fas fa-check ms-1"></i>
                        </button>
                    </div>

                    <div class="col-12">
                        <div class="muted-hint mt-1">
                            <i class="fas fa-shield-alt me-1"></i>
                            Submit blocked if no items — prevents empty invoices.
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </form>
</main>
@endsection

@section('pageJs')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(".app-menu").removeClass("active");
        $("#nav_salei").addClass("active");
        $("#salei").addClass("is-expanded");
        $("#customer_retail_bill").addClass("active");

        // init select2
        $('.select2').select2({ placeholder: "Search...", allowClear: true, width: 'resolve' });

        let items = [];

        function num(v){ v = parseFloat(v || 0); return isNaN(v) ? 0 : v; }

        function refreshBadges(){
            $("#itemsCount").text(items.length);
            $("#invPreview").text($("#invoice_number").val() || '');
            $("#balancePreview").text($("#balance_value").val() || '0');
        }

        function recalc(){
            const total = num($("#grand_total").val());
            const disc  = num($("#bill_discount").val());
            const recv  = num($("#received").val());
            const final = Math.max(total - disc, 0);
            const bal   = Math.max(final - recv, 0);
            $("#balance_value").val(bal.toFixed(2));
            refreshBadges();
        }

        function renderItems(){
            const body = $("#itemsBody");
            const inputs = $("#itemsInputs");
            body.html("");
            inputs.html("");

            if(items.length === 0){
                body.html(`
                    <tr id="emptyRow">
                        <td colspan="6" class="text-center text-muted py-4">
                            <i class="fas fa-box-open me-1"></i> No items yet
                        </td>
                    </tr>
                `);
                $("#grand_total").val("0");
                recalc();
                refreshBadges();
                return;
            }

            let sum = 0;

            items.forEach((it, idx) => {
                sum += it.total;

                body.append(`
                    <tr>
                        <td>${idx+1}</td>
                        <td>
                            <div class="fw-semibold">${it.label}</div>
                            <small class="text-muted">
                                ${it.type === 'stock'
                                    ? `<i class="fas fa-barcode me-1"></i> Stock ID: ${it.stock_id}`
                                    : `<i class="fas fa-pen me-1"></i> No-stock item`}
                            </small>
                        </td>
                        <td>${it.price}</td>
                        <td>${it.qty}</td>
                        <td class="fw-bold">${it.total.toFixed(2)}</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-light" onclick="removeItem(${idx})">
                                <i class="fa fa-trash text-danger"></i>
                            </button>
                        </td>
                    </tr>
                `);

                // hidden inputs (important for store_full)
                if(it.type === 'stock'){
                    inputs.append(`
                        <input type="hidden" name="items[${idx}][type]" value="stock">
                        <input type="hidden" name="items[${idx}][stock_id]" value="${it.stock_id}">
                        <input type="hidden" name="items[${idx}][sale_price]" value="${it.price}">
                        <input type="hidden" name="items[${idx}][qty]" value="${it.qty}">
                    `);
                } else {
                    inputs.append(`
                        <input type="hidden" name="items[${idx}][type]" value="no_stock">
                        <input type="hidden" name="items[${idx}][name]" value="${escapeHtml(it.label)}">
                        <input type="hidden" name="items[${idx}][price]" value="${it.price}">
                        <input type="hidden" name="items[${idx}][qty]" value="${it.qty}">
                    `);
                }
            });

            $("#grand_total").val(sum.toFixed(2));
            recalc();
            refreshBadges();
        }

        // global remove for inline onclick
        window.removeItem = function(i){
            Swal.fire({
                title: "Remove item?",
                text: "This will remove the row from invoice items.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, remove",
                cancelButtonText: "Cancel",
            }).then((res) => {
                if(res.isConfirmed){
                    items.splice(i, 1);
                    renderItems();
                }
            });
        }

        function escapeHtml(str){
            return (str || '').replaceAll('&','&amp;').replaceAll('<','&lt;')
                .replaceAll('>','&gt;').replaceAll('"','&quot;').replaceAll("'",'&#039;');
        }

        function addStockItem(){
            const stockId = $("#stock_id").val();
            const opt = $("#stock_id option:selected");
            const label = opt.text().trim();
            const availableQty = num(opt.data("qty"));

            const price = num($("#sale_price").val());
            const qty = num($("#qty_input").val());

            if(!stockId) return Swal.fire("Missing", "Please choose a stock item first.", "warning");
            if(qty <= 0) return Swal.fire("Invalid Qty", "Qty must be greater than 0.", "warning");
            if(availableQty > 0 && qty > availableQty){
                return Swal.fire("Stock Limit", `Only ${availableQty} available in stock.`, "warning");
            }

            // merge same stock + same price
            const idx = items.findIndex(x => x.type === 'stock' && x.stock_id == stockId && x.price == price);
            if(idx !== -1){
                items[idx].qty += qty;
                items[idx].total = items[idx].qty * items[idx].price;
            } else {
                items.push({ type:'stock', stock_id: stockId, label, price, qty, total: price * qty });
            }

            $("#qty_input").val(1);
            $("#stock_id").val("").trigger("change");
            renderItems();
        }

        function addNoStockItem(){
            const name = ($("#ns_name").val() || "").trim();
            const price = num($("#ns_price").val());
            const qty = num($("#ns_qty").val());

            if(!name) return Swal.fire("Missing", "Please write item name/description.", "warning");
            if(qty <= 0) return Swal.fire("Invalid Qty", "Qty must be greater than 0.", "warning");

            items.push({ type:'no_stock', label:name, price, qty, total: price * qty });

            $("#ns_name").val("");
            $("#ns_price").val(0);
            $("#ns_qty").val(1);
            renderItems();
        }

        // toggle type (stock / no stock)
        function toggleType(){
            const t = $("#type_id").val();
            if(t == 1){
                $("#stockBox").removeClass("hide");
                $("#noStockBox").addClass("hide");
            } else {
                $("#stockBox").addClass("hide");
                $("#noStockBox").removeClass("hide");
            }
            items = [];
            renderItems();
        }

        $("#type_id").on("change", toggleType);
        $("#addStockBtn").on("click", addStockItem);
        $("#addNoStockBtn").on("click", addNoStockItem);
        $("#bill_discount, #received").on("input", recalc);
        $("#invoice_number").on("input", refreshBadges);

        // stock select hint + auto-fill sale price
        $("#stock_id").on("change", function(){
            const opt = $("#stock_id option:selected");
            if(!opt.val()){
                $("#stockHint").text("");
                return;
            }
            const availableQty = num(opt.data("qty"));
            const defaultSale = num(opt.data("sale"));
            if(defaultSale > 0) $("#sale_price").val(defaultSale);

            $("#stockHint").html(`<i class="fas fa-cubes me-1"></i> Available: <b>${availableQty}</b>`);
            const q = num($("#qty_input").val());
            if(availableQty > 0 && q > availableQty) $("#qty_input").val(availableQty);
        });

        // exchange rate
        $("#currency_id").change(function(){
            $.ajax({
                url: '{{ route('get.ex_rate') }}',
                type: 'GET',
                data: { currency_id: $("#currency_id").val() },
                success: function(v){ $("#ex_rate").val(v); },
                error: function(){ Swal.fire("Warning", "Exchange rate error!", "error"); }
            });

            if($(this).val() != 1) $("#exRateBox").removeClass("hide");
            else $("#exRateBox").addClass("hide");
        });

        $("#resetBtn").on("click", function(){
            Swal.fire({
                title: "Reset invoice?",
                text: "This will clear all items and totals.",
                icon: "question",
                showCancelButton: true,
                confirmButtonText: "Yes, reset",
                cancelButtonText: "Cancel"
            }).then((r) => {
                if(r.isConfirmed){
                    items = [];
                    $("#sale_price").val(0);
                    $("#qty_input").val(1);
                    $("#bill_discount").val(0);
                    $("#received").val(0);
                    renderItems();
                }
            });
        });

        $("#retailInvoiceForm").on("submit", function(e){
            if(items.length === 0){
                e.preventDefault();
                return Swal.fire("No Items", "Please add at least one item to checkout.", "warning");
            }
            $("#checkoutBtn").prop("disabled", true)
                .html(`Processing <i class="fas fa-spinner fa-spin ms-1"></i>`);
        });

        // init
        toggleType();
        renderItems();
        recalc();
        refreshBadges();
    </script>
@endsection