{{-- resources/views/purchase/bills/create-onepage.blade.php --}}
@extends('master.app')
@section('title', 'Create Supplier Invoice')

@section('pageCSS')
<style>
    /* ======= Page polish (safe + light) ======= */
    .inv-wrap { max-width: 1250px; margin: 0 auto; }
    .inv-card { border-radius: 18px; }
    .inv-section { border-radius: 16px; overflow: hidden; }
    .inv-section .section-head{
        background: rgba(13,110,253,.06);
        border-bottom: 1px solid rgba(0,0,0,.06);
        padding: 14px 18px;
    }
    .inv-section .section-body{ padding: 18px; }
    .inv-title{ font-weight: 800; letter-spacing: .2px; }
    .inv-sub{ font-size: 12px; }
    .step-badge{ font-size: 11px; padding: 6px 10px; border-radius: 999px; }

    /* Inputs alignment */
    .form-label{ font-weight: 600; font-size: 12px; color: #495057; }
    .form-control, .form-select { border-radius: 12px !important; }
    .input-group-text{ border-radius: 12px 0 0 12px !important; }
    .input-group .form-control{ border-radius: 0 12px 12px 0 !important; }
    .select2-container { width: 100% !important; }
    .select2-selection { border-radius: 12px !important; min-height: 38px !important; }

    /* Add-to-list redesign */
    .addTabs{
        display:flex; gap:10px; flex-wrap:wrap;
        background:#fff; border:1px solid rgba(0,0,0,.08);
        padding:8px; border-radius: 999px;
    }
    .addTabs .tabBtn{
        border:0; background:transparent;
        padding:8px 14px; border-radius:999px;
        font-weight:700; font-size:12px;
        color:#6c757d;
        display:flex; align-items:center; gap:7px;
    }
    .addTabs .tabBtn.active{
        background: rgba(13,110,253,.12);
        color:#0d6efd;
    }
    .addBox{
        border: 1px dashed rgba(13,110,253,.25);
        background: #fff;
        border-radius: 16px;
        padding: 16px;
    }
    .addBox .miniHead{
        display:flex; align-items:center; justify-content:space-between; gap:10px;
        margin-bottom: 10px;
    }
    .addBox .miniHead .h{
        font-weight: 800; font-size: 13px; color:#0d6efd;
        display:flex; align-items:center; gap:8px;
    }
    .addHint{
        border:1px solid rgba(0,0,0,.08);
        background: #fcfcfd;
        border-radius: 14px;
        padding: 10px 12px;
        display:flex; gap:10px; align-items:flex-start;
        font-size: 12px; color:#6c757d;
    }
    .addActions{
        display:flex; gap:10px; justify-content:flex-end; align-items:center;
        margin-top: 10px;
    }

    /* Table */
    .table thead th{ font-size: 12px; text-transform: uppercase; letter-spacing:.3px; }
    .table td{ vertical-align: middle; }
    .pill{
        display:inline-flex; align-items:center; gap:6px;
        padding: 6px 10px; border-radius: 999px;
        font-weight: 700; font-size: 12px;
        background: rgba(13,110,253,.08);
        color:#0d6efd;
    }

    /* Footer actions */
    .sticky-actions{
        position: sticky; bottom: 0;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(6px);
        border-top: 1px solid rgba(0,0,0,.06);
        padding: 12px 0 0;
        margin-top: 14px;
    }
</style>
@endsection

@section('body')
<main class="app-content">
    <section class="gradient-custom-2">
        <div class="inv-wrap">
            <div class="card mask-custom shadow-sm inv-card">
                <div class="card-body p-4">

                    {{-- Header --}}
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                        <div>
                            <h5 class="mb-0 inv-title">
                                <i class="fa fa-file-text-o me-1 text-primary"></i> Create Purchase Invoice
                            </h5>
                            <div class="inv-sub text-muted">One-page invoice (Add to List + Process)</div>
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ route('suppliers.index') }}" class="btn btn-sm btn-light border btn-rounded">
                                <i class="fa fa-arrow-left me-1"></i> Back to Suppliers
                            </a>
                            @if (isset($supplier) && $supplier)
                                <a href="{{ route('supplier_bill.index', $supplier->id) }}" class="btn btn-sm btn-light border btn-rounded">
                                    <i class="fa fa-list me-1"></i> Supplier Bills
                                </a>
                            @endif
                        </div>
                    </div>

                    @include('general.valert')

                    {{-- Main Form --}}
                    <form action="{{ route('msupplier_bill.store') }}" method="POST" enctype="multipart/form-data" id="invoiceForm">
                        @csrf

                        {{-- =========================
                            Step 1: Invoice Info
                        ========================== --}}
                        <div class="card border-0 shadow-sm inv-section mb-3">
                            <div class="section-head">
                                <div class="d-flex justify-content-between align-items-center gap-2">
                                    <div class="fw-bold">
                                        <i class="fa fa-info-circle me-1 text-primary"></i> Invoice Info
                                    </div>
                                    <span class="badge bg-secondary step-badge">Step 1</span>
                                </div>
                            </div>

                            <div class="section-body">
                                <div class="row g-3">

                                    <div class="col-lg-3 col-md-6">
                                        <label class="form-label">Invoice Type</label>
                                        <select name="type_id" required class="form-select select2" id="type_id">
                                            <option value="">Choose Invoice Type</option>
                                            @if (isset($btype) && $btype == 2)
                                                <option value="1" {{ old('type_id') == 1 ? 'selected' : '' }}>Raw Materials</option>
                                            @endif
                                            <option value="2" {{ old('type_id') == 2 ? 'selected' : '' }}>Finished Goods</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-3 col-md-6">
                                        <label class="form-label">Supplier</label>
                                        <select name="supplier_id" required class="form-select select2" id="supplier_id">
                                            <option value="">Choose Supplier</option>
                                            @foreach ($suppliers as $row)
                                                <option value="{{ $row->id }}"
                                                    {{ old('supplier_id') == $row->id ? 'selected' : (isset($supplier) && $supplier && $supplier->id == $row->id ? 'selected' : '') }}>
                                                    {{ $row->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-3 col-md-6">
                                        <label class="form-label">Invoice Number</label>
                                        <input type="number" required name="invoice_number"
                                            value="{{ old('invoice_number', $number ?? '') }}" id="invoice_number"
                                            class="form-control" placeholder="e.g. 1001"/>
                                    </div>

                                    <div class="col-lg-3 col-md-6">
                                        <label class="form-label">Title</label>
                                        <input type="text" required name="title" value="{{ old('title') }}"
                                            id="title" class="form-control" placeholder="e.g. Purchase of materials"/>
                                    </div>

                                    <div class="col-lg-3 col-md-6">
                                        <label class="form-label">Date</label>
                                        @if (isset($bdate) && $bdate == 1)
                                            <input type="text" required dir="rtl" name="date"
                                                value="{{ old('date') }}" class="form-control sample-date-picker"
                                                id="date" />
                                        @else
                                            <input type="date" required name="date"
                                                value="{{ old('date', date('Y-m-d')) }}" class="form-control"
                                                id="date" />
                                        @endif
                                    </div>

                                    <div class="col-lg-3 col-md-6">
                                        <label class="form-label">Currency</label>
                                        <select name="currency_id" required class="form-select select2" id="currency_id">
                                            <option value="">Choose Currency</option>
                                            @foreach ($currencies as $row)
                                                <option value="{{ $row->id }}"
                                                    {{ (string) old('currency_id', 1) === (string) $row->id ? 'selected' : '' }}>
                                                    {{ $row->title_ps ?? $row->title_en }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-3 col-md-6" id="ex_rate_text_box" style="display:none;">
                                        <label class="form-label">Exchange Rate</label>
                                        <input type="text" name="ex_rate" value="{{ old('ex_rate') }}"
                                            id="ex_rate" class="form-control" placeholder="e.g. 85.50"/>
                                    </div>

                                    <div class="col-lg-3 col-md-6">
                                        <label class="form-label">Invoice File</label>
                                        <input type="file" name="bill_files" class="form-control" />
                                    </div>

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

                        {{-- =========================
                            Step 2: Add Items (NEW DESIGN)
                        ========================== --}}
                        <div class="card border-0 shadow-sm inv-section mb-3">
                            <div class="section-head">
                                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                    <div>
                                        <div class="fw-bold">
                                            <i class="fa fa-plus-circle me-1 text-primary"></i> Add Items
                                        </div>
                                        <small class="text-muted">Choose type, fill fields, then press “Add to List”</small>
                                    </div>

                                    <div class="d-flex align-items-center gap-2">
                                        <div class="addTabs" role="tablist">
                                            <button type="button" class="tabBtn" id="tabRaw">
                                                <i class="fa fa-cubes"></i> Raw
                                            </button>
                                            <button type="button" class="tabBtn" id="tabFin">
                                                <i class="fa fa-dropbox"></i> Finished
                                            </button>
                                        </div>
                                        <span class="badge bg-secondary step-badge">Step 2</span>
                                    </div>
                                </div>
                            </div>

                            <div class="section-body">
                                <div class="addHint mb-3">
                                    <i class="fa fa-info-circle text-primary mt-1"></i>
                                    <div>
                                        <div><b>Tip:</b> لومړی Invoice Type انتخاب کړه، بیا د هماغه Type مطابق آیتم اضافه کړه.</div>
                                        <div class="mt-1">که Type Raw وي، “Raw” ټب وکاروه. که Finished وي، “Finished” ټب.</div>
                                    </div>
                                </div>

                                {{-- RAW BOX --}}
                                <div id="rawBox" class="addBox" style="display:none;">
                                    <div class="miniHead">
                                        <div class="h"><i class="fa fa-cubes"></i> Raw Materials Item</div>
                                        <button type="button" class="btn btn-sm btn-light border btn-rounded" id="rawClear">
                                            <i class="fa fa-eraser me-1"></i> Clear
                                        </button>
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label">Category</label>
                                            <select id="raw_cat_id" class="form-select select2">
                                                <option value="">Choose Category</option>
                                                @foreach ($pCategories ?? [] as $c)
                                                    <option value="{{ $c->id }}">{{ $c->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label">Sub Category</label>
                                            <select id="raw_scat_id" class="form-select select2">
                                                <option value="">SCAT</option>
                                            </select>
                                        </div>

                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label">Unit</label>
                                            <select id="raw_unit_id" class="form-select select2">
                                                <option value="">Choose Unit</option>
                                                @foreach ($pUnits ?? [] as $u)
                                                    <option value="{{ $u->id }}">{{ $u->title_ps ?? $u->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-2 col-md-4">
                                            <label class="form-label">CPI</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="fa fa-tag"></i></span>
                                                <input type="number" id="raw_cpi" class="form-control" placeholder="0">
                                            </div>
                                        </div>

                                        <div class="col-lg-2 col-md-4">
                                            <label class="form-label">SPI</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="fa fa-money"></i></span>
                                                <input type="number" id="raw_spi" class="form-control" placeholder="0">
                                            </div>
                                        </div>

                                        <div class="col-lg-2 col-md-4">
                                            <label class="form-label">Qty</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="fa fa-balance-scale"></i></span>
                                                <input type="number" id="raw_qty" class="form-control" placeholder="0">
                                            </div>
                                        </div>

                                        <div class="col-lg-6 d-flex align-items-end justify-content-end">
                                            <button type="button" class="btn btn-primary btn-rounded w-100 w-lg-auto" id="addRaw">
                                                <i class="fa fa-plus me-1"></i> Add to List
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                {{-- FIN BOX --}}
                                <div id="finBox" class="addBox" style="display:none;">
                                    <div class="miniHead">
                                        <div class="h"><i class="fa fa-dropbox"></i> Finished Goods Item</div>
                                        <button type="button" class="btn btn-sm btn-light border btn-rounded" id="finClear">
                                            <i class="fa fa-eraser me-1"></i> Clear
                                        </button>
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-lg-3 col-md-6">
                                            <label class="form-label">Category</label>
                                            <select id="fin_cat_id" class="form-select select2">
                                                <option value="">Choose Category</option>
                                                @foreach ($sCategories ?? [] as $c)
                                                    <option value="{{ $c->id }}">{{ $c->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-3 col-md-6">
                                            <label class="form-label">Sub Category</label>
                                            <select id="fin_sub_cat_id" class="form-select select2">
                                                <option value="">Choose Sub Category</option>
                                                @foreach ($sSubcategories ?? [] as $sc)
                                                    <option value="{{ $sc->id }}" data-cat="{{ $sc->cat_id }}">
                                                        {{ $sc->title_en }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-3 col-md-6">
                                            <label class="form-label">Unit</label>
                                            <select id="fin_unit_id" class="form-select select2">
                                                <option value="">Choose Unit</option>
                                                @foreach ($sUnits ?? [] as $u)
                                                    <option value="{{ $u->id }}">{{ $u->title_ps ?? $u->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-3 col-md-6">
                                            <label class="form-label">Weight</label>
                                            <select id="fin_weight_id" class="form-select select2">
                                                <option value="">Choose Weight</option>
                                                @foreach ($sWeights ?? [] as $w)
                                                    <option value="{{ $w->id }}">{{ $w->title_ps ?? $w->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label">Location</label>
                                            <select id="fin_location_id" class="form-select select2">
                                                <option value="">Choose Location</option>
                                                @foreach ($locations ?? [] as $l)
                                                    <option value="{{ $l->id }}">{{ $l->title ?? ($l->name ?? 'Location #'.$l->id) }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-2 col-md-4">
                                            <label class="form-label">Price</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="fa fa-tag"></i></span>
                                                <input type="number" id="fin_price" class="form-control" placeholder="0">
                                            </div>
                                        </div>

                                        <div class="col-lg-2 col-md-4">
                                            <label class="form-label">Qty</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="fa fa-cubes"></i></span>
                                                <input type="number" id="fin_qty" class="form-control" placeholder="0">
                                            </div>
                                        </div>

                                        <div class="col-lg-2 col-md-4">
                                            <label class="form-label">SPI</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="fa fa-money"></i></span>
                                                <input type="number" id="fin_spi" class="form-control" placeholder="0">
                                            </div>
                                        </div>

                                        <div class="col-lg-6 d-flex align-items-end justify-content-end">
                                            <button type="button" class="btn btn-primary btn-rounded w-100 w-lg-auto" id="addFin">
                                                <i class="fa fa-plus me-1"></i> Add to List
                                            </button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        {{-- =========================
                            Step 3: Items List
                        ========================== --}}
                        <div class="card border-0 shadow-sm inv-section mb-3">
                            <div class="section-head">
                                <div class="d-flex justify-content-between align-items-center gap-2">
                                    <div class="fw-bold">
                                        <i class="fa fa-list me-1 text-primary"></i> Items List
                                        <span class="ms-2 pill"><i class="fa fa-shopping-basket"></i> <span id="itemsCount">0</span> items</span>
                                    </div>
                                    <span class="badge bg-secondary step-badge">Step 3</span>
                                </div>
                            </div>

                            <div class="section-body">
                                <div class="table-responsive">
                                    <table class="table table-striped align-middle mb-0" id="itemsTable">
                                        <thead class="bg-light">
                                            <tr>
                                                <th style="width:60px;">#</th>
                                                <th>Item</th>
                                                <th style="width:120px;">Unit</th>
                                                <th style="width:110px;">Qty</th>
                                                <th style="width:130px;">Price</th>
                                                <th style="width:140px;">Total</th>
                                                <th style="width:90px;" class="text-end">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr id="emptyRow">
                                                <td colspan="7" class="text-center text-muted py-4">
                                                    <i class="fa fa-info-circle me-1"></i> No items added yet.
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

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

                        {{-- =========================
                            Step 4: Checkout
                        ========================== --}}
                        <div class="card border-0 shadow-sm inv-section">
                            <div class="section-head">
                                <div class="d-flex justify-content-between align-items-center gap-2">
                                    <div class="fw-bold">
                                        <i class="fa fa-check-circle me-1 text-primary"></i> Checkout
                                    </div>
                                    <span class="badge bg-secondary step-badge">Step 4</span>
                                </div>
                            </div>

                            <div class="section-body">
                                <div class="row g-3">
                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label">Grand Total</label>
                                        <input type="text" readonly id="grand_total" class="form-control" value="0" />
                                        <input type="hidden" name="grand_total" id="grand_total_hidden" value="0">
                                    </div>

                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label">Payment</label>
                                        <input type="text" id="payment" name="payment" value="0" class="form-control" />
                                    </div>

                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label">Balance</label>
                                        <input type="text" readonly id="balance_value" class="form-control" value="0" />
                                        <input type="hidden" name="balance_value" id="balance_value_hidden" value="0">
                                    </div>

                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label">Transaction Type</label>
                                        <select name="transaction_id" class="form-select">
                                            <option value="">Define Transaction Type</option>
                                            <option value="1">By Cash</option>
                                            <option value="2">By Bank</option>
                                            <option value="3">By Sarafi</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label">Target Cash</label>
                                        <select name="cash_id" class="form-select">
                                            <option value="">Define Target Type</option>
                                            <option value="1">Target Cash Yes</option>
                                            <option value="2">Target Cash No</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label">Payment By</label>
                                        <input type="text" name="payment_by" id="payment_by" class="form-control" placeholder="Cashier / Bank / Sarafi..." />
                                    </div>
                                </div>

                                <div class="sticky-actions">
                                    <div class="d-flex flex-wrap justify-content-end gap-2 pb-3">
                                        <a href="{{ route('suppliers.index') }}" class="btn btn-light border btn-rounded">
                                            <i class="fa fa-list me-1"></i> Back to List
                                        </a>

                                        <button type="submit" class="btn btn-primary btn-rounded" id="processBtn" disabled>
                                            <i class="fa fa-check me-1"></i> Process Invoice
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </section>
</main>
@endsection

@section('pageJs')
<script>
    // Menu active
    $(".app-menu").removeClass("active");
    $("#nav_purchase1").addClass("active");
    $("#purchasei").addClass("is-expanded");
    $("#purchase_invoices").addClass("active");

    let items = [];

    function money(n){
        n = parseFloat(n || 0);
        return (Math.round(n * 100) / 100).toString();
    }

    function syncTotalsToBackend(){
        $('#grand_total_hidden').val($('#grand_total').val());
        $('#balance_value_hidden').val($('#balance_value').val());
    }

    function calcBalance(){
        const total = parseFloat($('#grand_total').val() || 0);
        const pay = parseFloat($('#payment').val() || 0);
        $('#balance_value').val(money(total - pay));
        syncTotalsToBackend();
    }

    function calcTotal(){
        let total = 0;
        items.forEach(it => total += parseFloat(it.total || 0));
        $('#grand_total').val(money(total));
        calcBalance();
    }

    function rebuildHiddenInputs(){
        const box = $('#itemsInputs');
        box.html('');
        items.forEach((it, i) => {
            Object.keys(it.payload).forEach(key => {
                box.append(`<input type="hidden" name="items[${i}][${key}]" value="${it.payload[key]}">`);
            });
        });
    }

    function renderTable(){
        const tbody = $('#itemsTable tbody');
        tbody.html('');

        $('#itemsCount').text(items.length);

        if(items.length === 0){
            tbody.html(`<tr id="emptyRow"><td colspan="7" class="text-center text-muted py-4"><i class="fa fa-info-circle me-1"></i> No items added yet.</td></tr>`);
            $('#processBtn').prop('disabled', true);
            rebuildHiddenInputs();
            calcTotal();
            return;
        }

        items.forEach((it, idx) => {
            tbody.append(`
                <tr>
                    <td>${idx+1}</td>
                    <td>
                        <div class="fw-bold">${it.label}</div>
                        <small class="text-muted">${it.subLabel || ''}</small>
                    </td>
                    <td>${it.unitLabel || '-'}</td>
                    <td>${it.qty}</td>
                    <td>${it.price}</td>
                    <td class="fw-bold">${it.total}</td>
                    <td class="text-end">
                        <button type="button" class="btn btn-sm btn-light border removeItemBtn" data-index="${idx}">
                            <i class="fa fa-trash text-danger"></i>
                        </button>
                    </td>
                </tr>
            `);
        });

        $('#processBtn').prop('disabled', false);
        rebuildHiddenInputs();
        calcTotal();
    }

    function showByType(){
        const type = $('#type_id').val();

        // tabs highlight
        $('#tabRaw').toggleClass('active', type == 1);
        $('#tabFin').toggleClass('active', type == 2);

        // boxes
        $('#rawBox').toggle(type == 1);
        $('#finBox').toggle(type == 2);
    }

    // RAW: load subcategory via ajax
    $(document).on('change', '#raw_cat_id', function(){
        $.ajax({
            url: '{{ route('category.row_category') }}',
            type: 'GET',
            data: { cat_id: $(this).val() },
            success: function(data){
                $("#raw_scat_id").html(data).trigger('change');
            },
            error: function(){ alert('Error loading sub categories!'); }
        });
    });

    // FIN: filter subcategories by cat_id
    function filterFinSubCats(){
        const catId = $('#fin_cat_id').val();
        const sub = $('#fin_sub_cat_id');

        sub.find('option').each(function(){
            const v = $(this).val();
            if(!v) return;
            $(this).toggle($(this).data('cat') == catId);
        });

        sub.val('').trigger('change');
    }

    // Add RAW item
    $(document).on('click', '#addRaw', function(){
        const type = $('#type_id').val();
        if(type != 1){
            alert('Please choose Raw Materials invoice type.');
            return;
        }

        const cat = $('#raw_cat_id')[0];
        const scat = $('#raw_scat_id')[0];
        const unit = $('#raw_unit_id')[0];
        const cpi = $('#raw_cpi').val();
        const spi = $('#raw_spi').val();
        const qty = $('#raw_qty').val();

        if(!cat.value || !unit.value || !cpi || !spi || !qty){
            alert('Please fill all raw item fields.');
            return;
        }

        const total = parseFloat(cpi) * parseFloat(qty);

        items.push({
            label: cat.options[cat.selectedIndex].text,
            subLabel: (scat && scat.value) ? scat.options[scat.selectedIndex].text : '',
            unitLabel: unit.options[unit.selectedIndex].text,
            qty: qty,
            price: cpi,
            total: money(total),
            payload: {
                mode: 'raw',
                cat_id: cat.value,
                scat_id: (scat && scat.value) ? scat.value : '',
                unit_id: unit.value,
                cpi: cpi,
                spi: spi,
                qty: qty
            }
        });

        $('#raw_cpi,#raw_spi,#raw_qty').val('');
        renderTable();
    });

    // Add FIN item
    $(document).on('click', '#addFin', function(){
        const type = $('#type_id').val();
        if(type != 2){
            alert('Please choose Finished Goods invoice type.');
            return;
        }

        const cat = $('#fin_cat_id')[0];
        const sub = $('#fin_sub_cat_id')[0];
        const unit = $('#fin_unit_id')[0];
        const weight = $('#fin_weight_id')[0];
        const loc = $('#fin_location_id')[0];
        const price = $('#fin_price').val();
        const qty = $('#fin_qty').val();
        const spi = $('#fin_spi').val() || 0;

        if(!cat.value || !sub.value || !unit.value || !weight.value || !loc.value || !price || !qty){
            alert('Please fill all finished item fields.');
            return;
        }

        const total = parseFloat(price) * parseFloat(qty);

        items.push({
            label: cat.options[cat.selectedIndex].text + ' - ' + sub.options[sub.selectedIndex].text,
            subLabel: 'Weight: ' + weight.options[weight.selectedIndex].text + ' | Location: ' + loc.options[loc.selectedIndex].text,
            unitLabel: unit.options[unit.selectedIndex].text,
            qty: qty,
            price: price,
            total: money(total),
            payload: {
                mode: 'fin',
                cat_id: cat.value,
                sub_cat_id: sub.value,
                unit_id: unit.value,
                weight_id: weight.value,
                location_id: loc.value,
                price: price,
                qty: qty,
                spi: spi
            }
        });

        $('#fin_price,#fin_qty,#fin_spi').val('');
        renderTable();
    });

    // Remove item
    $(document).on('click', '.removeItemBtn', function(){
        const i = parseInt($(this).data('index'));
        items.splice(i, 1);
        renderTable();
    });

    // Clear buttons
    $(document).on('click', '#rawClear', function(){
        $('#raw_cpi,#raw_spi,#raw_qty').val('');
        $('#raw_cat_id,#raw_scat_id,#raw_unit_id').val('').trigger('change');
    });
    $(document).on('click', '#finClear', function(){
        $('#fin_price,#fin_qty,#fin_spi').val('');
        $('#fin_cat_id,#fin_sub_cat_id,#fin_unit_id,#fin_weight_id,#fin_location_id').val('').trigger('change');
    });

    // Type change
    $(document).on('change', '#type_id', function(){
        showByType();
    });

    // Tabs click (optional)
    $(document).on('click', '#tabRaw', function(){
        $('#type_id').val('1').trigger('change');
    });
    $(document).on('click', '#tabFin', function(){
        $('#type_id').val('2').trigger('change');
    });

    // Finished cat change
    $(document).on('change', '#fin_cat_id', function(){
        filterFinSubCats();
    });

    // Payment change
    $(document).on('input', '#payment', function(){
        this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        calcBalance();
    });

    // Currency ex_rate
    $(document).on('change', '#currency_id', function(){
        $.ajax({
            url: '{{ route('get.ex_rate') }}',
            type: 'GET',
            data: { currency_id: $(this).val() },
            success: function(value){ $("#ex_rate").val(value); }
        });

        if($(this).val() != 1) $("#ex_rate_text_box").show();
        else $("#ex_rate_text_box").hide();
    });

    // Before submit
    $('#invoiceForm').on('submit', function(e){
        if(items.length === 0){
            e.preventDefault();
            alert('Please add at least one item to list before processing.');
            return false;
        }
        calcTotal();
        syncTotalsToBackend();
        return true;
    });

    // Init
    $(function(){
        showByType();
        renderTable();
        calcBalance();

        // show ex-rate initially
        if($('#currency_id').val() != 1){
            $('#ex_rate_text_box').show();
        }
    });
</script>
@endsection