@extends('master.app')
@section('title', 'customer')

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

            {{-- Page Header / Actions --}}
            <div class="card shadow-sm border-0 rounded-4 mb-3">
                <div class="card-body p-4">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <div>
                            <h4 class="mb-1 fw-bold" style="color:#1f2d3d;">Edit Invoice</h4>
                            <div class="text-muted small">
                                Invoice # <span class="fw-semibold">{{ $bill->invoice_number }}</span>
                                <span class="mx-2">•</span>
                                Date: <span class="fw-semibold">{{ $bill->invoice_date }}</span>
                                <span class="mx-2">•</span>
                                Customer: <span class="fw-semibold">{{ $bill->customer->name ?? '' }}</span>
                            </div>

                            {{-- Optional: show previous balance if you pass it from controller --}}
                            @isset($previous_balance)
                                <div class="mt-2">
                                    <span class="badge rounded-pill bg-warning text-dark px-3 py-2">
                                        Previous Balance: {{ number_format($previous_balance, 2) }}
                                    </span>
                                </div>
                            @endisset
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ url()->previous() }}" class="btn btn-outline-secondary btn-sm rounded-pill">
                                <i class="fas fa-arrow-left me-1"></i> Back
                            </a>

                            <button type="button" class="btn btn-outline-primary btn-sm rounded-pill"
                                onclick="openInvoicePrint()">
                                <i class="fas fa-print me-1"></i> Print
                            </button>

                            <button type="button" class="btn btn-success btn-sm rounded-pill"
                                onclick="shareInvoiceWhatsApp()">
                                <i class="fab fa-whatsapp me-1"></i> Share WhatsApp
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Main Content --}}
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-body p-4">

                    {{-- Bill Type Header + Items --}}
                    @if ($bill->type_id == 1)
                        @include('sale.bills.next-header-from')
                        <div class="mt-3"></div>
                        @include('sale.bills.next-item-table')
                    @endif

                    @if ($bill->type_id == 2)
                        @include('sale.bills.row-bills.next-header-form')
                        <div class="mt-3"></div>
                        @include('sale.bills.row-bills.next-item-table')
                    @endif

                    {{-- Invoice Statement --}}
                    <div class="mt-4">
                        <div class="card border-0 shadow-sm rounded-4">
                            <div class="card-header bg-white border-0 rounded-top-4 pt-4 pb-3">
                                <div class="text-center">
                                    <h4 class="mb-1 fw-bold" style="color:#495057;">Invoice Statement</h4>
                                    <div class="text-muted small">Update the invoice details and checkout</div>
                                </div>
                                <div class="mt-3">
                                    @include('general.valert')
                                </div>
                            </div>

                            <div class="card-body p-4">
                                <form class="mb-0" method="post" action="{{ route('customer_bill.update', $bill->id) }}"
                                    enctype="multipart/form-data">
                                    @method('put')
                                    @csrf

                                    <div class="row g-3">

                                        {{-- Type --}}
                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label fw-semibold small text-muted mb-1">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" @if ($bill->type_id == 1) selected @endif>
                                                    Finished goods
                                                </option>

                                                @if ($btype == 2)
                                                    <option value="2" @if ($bill->type_id == 2) selected @endif>Row</option>
                                                    <option value="3" @if ($bill->type_id == 3) selected @endif>Printing</option>
                                                    <option value="4" @if ($bill->type_id == 4) selected @endif>Pressing</option>
                                                @endif
                                            </select>
                                        </div>

                                        {{-- Customer --}}
                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label fw-semibold small text-muted mb-1">Customer</label>
                                            <select id="customer_id" name="customer_id" required
                                                class="select2 form-control" style="width: 100%;">
                                                <option value="">Choose Customers</option>
                                                @foreach ($customers as $customer)
                                                    <option value="{{ $customer->id }}"
                                                        @if ($bill->customer_id == $customer->id) selected @endif>
                                                        {{ $customer->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        {{-- Invoice Number --}}
                                        <div class="col-lg-4 col-md-6">
                                            <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>

                                        {{-- Title --}}
                                        <div class="col-lg-4 col-md-6">
                                            <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>

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

                                        {{-- File --}}
                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label fw-semibold small text-muted mb-1">Attach File</label>
                                            <input type="file" class="form-control" name="invoice_file" id="invoice_file" />
                                        </div>

                                        {{-- Currency --}}
                                        <div class="col-lg-3 col-md-6">
                                            <label class="form-label fw-semibold small text-muted 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 == $bill->currency_id) selected @endif>
                                                        {{ $row->title_en }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        {{-- Exchange Rate --}}
                                        <div class="col-lg-3 col-md-6" 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>
                                    </div>

                                    {{-- Totals Summary --}}
                                    @php
                                        $items_total = $bill_items->sum('total');
                                        $total = $items_total == 0 ? $bill->grand_total : $items_total;

                                        $r_amount = $bill->received ?? 0;
                                        $d_amount = $bill->discount ?? 0;
                                        $balance_now = $total - ($r_amount + $d_amount);

                                        // Optional previous balance
                                        $prevBal = isset($previous_balance) ? (float) $previous_balance : 0;
                                        $newTotalDue = $prevBal + $balance_now;
                                    @endphp

                                    <div class="mt-4 p-3 p-md-4 rounded-4 border bg-light">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div class="fw-bold" style="color:#1f2d3d;">
                                                <i class="fas fa-receipt me-2"></i>Totals Summary
                                            </div>
                                            <div class="small text-muted">
                                                Current Balance: <span class="fw-bold" id="balance_label">{{ number_format($balance_now, 2) }}</span>
                                            </div>
                                        </div>

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

                                            <div class="col-lg-3 col-md-6">
                                                <div class="form-outline">
                                                    <input type="text" id="bill_discount" onkeyup="final_calculation()"
                                                        value="{{ $bill->discount ?? 0 }}" name="bill_discount"
                                                        class="form-control input-custom" />
                                                    <label class="form-label">Discount</label>
                                                </div>
                                            </div>

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

                                        @isset($previous_balance)
                                            <div class="mt-3 small text-muted">
                                                Previous Balance:
                                                <span class="fw-bold" id="prev_balance_label">{{ number_format($previous_balance, 2) }}</span>
                                                <span class="mx-2">•</span>
                                                New Total Due:
                                                <span class="fw-bold" id="new_total_due_label">{{ number_format($newTotalDue, 2) }}</span>
                                            </div>
                                        @endisset
                                    </div>

                                    {{-- Payment Info --}}
                                    <div class="mt-4">
                                        <div class="row g-3">
                                            <div class="col-lg-4 col-md-6">
                                                <label class="form-label fw-semibold small text-muted mb-1">Transaction</label>
                                                <select name="transaction_id" id="transaction_id"
                                                    class="form-control input-custom">
                                                    <option value="">Define Transaction</option>
                                                    <option value="1" @if ($bill->transaction_id == 1) selected @endif>Cash</option>
                                                    <option value="2" @if ($bill->transaction_id == 2) selected @endif>Bank</option>
                                                    <option value="3" @if ($bill->transaction_id == 3) selected @endif>Sharafi</option>
                                                    <option value="4" @if ($bill->transaction_id == 4) selected @endif>Other</option>
                                                </select>
                                            </div>

                                            <div class="col-lg-4 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-lg-4 col-md-6">
                                                <label class="form-label fw-semibold small text-muted mb-1">Payment Type</label>
                                                <select name="cash_id" id="cash_id" class="form-control input-custom">
                                                    <option value="1" @if (($bill->cash_id ?? null) == 1) selected @endif>Target Cash YES</option>
                                                    <option value="2" @if (($bill->cash_id ?? null) == 2) selected @endif>Target Cash NO</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Submit --}}
                                    <div class="d-flex justify-content-end mt-4">
                                        <button type="submit" class="btn btn-primary btn-rounded px-4 rounded-pill"
                                            style="background-color: #0062CC;">
                                            <i class="fas fa-check-circle me-1"></i> Checkout
                                        </button>
                                    </div>

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

                    {{-- Hidden Print Template --}}
                    <div id="printArea" style="display:none;">
                        <div style="padding:18px;border:2px solid #111;border-radius:12px;">
                            <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;">
                                <div style="display:flex;align-items:center;gap:12px;">
                                    {{-- Change logo path to your real logo --}}
                                    <img src="{{ asset('images/pacha-logo.png') }}" alt="Pacha"
                                        style="height:55px;object-fit:contain;">
                                    <div>
                                        <div style="font-weight:800;font-size:18px;">INVOICE</div>
                                        <div style="font-size:12px;color:#333;">
                                            Invoice #: {{ $bill->invoice_number }} <br>
                                            Date: {{ $bill->invoice_date }} <br>
                                            Customer: {{ $bill->customer->name ?? '' }}
                                        </div>
                                    </div>
                                </div>

                                <div style="text-align:right;">
                                    <svg id="barcode"></svg>
                                    <div style="font-size:11px;margin-top:4px;color:#333;">
                                        Barcode: {{ $bill->invoice_number }}
                                    </div>
                                </div>
                            </div>

                            <hr style="border:0;border-top:2px dashed #444;margin:12px 0;">

                            <div style="font-size:12px;color:#111;">
                                <div style="display:flex;justify-content:space-between;gap:10px;">
                                    <div>
                                        <strong>Title:</strong> {{ $bill->title }}
                                    </div>
                                    <div>
                                        <strong>Currency:</strong> {{ $bill->currency->title_en ?? '' }}
                                    </div>
                                </div>
                            </div>

                            <div style="margin-top:12px;">
                                <table style="width:100%;border-collapse:collapse;font-size:12px;">
                                    <thead>
                                    <tr>
                                        <th style="border:1px solid #111;padding:8px;text-align:left;">#</th>
                                        <th style="border:1px solid #111;padding:8px;text-align:left;">Item</th>
                                        <th style="border:1px solid #111;padding:8px;text-align:center;">Qty</th>
                                        <th style="border:1px solid #111;padding:8px;text-align:right;">Price</th>
                                        <th style="border:1px solid #111;padding:8px;text-align:right;">Total</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($bill_items as $i => $it)
                                        <tr>
                                            <td style="border:1px solid #111;padding:8px;">{{ $i+1 }}</td>
                                            <td style="border:1px solid #111;padding:8px;">{{ $it->title ?? $it->item_name ?? $it->name ?? 'Item' }}</td>
                                            <td style="border:1px solid #111;padding:8px;text-align:center;">{{ $it->qty ?? $it->quantity ?? 0 }}</td>
                                            <td style="border:1px solid #111;padding:8px;text-align:right;">{{ number_format($it->price ?? 0, 2) }}</td>
                                            <td style="border:1px solid #111;padding:8px;text-align:right;">{{ number_format($it->total ?? 0, 2) }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div style="margin-top:12px;display:flex;justify-content:flex-end;">
                                <div style="width:320px;font-size:12px;">
                                    <div style="display:flex;justify-content:space-between;border-bottom:1px dashed #444;padding:6px 0;">
                                        <span><strong>Total</strong></span>
                                        <span>{{ number_format($total, 2) }}</span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;border-bottom:1px dashed #444;padding:6px 0;">
                                        <span>Discount</span>
                                        <span>{{ number_format($bill->discount ?? 0, 2) }}</span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;border-bottom:1px dashed #444;padding:6px 0;">
                                        <span>Received</span>
                                        <span>{{ number_format($bill->received ?? 0, 2) }}</span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:13px;">
                                        <span><strong>Balance</strong></span>
                                        <span><strong>{{ number_format($balance_now, 2) }}</strong></span>
                                    </div>

                                    @isset($previous_balance)
                                        <div style="display:flex;justify-content:space-between;border-top:2px solid #111;padding:8px 0;margin-top:6px;">
                                            <span><strong>Prev Balance</strong></span>
                                            <span><strong>{{ number_format($previous_balance, 2) }}</strong></span>
                                        </div>
                                        <div style="display:flex;justify-content:space-between;padding:6px 0;">
                                            <span><strong>New Total Due</strong></span>
                                            <span><strong>{{ number_format($newTotalDue, 2) }}</strong></span>
                                        </div>
                                    @endisset
                                </div>
                            </div>

                            <hr style="border:0;border-top:2px solid #111;margin:14px 0;">

                            <div style="text-align:center;font-size:11px;color:#111;">
                                <strong>Powered by OomClick Software Company</strong><br>
                                Kart-e-Now, First Street • Phone: 0704172665 • WhatsApp: 0702172665 • info@oomclick.com
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </main>
@endsection

@section('pageCSS')
    <style>
        .rounded-4 { border-radius: 1rem !important; }
        .input-custom:focus { box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important; }
        .select2-container .select2-selection--single {
            height: 38px !important;
            border: 1px solid #ced4da !important;
            border-radius: .5rem !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
        }
    </style>
@endsection

@section('pageJs')
    {{-- Barcode --}}
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>

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

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

        // Safe final calculation (if not already defined in included scripts)
        if (typeof final_calculation !== "function") {
            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));
                $("#balance_label").text(balance.toFixed(2));

                // optional previous balance labels
                let prev = parseFloat($("#prev_balance_label").text().replace(/,/g,'')) || 0;
                if (document.getElementById('new_total_due_label')) {
                    let due = prev + balance;
                    $("#new_total_due_label").text(due.toFixed(2));
                }
            }
        }

        // Print with barcode + brand layout
        function openInvoicePrint() {
            // Build barcode just before printing
            try {
                JsBarcode("#barcode", "{{ $bill->invoice_number }}", {
                    format: "CODE128",
                    displayValue: false,
                    height: 42,
                    margin: 0
                });
            } catch (e) {}

            let content = document.getElementById('printArea').innerHTML;
            let win = window.open('', '_blank', 'width=900,height=700');
            win.document.write(`
                <html>
                <head>
                    <title>Invoice Print</title>
                    <style>
                        body { font-family: Arial, sans-serif; padding:18px; }
                        @media print { button { display:none; } }
                    </style>
                </head>
                <body>
                    ${content}
                    <script>
                        window.onload = function(){ window.print(); };
                    <\/script>
                </body>
                </html>
            `);
            win.document.close();
        }

        // WhatsApp share: previous balance + current invoice only
        function shareInvoiceWhatsApp() {
            // Adjust phone field according to your database:
            // try bill->customer->phone, else bill->customer_phone, else empty
            let phone = @json($bill->customer->phone ?? $bill->customer_phone ?? $bill->phone ?? '');

            if (!phone) {
                alert("Customer phone number not found!");
                return;
            }

            // keep only digits
            phone = String(phone).replace(/\D/g, '');

            let customerName = @json($bill->customer->name ?? '');
            let invoiceNo = @json($bill->invoice_number);
            let currency = @json($bill->currency->title_en ?? '');

            let prevBal = @json(isset($previous_balance) ? (float)$previous_balance : 0);
            let currentBalance = parseFloat(document.getElementById('balance_value').value) || 0;

            // Message (only previous + current invoice)
            let msg =
                `Hello ${customerName}\n` +
                `Invoice #: ${invoiceNo}\n` +
                `Previous Balance: ${prevBal}\n` +
                `Current Invoice Balance: ${currentBalance}\n` +
                (currency ? `Currency: ${currency}\n` : '');

            let url = `https://wa.me/${phone}?text=${encodeURIComponent(msg)}`;
            window.open(url, '_blank');
        }
    </script>

    @if ($bill->type_id == 1)
        @if ($bsload == 1)
            @include('sale.bills.script')
        @else
            @include('sale.bills.stock_load2.script')
        @endif
    @else
        @include('sale.bills.scriptrow')
    @endif
@endsection