@extends('admin.layouts.app')

@section('title', 'Edit order '.$order->order_number)
@section('crumbs')
    <a href="{{ route('admin.orders.index') }}">Orders</a>
    <a href="{{ route('admin.orders.show', $order) }}">{{ $order->order_number }}</a>
    <span>Edit</span>
@endsection

@section('content')
    @php
        // validation fail hole form er data, na hole order er item
        $rows = old('items', $order->items->map(fn ($i) => [
            'id' => $i->id, 'product_id' => $i->product_id, 'qty' => $i->qty,
            'price' => (float) $i->price, 'size' => $i->size, 'color' => $i->color,
        ])->all());
        // ei order e age theke je qty ache, sheta o "available" (edit e ferot ashbe)
        $inOrder = $order->items->groupBy('product_id')->map(fn ($g) => $g->sum('qty'));
        $countsStock = $order->status !== 'cancelled';
        $val = fn ($k, $default = null) => old($k, $order->{$k} ?? $default);
        $area = old('area', $order->area);
    @endphp

    <div class="page-actions">
        <p class="muted" style="margin:0">
            Placed {{ $order->created_at->format('d M Y, h:i A') }} ·
            <span class="badge badge-{{ $order->status }}">{{ $order->status_label }}</span>
        </p>
        <div style="display:flex;gap:8px;flex-wrap:wrap">
            <a href="{{ route('admin.fraud.index', ['phone' => $order->phone]) }}" class="btn btn-ghost">🛡️ Fraud check</a>
            <a href="{{ route('admin.orders.invoice', $order) }}" target="_blank" class="btn btn-ghost">🖨️ Invoice</a>
            <a href="{{ route('admin.orders.index') }}" class="btn btn-ghost">← Back</a>
        </div>
    </div>

    @if ($order->consignment_id)
        <div class="fc-alert" style="margin-bottom:16px">
            ⚠️ Ei order {{ \App\Services\Couriers\CourierManager::label($order->courier) }} e pathano hoye geche ({{ $order->tracking_code }}).
            Ekhane product, COD ba address bodlale courier er kache nije nije update hobe na, courier er panel e o bodlate hobe.
        </div>
    @endif
    @unless ($countsStock)
        <div class="fc-alert" style="margin-bottom:16px;background:#fef3c7;color:#92400e">ℹ️ Order Cancelled: stock age i ferot geche, tai ekhane product bodlale stock e kono change hobe na.</div>
    @endunless

    <form method="POST" action="{{ route('admin.orders.update', $order) }}" id="orderForm">
        @csrf @method('PUT')

        <div class="grid-2">
            <div>
                <div class="card">
                    <div class="card-head"><h2>Products</h2><button type="button" class="btn btn-primary btn-sm" id="rowAdd">＋ Add More Product</button></div>
                    <div class="card-body">
                        <div class="oe-head"><span>Product</span><span>Size</span><span>Color</span><span>Price (৳)</span><span>Qty</span><span class="r">Total</span><span></span></div>
                        <div class="order-rows" id="orderRows">
                            @foreach ($rows as $i => $row)
                                <div class="order-row oe-row">
                                    <input type="hidden" name="items[{{ $i }}][id]" value="{{ $row['id'] ?? '' }}" data-f="id">
                                    <select name="items[{{ $i }}][product_id]" required data-f="product" class="{{ $errors->has("items.$i.product_id") ? 'is-invalid' : '' }}">
                                        <option value="">— Select product —</option>
                                        @foreach ($products as $p)
                                            <option value="{{ $p->id }}" data-price="{{ (float) $p->price }}"
                                                    data-stock="{{ $p->stock + ($countsStock ? (int) ($inOrder[$p->id] ?? 0) : 0) }}"
                                                    data-sizes='@json($p->sizes ?? [])' data-colors='@json($p->colors ?? [])'
                                                    @selected(($row['product_id'] ?? null) == $p->id)>
                                                {{ $p->name }}@if ($p->sku) ({{ $p->sku }})@endif · stock {{ $p->stock }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <select name="items[{{ $i }}][size]" data-f="size" data-selected="{{ $row['size'] ?? '' }}"><option value="">—</option></select>
                                    <select name="items[{{ $i }}][color]" data-f="color" data-selected="{{ $row['color'] ?? '' }}"><option value="">—</option></select>
                                    <input type="number" name="items[{{ $i }}][price]" value="{{ $row['price'] ?? '' }}" min="0" step="1" required data-f="price" aria-label="Price">
                                    <div class="oe-qty">
                                        <button type="button" data-step="-1" aria-label="Kom">−</button>
                                        <input type="number" name="items[{{ $i }}][qty]" value="{{ $row['qty'] ?? 1 }}" min="1" required data-f="qty" aria-label="Quantity">
                                        <button type="button" data-step="1" aria-label="Beshi">+</button>
                                    </div>
                                    <span class="line-total">৳0</span>
                                    <button type="button" class="btn btn-ghost btn-sm" data-row-remove aria-label="Remove">✕</button>
                                </div>
                            @endforeach
                        </div>
                        @error('items') <div class="err" style="margin-top:8px">{{ $message }}</div> @enderror
                        @foreach ($errors->get('items.*') as $msgs) <div class="err">{{ $msgs[0] }}</div> @endforeach
                    </div>
                </div>

                <div class="card">
                    <div class="card-head"><h2>Customer</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'name', 'label' => 'Customer name', 'value' => $order->customer_name, 'required' => true])
                        @include('admin.partials.field', ['name' => 'phone', 'label' => 'Phone', 'value' => $order->phone, 'required' => true, 'placeholder' => '01XXXXXXXXX'])
                        @include('admin.partials.field', ['name' => 'phone_alt', 'label' => 'Alternative phone', 'value' => $order->phone_alt, 'placeholder' => '01XXXXXXXXX'])
                        <div class="field">
                            <label for="f_area">Delivery area <span class="req">*</span></label>
                            <select id="f_area" name="area" required>
                                <option value="inside" @selected($area === 'inside')>Inside Dhaka</option>
                                <option value="outside" @selected($area === 'outside')>Outside Dhaka</option>
                            </select>
                        </div>
                        <div class="field">
                            <label for="f_city">City (জেলা)</label>
                            @include('partials.bd-location', ['cityId' => 'f_city', 'zoneId' => 'f_zone', 'city' => $val('city'), 'part' => 'city', 'required' => false, 'class' => $errors->has('city') ? 'is-invalid' : ''])
                            @error('city') <div class="err">{{ $message }}</div> @enderror
                        </div>
                        <div class="field">
                            <label for="f_zone">Zone (থানা)</label>
                            @include('partials.bd-location', ['cityId' => 'f_city', 'zoneId' => 'f_zone', 'zone' => $val('zone'), 'part' => 'zone', 'required' => false, 'class' => $errors->has('zone') ? 'is-invalid' : ''])
                            @error('zone') <div class="err">{{ $message }}</div> @enderror
                        </div>
                        @include('admin.partials.field', ['name' => 'address', 'label' => 'Full address', 'type' => 'textarea', 'value' => $order->address, 'required' => true, 'full' => true, 'rows' => 3])
                        @include('admin.partials.field', ['name' => 'note', 'label' => 'Note', 'type' => 'textarea', 'value' => $order->note, 'full' => true, 'rows' => 2])
                    </div>
                </div>
            </div>

            <div>
                <div class="card">
                    <div class="card-head"><h2>Payment</h2></div>
                    <div class="card-body form-grid">
                        <div class="field span-2">
                            <label for="f_payment_method">Payment method</label>
                            <select id="f_payment_method" name="payment_method">
                                @foreach (\App\Models\Order::PAYMENT_METHODS as $k => $v)
                                    <option value="{{ $k }}" @selected($val('payment_method') === $k)>{{ $v }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="field span-2">
                            <label for="f_payment_status">Payment status</label>
                            <select id="f_payment_status" name="payment_status">
                                @foreach (['unpaid' => 'Unpaid', 'paid' => 'Paid', 'refunded' => 'Refunded'] as $k => $v)
                                    <option value="{{ $k }}" @selected($val('payment_status') === $k)>{{ $v }}</option>
                                @endforeach
                            </select>
                        </div>
                        @include('admin.partials.field', ['name' => 'shipping', 'label' => 'Delivery charge (৳)', 'type' => 'number', 'value' => (float) $order->shipping, 'required' => true, 'attrs' => 'min="0" step="1"'])
                        @include('admin.partials.field', ['name' => 'discount', 'label' => 'Discount (৳)', 'type' => 'number', 'value' => (float) $order->discount, 'attrs' => 'min="0" step="1"'])
                    </div>
                    <div class="card-body"><div class="totals" style="max-width:none">
                        <div><span class="muted">Subtotal</span><span id="sumSub">৳0</span></div>
                        <div><span class="muted">Delivery</span><span id="sumShip">৳0</span></div>
                        <div><span class="muted">Discount</span><span id="sumDisc">−৳0</span></div>
                        <div class="grand"><span>Total</span><span id="sumTotal">৳0</span></div>
                        <div><span class="muted small">Ager total</span><span class="muted small">৳{{ number_format($order->total) }}</span></div>
                    </div></div>
                    <div class="form-actions">
                        <a href="{{ route('admin.orders.show', $order) }}" class="btn btn-ghost">Cancel</a>
                        <button type="submit" class="btn btn-primary">💾 Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
    // product row: size/color list product theke, dam auto (notun product), live total (asol hisab server e)
    (function () {
        var rows = document.getElementById('orderRows');
        var ship = document.getElementById('f_shipping'), disc = document.getElementById('f_discount');
        var next = rows.children.length;
        var tk = function (n) { return '৳' + Math.round(n).toLocaleString('en-US'); };
        var f = function (row, name) { return row.querySelector('[data-f="' + name + '"]'); };

        function fillOptions(sel, list, selected) {
            var html = '<option value="">—</option>';
            (list || []).forEach(function (v) {
                var o = document.createElement('option'); o.value = v; o.textContent = v;
                if (v === selected) o.setAttribute('selected', '');   // attribute (property outerHTML e jay na)
                html += o.outerHTML;
            });
            // ager item er size/color ekhon product e na thakleo harabe na
            if (selected && (list || []).indexOf(selected) === -1) {
                var o = document.createElement('option'); o.value = selected; o.textContent = selected; o.setAttribute('selected', ''); html += o.outerHTML;
            }
            sel.innerHTML = html;
            sel.disabled = !(list || []).length && !selected;
        }
        function syncRow(row, newProduct) {
            var opt = f(row, 'product').selectedOptions[0];
            var data = opt && opt.value ? opt.dataset : null;
            fillOptions(f(row, 'size'), data ? JSON.parse(data.sizes) : [], newProduct ? '' : f(row, 'size').dataset.selected);
            fillOptions(f(row, 'color'), data ? JSON.parse(data.colors) : [], newProduct ? '' : f(row, 'color').dataset.selected);
            if (newProduct && data) f(row, 'price').value = data.price;   // notun product: tar dam
            if (data) f(row, 'qty').max = data.stock;
        }
        function recalc() {
            var sub = 0;
            rows.querySelectorAll('.order-row').forEach(function (r) {
                var line = (+f(r, 'price').value || 0) * (+f(r, 'qty').value || 0);
                r.querySelector('.line-total').textContent = tk(line);
                sub += line;
            });
            var s = +ship.value || 0, d = +disc.value || 0;
            document.getElementById('sumSub').textContent = tk(sub);
            document.getElementById('sumShip').textContent = tk(s);
            document.getElementById('sumDisc').textContent = '−' + tk(d);
            document.getElementById('sumTotal').textContent = tk(Math.max(0, sub + s - d));
        }

        rows.querySelectorAll('.order-row').forEach(function (r) { syncRow(r, false); });

        document.getElementById('rowAdd').addEventListener('click', function () {
            var row = rows.querySelector('.order-row').cloneNode(true);
            row.querySelectorAll('[name]').forEach(function (el) { el.name = el.name.replace(/items\[\d+\]/, 'items[' + next + ']'); });
            f(row, 'id').value = '';
            f(row, 'product').value = '';
            f(row, 'product').classList.remove('is-invalid');
            f(row, 'size').dataset.selected = ''; f(row, 'color').dataset.selected = '';
            f(row, 'price').value = ''; f(row, 'qty').value = 1;
            next++;
            rows.appendChild(row);
            syncRow(row, true);
            recalc();
        });
        // qty − / + (1 er kom na, stock er beshi na); haate likhleo hoy
        rows.addEventListener('click', function (e) {
            var step = e.target.closest('[data-step]');
            if (!step) return;
            var q = f(step.closest('.order-row'), 'qty'), max = +q.max || Infinity;
            q.value = Math.min(max, Math.max(1, (+q.value || 1) + (+step.dataset.step)));
            recalc();
        });
        rows.addEventListener('click', function (e) {
            if (!e.target.closest('[data-row-remove]')) return;
            if (rows.children.length > 1) e.target.closest('.order-row').remove();
            else alert('Order e kom kore ekta product rakhte hobe. Pura order bad dite Status → Cancelled koro.');
            recalc();
        });
        rows.addEventListener('change', function (e) {
            var row = e.target.closest('.order-row');
            if (e.target.dataset.f === 'product') syncRow(row, true);
            recalc();
        });
        rows.addEventListener('input', recalc);
        ship.addEventListener('input', recalc);
        disc.addEventListener('input', recalc);
        recalc();
    })();
</script>
@endpush