@extends('layouts.admin.base')

@section('page.title', 'Commande n°'.$order->id)

@section('page.content')
    <div class="flex mb-4">
        <a href="{{ route('admin.orders.list') }}" class="px-3 py-1 text-sm bg-gray-600 text-white rounded shadow"><i class="bi bi-arrow-left"></i> Retour</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="md:col-span-2 grid gap-4 mb-auto">
            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <p class="text-lg font-semibold mb-2">Produits de la commande</p>

                <div class="grid grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-4 mb-4 pb-4 border-b">
                    @foreach ($order->items as $item)
                        <div class="col-span-2 md:col-span-1 flex flex-col justify-center">
                            <img src="{{ asset('images/placeholder.png') }}" alt="{{ $item->title }}" class="w-full aspect-square object-cover rounded-lg border bg-gray-200">
                        </div>

                        <div class="col-span-3 md:col-span-5 lg:col-span-7 xl:col-span-9 flex flex-col justify-center">
                            <div class="flex flex-col md:flex-row justify-between my-auto">
                                <div class="mr-4 my-auto">
                                    <p>{{ $item->product->title }}</p>
                                </div>
                                <div>
                                    <p class="text-lg font-bold md:text-right whitespace-nowrap">{{ $item->price_formatted }}</p>
                                    <p class="text-sm text-gray-400 md:text-right whitespace-nowrap">Quantité: {{ $item->quantity }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <p class="text-lg font-semibold mb-2">Résumé</p>

                <div class="flex flex-col">
                    <div class="flex justify-between">
                        <p>Sous-total</p>
                        <p>{{ $order->price_untaxed_formatted }}</p>
                    </div>

                    <div class="flex justify-between">
                        <p>Livraison</p>
                        <p>{{ $order->shipping_price_formatted ?? '0.00 €' }}</p>
                    </div>

                    <div class="flex justify-between">
                        <p>TVA</p>
                        <p>{{ $order->tax_formatted ?? '0.00 €' }}</p>
                    </div>

                    <div class="flex justify-between mt-4 pt-4 border-t border-dashed text-lg font-bold">
                        <p>Total</p>
                        <p>{{ $order->price_formatted }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <p class="text-lg font-semibold mb-2">Numéro de suivi</p>
                @include('components.forms.inputs.classic-light', [
                    'disabled' => true,
                    'id' => 'tracking_number',
                    'value' => $order->tracking_number
                ])
            </div>

            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <p class="text-lg font-semibold mb-2">Paiements</p>

                <div class="grid gap-4">
                    @forelse ($order->payments as $payment)
                        <div class="p-2 border rounded shadow-sm bg-white grid sm:flex md:grid lg:flex gap-4 justify-between items-center">
                            <div class="flex flex-col truncate">
                                <p class="truncate">Payé avec <b>{{ $payment->type }}</b>.</p>

                                @if ($payment->type == 'stripe')
                                    <p class="truncate text-sm text-gray-500">Identifiant Stripe : {{ $payment->datas['stripe_id'] ?? "Non indiqué" }}</p>
                                @endif
                            </div>

                            <p class="text-xl text-gray-700 whitespace-nowrap">{{ $payment->amount_formatted }}</p>
                        </div>
                    @empty
                        <p class="text-gray-500">Aucun paiement n'a été enregistré pour cette commande.</p>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="grid gap-4 mb-auto">
            @php
                $orderStatus = array();

                foreach (\App\Models\Order::STATUS as $status) {
                    $orderStatus[] = [
                        'value' => $status,
                        'label' => __('order.status.'.$status)
                    ];
                }
            @endphp
            <form id="update-order-status-form" class="bg-slate-50 border rounded shadow-sm p-4" action="{{ route('admin.orders.update', ['order' => $order]) }}" method="POST">
                @csrf

                <p class="text-lg font-semibold mb-2">Statut</p>
                @include('components.forms.inputs.select-light', [
                    'id' => 'status',
                    'options' => $orderStatus,
                    'value' => $order->status
                ])
            </form>
            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <p class="text-lg font-semibold mb-2">Contact</p>
                <p class="text-gray-500">Email</p>
                <p>{{ $order->email }}</p>

                <p class="text-gray-500 mt-4">Téléphone</p>
                <p>{{ $order->phone ?? "Non indiqué" }}</p>
            </div>

            <div class="bg-slate-50 border rounded shadow-sm p-4">
                <p class="text-lg font-semibold mb-2">Adresses</p>
                <p class="text-gray-500">Livraison</p>

                @isset($order->shipping_address)
                    <p>{{ $order->shipping_address->identity }}</p>
                    <p class="text-sm">{{ $order->shipping_address->summary }}</p>
                @endisset

                @isset($order->delivery_center)
                    <p>{{ $order->billing_address->identity }}</p>
                    <p class="text-sm">Retrait au centre {{ $order->delivery_center->title }}</p>
                    <p class="text-sm">{{ $order->delivery_center->address->summary }}</p>
                @endisset


                <p class="text-gray-500 mt-4">Facturation</p>
                <p>{{ $order->billing_address->identity }}</p>
                <p class="text-sm">{{ $order->billing_address->summary }}</p>
            </div>
        </div>
    </div>
@endsection

@push('page.scripts')
    <script>
        $('#update-order-status-form select').change(function () {
            $(this).parents('form').submit();
        })
    </script>
@endpush