@extends('layouts.admin')

@section('title', 'Order ' . $order->order_number . ' � Aromaniacs ERP')
@section('overline', 'Sales')
@section('heading', 'Order ' . $order->order_number)

@section('content')
    @php
        $statusVal = $order->status?->value;
        $isEditable = $order->isEditable();
        $canSendInvoice = in_array($statusVal, ['confirmed', 'shipped', 'delivered'], true);
        $invoiceEmail = old('email', $order->customer_email ?: $order->customer?->email);
    @endphp

    <section class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <div class="card lg:col-span-2">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <p class="label" style="color: var(--color-ink-40);">Customer</p>
                    <h2 class="text-xl mt-1" style="font-family: var(--font-serif);">{{ $order->customer_name }}</h2>
                    <p class="text-sm mt-1" style="color: var(--color-ink-70);">
                        {{ $order->customer_phone ?? '?' }}
                        @if ($order->customer_email)
                            <span> · {{ $order->customer_email }}</span>
                        @endif
                        @if ($order->customer_address)
                            <br><span style="color: var(--color-ink-50);">{{ $order->customer_address }}</span>
                        @endif
                    </p>
                </div>
                @if ($isEditable)
                    <a href="{{ route('admin.orders.edit', $order) }}" class="btn btn-ghost">Edit Header</a>
                @endif
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-2 text-sm">
                <div>
                    <p class="label" style="color: var(--color-ink-40);">Placed</p>
                    <p>{{ optional($order->placed_at)->format('d M Y') }}</p>
                </div>
                <div>
                    <p class="label" style="color: var(--color-ink-40);">Source</p>
                    <p>{{ $order->source?->label() }}</p>
                </div>
                <div>
                    <p class="label" style="color: var(--color-ink-40);">Status</p>
                    <p>
                        @if ($statusVal === 'cancelled')
                            <span class="badge" style="background: rgba(180,35,24,0.1); color: #b42318; border-color: rgba(180,35,24,0.35);">Cancelled</span>
                        @elseif ($statusVal === 'pending')
                            <span class="badge badge-muted">Pending</span>
                        @else
                            <span class="badge">{{ $order->status->label() }}</span>
                        @endif
                    </p>
                </div>
                <div>
                    <p class="label" style="color: var(--color-ink-40);">Created by</p>
                    <p>{{ $order->createdBy?->name ?? '?' }}</p>
                </div>
            </div>

            <div class="mt-4 pt-4 border-t flex flex-wrap gap-x-8 gap-y-3 text-sm" style="border-color: var(--color-ink-12);">
                <div>
                    <p class="label" style="color: var(--color-ink-40);">Customer payment method</p>
                    <p class="font-medium">{{ $order->payment_method?->label() ?? '—' }}</p>
                </div>
                @if ($order->payment_method === \App\Enums\PaymentMethod::Bkash)
                    <div class="min-w-0 flex-1">
                        <p class="label" style="color: var(--color-ink-40);">bKash wallet (customer)</p>
                        <p class="font-mono text-sm break-all" style="color: var(--color-ink);">{{ filled($order->bkash_sender_number) ? $order->bkash_sender_number : '—' }}</p>
                    </div>
                    <div class="min-w-0 flex-1">
                        <p class="label" style="color: var(--color-ink-40);">bKash TrxID (customer)</p>
                        <p class="font-mono text-sm break-all" style="color: var(--color-ink);">{{ filled($order->bkash_transaction_id) ? $order->bkash_transaction_id : '—' }}</p>
                    </div>
                @endif
            </div>
        </div>

        <div class="card-light">
            <p class="label" style="color: var(--color-ink-70);">Totals</p>
            <div class="mt-3 space-y-2 text-sm">
                <div class="flex justify-between"><span>Subtotal</span><span>{{ number_format((float) $order->subtotal, 2) }}</span></div>
                <div class="flex justify-between"><span>Packaging / Labeling</span><span>{{ number_format((float) $order->packaging_cost, 2) }}</span></div>
                <div class="flex justify-between"><span>Delivery</span><span>{{ number_format((float) $order->delivery_fee, 2) }}</span></div>
                <div class="flex justify-between"><span>Discount</span><span>-{{ number_format((float) $order->discount, 2) }}</span></div>
                @if (filled($order->coupon_code))
                    <div class="flex justify-between" style="color: var(--color-ink-70);"><span>Coupon code</span><span class="font-mono">{{ $order->coupon_code }}</span></div>
                @endif
                <div class="flex justify-between text-base font-semibold pt-2 border-t" style="border-color: var(--color-ink-12);">
                    <span>Total</span><span>{{ number_format((float) $order->total, 2) }}</span>
                </div>
                <div class="flex justify-between" style="color: var(--color-ink-70);">
                    <span>Paid</span>
                    <span>{{ number_format((float) $order->paid_amount, 2) }}</span>
                </div>
                <div class="flex justify-between" style="color: var(--color-ink-70);">
                    <span>Outstanding</span>
                    <span>{{ number_format(max(0, (float) $order->total - (float) $order->paid_amount), 2) }}</span>
                </div>
            </div>
        </div>
    </section>

    {{-- Status transitions --}}
    <section class="card mb-6">
        <p class="label mb-3" style="color: var(--color-ink-40);">Order actions</p>
        <div class="flex flex-wrap gap-2">
            @if ($statusVal === 'pending')
                <form method="POST" action="{{ route('admin.orders.confirm', $order) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-primary" onclick="return confirm('Confirm this order? Stock will be deducted.');">Confirm & Deduct Stock</button>
                </form>
                <form method="POST" action="{{ route('admin.orders.cancel', $order) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-danger" onclick="return confirm('Cancel this order?');">Cancel Order</button>
                </form>
            @elseif ($statusVal === 'confirmed')
                <form method="POST" action="{{ route('admin.orders.ship', $order) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-primary">Mark Shipped</button>
                </form>
                <form method="POST" action="{{ route('admin.orders.deliver', $order) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-ghost">Mark Delivered</button>
                </form>
                <form method="POST" action="{{ route('admin.orders.cancel', $order) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-danger" onclick="return confirm('Cancel order? Stock will be returned.');">Cancel & Return Stock</button>
                </form>
            @elseif ($statusVal === 'shipped')
                <form method="POST" action="{{ route('admin.orders.deliver', $order) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-primary">Mark Delivered</button>
                </form>
                <form method="POST" action="{{ route('admin.orders.cancel', $order) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-danger" onclick="return confirm('Cancel order? Stock will be returned.');">Cancel & Return Stock</button>
                </form>
            @elseif ($statusVal === 'delivered')
                <span class="text-sm" style="color: var(--color-ink-70);">Order delivered.</span>
            @elseif ($statusVal === 'cancelled')
                <span class="text-sm" style="color: var(--color-ink-70);">Order cancelled. Stock has been returned.</span>
            @endif

            @if ($canSendInvoice)
                <button type="button" class="btn btn-ghost" id="send-invoice-open">
                    <i class="fi fi-rr-envelope" aria-hidden="true"></i>
                    Send invoice email
                </button>
            @endif
        </div>
    </section>

    @if ($canSendInvoice)
        <div
            id="send-invoice-modal"
            class="admin-modal"
            hidden
            aria-hidden="true"
            @if ($errors->has('email') || $errors->has('order')) data-open-on-load="true" @endif
        >
            <div class="admin-modal__backdrop" data-invoice-modal-close></div>
            <div class="admin-modal__panel" role="dialog" aria-modal="true" aria-labelledby="send-invoice-title">
                <button type="button" class="admin-modal__close" data-invoice-modal-close aria-label="Close">
                    <i class="fi fi-rr-cross-small" aria-hidden="true"></i>
                </button>

                <div class="admin-modal__icon" aria-hidden="true">
                    <i class="fi fi-rr-envelope"></i>
                </div>

                <p class="label admin-modal__eyebrow">Order confirmation</p>
                <h2 id="send-invoice-title" class="admin-modal__title">Send invoice to customer</h2>
                <p class="admin-modal__lead">
                    Email the order summary with line items and totals — the same confirmation customers receive on checkout.
                </p>

                <div class="admin-modal__summary">
                    <div>
                        <span class="admin-modal__summary-label">Order</span>
                        <span class="admin-modal__summary-value">{{ $order->order_number }}</span>
                    </div>
                    <div>
                        <span class="admin-modal__summary-label">Customer</span>
                        <span class="admin-modal__summary-value">{{ $order->customer_name }}</span>
                    </div>
                    <div>
                        <span class="admin-modal__summary-label">Total</span>
                        <span class="admin-modal__summary-value">৳ {{ number_format((float) $order->total, 2) }}</span>
                    </div>
                </div>

                <form id="send-invoice-form" method="POST" action="{{ route('admin.orders.send-invoice', $order) }}">
                    @csrf
                    <label for="send-invoice-email" class="label admin-modal__field-label">Recipient email</label>
                    <input
                        type="email"
                        id="send-invoice-email"
                        name="email"
                        class="input"
                        value="{{ $invoiceEmail }}"
                        required
                        maxlength="255"
                        autocomplete="email"
                    >
                    <p id="send-invoice-error" class="admin-modal__error" hidden></p>
                    @error('email')
                        <p class="admin-modal__error">{{ $message }}</p>
                    @enderror
                    @if ($errors->has('order'))
                        <p class="admin-modal__error">{{ $errors->first('order') }}</p>
                    @endif
                    <div class="admin-modal__actions">
                        <button type="submit" class="btn btn-primary" data-invoice-submit>
                            <i class="fi fi-rr-paper-plane" aria-hidden="true"></i>
                            Send email
                        </button>
                        <button type="button" class="btn btn-ghost" data-invoice-modal-close>Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    @endif

    {{-- Items --}}
    <section class="card mb-6">
        <div class="flex items-center justify-between mb-4">
            <p class="label" style="color: var(--color-ink-40);">Items</p>
            @if (! $isEditable)
                <span class="text-xs" style="color: var(--color-ink-40);">Items locked (order is {{ $order->status->label() }}).</span>
            @endif
        </div>

        @if ($order->items->isEmpty())
            <div class="rounded-md border border-dashed px-6 py-8 text-center" style="border-color: var(--color-ink-12);">
                <p>No items yet. Add a decant or full bottle below.</p>
            </div>
        @else
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Kind</th>
                        <th>Qty</th>
                        <th>Volume (ml)</th>
                        <th>Unit price</th>
                        <th style="text-align: right;">Line total</th>
                        @if ($isEditable)
                            <th></th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach ($order->items as $item)
                        <tr>
                            <td>
                                <div class="flex items-center gap-3">
                                    @if (! empty($item->fragrance?->image_url))
                                        <img src="{{ $item->fragrance->image_url }}" alt="" class="h-10 w-10 rounded-md object-cover border" style="border-color: var(--color-ink-12);" loading="lazy">
                                    @else
                                        <div class="h-10 w-10 rounded-md flex items-center justify-center text-xs" style="background: var(--color-ink-06); color: var(--color-ink-40);">N/A</div>
                                    @endif
                                    <div>
                                        <div class="font-semibold">{{ $item->label_snapshot }}</div>
                                        @if ($item->notes)
                                            <div class="text-xs" style="color: var(--color-ink-40);">{{ $item->notes }}</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if ($item->kind?->value === 'bottle')
                                    <span class="badge" style="background: rgba(187,134,252,0.1); color: var(--color-lilac); border-color: rgba(187,134,252,0.35);">Full Bottle</span>
                                @else
                                    <span class="badge">Decant</span>
                                @endif
                            </td>
                            <td>{{ $item->quantity }}</td>
                            <td>{{ number_format((float) $item->total_volume_ml, 2) }} ml</td>
                            <td>{{ number_format((float) $item->unit_price, 2) }}</td>
                            <td style="text-align: right;" class="font-semibold">{{ number_format((float) $item->line_total, 2) }}</td>
                            @if ($isEditable)
                                <td style="text-align: right;">
                                    <form method="POST" action="{{ route('admin.orders.items.destroy', [$order, $item]) }}" onsubmit="return confirm('Remove this item?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger">Remove</button>
                                    </form>
                                </td>
                            @endif
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </section>

    {{-- Add item form --}}
    @if ($isEditable)
        <section class="card mb-6">
            <p class="label mb-4" style="color: var(--color-ink-40);">Add item</p>

            @if ($errors->has('item'))
                <div class="mb-4 rounded-md border px-4 py-3 text-sm" style="border-color: rgba(180,35,24,0.35); color: #b42318; background: rgba(180,35,24,0.08);">
                    {{ $errors->first('item') }}
                </div>
            @endif

            <div class="flex gap-2 mb-4">
                <button type="button" class="btn btn-ghost" data-tab-trigger="decant" onclick="switchOrderItemTab('decant')">Add Decant</button>
                <button type="button" class="btn btn-ghost" data-tab-trigger="bottle" onclick="switchOrderItemTab('bottle')">Add Full Bottle</button>
            </div>

            <form method="POST" action="{{ route('admin.orders.items.store', $order) }}" id="form-decant" class="space-y-4" data-tab-pane="decant">
                @csrf
                <input type="hidden" name="kind" value="decant">

                <div class="order-decant-grid">
                    <div class="min-w-0">
                        @include('admin.partials.searchable-combobox', [
                            'id' => 'fragrance_id',
                            'label' => 'Fragrance',
                            'placeholder' => 'Select fragrance...',
                            'searchPlaceholder' => 'Search brand or fragrance…',
                            'searchAriaLabel' => 'Search fragrances',
                            'emptyResultsText' => 'No fragrances match your search.',
                            'required' => true,
                            'selected' => old('fragrance_id'),
                            'emptyOption' => [
                                'value' => '',
                                'label' => 'Select fragrance...',
                                'search' => 'select fragrance',
                            ],
                            'options' => $fragrances->map(fn ($fragrance) => [
                                'value' => $fragrance->id,
                                'label' => trim(($fragrance->brand?->name ? $fragrance->brand->name.' - ' : '').$fragrance->name),
                                'search' => strtolower(trim(($fragrance->brand?->name ?? '').' '.$fragrance->name)),
                            ])->all(),
                        ])
                    </div>
                    <div class="min-w-0">
                        <label class="block mb-2 text-sm font-medium" style="color: var(--color-ink-70);">Decant size</label>
                        <select name="decant_size_id" id="decant_size_id" class="input" required>
                            <option value="">Select size...</option>
                            @foreach ($decantSizes as $size)
                                <option value="{{ $size->id }}">{{ $size->label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="min-w-0">
                        <label class="block mb-2 text-sm font-medium" style="color: var(--color-ink-70);">Quantity</label>
                        <input type="number" name="quantity" id="quantity" min="1" value="1" class="input" required>
                    </div>
                    <div class="min-w-0">
                        <label class="block mb-2 text-sm font-medium" style="color: var(--color-ink-70);">Unit price</label>
                        <input type="number" step="0.01" min="0" name="unit_price" id="unit_price" class="input" required>
                    </div>
                    <div class="min-w-0">
                        <label class="block mb-2 text-sm font-medium invisible">Add</label>
                        <button type="submit" class="btn btn-primary w-full h-[50px]" style="letter-spacing: 0.08em; font-size: 0.82rem;">Add</button>
                    </div>
                </div>

                <input type="text" name="notes" class="input" placeholder="Optional note for this item">
            </form>

            <form method="POST" action="{{ route('admin.orders.items.store', $order) }}" id="form-bottle" class="space-y-4 hidden" data-tab-pane="bottle">
                @csrf
                <input type="hidden" name="kind" value="bottle">

                <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
                    <div class="md:col-span-8">
                        <label class="block mb-2 text-sm font-medium" style="color: var(--color-ink-70);">Bottle (resale intent only)</label>
                        <select name="bottle_intake_id" class="input" required>
                            <option value="">Select bottle...</option>
                            @foreach ($bottles as $bottle)
                                <option value="{{ $bottle->id }}">
                                    {{ $bottle->fragrance?->brand?->name }} - {{ $bottle->fragrance?->name }} �
                                    intake #{{ $bottle->id }} �
                                    {{ number_format($bottle->remainingMl(), 2) }}ml left
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block mb-2 text-sm font-medium" style="color: var(--color-ink-70);">Sell price</label>
                        <input type="number" step="0.01" min="0" name="unit_price" class="input" required>
                    </div>
                    <div class="md:col-span-2 flex items-end">
                        <button type="submit" class="btn btn-primary w-full" style="letter-spacing: 0.08em; font-size: 0.82rem;">Add Item</button>
                    </div>
                </div>

                <input type="text" name="notes" class="input" placeholder="Optional note for this item">
            </form>

            <script>
                function switchOrderItemTab(tab) {
                    document.querySelectorAll('[data-tab-pane]').forEach(el => {
                        el.classList.toggle('hidden', el.getAttribute('data-tab-pane') !== tab);
                    });
                }

                (() => {
                    const fragranceSelect = document.getElementById('fragrance_id');
                    const sizeSelect = document.getElementById('decant_size_id');
                    const priceInput = document.getElementById('unit_price');
                    if (!fragranceSelect || !sizeSelect || !priceInput) return;

                    const skuPrices = {
                        @foreach ($skuPrices as $key => $price)
                            "{{ $key }}": {{ $price }},
                        @endforeach
                    };

                    const syncPrice = () => {
                        const key = `${fragranceSelect.value}:${sizeSelect.value}`;
                        if (key in skuPrices) {
                            priceInput.value = skuPrices[key];
                        }
                    };

                    fragranceSelect.addEventListener('change', syncPrice);
                    sizeSelect.addEventListener('change', syncPrice);
                })();
            </script>
        </section>
    @endif

    {{-- Costs & Payment --}}
    <section class="card max-w-3xl">
        <p class="label mb-4" style="color: var(--color-ink-40);">Costs & Payment</p>
        <form method="POST" action="{{ route('admin.orders.pay', $order) }}" class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
            @csrf
            @method('PATCH')

            <div>
                <label class="label block mb-2" style="color: var(--color-ink-70);">Packaging / Labeling</label>
                <input type="hidden" name="packaging_cost" value="0">
                <input type="number" step="0.01" min="0" value="0" class="input" disabled>
            </div>
            <div>
                <label class="label block mb-2" style="color: var(--color-ink-70);">Delivery fee</label>
                <input type="number" step="0.01" min="0" name="delivery_fee" value="{{ $order->delivery_fee }}" class="input">
            </div>
            <div>
                <label class="label block mb-2" style="color: var(--color-ink-70);">Discount</label>
                <input type="number" step="0.01" min="0" name="discount" value="{{ $order->discount }}" class="input">
            </div>

            <div>
                <label class="label block mb-2" style="color: var(--color-ink-70);">Payment method</label>
                <select name="payment_method" class="input">
                    @foreach (\App\Enums\PaymentMethod::cases() as $pm)
                        <option value="{{ $pm->value }}" @selected($order->payment_method?->value === $pm->value)>{{ $pm->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="label block mb-2" style="color: var(--color-ink-70);">Payment status</label>
                <select name="payment_status" class="input">
                    @foreach (\App\Enums\PaymentStatus::cases() as $ps)
                        <option value="{{ $ps->value }}" @selected($order->payment_status?->value === $ps->value)>{{ $ps->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="label block mb-2" style="color: var(--color-ink-70);">Paid amount</label>
                <input type="number" step="0.01" min="0" name="paid_amount" value="{{ $order->paid_amount }}" class="input">
            </div>

            <div class="md:col-span-3">
                <button type="submit" class="btn btn-primary">Update Costs & Payment</button>
            </div>
        </form>
    </section>
@endsection