@extends('admin.layouts.app')

@section('page-title')
Order Details #{{ $order->id }}
@endsection

@section('content')
<div class="container-xxl">
    <div class="row">
        <div class="col-xl-9 col-lg-8">
            <div class="row">
                <div class="col-lg-12 ">
                    @if ($order->trashed())
                    <div class="alert not-dismissible alert-warning">
                        <h4>This order has been deleted.</h4>
                    </div>
                    @endif

                    <!-- Order Info Card -->
                    <div class="card bg-light-subtle">
                        <div class="card-body">
                            <div class="row g-3 g-lg-0">
                                <div class="col-lg-3 border-end">
                                    <a href="{{ URL::previous() }}" class="btn btn-outline-secondary">Back</a>
                                </div>
                                <div class="col-lg-3 border-end">
                                    <div class="d-flex align-items-center gap-3 justify-content-between px-3">
                                        <div>
                                            <p class="text-dark fw-medium fs-16 mb-1">Date</p>
                                            <p class="mb-0">{{ $order->created_at->format('F d, Y') }}</p>
                                        </div>
                                        <div class="avatar bg-light d-flex align-items-center justify-content-center rounded">
                                            <iconify-icon icon="solar:calendar-date-bold-duotone" class="fs-35 text-primary"></iconify-icon>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3  border-end">
                                    <div class="d-flex align-items-center gap-3 justify-content-between px-3">
                                        <div>
                                            <p class="text-dark fw-medium fs-16 mb-1">Order reference</p>
                                            <p class="mb-0">{{ $order->order_reference }}</p>
                                        </div>
                                        <div class="avatar bg-light d-flex align-items-center justify-content-center rounded">
                                            <iconify-icon icon="solar:clipboard-text-bold-duotone" class="fs-35 text-primary"></iconify-icon>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    @if($order->voucher)
                                    <div class="d-flex align-items-center gap-3 justify-content-between px-3">
                                        <div>
                                            <p class="text-dark fw-medium fs-16 mb-1">Voucher</p>
                                            <p class="mb-0">{{ $order->voucher->code }}</p>
                                        </div>
                                        <div class="avatar bg-light d-flex align-items-center justify-content-center rounded">
                                            <iconify-icon icon="solar:shop-2-bold-duotone" class="fs-35 text-primary"></iconify-icon>
                                        </div>
                                    </div>
                                    @endif
                                </div>                                
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                <div>
                                    <h4 class="fw-medium text-dark d-flex align-items-center gap-2">
                                        #{{ $order->order_reference }}
                                        <span class="badge bg-success-subtle text-success px-2 py-1 fs-13">{{ $order->payment_status }}</span>
                                        <span class="border border-warning text-warning fs-13 px-2 py-1 rounded">{{ $order->status }}</span>
                                    </h4>
                                    <p class="mb-0">{{ $order->created_at->format('F d, Y \a\t g:i a') }}</p>
                                </div>
                                <div>
                                    <!-- <a href="#" class="btn btn-outline-secondary">Refund</a> -->
                                    <!-- <a href="#" class="btn btn-outline-secondary">Return</a> -->
                                    <!-- <a href="{{ route('admin.orders.edit', $order->id) }}" class="btn btn-primary">Edit Order</a> -->
                                    @if (!$order->trashed())
                                    <form action="{{ route('admin.orders.updateStatus', $order) }}" method="POST">
                                        @csrf
                                        @method('PATCH')
                                        <!-- <div class="row"> -->
                                        <!-- <div class="col-md-8"> -->
                                        <div class="input-group">
                                            <select name="status" class="form-select" id="orderstatus">
                                                <!-- <select name="status" class="form-select"> -->
                                                @foreach(App\Enums\OrderStatus::cases() as $status)
                                                <option value="{{ $status->value }}"
                                                    {{ $order->status->value === $status->value ? 'selected=selected' : '' }}
                                                    {{ $order->canChangeStatus($status->value) ? '' : 'disabled' }} >
                                                    {{ $status->label() }}
                                                </option>
                                                @endforeach
                                            </select>

                                            <button class="btn btn-soft-primary" type="submit">Update Status</button>
                                        </div>
                                        <!-- </div> -->
                                        <!-- <div class="col-md-4"> -->
                                        <!-- <button type="submit" class="btn btn-primary">Update Status</button> -->
                                        <!-- </div> -->
                                        <!-- </div> -->
                                    </form>
                                    @endif
                                </div>
                            </div>

                            <!-- Progress section -->
                            <div class="mt-4">
                                <h4 class="fw-medium text-dark">Progress</h4>
                            </div>
                            <!-- <div class="row "> -->
                            @php
                            use App\Enums\OrderStatus;

                            $progressSteps = [
                            OrderStatus::Pending,
                            OrderStatus::Processing,
                            OrderStatus::Shipping,
                            OrderStatus::Delivered,
                            OrderStatus::Completed
                            ];
                            $currentStatus = $order->status;
                            @endphp
                            <div class="progress progress-xl" style="height:25px;">
                                @foreach($progressSteps as $step)
                                <div class="progress-bar progress-bar-striped1 {{ $step->isActiveStep($currentStatus) ? 'bg-primary' : 'text-dark bg-light' }}"
                                    role="progressbar"
                                    style="width: 20%;"
                                    aria-valuenow="20"
                                    aria-valuemin="0"
                                    aria-valuemax="100">
                                    {{ $step->label() }}
                                </div>
                                @endforeach
                            </div>
                            <!-- </div> -->
                        </div>

                    </div>



                    <!-- Products Card -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Products</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table align-middle mb-0 table-hover table-centered">
                                    <thead class="bg-light-subtle border-bottom">
                                        <tr>
                                            <th>Product Name & Size</th>
                                            <!-- <th>Status</th> -->
                                            <th>Quantity</th>
                                            <th>Price</th>
                                            <th>Tax</th>
                                            <th>Total Amount</th>
                                            <th>Discount</th>
                                            <th>Discount type</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($order->items as $item)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="rounded bg-light avatar-md d-flex align-items-center justify-content-center">
                                                        <img src="{{ asset('storage/images/products/' . $item->product->id .'/thumb/'.$item->product->first_image) }}" alt="" class="rounded avatar-md">
                                                    </div>
                                                    <div>
                                                        <a href="#" class="text-dark fw-medium fs-15">{{ $item->product->name }}</a>
                                                        <p class="text-muted mb-0 mt-1 fs-13"><span>Size : </span>{{ $item->size }}</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <!-- <td>
                                                <span class="badge bg-success-subtle text-success px-2 py-1 fs-13">{{ $item->status }}</span>
                                            </td> -->
                                            <td>{{ $item->quantity }}</td>
                                            <td>{{ number_format($item->unit_price, 2) }}</td>
                                            <td>{{ number_format($item->tax, 2) }}</td>
                                            <td>{{ number_format(($item->total_price * $item->quantity), 2)  }}</td>
                                            <td>{{ $item->discount_amount }}</td>
                                            <td>{{ $item->discount_type }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <a href="{{ URL::previous() }}" class="btn btn btn-outline-secondary">Back</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Sidebar -->
        <div class="col-xl-3 col-lg-4">
            <!-- Order Summary Card -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Order Summary</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <tbody>
                                <tr>
                                    <td class="px-0">
                                        <p class="d-flex mb-0 align-items-center gap-1"><iconify-icon icon="solar:clipboard-text-broken"></iconify-icon> Sub Total : </p>
                                    </td>
                                    <td class="text-end text-dark fw-medium px-0">{{ number_format($order->total_amount, 2) }} €</td>
                                </tr>
                                <tr>
                                    <td class="px-0">
                                        <p class="d-flex mb-0 align-items-center gap-1"><iconify-icon icon="solar:ticket-broken" class="align-middle"></iconify-icon> Discount : </p>
                                    </td>
                                    <td class="text-end text-dark fw-medium px-0">-{{ number_format($order->discount_amount, 2) }} €</td>
                                </tr>
                                <tr>
                                    <td class="px-0">
                                        <p class="d-flex mb-0 align-items-center gap-1"><iconify-icon icon="solar:kick-scooter-broken" class="align-middle"></iconify-icon> Delivery Charge : </p>
                                    </td>
                                    <td class="text-end text-dark fw-medium px-0">{{ number_format($order->shipping_cost, 2) }} €</td>
                                </tr>
                                <tr>
                                    <td class="px-0">
                                        <p class="d-flex mb-0 align-items-center gap-1"><iconify-icon icon="solar:calculator-minimalistic-broken" class="align-middle"></iconify-icon> Estimated Tax : </p>
                                    </td>
                                    <td class="text-end text-dark fw-medium px-0">{{ number_format($order->tax, 2) }} €</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between bg-light-subtle">
                    <div>
                        <p class="fw-medium text-dark mb-0">Total Amount</p>
                    </div>
                    <div>
                        <p class="fw-medium text-dark mb-0">{{ number_format($order->final_amount, 2) }} €</p>
                    </div>
                </div>
            </div>

            <!-- Payment Information Card -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Payment Information</h4>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="rounded-3 bg-light avatar d-flex align-items-center justify-content-center">
                            <img src="{{ asset('assets/images/card/' . strtolower($order->payment_method) . '.svg') }}" alt="" class="avatar-sm">
                        </div>
                        <div>
                            <p class="mb-1 text-dark fw-medium">{{ $order->payment_method }}</p>
                        </div>
                        <div class="ms-auto">
                            <iconify-icon icon="solar:check-circle-broken" class="fs-22 text-success"></iconify-icon>
                        </div>
                    </div>
                    <p class="text-dark mb-1 fw-medium">Transaction ID : <span class="text-muted fw-normal fs-13">{{ $order->transaction_id }}</span></p>
                    <!-- <p class="text-dark mb-0 fw-medium">Card Holder Name : <span class="text-muted fw-normal fs-13">{{ $order->card_holder_name }}</span></p> -->
                </div>
            </div>

            <!-- Customer Details -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Customer Details</h4>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center gap-2">
                        <!-- <img src="{{ $order->user->avatar_url }}" alt="" class="avatar rounded-3 border border-light border-3"> -->
                        <div>
                            <h5>{{ $order->user->firstname }} {{ $order->user->lastname }}</h5>
                            <a href="mailto:{{ $order->user->email }}" class="link-primary fw-medium">{{ $order->user->email }}</a>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-3">
                        <h5 class="">Contact Number</h5>
                        <!-- <div>
                            <a href="#"><i class='bx bx-edit-alt fs-18'></i></a>
                        </div> -->
                    </div>
                    <p class="mb-1">{{ $order->user->phonenumber }}</p>

                    <div class="d-flex justify-content-between mt-3">
                        <h5 class="">Shipping Address</h5>
                        <!-- <div>
                            <a href="#"><i class='bx bx-edit-alt fs-18'></i></a>
                        </div> -->
                    </div>

                    <div>
                        <p class="mb-1">{{ $order->getFormattedShippingAddress() }}</p>
                    </div>

                    <div class="d-flex justify-content-between mt-3">
                        <h5 class="">Billing Address</h5>
                        <!-- <div>
                            <a href="#"><i class='bx bx-edit-alt fs-18'></i></a>
                        </div> -->
                    </div>

                    @if($order->billing_same_as_shipping)
                    <p class="mb-1">Same as shipping address</p>
                    @else
                    <div>
                        <p class="mb-1">{{ $order->getFormattedBillingAddress() }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Map -->
            <!-- <div class="card">
                <div class="card-body">
                    <div class="mapouter">
                        <div class="gmap_canvas">
                            <iframe class="gmap_iframe rounded" width="100%" style="height: 418px;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                                src="https://maps.google.com/maps?width=1980&amp;height=400&amp;hl=en&amp;q={{ urlencode($order->getFormattedShippingAddress()) }}&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
                            </iframe>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- <script src="{{ asset('admin/assets/js/pages/order-detail.js') }}"></script> -->
@endsection