@extends('back.layout')

@section('content')
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center justify-between space-x-4 py-5 lg:py-6">
            <h2 class="text-xl font-semibold tracking-wide text-slate-800 dark:text-navy-100">
                Order Details
            </h2>
            <div class="flex space-x-2">
                <a href="{{ route('commandes.index') }}"
                   class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90 rounded-md px-4 py-2 transition-colors duration-200">
                    <i class="fa-solid fa-arrow-left"></i>
                    <span>Back to Orders</span>
                </a>
            </div>
        </div>

        @if (session()->has('message'))
            <div x-data="{ show: true }" x-show="show" x-transition:enter="transition ease-out duration-300 transform"
                x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-200 transform"
                x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-4"
                x-init="setTimeout(() => show = false, 5000)"
                class="mb-4 flex items-center p-4 rounded-lg shadow-lg {{ session('message_type', 'success') === 'success' ? 'bg-success text-white' : (session('message_type') === 'error' ? 'bg-error text-white' : 'bg-info text-white') }}">
                <div class="flex items-center space-x-3">
                    <i class="{{ session('message_type', 'success') === 'success' ? 'fas fa-check-circle' : (session('message_type') === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-info-circle') }} text-lg"></i>
                    <p class="text-sm font-medium">{{ session('message') }}</p>
                </div>
                <button @click="show = false" class="ml-auto text-white hover:text-white/80 focus:outline-none">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        @endif

        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
            <!-- Order Info -->
            <div class="col-span-12 lg:col-span-8">
                <div class="card bg-white dark:bg-navy-700 rounded-lg shadow-md">
                    <div class="border-b border-slate-200 dark:border-navy-500 p-4 sm:p-5">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 p-2 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                    <i class="fa-solid fa-shopping-cart text-lg"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-slate-800 dark:text-navy-100 ml-2">
                                    Order #{{ $commande->numero }}
                                </h4>
                            </div>
                            <span class="badge px-3 py-1.5 rounded-full text-xs font-medium {{ $commande->statut == 'pending' ? 'bg-warning text-white' : ($commande->statut == 'in_progress' ? 'bg-info text-white' : ($commande->statut == 'completed' ? 'bg-success text-white' : 'bg-error text-white')) }}">
                                {{ ucfirst(str_replace('_', ' ', $commande->statut)) }}
                            </span>
                        </div>
                    </div>
                    <div class="space-y-5 p-4 sm:p-5">
                        <!-- Order Details -->
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                            <div class="block">
                                <span class="font-medium text-slate-700 dark:text-navy-100 flex items-center gap-1">
                                    <i class="fa-solid fa-hashtag text-xs opacity-70"></i>
                                    Order Number
                                </span>
                                <p class="mt-1 text-slate-600 dark:text-navy-200">{{ $commande->numero }}</p>
                            </div>
                            <div class="block">
                                <span class="font-medium text-slate-700 dark:text-navy-100 flex items-center gap-1">
                                    <i class="fa-solid fa-user text-xs opacity-70"></i>
                                    Customer
                                </span>
                                <p class="mt-1 text-slate-600 dark:text-navy-200">
                                    @if($commande->user)
                                        <a href="{{ route('users.show', $commande->user->id) }}" class="text-primary hover:underline">
                                            {{ $commande->user->name }}
                                        </a>
                                    @else
                                        N/A
                                    @endif
                                </p>
                            </div>
                            <div class="block">
                                <span class="font-medium text-slate-700 dark:text-navy-100 flex items-center gap-1">
                                    <i class="fa-solid fa-envelope text-xs opacity-70"></i>
                                    Email
                                </span>
                                <p class="mt-1 text-slate-600 dark:text-navy-200">
                                    {{ $commande->user ? $commande->user->email : 'N/A' }}
                                </p>
                            </div>
                            <div class="block">
                                <span class="font-medium text-slate-700 dark:text-navy-100 flex items-center gap-1">
                                    <i class="fa-solid fa-calendar text-xs opacity-70"></i>
                                    Order Date
                                </span>
                                <p class="mt-1 text-slate-600 dark:text-navy-200">{{ $commande->date_commande }}</p>
                            </div>
                            <div class="block">
                                <span class="font-medium text-slate-700 dark:text-navy-100 flex items-center gap-1">
                                    <i class="fa-solid fa-money-bill-wave text-xs opacity-70"></i>
                                    Total Amount
                                </span>
                                <p class="mt-1 text-slate-600 dark:text-navy-200 font-semibold">{{ number_format($commande->montant_total, 2) }} FCFA</p>
                            </div>
                            <div class="block">
                                <span class="font-medium text-slate-700 dark:text-navy-100 flex items-center gap-1">
                                    <i class="fa-solid fa-building text-xs opacity-70"></i>
                                    Institution
                                </span>
                                <p class="mt-1 text-slate-600 dark:text-navy-200">{{ $commande->institution ?: 'N/A' }}</p>
                            </div>
                        </div>

                        @if ($commande->commentaire)
                            <div class="mt-4">
                                <span class="font-medium text-slate-700 dark:text-navy-100 flex items-center gap-1">
                                    <i class="fa-solid fa-comment text-xs opacity-70"></i>
                                    Comment
                                </span>
                                <div class="mt-2 text-slate-600 dark:text-navy-200 border border-slate-200 dark:border-navy-500 rounded-lg p-3 bg-slate-50 dark:bg-navy-600">
                                    {{ $commande->commentaire }}
                                </div>
                            </div>
                        @endif

                        <!-- Associated Services -->
                        <div class="mt-6 pt-4 border-t border-slate-200 dark:border-navy-500">
                            <span class="font-medium text-slate-800 dark:text-navy-100 text-base flex items-center gap-1">
                                <i class="fa-solid fa-list-check"></i>
                                Ordered Services
                            </span>
                            @if ($commande->commandeServices->isNotEmpty())
                                <div class="mt-3 overflow-x-auto">
                                    <table class="w-full text-left border border-slate-200 dark:border-navy-500 rounded-lg">
                                        <thead class="bg-slate-100 dark:bg-navy-600">
                                            <tr>
                                                <th class="px-4 py-3 text-xs font-semibold uppercase text-slate-800 dark:text-navy-100">Service Name</th>
                                                <th class="px-4 py-3 text-xs font-semibold uppercase text-slate-800 dark:text-navy-100">Quantity</th>
                                                <th class="px-4 py-3 text-xs font-semibold uppercase text-slate-800 dark:text-navy-100">Price</th>
                                                <th class="px-4 py-3 text-xs font-semibold uppercase text-slate-800 dark:text-navy-100">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($commande->commandeServices as $commandeService)
                                                <tr class="border-b border-slate-200 dark:border-navy-500 hover:bg-slate-50 dark:hover:bg-navy-600 transition-colors duration-200">
                                                    <td class="px-4 py-3 text-sm text-slate-600 dark:text-navy-200">
                                                        @if($commandeService->service)
                                                            <a href="{{ route('services.show', $commandeService->service->id) }}" class="hover:text-primary hover:underline">
                                                                {{ $commandeService->service->nom_en }}
                                                            </a>
                                                        @else
                                                            Unknown Service
                                                        @endif
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-slate-600 dark:text-navy-200">{{ $commandeService->quantity }}</td>
                                                    <td class="px-4 py-3 text-sm text-slate-600 dark:text-navy-200">{{ number_format($commandeService->price, 2) }} FCFA</td>
                                                    <td class="px-4 py-3 text-sm text-slate-600 dark:text-navy-200 font-medium">{{ number_format($commandeService->price * $commandeService->quantity, 2) }} FCFA</td>
                                                </tr>
                                            @endforeach
                                            <tr class="bg-slate-50 dark:bg-navy-600">
                                                <td colspan="3" class="px-4 py-3 text-sm text-slate-600 dark:text-navy-200 font-semibold text-right">Total:</td>
                                                <td class="px-4 py-3 text-sm text-primary dark:text-accent-light font-semibold">{{ number_format($commande->montant_total, 2) }} FCFA</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="mt-3 p-4 bg-slate-50 dark:bg-navy-600 rounded-lg border border-slate-200 dark:border-navy-500 text-center">
                                    <p class="text-sm text-slate-600 dark:text-navy-200">No services associated with this order.</p>
                                </div>
                            @endif
                        </div>

                        <!-- Excel File Section -->
                        <div class="mt-6 pt-4 border-t border-slate-200 dark:border-navy-500">
                            <span class="font-medium text-slate-800 dark:text-navy-100 text-base flex items-center gap-1">
                                <i class="fa-solid fa-file-excel"></i>
                                Sample Data File
                            </span>
                            
                            @if ($commande->excel_file)
                                <div class="mt-3 p-4 bg-slate-50 dark:bg-navy-600 rounded-lg border border-slate-200 dark:border-navy-500 flex items-center justify-between">
                                    <div class="flex items-center">
                                        <i class="fa-solid fa-file-excel text-3xl text-green-600 mr-3"></i>
                                        <div>
                                            <p class="text-sm text-slate-800 dark:text-navy-100 font-medium">{{ basename($commande->excel_file) }}</p>
                                            <p class="text-xs text-slate-500 dark:text-navy-300">
                                                Uploaded: {{ \Carbon\Carbon::parse($commande->updated_at)->format('M d, Y, H:i') }}
                                            </p>
                                        </div>
                                    </div>
                                    <a href="{{ route('admin.commande.download.excel', $commande->numero) }}" 
                                       class="btn bg-primary/10 text-primary hover:bg-primary/20 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 rounded-full p-2" 
                                       title="Download Excel File">
                                        <i class="fa-solid fa-download"></i>
                                    </a>
                                </div>
                            @else
                                <div class="mt-3 p-4 bg-slate-50 dark:bg-navy-600 rounded-lg border border-slate-200 dark:border-navy-500 text-center">
                                    <i class="fa-solid fa-file-excel text-3xl text-slate-400 dark:text-navy-300 mb-2"></i>
                                    <p class="text-sm text-slate-600 dark:text-navy-200">No sample data file has been uploaded with this order.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Actions & Status -->
            <div class="col-span-12 lg:col-span-4 space-y-4">

                <!-- Order Status Timeline -->
                <div class="card bg-white dark:bg-navy-700 rounded-lg shadow-md">
                    <div class="border-b border-slate-200 dark:border-navy-500 p-4">
                        <h5 class="font-medium text-slate-700 dark:text-navy-100">
                            <i class="fa-solid fa-chart-line mr-1"></i>
                            Order Status
                        </h5>
                    </div>
                    <div class="p-4">
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <div class="flex h-8 w-8 items-center justify-center rounded-full {{ $commande->statut == 'pending' || $commande->statut == 'in_progress' || $commande->statut == 'completed' ? 'bg-primary text-white' : 'bg-slate-200 dark:bg-navy-500' }}">
                                    <i class="fa-solid fa-check"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="font-medium text-slate-800 dark:text-navy-100">Order Received</p>
                                    <p class="text-xs text-slate-500 dark:text-navy-300">{{ $commande->created_at->format('M d, Y, H:i') }}</p>
                                </div>
                            </div>
                            <div class="h-12 w-px bg-slate-200 dark:bg-navy-500 ml-4"></div>
                            <div class="flex items-center">
                                <div class="flex h-8 w-8 items-center justify-center rounded-full {{ $commande->statut == 'in_progress' || $commande->statut == 'completed' ? 'bg-primary text-white' : 'bg-slate-200 dark:bg-navy-500' }}">
                                    <i class="fa-solid {{ $commande->statut == 'in_progress' || $commande->statut == 'completed' ? 'fa-check' : 'fa-spinner' }}"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="font-medium text-slate-800 dark:text-navy-100">Processing</p>
                                    <p class="text-xs text-slate-500 dark:text-navy-300">
                                        {{ $commande->statut == 'in_progress' || $commande->statut == 'completed' ? 'In progress' : 'Waiting' }}
                                    </p>
                                </div>
                            </div>
                            <div class="h-12 w-px bg-slate-200 dark:bg-navy-500 ml-4"></div>
                            <div class="flex items-center">
                                <div class="flex h-8 w-8 items-center justify-center rounded-full {{ $commande->statut == 'completed' ? 'bg-primary text-white' : 'bg-slate-200 dark:bg-navy-500' }}">
                                    <i class="fa-solid {{ $commande->statut == 'completed' ? 'fa-check' : 'fa-flag-checkered' }}"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="font-medium text-slate-800 dark:text-navy-100">Completed</p>
                                    <p class="text-xs text-slate-500 dark:text-navy-300">
                                        {{ $commande->statut == 'completed' ? 'Order completed' : 'Not completed yet' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Status Update Modal -->
    <div x-data="{ showModal: false }" @open-status-modal.window="showModal = true" @close-status-modal.window="showModal = false"
         class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 transition-opacity duration-300"
         x-show="showModal" x-cloak x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" 
         x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" 
         x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
        <div class="bg-white dark:bg-navy-700 rounded-lg p-6 shadow-lg w-full max-w-md"
             x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" 
             x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-200" 
             x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
            <h3 class="text-lg font-semibold text-slate-800 dark:text-navy-100">Update Order Status</h3>
            <form action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="mt-4">
                    <label class="block">
                        <span class="font-medium text-slate-700 dark:text-navy-100">Status</span>
                        <select name="statut"
                                class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                            <option value="pending" {{ $commande->statut == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="in_progress" {{ $commande->statut == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                            <option value="completed" {{ $commande->statut == 'completed' ? 'selected' : '' }}>Completed</option>
                            <option value="cancelled" {{ $commande->statut == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </label>

                    <label class="block mt-4">
                        <span class="font-medium text-slate-700 dark:text-navy-100">Add Note (Optional)</span>
                        <textarea name="note" rows="3"
                                class="form-textarea mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                placeholder="Add a note about this status update"></textarea>
                    </label>

                    <div class="mt-4">
                        <label class="inline-flex items-center space-x-2">
                            <input class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" 
                                   type="checkbox" name="notify_customer" value="1" checked>
                            <span>Notify Customer</span>
                        </label>
                    </div>
                </div>
                <div class="mt-6 flex justify-end space-x-3">
                    <button type="button"
                        class="btn px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:text-navy-100 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
                        @click="showModal = false">
                        Cancel
                    </button>
                    <button type="submit"
                            class="btn bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                        Update Status
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div x-data="{ showModal: false, deleteId: null }" 
         @confirm-delete.window="showModal = true; deleteId = $event.detail.id"
         class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 transition-opacity duration-300"
         x-show="showModal" x-cloak x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" 
         x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" 
         x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
        <div class="bg-white dark:bg-navy-700 rounded-lg p-6 shadow-lg w-full max-w-md"
             x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" 
             x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-200" 
             x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
            <h3 class="text-lg font-semibold text-slate-800 dark:text-navy-100">Confirm Deletion</h3>
            <p class="mt-2 text-sm text-slate-600 dark:text-navy-200">
                Are you sure you want to delete this order? This action cannot be undone.
            </p>
            <div class="mt-6 flex justify-end space-x-3">
                <button
                    class="btn px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:text-navy-100 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
                    @click="showModal = false">
                    Cancel
                </button>
                <form :action="`{{ url('admin/commandes') }}/${deleteId}`" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="btn bg-error px-4 py-2 text-sm font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">
                        Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection