@extends('layouts.admin')
@section('title', 'Order: ' . $order->order_number)

@section('content')
<div class="d-flex justify-content-between mb-4">
    <h5 class="fw-bold mb-0"><i class="bi bi-bag-check me-2" style="color:var(--primary)"></i>{{ $order->order_number }}</h5>
    <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left me-1"></i>All Orders</a>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        {{-- ORDER ITEMS --}}
        <div class="card mb-4">
            <div class="card-header">Order Items</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th class="px-4">Product</th>
                                <th>Variation</th>
                                <th>Price</th>
                                <th>Qty</th>
                                <th>Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->items as $item)
                            <tr>
                                <td class="px-4">{{ $item->product_name }}</td>
                                <td class="text-muted">{{ $item->variation_details ?? '—' }}</td>
                                <td>৳{{ number_format($item->price, 0) }}</td>
                                <td>{{ $item->quantity }}</td>
                                <td class="fw-bold">৳{{ number_format($item->subtotal, 0) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4" class="text-end text-muted px-4">Subtotal:</td>
                                <td>৳{{ number_format($order->subtotal, 0) }}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-end text-muted px-4">
                                    Delivery Charge
                                    <span class="badge bg-{{ $order->shipping_area === 'inside_dhaka' ? 'success' : 'danger' }} ms-1" style="font-size:11px">
                                        {{ $order->shipping_area === 'inside_dhaka' ? 'Inside Dhaka' : 'Outside Dhaka' }}
                                    </span>:
                                </td>
                                <td>৳{{ number_format($order->shipping_charge, 0) }}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-end fw-bold px-4">Total:</td>
                                <td class="fw-bold fs-5" style="color:var(--primary)">৳{{ number_format($order->total, 0) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        {{-- TRACKING --}}
        <div class="card">
            <div class="card-header">Add Tracking Update</div>
            <div class="card-body p-4">
                <form action="{{ route('admin.orders.tracking', $order) }}" method="POST">
                    @csrf
                    <div class="row g-3">
                        <div class="col-sm-4">
                            <label class="form-label">Status Label</label>
                            <input type="text" name="status" class="form-control" placeholder="e.g. Order Shipped" required>
                        </div>
                        <div class="col-sm-8">
                            <label class="form-label">Message</label>
                            <input type="text" name="message" class="form-control"
                                placeholder="e.g. Your product has been shipped via courier..." required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-danger mt-3">Add Update</button>
                </form>

                @if($order->trackingUpdates->count() > 0)
                <hr class="mt-4">
                <h6 class="fw-bold mb-3">Tracking History</h6>
                @foreach($order->trackingUpdates as $t)
                <div class="d-flex gap-3 mb-3">
                    <div style="flex-shrink:0">
                        <div style="width:32px;height:32px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center">
                            <i class="bi bi-truck-front text-white" style="font-size:13px"></i>
                        </div>
                    </div>
                    <div>
                        <div class="fw-semibold">{{ $t->status }}</div>
                        <div class="text-muted" style="font-size:13px">{{ $t->message }}</div>
                        <div class="text-muted" style="font-size:11px">{{ $t->created_at->format('d M Y, h:i A') }}</div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        {{-- STATUS --}}
        <div class="card mb-4">
            <div class="card-header">Order Status</div>
            <div class="card-body p-4">
                <div class="mb-3 text-center">
                    <span class="badge bg-{{ $order->status_badge }} fs-6 px-4 py-2">{{ ucfirst($order->status) }}</span>
                </div>
                <form action="{{ route('admin.orders.status', $order) }}" method="POST">
                    @csrf @method('PATCH')
                    <select name="status" class="form-select mb-3">
                        @foreach(['pending','confirmed','processing','shipped','delivered','cancelled'] as $s)
                        <option value="{{ $s }}" {{ $order->status == $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                        @endforeach
                    </select>
                    <button type="submit" class="btn btn-danger w-100">Update Status</button>
                </form>
            </div>
        </div>

        {{-- CUSTOMER --}}
        <div class="card">
            <div class="card-header">Customer Details</div>
            <div class="card-body p-4">
                <dl class="mb-0" style="font-size:14px">
                    <dt class="text-muted">Name</dt>
                    <dd class="fw-semibold">{{ $order->name }}</dd>
                    <dt class="text-muted">Mobile</dt>
                    <dd class="fw-semibold">{{ $order->mobile }}</dd>
                    <dt class="text-muted">Address</dt>
                    <dd>{{ $order->address }}</dd>
                    <dt class="text-muted">Payment Method</dt>
                    <dd>
                        @php
                        $pm = ['cod'=>['Cash on Delivery','success','bi-cash-coin'],
                               'bkash'=>['bKash','danger','bi-phone'],
                               'rocket'=>['Rocket','purple','bi-phone'],
                               'nagad'=>['Nagad','warning','bi-phone']];
                        [$label,$color,$icon] = $pm[$order->payment_method ?? 'cod'] ?? ['Cash on Delivery','success','bi-cash-coin'];
                        @endphp
                        <span class="badge bg-{{ $color === 'purple' ? 'secondary' : $color }}">
                            <i class="bi {{ $icon }} me-1"></i>{{ $label }}
                        </span>
                    </dd>
                    @if($order->payment_method !== 'cod' && $order->payment_phone)
                    <dt class="text-muted">Payment Number</dt>
                    <dd class="fw-semibold">{{ $order->payment_phone }}</dd>
                    @endif
                    @if($order->payment_trx_id)
                    <dt class="text-muted">Transaction ID</dt>
                    <dd class="fw-semibold text-break" style="font-family:monospace">{{ $order->payment_trx_id }}</dd>
                    @endif
                    @if($order->note)
                    <dt class="text-muted">Note</dt>
                    <dd class="text-muted">{{ $order->note }}</dd>
                    @endif
                    <dt class="text-muted">Order Date</dt>
                    <dd>{{ $order->created_at->format('d M Y, h:i A') }}</dd>
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection