@extends('layouts.provider')

@section('title', 'Paramètres - Services & Tarifs')
@section('page-title', 'Paramètres')

@section('content')
<div class="space-y-6">
    <x-settings-tabs active="services" />

    <x-card>
        <x-slot name="header">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Services & Tarifs ({{ $services->total() }})</h3>
                <x-button href="{{ route('provider.services.create') }}" size="sm">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Nouveau
                </x-button>
            </div>
        </x-slot>

        <!-- Filtres -->
        <div class="mb-6">
            <form method="GET" action="{{ route('provider.services.index') }}" class="flex gap-2">
                <input type="text" 
                       name="search" 
                       value="{{ request('search') }}" 
                       placeholder="Rechercher par nom..."
                       class="flex-1 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <select name="status" class="w-32 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                    <option value="">Tous</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Actifs</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactifs</option>
                </select>
                <button type="submit" class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700" title="Rechercher">
                    <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
                @if(request('search') || request('status'))
                <a href="{{ route('provider.services.index') }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700" title="Réinitialiser">
                    <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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </a>
                @endif
            </form>
        </div>

    @if($services->count() > 0)
        <div class="space-y-3" data-services-list>
            @foreach($services as $service)
                <x-card class="hover:shadow-md transition-shadow {{ !$service->is_active ? 'opacity-60' : '' }} border-l-4 md:!border-l-[1px] md:!border-l-gray-200 md:dark:!border-l-gray-700" style="border-left-color: {{ $service->color ?? '#e5e7eb' }}">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="flex items-center mb-2">
                                @if($service->color)
                                    <div class="hidden md:block w-4 h-4 rounded-full mr-2" style="background-color: {{ $service->color }}"></div>
                                @endif
                                <div class="font-semibold text-gray-900 dark:text-white">{{ $service->name }}</div>
                            </div>
                        </div>
                        <div class="text-right ml-4">
                            <div class="text-sm space-y-1 mb-2">
                                <div class="text-gray-600 dark:text-gray-400">{{ $service->formatted_duration }} • <span class="text-xs {{ $service->appointments_count > 0 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-500' }}">{{ $service->appointments_count > 0 ? "Utilisé dans {$service->appointments_count} rendez-vous" : 'Pas encore utilisé' }}</span></div>
                                @if($service->price_ht !== null)
                                    <div class="font-medium text-gray-900 dark:text-white">{{ format_currency($service->price_ht) }} TND HT</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">TVA {{ number_format($service->vat_rate, 0) }}%: {{ format_currency($service->vat_amount) }} TND</div>
                                    <div class="text-sm font-semibold text-blue-600 dark:text-blue-400">{{ format_currency($service->price_ttc) }} TND TTC</div>
                                @else
                                    <div class="font-medium text-gray-900 dark:text-white">{{ $service->formatted_price }}</div>
                                @endif
                            </div>
                            <div class="flex gap-2 justify-end">
                                <x-button href="{{ route('provider.services.edit', $service->uuid) }}" variant="secondary" size="sm">
                                    Éditer
                                </x-button>
                                @if($service->appointments_count == 0)
                                    <x-delete-confirm 
                                        :action="route('provider.services.destroy', $service->uuid)" 
                                        message="Êtes-vous sûr de vouloir supprimer ce service ?"
                                    />
                                @endif
                            </div>
                        </div>
                    </div>
                </x-card>
            @endforeach
        </div>
        <div class="mt-6" data-services-pagination>
            {{ $services->appends(request()->query())->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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucun service</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Commencez par créer votre premier service.</p>
            </div>
        @endif
    </x-card>
</div>

<script>
function loadServicesPage(url) {
    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newList = doc.querySelector('[data-services-list]');
            const newPagination = doc.querySelector('[data-services-pagination]');
            if (newList && newPagination) {
                document.querySelector('[data-services-list]').innerHTML = newList.innerHTML;
                document.querySelector('[data-services-pagination]').innerHTML = newPagination.innerHTML;
                window.history.pushState({}, '', url);
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
}

document.addEventListener('click', function(e) {
    const link = e.target.closest('[data-services-pagination] a');
    if (link && link.href) {
        e.preventDefault();
        loadServicesPage(link.href);
    }
});

document.addEventListener('change', function(e) {
    if (e.target.matches('[data-pagination-select]')) {
        if (e.target.value) {
            loadServicesPage(e.target.value);
        }
    }
});
</script>
@endsection