@php
    $statusBadges = [0 => 'bg-light text-dark border', 1 => 'bg-light text-dark border', 2 => 'bg-light text-dark border', 3 => 'bg-light text-dark border', 4 => 'bg-light text-dark border'];
    $s = (int) $order->status;
    $statusBadge = $statusBadges[$s] ?? 'bg-light text-dark';
    $statusStyles = [
        0 => ['bg' => '#DBEAFE', 'text' => '#3B82F6', 'border' => '#3B82F6'],
        1 => ['bg' => '#FFEDD5', 'text' => '#F97316', 'border' => '#F97316'],
        2 => ['bg' => '#EDE9FE', 'text' => '#8B5CF6', 'border' => '#8B5CF6'],
        3 => ['bg' => '#D1FAE5', 'text' => '#10B981', 'border' => '#10B981'],
        4 => ['bg' => '#FEE2E2', 'text' => '#EF4444', 'border' => '#EF4444'],
    ];
    $currentStatusStyle = $statusStyles[$s] ?? ['bg' => '#f8f9fa', 'text' => 'black', 'border' => '#dee2e6'];
    $typeOrder = (int) ($order->type_order ?? 1);
    if (!in_array($typeOrder, [1, 2], true)) {
        $typeOrder = 1;
    }
@endphp

