@extends('master', ['title' => __('dashboard.order_details')])

@section('content')
    <div class="container">
        <div class="card mb-3">
            <div class="card-header bg-light">
                <h5 class="mb-0">{{ __('dashboard.order_info') }} #{{ $order->id }}</h5>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <!-- User Info -->
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-3 me-3 text-primary mt-2">
                                <i class="fas fa-user-circle fa-lg"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">{{ __('dashboard.user_name') }}</small>
                                <span class="h6 mb-0">{{ $order->user?->name ?? '—' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Order Date -->
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <div class="bg-success bg-opacity-10 p-3 rounded-3 me-3 text-success mt-2">
                                <i class="fas fa-calendar-alt fa-lg"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">{{ __('dashboard.date') }}</small>
                                <span class="h6 mb-0">{{ $order->created_at->format('Y-m-d H:i') }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Order Note -->
                    <div class="col-md-6">
                        <div class="d-flex align-items-start">
                            <div class="bg-warning bg-opacity-10 p-3 rounded-3 me-3 text-warning">
                                <i class="fas fa-sticky-note fa-lg"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">{{ __('dashboard.note') }}</small>
                                <span class="text-secondary small">{{ $order->note ?? '—' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Order Status & Update -->
                    <div class="col-md-6">
                        <div class="d-flex align-items-start">
                            <div class="bg-info bg-opacity-10 p-3 rounded-3 me-3 text-info">
                                <i class="fas fa-info-circle fa-lg"></i>
                            </div>
                            <div class="flex-grow-1">
                                <small class="text-muted d-block text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px; margin-bottom: 4px;">{{ __('dashboard.status') }}</small>
                                <form action="{{ route('orders.update-status', $order->id) }}" method="POST"
                                    class="d-flex align-items-center gap-2">
                                    @csrf
                                    @method('PATCH')
                                    <select name="status_id" class="form-select form-select-sm" style="width: auto; min-width: 150px;">
                                        @foreach($statuses as $status)
                                            <option value="{{ $status->id }}" {{ $order->current_status_id == $status->id ? 'selected' : '' }}>
                                                {{ $status->getTranslation('name', app()->getLocale()) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="submit" class="btn btn-primary btn-sm shadow-sm">
                                        {{ __('dashboard.update') }}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header bg-light">
                <h5 class="mb-0">{{ __('dashboard.order_statuses') }}</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped mt-2">
                        <thead>
                            <tr>
                                <th class="text-center">{{ __('dashboard.status') }}</th>
                                <th class="text-center">{{ __('dashboard.date') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->statuses as $status)
                                <tr>
                                    <td class="text-center">
                                        @if($order->currentStatus)
                                            <span
                                                class="badge {{ $status->badge_class }}">{{ $status->getTranslation('name', app()->getLocale()) }}</span>
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td class="text-center">
                                      <span class="badge bg-light text-dark">
                                        {{ $status->pivot->created_at->format('Y-m-d H:i') }}
                                      </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header bg-light">
                <h4>{{ __('dashboard.items') }}</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered mt-2">
                        <thead>
                            <tr>
                                <th class="text-center">{{ __('dashboard.product') }}</th>
                                <th class="text-center">{{ __('dashboard.price') }}</th>
                                <th class="text-center">{{ __('dashboard.quantity') }}</th>
                                <th class="text-center">{{ __('dashboard.total') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $subtotal = 0; @endphp
                            @foreach($order->items as $item)
                                @php
                                    $price = $item->product ? $item->product->getSellingPrice($item->quantity) : (float) $item->price;
                                    $item_total = $price * $item->quantity;
                                    $subtotal += $item_total;
                                @endphp
                                <tr>
                                    <td class="text-center">
                                        <div class="d-flex align-items-center">
                                            @if ($item->product->images->first())
                                                <img src="{{ getPath('products', $item->product_id, $item->product->images->first()->path) }}"
                                                    width="40" height="40" class="rounded me-2 shadow-sm"
                                                    style="object-fit: cover;">
                                            @else
                                                <div class="rounded me-2 bg-light d-flex align-items-center justify-content-center"
                                                    style="width: 40px; height: 40px;">
                                                    <i data-feather="image" class="text-muted" style="width: 16px;"></i>
                                                </div>
                                            @endif
                                            <span>{{ $item->product->getTranslation('name', app()->getLocale()) }}</span>
                                        </div>
                                    </td>
                                    <td class="text-center">{{ number_format($price, 2) }}</td>
                                    <td class="text-center">{{ $item->quantity }}</td>
                                    <td class="text-center">{{ number_format($item_total, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3" class="text-end"><strong>{{ __('dashboard.subtotal') }}</strong></td>
                                <td class="text-center">{{ number_format($subtotal, 2) }}</td>
                            </tr>
                            <tr>
                                <td colspan="3" class="text-end"><strong>{{ __('dashboard.delivery_price') }}</strong></td>
                                <td class="text-center">{{ number_format($order->delivery_price, 2) }}</td>
                            </tr>
                            <tr>
                                <td colspan="3" class="text-end"><strong>{{ __('dashboard.service_fee') }}</strong></td>
                                <td class="text-center">5</td>
                            </tr>
                            <tr>
                                <td colspan="3" class="text-end"><strong>{{ __('dashboard.discount') }}</strong></td>
                                <td class="text-center text-danger">-{{ number_format($order->discount, 2) }}</td>
                            </tr>
                            <tr class="table-light">
                                <td colspan="3" class="text-end"><strong>{{ __('dashboard.total_amount') }}</strong></td>
                                <td class="text-center">
                                    <strong>{{ $order->total_amount }}</strong>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection