@extends('layouts.app')
@section('title', 'Finaliser la commande')

@section('content')

<div class="bg-gradient-to-br from-blue-900 to-blue-700 text-white py-10">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h1 class="text-3xl font-extrabold">Finaliser la <span class="text-amber-400">Commande</span></h1>
    </div>
</div>

<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="grid lg:grid-cols-3 gap-8">

        {{-- Form --}}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8">
                <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                    <i class="fas fa-user text-blue-600"></i> Informations de livraison
                </h2>

                <form action="{{ route('orders.store') }}" method="POST" class="space-y-5">
                    @csrf

                    <div class="grid sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Nom complet <span class="text-red-500">*</span></label>
                            <input type="text" name="customer_name" value="{{ old('customer_name') }}" required
                                   class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none @error('customer_name') border-red-400 @enderror"
                                   placeholder="Votre nom complet">
                            @error('customer_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Numéro de téléphone <span class="text-red-500">*</span></label>
                            <input type="tel" name="phone" value="{{ old('phone') }}" required
                                   class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none @error('phone') border-red-400 @enderror"
                                   placeholder="+213 555 000 000">
                            @error('phone')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Adresse email <span class="text-red-500">*</span></label>
                        <input type="email" name="email" value="{{ old('email') }}" required
                               class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none @error('email') border-red-400 @enderror"
                               placeholder="votre@email.com">
                        @error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Adresse complète <span class="text-red-500">*</span></label>
                        <input type="text" name="address" value="{{ old('address') }}" required
                               class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none @error('address') border-red-400 @enderror"
                               placeholder="Numéro, rue, quartier…">
                        @error('address')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div class="grid sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Ville <span class="text-red-500">*</span></label>
                            <input type="text" name="city" value="{{ old('city') }}" required
                                   class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none @error('city') border-red-400 @enderror"
                                   placeholder="Alger, Oran, Constantine…">
                            @error('city')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Wilaya</label>
                            <input type="text" name="wilaya" value="{{ old('wilaya') }}"
                                   class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
                                   placeholder="Wilaya">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Notes de commande</label>
                        <textarea name="notes" rows="3"
                                  class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"
                                  placeholder="Instructions spéciales, horaires de livraison préférés…">{{ old('notes') }}</textarea>
                    </div>

                    <div class="pt-4 border-t border-gray-100">
                        <div class="flex items-start gap-3 mb-5 bg-amber-50 rounded-xl p-4 text-sm text-amber-800">
                            <i class="fas fa-info-circle mt-0.5 flex-shrink-0"></i>
                            <p>Le paiement s'effectue à la <strong>livraison</strong>. Notre équipe vous contactera pour confirmer votre commande.</p>
                        </div>
                        <button type="submit" class="btn-accent w-full text-white font-bold py-4 rounded-xl text-base flex items-center justify-center gap-2">
                            <i class="fas fa-check-circle"></i> Confirmer la commande
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Order Summary --}}
        <div>
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 sticky top-20">
                <h2 class="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2">
                    <i class="fas fa-receipt text-blue-600"></i> Votre commande
                </h2>
                <div class="space-y-3 mb-5">
                    @foreach($cart as $item)
                    <div class="flex gap-3">
                        <div class="w-14 h-14 bg-gray-50 rounded-lg flex-shrink-0 overflow-hidden">
                            @if($item['image'])
                                <img src="{{ asset('storage/' . $item['image']) }}" alt="{{ $item['name'] }}" class="w-full h-full object-cover">
                            @else
                                <div class="w-full h-full flex items-center justify-center bg-blue-50">
                                    <i class="fas fa-mobile-alt text-blue-200"></i>
                                </div>
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-800 truncate">{{ $item['name'] }}</p>
                            <p class="text-xs text-gray-500">Qté : {{ $item['quantity'] }}</p>
                            <p class="text-sm font-bold text-blue-700">{{ number_format($item['price'] * $item['quantity'], 2) }} FCFA</p>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="border-t border-gray-100 pt-4">
                    <div class="flex justify-between font-extrabold text-lg text-gray-900">
                        <span>Total</span>
                        <span class="text-blue-700">{{ number_format($total, 2) }} FCFA</span>
                    </div>
                    <p class="text-xs text-gray-400 mt-1">* Livraison à confirmer</p>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100 space-y-2 text-xs text-gray-500">
                    <div class="flex items-center gap-2"><i class="fas fa-shield-alt text-green-500"></i> Commande 100% sécurisée</div>
                    <div class="flex items-center gap-2"><i class="fas fa-truck text-blue-500"></i> Livraison partout en Algérie</div>
                    <div class="flex items-center gap-2"><i class="fas fa-money-bill text-amber-500"></i> Paiement à la livraison</div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection