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

@section('body')
    <main class="app-content">
        <div class="container-fluid">

            {{-- HEADER --}}
            <div class="card border-0 shadow-sm rounded-4 mb-3">
                <div class="card-body p-4 retail-hero">
                    <div class="retail-hero-inner d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <div>
                            <h3 class="mb-1 fw-bold text-white">
                                <i class="fas fa-receipt me-2"></i> Retail Invoice
                            </h3>
                            <div class="text-white-50 small">
                                Step 1: Invoice Info • Step 2: Add Items • Step 3: Checkout
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <a href="{{ route('customer_retail_bill.index') }}"
                               class="btn btn-light btn-sm rounded-pill px-3 retail-btn">
                                <i class="fas fa-arrow-left me-1"></i> Back
                            </a>

                            @isset($bill)
                                <a href="{{ route('customer_retail_bill.print', $bill->id) }}"
                                   target="_blank"
                                   class="btn btn-warning btn-sm rounded-pill px-3 retail-btn">
                                    <i class="fas fa-print me-1"></i> Print
                                </a>
                            @endisset
                        </div>
                    </div>
                </div>
            </div>

            @include('general.valert')

            {{-- =========================
                STEP 1: CREATE INVOICE
            ========================= --}}
            @if (!isset($bill))
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3" style="color:#1f2d3d;">
                            <i class="fas fa-file-invoice me-2"></i> Step 1: Create Invoice
                        </h5>

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

                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label small text-muted fw-semibold mb-1">Invoice Type</label>
                                    <select id="type_id" name="type_id" required class="select2 form-control" style="width:100%;">
                                        <option value="">Choose Type</option>
                                        <option value="1" selected>From Stock</option>
                                        <option value="2">Without Stock</option>
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="number" name="invoice_number" required value="{{ $number ?? '' }}" id="invoice_number"
                                               class="form-control" />
                                        <label class="form-label" for="invoice_number">Invoice Number</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="text" name="customer_name" required id="customer_name" class="form-control" />
                                        <label class="form-label" for="customer_name">Customer Name</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="text" name="customer_phone" required id="customer_phone" class="form-control" />
                                        <label class="form-label" for="customer_phone">Customer Phone</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="text" name="title" required id="title" class="form-control" />
                                        <label class="form-label" for="title">Title</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label small text-muted fw-semibold mb-1">Date</label>
                                    @if ($bdate == 1)
                                        <input type="text" required dir="rtl" name="date" value=""
                                            class="form-control sample-date-picker" id="date" />
                                    @else
                                        <input type="date" required name="date" value="{{ date('Y-m-d') }}"
                                            class="form-control" id="date" />
                                    @endif
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label small text-muted fw-semibold mb-1">Currency</label>
                                    <select id="currency_id" required name="currency_id" class="select2 form-control" style="width:100%;">
                                        <option value="">Choose Currency</option>
                                        @foreach ($currencies as $row)
                                            <option value="{{ $row->id }}" @if ($row->id == 1) selected @endif>
                                                {{ $row->title_en }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3" id="ex_rate_text_box" style="display:none;">
                                    <div class="form-outline">
                                        <input type="text" name="ex_rate" value="" id="ex_rate" class="form-control" />
                                        <label class="form-label" for="ex_rate">Exchange Rate</label>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary rounded-pill px-4 retail-btn">
                                    <i class="fas fa-arrow-right me-1"></i> Next
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif


            {{-- =========================
                STEP 2: ADD ITEMS + CHECKOUT
            ========================= --}}
            @isset($bill)
                <div class="row g-3">

                    {{-- LEFT: ADD ITEM --}}
                    <div class="col-lg-5">
                        <div class="card border-0 shadow-sm rounded-4">
                            <div class="card-body p-4">
                                <h5 class="fw-bold mb-3" style="color:#1f2d3d;">
                                    <i class="fas fa-plus-circle me-2"></i> Step 2: Add Items
                                </h5>

                                {{-- Bill small info --}}
                                <div class="p-3 rounded-4 bg-light border mb-3">
                                    <div class="small text-muted">
                                        Invoice #: <strong>{{ $bill->invoice_number }}</strong> •
                                        Customer: <strong>{{ $bill->customer_name }}</strong> •
                                        Phone: <strong>{{ $bill->customer_phone }}</strong>
                                    </div>
                                </div>

                                {{-- From Stock --}}
                                @if ($bill->type_id == 1)
                                    <form method="GET" action="{{ route('customer_retail_bill.item_store') }}" id="stockItemForm">
                                        <input type="hidden" value="{{ $bill_id }}" name="bill_id">
                                        <input type="hidden" value="{{ $bill->invoice_date }}" name="date">

                                        {{-- IMPORTANT: Controller expects these names --}}
                                        <input type="hidden" name="spi" id="stock_spi" value="0">
                                        <input type="hidden" name="cpi" id="stock_cpi" value="0">

                                        {{-- IMPORTANT: Controller expects "scat_id" --}}
                                        <input type="hidden" name="scat_id" id="scat_id_hidden">

                                        <div class="row g-2">
                                            <div class="col-md-6">
                                                <label class="form-label small text-muted fw-semibold mb-1">Category</label>
                                                <select name="cat_id" id="cat_id" class="form-control select2" required>
                                                    <option value="">Choose</option>
                                                    @foreach ($categories as $row)
                                                        <option value="{{ $row->id }}">{{ $row->title_en }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label small text-muted fw-semibold mb-1">
                                                    Sub Category
                                                </label>
                                                {{-- Rename to scat_id to match controller --}}
                                                <select id="sub_cat_id" type="text" class="form-control select2" name="scat_id">
                                                    <option value="">Sub Cat</option>
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label small text-muted fw-semibold mb-1">Weight</label>
                                                <select id="weight_id" required class="form-control" name="weight_id">
                                                    <option value="">Choose Weight</option>
                                                    @foreach ($weights as $row)
                                                        <option value="{{ $row->id }}">{{ $row->title_en }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label small text-muted fw-semibold mb-1">Unit</label>
                                                <select id="unit_id" required class="form-control" name="unit_id">
                                                    <option value="">Choose Unit</option>
                                                    @foreach ($units as $row)
                                                        <option value="{{ $row->id }}">{{ $row->title_en }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-12">
                                                <label class="form-label small text-muted fw-semibold mb-1">Stock</label>
                                                <select id="stock_id" class="form-control select2" required name="stock_id">
                                                    <option value="">Choose Stock</option>
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-outline">
                                                    <input type="text" name="sale_price" required value="0" id="sale_price" class="form-control" />
                                                    <label class="form-label" for="sale_price">Sale Price</label>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-outline">
                                                    <input type="text" name="qty" required value="1" id="qty" class="form-control" />
                                                    <label class="form-label" for="qty">Quantity</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <button type="submit" class="btn btn-primary rounded-pill px-4 retail-btn w-100">
                                                <i class="fas fa-plus me-1"></i> Add to List
                                            </button>
                                        </div>
                                    </form>
                                @endif

                                {{-- Without Stock --}}
                                @if ($bill->type_id != 1)
                                    <form method="GET" action="{{ route('customer_retail_bill.nositem_store') }}">
                                        <input type="hidden" value="{{ $bill_id }}" name="bill_id">

                                        <div class="row g-2">
                                            <div class="col-md-12">
                                                <div class="form-outline">
                                                    <input type="text" name="name" required id="name" class="form-control" />
                                                    <label class="form-label" for="name">Item Description</label>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-outline">
                                                    <input type="number" name="price" required id="price" class="form-control" />
                                                    <label class="form-label" for="price">Price</label>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-outline">
                                                    <input type="number" name="qty" required value="1" id="qty_ns" class="form-control" />
                                                    <label class="form-label" for="qty_ns">Quantity</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <button type="submit" class="btn btn-primary rounded-pill px-4 retail-btn w-100">
                                                <i class="fas fa-plus me-1"></i> Add to List
                                            </button>
                                        </div>
                                    </form>
                                @endif

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

                    {{-- RIGHT: ITEMS TABLE + CHECKOUT --}}
                    <div class="col-lg-7">

                        {{-- ITEMS LIST --}}
                        <div class="card border-0 shadow-sm rounded-4 mb-3">
                            <div class="card-body p-4">
                                <h5 class="fw-bold mb-3" style="color:#1f2d3d;">
                                    <i class="fas fa-list me-2"></i> Items List
                                </h5>

                                <div class="table-responsive">
                                    @if ($bill->type_id == 1)
                                        <table class="table align-middle">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th>#</th>
                                                    <th>Cat</th>
                                                    <th>Sub</th>
                                                    <th>Weight</th>
                                                    <th>Unit</th>
                                                    <th>Qty</th>
                                                    <th class="text-end">Price</th>
                                                    <th class="text-end">Total</th>
                                                    <th class="text-center">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($bill_items as $row)
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td>{{ $row->category->title_en ?? '-' }}</td>
                                                        <td>{{ $row->sub_category->title_en ?? '-' }}</td>
                                                        <td>{{ $row->weight->title_en ?? '-' }}</td>
                                                        <td>{{ $row->unit->title_en ?? '-' }}</td>
                                                        <td>{{ $row->qty }}</td>
                                                        <td class="text-end">{{ number_format($row->sale_price ?? 0, 2) }}</td>
                                                        <td class="text-end">{{ number_format($row->total ?? 0, 2) }}</td>
                                                        <td class="text-center">
                                                            <a href="{{ route('customer_retail_bill.item_delete', $row->id) }}"
                                                               onclick="return confirm('Delete this item?');"
                                                               class="btn btn-sm btn-outline-danger rounded-pill">
                                                                <i class="fas fa-trash"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                                @if($bill_items->count() == 0)
                                                    <tr>
                                                        <td colspan="9" class="text-center text-muted py-4">
                                                            No items added yet.
                                                        </td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    @else
                                        <table class="table align-middle">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th>#</th>
                                                    <th>Item</th>
                                                    <th class="text-end">Price</th>
                                                    <th>Qty</th>
                                                    <th class="text-end">Total</th>
                                                    <th class="text-center">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($bill_items as $row)
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td>{{ $row->name }}</td>
                                                        <td class="text-end">{{ number_format($row->price ?? 0, 2) }}</td>
                                                        <td>{{ $row->qty }}</td>
                                                        <td class="text-end">{{ number_format($row->total ?? 0, 2) }}</td>
                                                        <td class="text-center">
                                                            <a href="{{ route('customer_retail_bill.nositem_delete', $row->id) }}"
                                                               onclick="return confirm('Delete this item?');"
                                                               class="btn btn-sm btn-outline-danger rounded-pill">
                                                                <i class="fas fa-trash"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                                @if($bill_items->count() == 0)
                                                    <tr>
                                                        <td colspan="6" class="text-center text-muted py-4">
                                                            No items added yet.
                                                        </td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- CHECKOUT --}}
                        @php
                            $sum_total = $bill_items->sum('total');
                        @endphp
                        <div class="card border-0 shadow-sm rounded-4">
                            <div class="card-body p-4">
                                <h5 class="fw-bold mb-3" style="color:#1f2d3d;">
                                    <i class="fas fa-cash-register me-2"></i> Step 3: Checkout
                                </h5>

                                {{-- Keep GET because your controller uses next_store without id --}}
                                <form method="GET" action="{{ route('customer_retail_bill.next_store') }}">
                                    <input type="hidden" value="{{ $bill_id }}" name="bill_id">

                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <div class="form-outline">
                                                <input type="text" value="{{ $sum_total }}" id="grand_total" name="grand_total"
                                                       class="form-control input-custom" />
                                                <label class="form-label">Total</label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-outline">
                                                <input type="text" id="bill_discount" onkeyup="final_calculation()"
                                                       value="0" name="bill_discount" class="form-control input-custom" />
                                                <label class="form-label">Discount</label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-outline">
                                                <input type="text" id="received" value="0" onkeyup="final_calculation()"
                                                       oninput="this.value=this.value.replace(/[^0-9.]/g,'').replace(/(\..*)\./g,'$1');"
                                                       name="received" class="form-control input-custom" />
                                                <label class="form-label">Received</label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-outline">
                                                <input type="text" readonly id="balance_value"
                                                       value="{{ $sum_total }}" name="balance_value"
                                                       class="form-control input-custom" />
                                                <label class="form-label">Balance</label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label small text-muted fw-semibold mb-1">Cash Target</label>
                                            <select required name="cash_id" id="cash_id" class="form-control input-custom">
                                                <option value="">Define Cash Target</option>
                                                <option value="1">Target Cash Yes</option>
                                                <option value="2">Target Cash No</option>
                                            </select>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-outline">
                                                <input type="text" name="received_by" id="received_by"
                                                       class="form-control input-custom" />
                                                <label class="form-label">Received By</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-4 d-flex justify-content-end">
                                        <button type="submit" class="btn btn-primary rounded-pill px-4 retail-btn">
                                            <i class="fas fa-check-circle me-1"></i> Checkout
                                        </button>
                                    </div>
                                </form>

                            </div>
                        </div>

                    </div>
                </div>
            @endisset

        </div>
    </main>
@endsection

@section('pageCSS')
    <style>
        .rounded-4 { border-radius: 1rem !important; }
        .retail-btn { transition: transform .15s ease, box-shadow .15s ease; }
        .retail-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

        .retail-hero{
            border-radius: 1rem;
            background: linear-gradient(135deg, #0d6efd, #4f46e5);
            position: relative;
            overflow: hidden;
        }
        .retail-hero:before{
            content:"";
            position:absolute;
            width:260px;height:260px;border-radius:999px;
            background: rgba(255,255,255,.12);
            top:-90px; right:-90px;
            pointer-events: none;
        }
        .retail-hero-inner{ position: relative; z-index: 2; }

        .retail-animate { animation: retailFade .55s ease-in-out; }
        @keyframes retailFade { from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:translateY(0);} }
    </style>
@endsection

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

        // Exchange rate toggle + auto fetch
        $("#currency_id").change(function() {
            $.ajax({
                url: '{{ route('get.ex_rate') }}',
                type: 'GET',
                data: { 'currency_id': $("#currency_id").val() },
                success: function(value) { $("#ex_rate").val(value); },
                error: function() { alert("Error occurred!"); }
            });

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

        // Calculation
        function final_calculation() {
            let total = parseFloat($("#grand_total").val()) || 0;
            let discount = parseFloat($("#bill_discount").val()) || 0;
            let received = parseFloat($("#received").val()) || 0;
            let balance = total - (discount + received);
            $("#balance_value").val(balance.toFixed(2));
        }

        // IMPORTANT: keep scat_id synced (controller uses scat_id)
        $("#sub_cat_id").on("change", function(){
            $("#scat_id_hidden").val($(this).val());
        });
    </script>

    {{-- keep your existing stock load scripts --}}
    @isset($bill)
        @if ($bill->type_id == 1)
            @if ($bsload == 1)
                @include('sale.retail_bills.script')
            @else
                @include('sale.retail_bills.stock_load2.script')
            @endif
        @else
            @include('sale.retail_bills.scriptrow')
        @endif
    @endisset
@endsection