@extends('layouts.provider')

@section('title', $client->full_name)
@section('page-title', 'Mes Clients')

@section('content')
<div class="space-y-6">
    <!-- Header avec actions -->
    <x-card>
            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-6">
                <div>
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-2">{{ $client->full_name }}</h1>
                    <div class="flex flex-wrap gap-4 text-sm text-gray-600 dark:text-gray-400">
                        @if($client->birth_date)
                            <span>{{ $client->birth_date->age }} ans</span>
                        @endif
                        @if($client->gender !== 'unknown')
                            <span>{{ ucfirst($client->gender === 'male' ? 'Homme' : ($client->gender === 'female' ? 'Femme' : 'Autre')) }}</span>
                        @endif
                        @if($client->last_visit_at)
                            <span>Dernière visite : {{ $client->last_visit_at->format('d/m/Y') }}</span>
                        @endif
                    </div>
                </div>
                <div class="flex flex-row gap-2 mt-4 sm:mt-0">
                    <a href="{{ route('provider.clients.index') }}" class="inline-flex items-center justify-center w-8 h-8 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                    </a>
                    <a href="{{ route('provider.clients.edit', $client->uuid) }}?from=show" class="inline-flex items-center justify-center h-8 px-3 text-sm bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                        </svg>
                        Éditer
                    </a>
                    @if($client->trashed())
                        <form action="{{ route('provider.clients.restore', $client->uuid) }}" method="POST" class="inline">
                            @csrf
                            <input type="hidden" name="from" value="show">
                            <button type="submit" class="inline-flex items-center justify-center h-8 px-3 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                </svg>
                                Restaurer
                            </button>
                        </form>
                    @else
                        <x-delete-confirm 
                            :action="route('provider.clients.destroy', $client->uuid)" 
                            message="Ce client sera archivé et pourra être restauré ultérieurement."
                            button-text="Archiver"
                            button-variant="secondary"
                            from="show"
                        />
                    @endif
                    @if($client->appointments->count() === 0)
                        <x-delete-confirm 
                            :action="route('provider.clients.force-destroy', $client->uuid)" 
                            message="Cette action est irréversible. Le client sera définitivement supprimé."
                            button-text="Supprimer"
                            button-variant="danger"
                            from="show"
                        />
                    @endif
                </div>
            </div>

            <!-- Informations de contact -->
            <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
                @if($client->phone)
                <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <div class="flex items-center mb-1">
                        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Téléphone</p>
                    </div>
                    <p class="font-medium dark:text-white">{{ $client->phone }}</p>
                </div>
                @endif

                @if($client->email)
                <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <div class="flex items-center mb-1">
                        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Email</p>
                    </div>
                    <p class="font-medium dark:text-white">{{ $client->email }}</p>
                </div>
                @endif

                @if($client->birth_date)
                <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <div class="flex items-center mb-1">
                        <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Date de naissance</p>
                    </div>
                    <p class="font-medium dark:text-white">{{ $client->birth_date->format('d/m/Y') }}</p>
                </div>
                @endif
            </div>

            @if($client->notes)
            <!-- Notes -->
            <div class="mt-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Notes</h3>
                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                    <p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{ $client->notes }}</p>
                </div>
            </div>
            @endif
    </x-card>

    <!-- Onglets pour les modules futurs -->
    <x-card>
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="-mb-px flex space-x-8 px-4 sm:px-6" aria-label="Tabs">
                <button class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" 
                        onclick="showTab('appointments')">
                    Rendez-vous
                </button>
                <button class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" 
                        onclick="showTab('payments')">
                    Factures
                </button>
            </nav>
        </div>

        <!-- Contenu des onglets -->
        <div class="p-4 sm:p-6">
            <!-- Onglet Séances -->
            <div id="appointments-tab" class="tab-content">
                @if($appointments->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-gray-700">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Date</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Horaire</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Service</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Prix</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Statut</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Facturé</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                @foreach($appointments as $appointment)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300">{{ $appointment->start_time->format('d/m/Y') }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300">{{ $appointment->start_time->format('H:i') }} - {{ $appointment->end_time->format('H:i') }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300">{{ $appointment->service->name ?? '-' }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold dark:text-white">{{ format_currency($appointment->price_at_booking) }} TND</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            @php
                                                $statusColors = [
                                                    'scheduled' => 'bg-blue-100 text-blue-800',
                                                    'complete' => 'bg-green-100 text-green-800',
                                                    'cancelled' => 'bg-red-100 text-red-800',
                                                    'in_progress' => 'bg-orange-100 text-orange-800',
                                                    'late' => 'bg-red-100 text-red-800',
                                                ];
                                                $colorClass = $statusColors[$appointment->status] ?? 'bg-gray-100 text-gray-800';
                                            @endphp
                                            <span class="px-2 py-1 text-xs rounded-full {{ $colorClass }}">{{ $appointment->getStatusLabel() }}</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            @if($appointment->payments && $appointment->payments->count() > 0)
                                                <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">✓ Oui</span>
                                            @else
                                                <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">✗ Non</span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            <a href="{{ route('provider.appointments.edit', $appointment->uuid) }}?from=client&client_uuid={{ $client->uuid }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" title="Modifier">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                </svg>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
                        Total rendez-vous : <span class="font-bold">{{ $client->appointments()->count() }}</span>
                    </div>
                    <div class="mt-4">
                        {{ $appointments->appends(['tab' => 'appointments'])->links() }}
                    </div>
                @else
                    <div class="text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucun rendez-vous pour le moment</h3>
                    </div>
                @endif
            </div>

            <!-- Onglet Paiements -->
            <div id="payments-tab" class="tab-content hidden">
                @if($payments->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-gray-700">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Date</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Montant</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Méthode</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">N° Facture</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                @foreach($payments as $payment)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300">{{ $payment->payment_date->format('d/m/Y') }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold dark:text-white">{{ format_currency($payment->amount) }} {{ $payment->currency }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300">
                                            @switch($payment->method)
                                                @case('cash') Espèces @break
                                                @case('card') Carte @break
                                                @case('bank_transfer') Virement @break
                                                @case('other') Autre @break
                                            @endswitch
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300">{{ $payment->invoice_number ?? '-' }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            <div class="flex items-center gap-2">
                                                <a href="{{ route('provider.payments.edit', $payment->uuid) }}?from=client" class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300" title="Modifier">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                    </svg>
                                                </a>
                                                <a href="{{ route('provider.payments.pdf', $payment->uuid) }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" title="Télécharger la facture">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                                    </svg>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
                        Total encaissé : <span class="font-bold">{{ format_currency($client->payments()->sum('amount')) }} TND</span>
                    </div>
                    <div class="mt-4">
                        {{ $payments->appends(['tab' => 'payments'])->fragment('payments-tab')->links() }}
                    </div>
                @else
                    <div class="text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucune facture pour le moment</h3>
                    </div>
                @endif
            </div>
        </div>
    </x-card>
</div>

<script>
function showTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
    document.querySelectorAll('nav button').forEach(btn => {
        btn.classList.remove('border-blue-500', 'text-blue-600');
        btn.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    });
    document.getElementById(tabName + '-tab').classList.remove('hidden');
    event.target.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    event.target.classList.add('border-blue-500', 'text-blue-600');
}

if (window.location.hash === '#payments-tab') {
    document.getElementById('payments-tab').classList.remove('hidden');
    document.getElementById('appointments-tab').classList.add('hidden');
    document.querySelectorAll('nav button')[1].classList.add('border-blue-500', 'text-blue-600');
    document.querySelectorAll('nav button')[1].classList.remove('border-transparent', 'text-gray-500');
    document.querySelectorAll('nav button')[0].classList.remove('border-blue-500', 'text-blue-600');
    document.querySelectorAll('nav button')[0].classList.add('border-transparent', 'text-gray-500');
}

// AJAX pagination
document.addEventListener('click', function(e) {
    const paginationLink = e.target.closest('nav[role="navigation"] a');
    if (paginationLink) {
        e.preventDefault();
        loadPage(paginationLink.href);
    }
});

document.addEventListener('change', function(e) {
    if (e.target.matches('nav[role="navigation"] select')) {
        const url = e.target.value;
        if (url) {
            e.preventDefault();
            e.stopImmediatePropagation();
            loadPage(url);
        }
    }
}, true);

document.addEventListener('submit', function(e) {
    const form = e.target.closest('nav[role="navigation"] form');
    if (form) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }
}, true);

function loadPage(url) {
    fetch(url, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(response => response.text())
    .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const activeTab = document.querySelector('.tab-content:not(.hidden)');
        const newContent = doc.querySelector('#' + activeTab.id);
        if (newContent) {
            activeTab.innerHTML = newContent.innerHTML;
        }
    });
}
</script>
@endsection