@extends('layouts.app')

@section('title', 'Nouvelle Expédition')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- Section d'aide --}}
        <x-help-section page="prestataire.delivery.create" />
        
        <!-- Header -->
        <div class="mb-8">
            <a href="{{ route('prestataire.delivery.index') }}" class="text-gray-500 hover:text-gray-700 mb-4 inline-flex items-center">
                <i class="fas fa-arrow-left mr-2"></i> Retour aux livraisons
            </a>
            <h1 class="text-2xl font-bold text-gray-900">Nouvelle expédition</h1>
            <p class="text-gray-600 mt-1">Sélectionnez une commande à expédier</p>
        </div>

        @if($bookings->count() > 0)
            <div class="space-y-4">
                @foreach($bookings as $booking)
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
                        <div class="p-6">
                            <div class="flex flex-col sm:flex-row justify-between items-start gap-4">
                                <div class="flex-1">
                                    <div class="flex items-center gap-3 mb-2">
                                        <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            Confirmée
                                        </span>
                                        <span class="text-sm text-gray-500">
                                            #{{ $booking->booking_number ?? $booking->id }}
                                        </span>
                                    </div>
                                    
                                    <h3 class="text-lg font-semibold text-gray-900 mb-1">
                                        {{ $booking->service->name }}
                                    </h3>
                                    
                                    <div class="flex items-center gap-2 text-sm text-gray-600 mb-4">
                                        <i class="fas fa-user text-gray-400"></i>
                                        {{ $booking->client->name }}
                                    </div>

                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                                        <div>
                                            <p class="text-gray-500 mb-1">Date de commande</p>
                                            <p class="font-medium">{{ $booking->created_at->format('d/m/Y H:i') }}</p>
                                        </div>
                                        <div>
                                            <p class="text-gray-500 mb-1">Montant</p>
                                            <p class="font-medium">{{ number_format($booking->total_price, 2) }} €</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="w-full sm:w-auto pt-4 sm:pt-0 flex flex-col gap-2">
                                    <button onclick="openShippingModal({{ $booking->id }})" class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2">
                                        <i class="fas fa-box-open"></i>
                                        Expédier
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-check text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune commande à expédier</h3>
                <p class="text-gray-500">Toutes vos commandes confirmées ont déjà été expédiées.</p>
                <a href="{{ route('prestataire.bookings.index') }}" class="inline-block mt-4 text-blue-600 hover:text-blue-700 font-medium">
                    Voir toutes les commandes
                </a>
            </div>
        @endif
    </div>
</div>

<!-- Shipping Modal -->
<div id="shippingModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeShippingModal()"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
            <form id="shippingForm" method="POST">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-truck text-blue-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                Créer une expédition
                            </h3>
                            <div class="mt-4 space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Transporteur</label>
                                    <select name="provider_id" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                        @foreach(\App\Models\DeliveryProvider::where('is_active', true)->get() as $provider)
                                            <option value="{{ $provider->id }}">{{ $provider->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Type d'envoi</label>
                                    <select name="shipping_type" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                        <option value="standard">Standard (3-5 jours)</option>
                                        <option value="express">Express (24-48h)</option>
                                        <option value="overnight">24h Garanti</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Adresse du destinataire</label>
                                    <textarea name="recipient_address" rows="3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Adresse complète..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Confirmer l'expédition
                    </button>
                    <button type="button" onclick="closeShippingModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function openShippingModal(bookingId) {
        const modal = document.getElementById('shippingModal');
        const form = document.getElementById('shippingForm');
        
        // Set form action
        form.action = `/prestataire/delivery/booking/${bookingId}/setup`;
        
        modal.classList.remove('hidden');
    }

    function closeShippingModal() {
        const modal = document.getElementById('shippingModal');
        modal.classList.add('hidden');
    }

    // Close on escape key
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeShippingModal();
        }
    });
</script>
@endpush
@endsection