@extends('back.layout')

@section('content')
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center justify-between py-5 lg:py-6">
            <div class="flex items-center space-x-1">
                <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50">
                    <i class="fa-solid fa-user mr-2"></i>Détails du client
                </h2>
                <div class="badge {{ $client->is_internal ? 'bg-primary' : 'bg-info' }} text-white">
                    {{ $client->is_internal ? 'Client interne' : 'Client externe' }}
                </div>
                <div class="badge {{ $client->statut ? 'bg-error' : 'bg-success' }} text-white ml-2">
                    {{ $client->statut ? 'Bloqué' : 'Actif' }}
                </div>
            </div>
            <div class="flex items-center space-x-2">
                @can('manage-clients')
                <a href="{{ route('clients.edit', $client->id) }}"
                    class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90">
                    <i class="fa-solid fa-pen-to-square mr-1"></i>
                    <span>Modifier</span>
                </a>
                @endcan
                <a href="{{ route('clients.index') }}"
                    class="btn 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">
                    <i class="fa-solid fa-arrow-left mr-1"></i>
                    <span>Retour</span>
                </a>
            </div>
        </div>

        @if (session('success'))
            <div class="alert-success fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 border-green-500 bg-green-100 p-4 text-green-800 shadow-lg dark:bg-green-900 dark:text-green-200 animate-fade-in"
                x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0">
                <div class="flex items-center space-x-3">
                    <svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span style="color: white; font-weight: bold">{{ session('success') }}</span>
                </div>
            </div>
        @endif

        @if (session('error'))
            <div class="alert-error fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 border-red-500 bg-red-100 p-4 text-red-800 shadow-lg dark:bg-red-900 dark:text-red-200 animate-fade-in"
                x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0">
                <div class="flex items-center space-x-3">
                    <svg class="h-6 w-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span style="color: white; font-weight: bold">{{ session('error') }}</span>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
            <!-- Profil du client -->
            <div class="col-span-12 lg:col-span-4">
                <div class="card p-4 sm:p-5">
                    <div class="flex items-center space-x-4">
                        <div class="avatar h-14 w-14">
                            @if($client->profile_photo_path)
                                <img class="rounded-full object-cover" src="{{ Storage::url($client->profile_photo_path) }}" alt="Photo de profil">
                            @else
                                <div class="is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                    {{ strtoupper(substr($client->name, 0, 1)) }}
                                </div>
                            @endif
                        </div>
                        <div>
                            <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                                {{ $client->name }}
                            </h3>
                            <p class="text-xs+ text-slate-400 dark:text-navy-300">
                                ID: {{ $client->id }}
                            </p>
                        </div>
                    </div>

                    <div class="mt-4 space-y-4">
                        <div class="flex justify-between">
                            <div class="font-medium text-slate-700 dark:text-navy-100">Email</div>
                            <div>{{ $client->email }}</div>
                        </div>

                        <div class="flex justify-between">
                            <div class="font-medium text-slate-700 dark:text-navy-100">Téléphone</div>
                            <div>{{ $client->telephone ?: '-' }}</div>
                        </div>

                        <div class="flex justify-between">
                            <div class="font-medium text-slate-700 dark:text-navy-100">Pays</div>
                            <div>{{ $client->pays ?: '-' }}</div>
                        </div>

                        <div class="flex justify-between">
                            <div class="font-medium text-slate-700 dark:text-navy-100">Statut</div>
                            <div class="{{ $client->statut ? 'text-error' : 'text-success' }}">
                                {{ $client->statut ? 'Bloqué' : 'Actif' }}
                            </div>
                        </div>

                        <div class="flex justify-between">
                            <div class="font-medium text-slate-700 dark:text-navy-100">Type de client</div>
                            <div class="{{ $client->is_internal ? 'text-primary' : 'text-info' }}">
                                {{ $client->is_internal ? 'Client interne' : 'Client externe' }}
                            </div>
                        </div>

                        <div class="flex justify-between">
                            <div class="font-medium text-slate-700 dark:text-navy-100">Date d'inscription</div>
                            <div>{{ $client->created_at->format('d/m/Y') }}</div>
                        </div>
                    </div>

                    {{-- <div class="mt-5 space-y-4">
                        @can('manage-clients')
                        <div class="grid grid-cols-2 gap-4">
                            @if($client->statut)
                                <button onclick="confirmActivateClient({{ $client->id }})"
                                    class="btn bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
                                    <i class="fa fa-check mr-1"></i>
                                    Activer
                                </button>
                            @else
                                <button onclick="confirmBlockClient({{ $client->id }})"
                                    class="btn bg-error/10 font-medium text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
                                    <i class="fa fa-ban mr-1"></i>
                                    Bloquer
                                </button>
                            @endif

                            @if($client->is_internal)
                                <button onclick="confirmChangeClientType({{ $client->id }}, 'externe')"
                                    class="btn bg-info/10 font-medium text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
                                    <i class="fa-solid fa-user-tie mr-1"></i>
                                    Marquer externe
                                </button>
                            @else
                                <button onclick="confirmChangeClientType({{ $client->id }}, 'interne')"
                                    class="btn bg-primary/10 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25">
                                    <i class="fa-solid fa-user-check mr-1"></i>
                                    Marquer interne
                                </button>
                            @endif
                        </div>
                        @endcan
                    </div> --}}
                </div>
            </div>

            <!-- Informations du client -->
            <div class="col-span-12 lg:col-span-8">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="card p-4 sm:p-5">
                        <h2 class="text-lg font-medium tracking-wide text-slate-700 dark:text-navy-100 mb-4">
                            <i class="fa-solid fa-location-dot mr-1"></i> Adresse
                        </h2>
                        <div class="space-y-4">
                            <div>
                                <span class="font-medium text-slate-600 dark:text-navy-100">Adresse:</span>
                                <p class="mt-1">{{ $client->adresse }}</p>
                            </div>
                            
                            @if($client->complement_adresse)
                            <div>
                                <span class="font-medium text-slate-600 dark:text-navy-100">Complément:</span>
                                <p class="mt-1">{{ $client->complement_adresse }}</p>
                            </div>
                            @endif
                            
                            <div>
                                <span class="font-medium text-slate-600 dark:text-navy-100">Code postal:</span>
                                <p class="mt-1">{{ $client->code_postal }}</p>
                            </div>
                            
                            <div>
                                <span class="font-medium text-slate-600 dark:text-navy-100">Ville:</span>
                                <p class="mt-1">{{ $client->ville }}</p>
                            </div>
                            
                            @if($client->pays)
                            <div>
                                <span class="font-medium text-slate-600 dark:text-navy-100">Pays:</span>
                                <p class="mt-1">{{ $client->pays }}</p>
                            </div>
                            @endif
                        </div>
                    </div>

                    <div class="card p-4 sm:p-5">
                        <h2 class="text-lg font-medium tracking-wide text-slate-700 dark:text-navy-100 mb-4">
                            <i class="fa-solid fa-shopping-cart mr-1"></i> Commandes
                        </h2>
                        
                        @if($client->commandes && $client->commandes->count() > 0)
                            <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
                                <table class="w-full text-left">
                                    <thead>
                                        <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                            <th class="whitespace-nowrap px-3 py-3 font-semibold text-slate-800 dark:text-navy-100">#</th>
                                            <th class="whitespace-nowrap px-3 py-3 font-semibold text-slate-800 dark:text-navy-100">Date</th>
                                            <th class="whitespace-nowrap px-3 py-3 font-semibold text-slate-800 dark:text-navy-100">Statut</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($client->commandes->take(5) as $commande)
                                            <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                                <td class="whitespace-nowrap px-3 py-3">{{ $commande->numero }}</td>
                                                <td class="whitespace-nowrap px-3 py-3">{{ $commande->created_at->format('d/m/Y') }}</td>
                                                <td class="whitespace-nowrap px-3 py-3">
                                                    <div class="badge 
                                                    @if($commande->statut == 'pending' || $commande->statut == 'En attente')
                                                        bg-warning/10 text-warning
                                                    @elseif($commande->statut == 'processing' || $commande->statut == 'En cours')
                                                        bg-info/10 text-info
                                                    @elseif($commande->statut == 'completed' || $commande->statut == 'Complété')
                                                        bg-success/10 text-success
                                                    @elseif($commande->statut == 'cancelled' || $commande->statut == 'Annulé')
                                                        bg-error/10 text-error
                                                    @else
                                                        bg-slate-100 text-slate-600
                                                    @endif
                                                    ">
                                                        {{ $commande->statut }}
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            @if($client->commandes->count() > 5)
                                <div class="mt-4 text-center">
                                    <a href="{{ route('commandes.index', ['client' => $client->id]) }}"
                                       class="btn bg-primary/10 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25">
                                        Voir toutes les commandes
                                    </a>
                                </div>
                            @endif
                        @else
                            <div class="flex flex-col items-center justify-center h-40">
                                <i class="fa-solid fa-shopping-basket text-3xl text-slate-400 mb-3"></i>
                                <p class="text-slate-500">Aucune commande trouvée pour ce client.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Scripts pour les actions -->
    <script>
        function confirmActivateClient(clientId) {
            if (confirm("Êtes-vous sûr de vouloir activer ce client ?")) {
                document.getElementById('toggle-client-id').value = clientId;
                document.getElementById('toggle-action').value = 'activate';
                document.getElementById('toggle-client-form').submit();
            }
        }
        
        function confirmBlockClient(clientId) {
            if (confirm("Êtes-vous sûr de vouloir bloquer ce client ?")) {
                document.getElementById('toggle-client-id').value = clientId;
                document.getElementById('toggle-action').value = 'block';
                document.getElementById('toggle-client-form').submit();
            }
        }
        
        function confirmChangeClientType(clientId, type) {
            if (confirm(`Êtes-vous sûr de vouloir marquer ce client comme ${type} ?`)) {
                document.getElementById('change-type-client-id').value = clientId;
                document.getElementById('change-type').value = type;
                document.getElementById('change-type-form').submit();
            }
        }
    </script>
@endsection