<form method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data" class="order-admin-form">
    @method('PUT')
    @csrf

    <div class="modal-header border-0 pb-2">
        <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-2 w-100 me-2">
            <h1 class="modal-title fs-5 fw-bold mb-0 text-dark" id="exampleModalLabel">
                <i class="fal fa-shopping-bag me-2 text-secondary"></i>{{ $head ?? '' }}
            </h1>
            <span class="badge {{ $statusBadge }} align-self-start align-self-sm-center rounded-pill px-3 py-2">{{ __('orders.statuses.'.$s) }}</span>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>

    <div class="modal-body pt-0 overflow-auto" style="max-height: min(75vh, 900px);">
        <div class="modal-form">
            {{-- Top strip: id, code, status --}}
            <div class="rounded-4 p-3 p-md-4 mb-3 border bg-white shadow-sm order-form-hero">
                <div class="row g-3 align-items-end">
                    <div class="col-12 col-sm-6 col-lg-6">
                        <span class="d-block small text-muted text-uppercase letter-spacing-1"> {{ __('orders.id') }} </span>
                        <div class="d-flex align-items-center flex-wrap gap-2 mt-1">
                            <span class="fs-4 fw-bold text-dark">#{{ $order->id }}</span>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="navigator.clipboard.writeText('{{ $order->id }}')" title="{{ __('orders.copy_id') }}"> <i class="fal fa-copy"></i> </button>
                        </div>
                    </div>
                    {{--
                    <div class="col-6 col-lg-6">
                        <span class="d-block small text-muted text-uppercase letter-spacing-1"> {{ __('orders.order_code') }} </span>
                        <span class="d-block fs-6 fw-semibold mt-1 text-break text-dark" dir="ltr">{{ $order->order_code ?? '—' }}</span>
                    </div>
                    --}}
                    <div class="col-12 col-lg-5">
                        <label class="d-block small text-muted text-uppercase letter-spacing-1 mb-1"> {{ __('orders.status') }} </label>
                        <div
                            class="d-inline-flex align-items-center gap-2 px-3 rounded-pill border shadow-sm order-status-pill"
                            style="background-color: {{ $currentStatusStyle['bg'] }}; border-color: {{ $currentStatusStyle['border'] }};"
                        >
                            <span
                                class="rounded-circle d-inline-block order-status-dot"
                                style="width: 8px; height: 8px; background-color: {{ $currentStatusStyle['text'] }};"
                            ></span>
                            <select
                                name="status"
                                class="form-control form-select border-0 bg-transparent shadow-none p-0 m-0 order-status-select"
                                data-current-status="{{ $order->status }}"
                                data-current-bg="{{ $currentStatusStyle['bg'] }}"
                                data-current-text="{{ $currentStatusStyle['text'] }}"
                                data-current-border="{{ $currentStatusStyle['border'] }}"
                                style="min-width: 160px; color: {{ $currentStatusStyle['text'] }}; background-image: none; box-shadow: none;"
                                onchange="const option = this.options[this.selectedIndex]; const pill = this.closest('.order-status-pill'); const color = option.dataset.border || option.dataset.text || 'black'; pill.style.backgroundColor = option.dataset.bg || '#f8f9fa'; pill.style.borderColor = option.dataset.border || '#dee2e6'; pill.querySelector('.order-status-dot').style.backgroundColor = color; pill.querySelector('.fa-chevron-down').style.color = color; this.style.color = color;"
                            >
                                @foreach($statuses as $status)
                                    @php
                                        $optionStyle = $statusStyles[$status->value] ?? ['bg' => '#f8f9fa', 'text' => 'black', 'border' => '#dee2e6'];
                                    @endphp
                                    <option
                                        value="{{ $status->value }}"
                                        {{ (int) $order->status === $status->value ? 'selected' : '' }}
                                        data-bg="{{ $optionStyle['bg'] }}"
                                        data-text="black"
                                        data-border="{{ $optionStyle['border'] }}"
                                        style="background-color: white; color: black;"
                                    >
                                        {{ __('orders.statuses.'.$status->value) }}
                                    </option>
                                @endforeach
                            </select>
                            <i class="fas fa-chevron-down small" style="color: {{ $currentStatusStyle['text'] }};"></i>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Meta grid --}}
            <div class="row g-2 g-md-3 mb-3 small">
                <div class="col-6 col-md-4 col-lg">
                    <div class="h-100 rounded-3 border bg-white p-2 p-md-3">
                        <div class="text-muted text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.05em;"> {{ __('orders.order_placed') }} </div>
                        <div class="fw-semibold text-dark mt-1">{{ $order->date ?? '—' }}</div>
                    </div>
                </div>
                @if(filled($order->delivery_date))
                    <div class="col-6 col-md-4 col-lg">
                        <div class="h-100 rounded-3 border bg-white p-2 p-md-3">
                            <div class="text-muted text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.05em;"> {{ __('orders.delivery_at') }} </div>
                            <div class="fw-semibold text-dark mt-1">{{ \Carbon\Carbon::parse($order->delivery_date)->format('Y/m/d') }}</div>
                        </div>
                    </div>
                @endif
                <div class="col-6 col-md-4 col-lg">
                    <div class="h-100 rounded-3 border bg-white p-2 p-md-3">
                        <div class="text-muted text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.05em;"> {{ __('orders.order_type') }} </div>
                        <div class="fw-semibold text-dark mt-1">{{ __('orders.type_order_'.$typeOrder) }}</div>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg">
                    <div class="h-100 rounded-3 border bg-white p-2 p-md-3">
                        <div class="text-muted text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.05em;"> {{ __('orders.items_count') }} </div>
                        <div class="fw-semibold text-dark mt-1">{{ (int) ($order->count_products ?? $order->products->count()) }} <span class="text-muted fw-normal">/ {{ $order->products->count() }}</span></div>
                    </div>
                </div>
                @if(filled($order->paymentId))
                    <div class="col-12 col-md-8 col-lg">
                        <div class="h-100 rounded-3 border bg-white p-2 p-md-3">
                            <div class="text-muted text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.05em;"> {{ __('orders.payment_ref') }} </div>
                            <div class="fw-semibold text-dark mt-1 text-truncate" dir="ltr" title="{{ $order->paymentId }}">{{ $order->paymentId }}</div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- User --}}
            @if($order->user)
            <div class="order-form-section border rounded-4 overflow-hidden mb-3 bg-white shadow-sm">
                    <div class="px-3 py-2 bg-light border-bottom">
                        <h6 class="mb-0 fs-6 text-dark"><i class="fal fa-user me-2 text-secondary"></i>{{ __('orders.user_info') }}</h6>
                    </div>
                    <div class="p-3">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <span class="small text-muted d-block">{{ __('orders.user_name') }}</span>
                                <span class="fw-medium">{{ $order->user->name ?? '—' }}</span>
                            </div>
                            <div class="col-md-4">
                                <span class="small text-muted d-block">{{ __('orders.user_phone') }}</span>
                                <a class="fw-medium text-decoration-none" dir="ltr" href="tel:{{ $order->user->phone }}">{{ $order->user->phone ?? '—' }}</a>
                            </div>
                            <div class="col-md-4">
                                <span class="small text-muted d-block">{{ __('orders.user_email') }}</span>
                                <a class="fw-medium text-break text-decoration-none" href="mailto:{{ $order->user->email }}">{{ $order->user->email ?? '—' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Branch --}}
            @if($order->branch_id && $order->branch)
                @php $b = $order->branch; @endphp
                <div class="order-form-section border rounded-4 overflow-hidden mb-3 bg-white shadow-sm">
                    <div class="px-3 py-2 bg-light border-bottom">
                        <h6 class="mb-0 fs-6 text-dark"><i class="fal fa-store me-2 text-secondary"></i>{{ __('orders.branch') }}</h6>
                    </div>
                    <div class="p-3">
                        <div class="row g-3 align-items-start">
                            <div class="col-md-5">
                                <span class="small text-muted d-block">{{ __('orders.branch_name') }}</span>
                                <span class="fw-medium">{{ $b->currentDescription?->title ?? '—' }}</span>
                            </div>
                            @if($b->phone)
                                <div class="col-md-3">
                                    <span class="small text-muted d-block">{{ __('orders.branch_phone') }}</span>
                                    <a class="fw-medium text-decoration-none" dir="ltr" href="tel:{{ $b->phone }}">{{ $b->phone }}</a>
                                </div>
                            @endif
                            @if($b->city?->currentDescription)
                                <div class="col-md-4">
                                    <span class="small text-muted d-block">{{ __('orders.city') }}</span>
                                    <span class="fw-medium">{{ $b->city->currentDescription->name ?? '—' }}</span>
                                </div>
                            @endif
                            @if(filled($b->currentDescription?->address))
                                <div class="col-12 small text-muted border-top pt-2 mt-1">
                                    <i class="fal fa-map-pin me-1"></i>{{ $b->currentDescription->address }}
                                </div>
                            @endif
                            @if(filled($b->latitude) && filled($b->longitude))
                                <div class="col-12">
                                    <a href="https://www.google.com/maps?q={{ urlencode($b->latitude) }},{{ urlencode($b->longitude) }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-info">
                                        <i class="fal fa-external-link me-1"></i>{{ __('orders.open_map') }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            {{-- Address --}}
            @if($order->address_id && $order->address && $order->type_order == $deliveryOrder)
                @php $a = $order->address; @endphp
                <div class="order-form-section border rounded-4 overflow-hidden mb-3 bg-white shadow-sm">
                    <div class="px-3 py-2 bg-light border-bottom">
                        <h6 class="mb-0 fs-6 text-dark"><i class="fal fa-map-marker-alt me-2 text-secondary"></i>{{ __('orders.address_details') }}</h6>
                    </div>
                    <div class="p-3">
                        <p class="mb-2 fw-medium">{{ $a->address ?? '—' }}</p>
                        <div class="row g-2 small mb-2">
                            @if($a->city?->currentDescription)
                                <div class="col-sm-auto">
                                    <span class="text-muted">{{ __('orders.city') }}:</span> {{ $a->city->currentDescription->name ?? '—' }}
                                </div>
                            @endif
                            @if($a->district?->currentDescription)
                                <div class="col-sm-auto">
                                    <span class="text-muted">{{ __('orders.district') }}:</span> {{ $a->district->currentDescription->name ?? '—' }}
                                </div>
                            @endif
                        </div>
                        @if(filled($a->latitude) && filled($a->longitude))
                            <a href="https://www.google.com/maps?q={{ urlencode($a->latitude) }},{{ urlencode($a->longitude) }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-success">
                                <i class="fal fa-external-link me-1"></i>{{ __('orders.open_map') }}
                            </a>
                        @endif
                    </div>
                </div>
            @endif

            {{-- Line items (before totals = receipt order) --}}
            <h6 class="text-uppercase text-muted small fw-bold mb-3" style="letter-spacing: 0.08em;"> <i class="fal fa-box me-1 text-secondary"></i>{{ __('orders.products') }} </h6>
            <div class="d-flex flex-column gap-3 mb-4">
                @forelse($order->products as $line)
                    <div class="border rounded-4 overflow-hidden order-line-card position-relative bg-white shadow-sm">
                        <div class="row g-0">
                            <div class="col-auto d-flex flex-column align-items-center justify-content-center p-2 p-sm-3 bg-light text-secondary fw-bold border-end" style="min-width: 2.5rem;">
                                {{ $loop->iteration }}
                            </div>
                            <div class="col-auto d-none d-sm-flex align-items-center p-2">
                                <div class="rounded-3 border bg-light overflow-hidden position-relative" style="width: 80px; height: 80px;">
                                    @if($line->product)
                                        <img src="{{ $line->product->image_url }}" alt="" class="w-100 h-100 position-absolute top-0 start-0" style="object-fit: cover;" onerror="this.classList.add('d-none'); this.nextElementSibling.classList.remove('d-none'); this.nextElementSibling.classList.add('d-flex');">
                                        <div class="d-none align-items-center justify-content-center w-100 h-100 text-muted position-absolute top-0 start-0 bg-light">
                                            <i class="fal fa-image fs-2 opacity-25"></i>
                                        </div>
                                    @else
                                        <div class="d-flex align-items-center justify-content-center w-100 h-100 text-muted">
                                            <i class="fal fa-image fs-2 opacity-25"></i>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col p-2 p-sm-3 min-w-0">
                                <div class="fw-semibold mb-1 text-dark">{{ $line->product?->currentDescription?->title ?? '—' }}</div>
                                @if($line->options->isNotEmpty())
                                    @php $optGroups = $line->options->groupBy('product_attribute_id'); @endphp
                                    <div class="d-flex flex-wrap gap-1 gap-sm-2 mb-2">
                                        @foreach($optGroups as $attrOpts)
                                            @php $firstOpt = $attrOpts->first(); @endphp
                                            <span class="badge bg-light text-dark border fw-normal text-start py-2 px-3">
                                                <span class="text-muted">{{ $firstOpt->productAttribute?->currentDescription?->title ?? '—' }}:</span>
                                                @foreach($attrOpts as $o)
                                                    @if(!$loop->first) · @endif
                                                    <span class="fw-medium">{{ $o->productOption?->currentDescription?->title ?? '—' }}</span>
                                                @endforeach
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                                @if(filled($line->note))
                                    <div class="small p-2 rounded-3 border border-dashed text-muted bg-light">
                                        <i class="fal fa-sticky-note me-1 text-secondary"></i>{{ $line->note }}
                                    </div>
                                @endif
                            </div>
                            <div class="col-12 col-sm-auto p-2 p-sm-3 text-sm-end border-top border-sm-0 border-sm-start bg-light">
                                <div class="d-flex d-sm-block justify-content-between justify-content-sm-end align-items-baseline flex-wrap gap-2">
                                    <div>
                                        <span class="text-muted small"> {{ __('orders.count') }} </span>
                                        <span class="badge bg-secondary">×{{ $line->quantity ?? 0 }}</span>
                                    </div>
                                    <div class="text-muted small"> {{ __('orders.unit_price') }}: <span class="text-dark fw-medium">{{ $line->product_cost ?? 0 }}</span> </div>
                                    <div class="fs-5 fw-bold text-dark"> {{ $line->total ?? 0 }} </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-muted small mb-0 py-3 text-center border rounded-3"> {{ __('dashboard.no_data') }} </p>
                @endforelse
            </div>

            {{-- Totals --}}
            <div class="order-form-section border rounded-4 overflow-hidden mb-3 bg-white shadow-sm">
                <div class="px-3 py-2 bg-light border-bottom">
                    <h6 class="mb-0 fs-6 text-dark"><i class="fal fa-coins me-2 text-secondary"></i>{{ __('orders.details') }}</h6>
                </div>
                <div class="p-3 p-md-4">
                    @if($order->coupon_id && $order->coupon)
                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 p-2 rounded-3 border bg-light">
                            <span><i class="fal fa-tag me-1 text-secondary"></i><span class="text-muted"> {{ __('orders.coupon') }}: </span> <strong class="text-dark" dir="ltr">{{ $order->coupon->code ?? $order->coupon->name ?? '—' }}</strong></span>
                        </div>
                    @endif
                    <div class="vstack gap-0">
                        <div class="d-flex justify-content-between py-2 border-bottom border-light">
                            <span class="text-muted"> {{ __('orders.total_products') }} </span>
                            <span class="fw-medium">{{ $order->total_products ?? 0 }}</span>
                        </div>
                        <div class="d-flex justify-content-between py-2 border-bottom border-light">
                            <span class="text-muted"> {{ __('orders.discount') }} </span>
                            <span class="fw-medium text-dark"> @if((float) ($order->total_discount ?? 0) > 0) @endif{{ $order->total_discount ?? 0 }} </span>
                        </div>
                        @if($order->type_order == 1)
                        <div class="d-flex justify-content-between py-2 border-bottom border-light">
                            <span class="text-muted"> {{ __('orders.shipping_cost') }} </span>
                            <span class="fw-medium">{{ $order->total_shipping ?? 0 }}</span>
                        </div>
                        @endif
                        <div class="d-flex justify-content-between py-2 border-bottom border-light">
                            <span class="text-muted"> {{ __('orders.total_tax') }} </span>
                            <span class="fw-medium">{{ $order->total_tax ?? 0 }}</span>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-3 p-3 rounded-3 border bg-light">
                        <span class="fs-5 fw-bold mb-0 text-dark"> {{ __('orders.total') }} </span>
                        <span class="fs-3 fw-bold mb-0 text-dark">{{ $order->total ?? 0 }}</span>
                    </div>
                </div>
            </div>

            {{-- QR + invoice --}}
            <div class="row g-3 mb-1">
                @if($order->bill)
                    <div class="col-12 @if(!empty($order->qr_image)) col-md-6 @endif d-flex">
                        <a href="{{ $order->bill_url }}" target="_blank" class="d-flex flex-grow-1 align-items-center justify-content-center gap-2 border rounded-4 p-4 text-decoration-none text-dark fw-semibold bg-white shadow-sm" style="min-height: 120px;">
                            <i class="fal fa-file-invoice fa-2x text-secondary"></i>
                            <span>{{ __('web.download_invoice') }}</span>
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="modal-footer border-0 flex-wrap gap-2 pt-2">
        <button type="button" class="line-butn butn-st2 butn-md" data-bs-dismiss="modal" aria-label="Close">
            <span> {{ __('dashboard.cancel') }} </span>
        </button>
        <button type="submit" class="butn blue-butn butn-st2 butn-md">
            <span> {{ __('dashboard.save') }} </span>
        </button>
    </div>
</form>