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

@section('pageCSS')
<style>
    :root{
        --radius: 16px;
        --shadow: 0 10px 28px rgba(2, 6, 23, .06);
        --muted: #6b7280;
        --dark: #0f172a;
        --primary: #0d6efd;
    }

    .card-soft { border:0; border-radius:var(--radius); box-shadow:var(--shadow); }
    .rounded-4 { border-radius: 1rem !important; }

    .fade-in { animation: fadeIn .25s ease-in-out; }
    @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    .hero {
        border-radius: var(--radius);
        background: linear-gradient(135deg, #0d6efd, #4f46e5);
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    .hero:before{
        content:"";
        position:absolute;
        width:280px;height:280px;border-radius:999px;
        background: rgba(255,255,255,.12);
        top:-110px; right:-110px;
        pointer-events:none;
    }

    .pill{
        padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,.14);
        display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;
        color:#fff;
    }

    .section-title{
        display:flex;align-items:center;justify-content:space-between;gap:12px;
        margin-bottom: 10px;
    }
    .section-title h5{ margin:0; }

    .kv{
        display:flex;align-items:center;justify-content:space-between;
        padding:.65rem .75rem; border-radius:12px;
        background:#f8fafc; border:1px solid #eef2f7;
        gap:12px;
    }
    .kv .k{ color: var(--muted); font-size:.85rem; display:flex; align-items:center; gap:.45rem; }
    .kv .v{ font-weight:700; color: var(--dark); }

    .btn-rounded{ border-radius:999px; }
    .btn-soft{
        background: rgba(13,110,253,.10);
        border:0;
        color:#0b5ed7;
    }
    .btn-soft:hover{ background: rgba(13,110,253,.16); }

    .table thead th{ white-space:nowrap; background:#fff; }
    .table td{ vertical-align: middle; }

    .money{ font-variant-numeric: tabular-nums; }

    /* print areas hidden on screen */
    .print-area{ display:none; }
</style>
@endsection

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

        {{-- ✅ HERO HEADER --}}
        <div class="card card-soft hero mb-3">
            <div class="card-body p-4 position-relative">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <h4 class="fw-bold mb-1">
                            <i class="fas fa-pen-to-square me-2"></i> Edit Retail Invoice
                        </h4>
                        <div class="text-white-50 small">
                            Invoice # <b>{{ $bill->invoice_number }}</b> • Date: <b>{{ $bill->invoice_date }}</b>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        <span class="pill"><i class="fas fa-user"></i> {{ $bill->customer_name }}</span>
                        <span class="pill"><i class="fas fa-phone"></i> {{ $bill->customer_phone }}</span>

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

                        <button type="button" onclick="printInvoice('printA4')" class="btn btn-warning btn-sm btn-rounded px-3">
                            <i class="fas fa-print me-1"></i> Print A4
                        </button>

                        <button type="button" onclick="printInvoice('print80')" class="btn btn-dark btn-sm btn-rounded px-3">
                            <i class="fas fa-receipt me-1"></i> Small Printer
                        </button>
                    </div>
                </div>
            </div>
        </div>

        @include('general.valert')

        {{-- ✅ TOP SUMMARY --}}
        @php
            $cur = $bill->currency->title_en ?? '';
            $sum_total = ($bill_items->sum('total') == 0) ? ($bill->grand_total ?? 0) : $bill_items->sum('total');
            $discount = $bill->discount ?? 0;
            $received = $bill->received ?? 0;
            $balance_calc = max(($sum_total - ($discount + $received)), 0);
        @endphp

        <div class="row g-3 mb-3">
            <div class="col-lg-4">
                <div class="card card-soft">
                    <div class="card-body p-4">
                        <div class="section-title">
                            <h5 class="fw-bold"><i class="fas fa-clipboard-list me-2"></i> Summary</h5>
                            <span class="badge bg-primary">{{ $bill->type_id == 1 ? 'From Stock' : 'Without Stock' }}</span>
                        </div>

                        <div class="d-grid gap-2">
                            <div class="kv">
                                <div class="k"><i class="fas fa-hashtag"></i> Invoice No</div>
                                <div class="v">{{ $bill->invoice_number }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-calendar"></i> Date</div>
                                <div class="v">{{ $bill->invoice_date }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-user"></i> Customer</div>
                                <div class="v">{{ $bill->customer_name }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-phone"></i> Phone</div>
                                <div class="v">{{ $bill->customer_phone }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-user-check"></i> Received By</div>
                                <div class="v">{{ $bill->received_by ?? '-' }}</div>
                            </div>
                        </div>

                        <hr>
                        <div class="small text-muted">
                            <i class="fas fa-circle-info me-1"></i>
                            You can edit invoice info, update received amount, and manage items.
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card card-soft">
                    <div class="card-body p-4">
                        <div class="section-title">
                            <h5 class="fw-bold"><i class="fas fa-calculator me-2"></i> Financial Overview</h5>
                            <small class="text-muted">Auto recalculated balance</small>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="kv">
                                    <div class="k"><i class="fas fa-sack-dollar"></i> Total</div>
                                    <div class="v money">{{ $cur }} {{ number_format($sum_total, 2) }}</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="kv">
                                    <div class="k"><i class="fas fa-percent"></i> Discount</div>
                                    <div class="v money">{{ $cur }} {{ number_format($discount, 2) }}</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="kv">
                                    <div class="k"><i class="fas fa-hand-holding-dollar"></i> Received</div>
                                    <div class="v money">{{ $cur }} {{ number_format($received, 2) }}</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="kv" style="background:#eef2ff;border-color:#dbeafe;">
                                    <div class="k" style="color:#1e40af;"><i class="fas fa-wallet"></i> Balance</div>
                                    <div class="v money" style="color:#1e40af;">{{ $cur }} {{ number_format($balance_calc, 2) }}</div>
                                </div>
                            </div>
                        </div>

                        @if(($bill->currency_id ?? 1) != 1 && !empty($bill->ex_rate))
                            <div class="mt-3 small text-muted">
                                <i class="fas fa-exchange-alt me-1"></i>
                                Exchange Rate: <b>{{ $bill->ex_rate }}</b>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>


        {{-- ✅ ITEMS + EDIT FORM --}}
        <div class="card card-soft">
            <div class="card-body p-4">

                <div class="section-title">
                    <h5 class="fw-bold mb-0">
                        <i class="fas fa-boxes-stacked me-2"></i> Items & Invoice Statement
                    </h5>
                    <small class="text-muted">
                        <i class="fas fa-shield-alt me-1"></i> International style • clean & safe
                    </small>
                </div>

                {{-- KEEP YOUR EXISTING ITEM FORMS + TABLES (WORKING) --}}
                @if ($bill->type_id == 1)
                    <div class="mb-3">
                        @include('sale.retail_bills.next-header-form')
                    </div>
                    <div class="mb-4">
                        @include('sale.retail_bills.next-item-table')
                    </div>
                @else
                    <div class="mb-3">
                        @include('sale.retail_bills.no_stock.next-header-form')
                    </div>
                    <div class="mb-4">
                        @include('sale.retail_bills.no_stock.next-item-table')
                    </div>
                @endif

                <hr class="my-4">

                {{-- ✅ EDIT / UPDATE FORM --}}
                <div class="text-center mb-3">
                    <h5 class="fw-bold" style="color:#1f2d3d;">
                        <i class="fas fa-file-invoice me-2"></i> Invoice Statement
                    </h5>
                    <div class="text-muted small">Update invoice info + received. Balance updates automatically.</div>
                </div>

                <form class="mb-0" method="post" action="{{ route('customer_retail_bill.update', $bill->id) }}">
                    @method('put')
                    @csrf

                    <div class="row g-3">

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

                        <div class="col-md-3">
                            <div class="form-outline">
                                {{-- ✅ fixed: removed duplicate value="" --}}
                                <input type="text" name="customer_name" required value="{{ $bill->customer_name }}"
                                    id="customer_name" class="form-control" />
                                <label class="form-label" for="customer_name">Customer Name</label>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-outline">
                                <input type="text" name="customer_phone" required value="{{ $bill->customer_phone }}"
                                    id="customer_phone" class="form-control" />
                                <label class="form-label" for="customer_phone">Customer Phone</label>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-outline">
                                <input type="text" name="title" required value="{{ $bill->title }}"
                                    id="title" class="form-control" />
                                <label class="form-label" for="title">Title</label>
                            </div>
                        </div>

                        <div class="col-md-3">
                            @if ($bdate == 1)
                                <input type="text" required dir="rtl" name="date"
                                    value="{{ $bill->invoice_date }}" class="form-control sample-date-picker"
                                    id="date" />
                                <label class="form-label" for="date">Date</label>
                            @else
                                <div class="form-outline datepicker">
                                    <input type="date" required name="date" value="{{ $bill->invoice_date }}"
                                        class="form-control" id="date" />
                                    <label class="form-label" for="date">Date</label>
                                </div>
                            @endif
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <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 == $bill->currency_id) selected @endif>
                                            {{ $row->title_en }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </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="{{ $bill->ex_rate }}" id="ex_rate" class="form-control" />
                                <label class="form-label" for="ex_rate">Exchange Rate</label>
                            </div>
                        </div>

                        @php
                            $total_for_input = ($bill_items->sum('total') == 0) ? ($bill->grand_total ?? 0) : $bill_items->sum('total');
                        @endphp

                        <div class="col-md-3">
                            <div class="form-outline">
                                {{-- best practice: keep readonly so total matches items --}}
                                <input type="text" value="{{ $total_for_input }}" id="grand_total" name="grand_total"
                                    class="form-control input-custom" readonly />
                                <label class="form-label">Total</label>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-outline">
                                {{-- your old page had readonly discount; keeping it --}}
                                <input type="text" id="bill_discount"
                                    value="{{ $bill->discount ?? 0 }}" readonly name="bill_discount"
                                    class="form-control input-custom" />
                                <label class="form-label">Discount</label>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-outline">
                                <input type="text" id="received" value="{{ $bill->received ?? 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-3">
                            <div class="form-outline">
                                <input type="text" value="{{ $balance_calc }}" readonly id="balance_value"
                                    name="balance_value" class="form-control input-custom" />
                                <label class="form-label">Balance</label>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <select required name="cash_id" id="cash_id" class="form-control input-custom">
                                <option value="">Define Cash Target</option>
                                <option value="1" @if ($bill->c_target == 1) selected @endif>Target Cash Yes</option>
                                <option value="2" @if ($bill->c_target == 2 || $bill->c_target == null) selected @endif>Target Cash No</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <div class="form-outline">
                                <input type="text" name="received_by" value="{{ $bill->received_by }}"
                                    id="received_by" class="form-control input-custom" />
                                <label class="form-label">Received By</label>
                            </div>
                        </div>

                        <div class="col-12 d-flex justify-content-end mt-2">
                            <button type="submit" class="btn btn-primary btn-rounded px-4">
                                <i class="fas fa-check-circle me-1"></i> Update & Checkout
                            </button>
                        </div>

                    </div>
                </form>

            </div>
        </div>

    </div>


    {{-- ===========================
        ✅ PRINT AREA: A4 INVOICE
    ============================ --}}
    <div id="printA4" class="print-area">
        <style>
            @page { size: A4; margin: 10mm; }
            body{ font-family: Arial, sans-serif; color:#111; }
            .p-wrap{ width:100%; }
            .p-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
            .p-title{ font-size:18px; font-weight:700; }
            .p-muted{ color:#555; font-size:12px; }
            .p-box{ border:1px solid #ddd; padding:10px; border-radius:8px; }
            table{ width:100%; border-collapse:collapse; margin-top:10px; }
            th,td{ border:1px solid #ddd; padding:6px; font-size:12px; }
            th{ background:#f3f4f6; text-align:left; }
            .text-end{ text-align:right; }
            .foot{ margin-top:12px; font-size:11px; color:#555; display:flex; justify-content:space-between; }
        </style>

        <div class="p-wrap">
            <div class="p-header">
                <div>
                    <div class="p-title">Retail Invoice</div>
                    <div class="p-muted">Invoice #: <b>{{ $bill->invoice_number }}</b> • Date: <b>{{ $bill->invoice_date }}</b></div>
                    <div class="p-muted">Customer: <b>{{ $bill->customer_name }}</b> • Phone: <b>{{ $bill->customer_phone }}</b></div>
                </div>
                <div class="p-box">
                    <div class="p-muted">Total: <b>{{ $cur }} {{ number_format($bill->final_amount ?? 0, 2) }}</b></div>
                    <div class="p-muted">Received: <b>{{ $cur }} {{ number_format($bill->received ?? 0, 2) }}</b></div>
                    <div class="p-muted">Balance: <b>{{ $cur }} {{ number_format($balance_calc, 2) }}</b></div>
                </div>
            </div>

            <table>
                <thead>
                <tr>
                    <th style="width:40px;">#</th>
                    <th>Item</th>
                    <th style="width:70px;">Qty</th>
                    <th style="width:90px;" class="text-end">Price</th>
                    <th style="width:100px;" class="text-end">Total</th>
                </tr>
                </thead>
                <tbody>
                @if($bill->type_id == 1)
                    @foreach($bill_items as $row)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                {{ $row->category->title_en ?? '' }}
                                {{ $row->sub_category->title_en ? ' / '.$row->sub_category->title_en : '' }}
                                {{ $row->weight->title_en ? ' / '.$row->weight->title_en : '' }}
                                {{ $row->unit->title_en ? ' / '.$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>
                        </tr>
                    @endforeach
                @else
                    @foreach($bill_items as $row)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $row->name }}</td>
                            <td>{{ $row->qty }}</td>
                            <td class="text-end">{{ number_format($row->price ?? 0, 2) }}</td>
                            <td class="text-end">{{ number_format($row->total ?? 0, 2) }}</td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>

            <div class="foot">
                <div>Received By: <b>{{ $bill->received_by ?? '-' }}</b></div>
                <div>Powered by OomClick • www.oomclick.com</div>
            </div>
        </div>
    </div>


    {{-- ===================================
        ✅ PRINT AREA: SMALL THERMAL 80mm
    ==================================== --}}
    <div id="print80" class="print-area">
        <style>
            @page { size: 80mm auto; margin: 4mm; }
            body{ font-family: Arial, sans-serif; color:#111; }
            .r{ width: 72mm; }
            .c{ text-align:center; }
            .b{ font-weight:700; }
            .sm{ font-size:11px; }
            .xs{ font-size:10px; color:#333; }
            .line{ border-top:1px dashed #333; margin:6px 0; }
            table{ width:100%; border-collapse:collapse; }
            td{ font-size:11px; padding:2px 0; vertical-align:top; }
            .right{ text-align:right; }
        </style>

        <div class="r">
            <div class="c b">Retail Invoice</div>
            <div class="c xs">Invoice #: {{ $bill->invoice_number }}</div>
            <div class="c xs">Date: {{ $bill->invoice_date }}</div>
            <div class="line"></div>

            <div class="sm">
                <div><span class="b">Customer:</span> {{ $bill->customer_name }}</div>
                <div><span class="b">Phone:</span> {{ $bill->customer_phone }}</div>
            </div>

            <div class="line"></div>

            <table>
                @if($bill->type_id == 1)
                    @foreach($bill_items as $row)
                        <tr>
                            <td colspan="2" class="b">
                                {{ $row->category->title_en ?? '' }}
                                {{ $row->sub_category->title_en ? ' / '.$row->sub_category->title_en : '' }}
                            </td>
                        </tr>
                        <tr>
                            <td class="xs">{{ $row->qty }} x {{ number_format($row->sale_price ?? 0, 2) }}</td>
                            <td class="right xs">{{ number_format($row->total ?? 0, 2) }}</td>
                        </tr>
                    @endforeach
                @else
                    @foreach($bill_items as $row)
                        <tr>
                            <td colspan="2" class="b">{{ $row->name }}</td>
                        </tr>
                        <tr>
                            <td class="xs">{{ $row->qty }} x {{ number_format($row->price ?? 0, 2) }}</td>
                            <td class="right xs">{{ number_format($row->total ?? 0, 2) }}</td>
                        </tr>
                    @endforeach
                @endif
            </table>

            <div class="line"></div>

            <table>
                <tr><td class="b">Grand</td><td class="right b">{{ $cur }} {{ number_format($bill->grand_total ?? 0, 2) }}</td></tr>
                <tr><td class="b">Discount</td><td class="right b">{{ $cur }} {{ number_format($bill->discount ?? 0, 2) }}</td></tr>
                <tr><td class="b">Total</td><td class="right b">{{ $cur }} {{ number_format($bill->final_amount ?? 0, 2) }}</td></tr>
                <tr><td class="b">Received</td><td class="right b">{{ $cur }} {{ number_format($bill->received ?? 0, 2) }}</td></tr>
                <tr><td class="b">Balance</td><td class="right b">{{ $cur }} {{ number_format($balance_calc, 2) }}</td></tr>
            </table>

            <div class="line"></div>
            <div class="xs">Received By: <b>{{ $bill->received_by ?? '-' }}</b></div>
            <div class="c xs" style="margin-top:6px;">Powered by OomClick</div>
        </div>
    </div>

</main>
@endsection


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

    // show/hide exchange rate
    @if ($bill->currency_id != 1)
        $("#ex_rate_text_box").show();
    @else
        $("#ex_rate_text_box").hide();
    @endif

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

    // ✅ missing function in your old page
    function final_calculation() {
        let total = parseFloat($("#grand_total").val()) || 0;
        let discount = parseFloat($("#bill_discount").val()) || 0;
        let received = parseFloat($("#received").val()) || 0;

        let bal = total - (discount + received);
        if (bal < 0) bal = 0;

        $("#balance_value").val(bal.toFixed(2));
    }
    final_calculation();

    // ✅ JS print (A4 or 80mm)
    function printInvoice(divId){
        const html = document.getElementById(divId).innerHTML;
        const w = window.open('', '_blank', 'width=900,height=650');
        w.document.open();
        w.document.write(`
            <html>
            <head><title>Print</title><meta charset="utf-8" /></head>
            <body>${html}</body>
            </html>
        `);
        w.document.close();
        w.focus();
        w.onload = function(){
            w.print();
            w.close();
        }
    }
</script>

{{-- keep your existing scripts for stock loading --}}
@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
@endsection