@extends('layouts.provider')

@section('title', isset($service) ? 'Modifier le Service' : 'Nouveau Service')
@section('page-title', 'Paramètres')
@section('footer-class', 'footer-spacing')

@section('content')
@php $pageWidth = 'narrow'; @endphp
<div class="space-y-3">
    <x-settings-tabs active="services" />
    <x-appointment-tabs active="services" />
    
    <x-card>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ isset($service) ? 'Modifier le service' : 'Nouveau service' }}</h3>
            <x-button href="{{ route('provider.appointment-settings.index', ['tab' => 'services']) }}" variant="secondary" size="sm">
                <svg class="w-4 h-4 md:mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                <span class="hidden md:inline">Retour</span>
            </x-button>
        </div>
    </x-slot>

<form id="service-form" action="{{ isset($service) ? route('provider.services.update', $service->uuid) : route('provider.services.store') }}" method="POST" class="space-y-6" 
    x-data="{
        price: {{ old('price', isset($service) && $service->display_mode === 'ttc' ? $service->price_ttc : (isset($service) && $service->price_ht ? $service->price_ht : (isset($service) ? $service->base_price : 0))) }},
        displayMode: '{{ old('display_mode', isset($service) ? $service->display_mode : 'ht') }}',
        vatRate: parseFloat({{ old('vat_rate', isset($service) ? $service->vat_rate : ($taxes->first()->rate ?? 0)) }}),
        isVatExempt: {{ old('vat_rate', isset($service) ? $service->vat_rate : ($taxes->first()->rate ?? 0)) == 0 ? 'true' : 'false' }},
        get priceHt() {
            if (this.displayMode === 'ht') return parseFloat(this.price) || 0;
            return (parseFloat(this.price) || 0) / (1 + this.vatRate / 100);
        },
        get vatAmount() {
            return this.priceHt * (this.vatRate / 100);
        },
        get priceTtc() {
            return this.priceHt + this.vatAmount;
        },
        toggleVatExempt() {
            if (this.isVatExempt) {
                this.vatRate = 0;
                this.displayMode = 'ht';
            } else {
                this.vatRate = {{ $taxes->first()->rate ?? 0 }};
            }
        }
    }">
    @csrf
    @if(isset($service))
        @method('PUT')
    @endif
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="md:col-span-2">
            <x-input 
                name="name" 
                label="Nom du service" 
                :value="old('name', $service->name ?? '')" 
                placeholder="Ex: Consultation, Séance individuelle..."
                error="{{ $errors->first('name') }}"
                required />
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <div class="flex items-center justify-between mb-2">
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium">Prix <span class="text-red-500">*</span></label>
                <div class="flex items-center gap-4">
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="display_mode" value="ht" x-model="displayMode" class="w-4 h-4 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">HT</span>
                    </label>
                    <label class="flex items-center" :class="isVatExempt ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'">
                        <input type="radio" name="display_mode" value="ttc" x-model="displayMode" :disabled="isVatExempt" class="w-4 h-4 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">TTC</span>
                    </label>
                </div>
            </div>
            <div class="space-y-3">
                <div class="relative">
                    <input type="number" 
                        x-model="price" 
                        step="0.001" 
                        min="0" 
                        placeholder="0.000"
                        class="w-full px-4 py-2 pr-16 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 {{ $errors->has('price') ? 'border-red-500' : '' }}">
                    <div class="absolute inset-y-0 right-0 flex items-center">
                        <span class="px-3 text-gray-500 dark:text-gray-400 text-sm border-l border-gray-300 dark:border-gray-600">TND</span>
                    </div>
                </div>
                
                <div>
                    <label class="block text-gray-700 dark:text-gray-300 text-xs mb-1">TVA</label>
                    <select x-model.number="vatRate" :disabled="isVatExempt" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
                        @forelse($taxes as $tax)
                            <option value="{{ $tax->rate }}" :selected="parseFloat({{ $tax->rate }}) === vatRate">{{ $tax->label }}</option>
                        @empty
                            <option value="0">Aucune taxe disponible</option>
                        @endforelse
                    </select>
                    <input type="hidden" name="vat_rate" :value="vatRate">
                    <label class="flex items-center mt-2 cursor-pointer">
                        <input type="checkbox" x-model="isVatExempt" @change="toggleVatExempt()" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Exonéré TVA</span>
                    </label>
                </div>

                <input type="hidden" name="price_ht" :value="priceHt.toFixed(3)">
                <input type="hidden" name="base_price" :value="priceHt.toFixed(3)">

                @if($errors->has('price') || $errors->has('price_ht'))
                    <p class="text-sm text-red-600">{{ $errors->first('price') ?: $errors->first('price_ht') }}</p>
                @endif
            </div>
        </div>

        <div>
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Résultat :</label>
            <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg space-y-2 text-sm">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600 dark:text-gray-400">Prix saisi:</span>
                    <span class="font-medium text-gray-900 dark:text-white" x-text="parseFloat(price || 0).toFixed(3) + ' TND ' + (displayMode === 'ht' ? 'HT' : 'TTC')"></span>
                </div>
                <div class="h-px bg-blue-200 dark:bg-blue-700 my-2"></div>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">HT:</span>
                    <span class="font-semibold text-gray-900 dark:text-white" x-text="priceHt.toFixed(3) + ' TND'"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">TVA <span x-text="'(' + parseFloat(vatRate) + '%)'" class="text-xs"></span>:</span>
                    <span class="font-semibold text-gray-900 dark:text-white" x-text="vatAmount.toFixed(3) + ' TND'"></span>
                </div>
                <div class="flex justify-between pt-2 border-t border-blue-200 dark:border-blue-700">
                    <span class="text-gray-600 dark:text-gray-400">TTC:</span>
                    <span class="font-bold text-blue-600 dark:text-blue-400" x-text="priceTtc.toFixed(3) + ' TND'"></span>
                </div>
            </div>
        </div>
    </div>

    <div>
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Durée <span class="text-red-500">*</span></label>
        <div class="flex items-center gap-2">
            <button type="button" onclick="adjustDuration(-15)" class="px-3 py-2 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 font-bold text-lg leading-none">−</button>
            <input type="text" id="duration_display" readonly class="w-24 text-center px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg {{ $errors->has('duration_minutes') ? 'border-red-500' : '' }}">
            <input type="hidden" id="duration_minutes" name="duration_minutes" value="{{ old('duration_minutes', $service->duration_minutes ?? 60) }}" required>
            <button type="button" onclick="adjustDuration(15)" class="px-3 py-2 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 font-bold text-lg leading-none">+</button>
        </div>
        @if($errors->has('duration_minutes'))
            <p class="mt-1 text-sm text-red-600">{{ $errors->first('duration_minutes') }}</p>
        @endif
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="md:col-span-2">
            <x-textarea 
                name="description" 
                label="Description" 
                :value="old('description', $service->description ?? '')" 
                placeholder="Décrivez votre service, les bénéfices, ce qui est inclus..."
                rows="4" />
        </div>
    </div>

    <div class="grid grid-cols-[auto_1fr] gap-6">
        <div>
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Couleur (optionnel)</label>
            <input type="color" name="color" value="{{ old('color', $service->color ?? '#3C50E0') }}" 
                   class="w-full h-10 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer">
            @error('color')<span class="text-red-500 text-xs mt-1 block">{{ $message }}</span>@enderror
        </div>

        <div class="flex items-center">
            <div class="flex items-center h-5">
                <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', $service->is_active ?? true) ? 'checked' : '' }} class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
            </div>
            <div class="ml-3">
                <label for="is_active" class="text-sm font-medium text-gray-700 dark:text-gray-300">Service actif</label>
                <p class="text-sm text-gray-500 dark:text-gray-400">Ce service sera disponible lors de la création de rendez-vous</p>
            </div>
        </div>
    </div>

</form>
</x-card>
</div>

<!-- Boutons d'action -->
<div id="normal-button" class="mt-6 -mx-4 -mb-4 p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg">
    <div class="flex gap-3">
        <x-button href="{{ route('provider.appointment-settings.index', ['tab' => 'services']) }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="service-form" variant="primary" class="flex-1">
            {{ isset($service) ? 'Modifier le service' : 'Créer le service' }}
        </x-button>
    </div>
</div>

<!-- Bouton fixe -->
<div id="fixed-button" class="hidden fixed bottom-16 left-0 right-0 p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg z-30">
    <div class="flex gap-3">
        <x-button href="{{ route('provider.appointment-settings.index', ['tab' => 'services']) }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="service-form" variant="primary" class="flex-1">
            {{ isset($service) ? 'Modifier le service' : 'Créer le service' }}
        </x-button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const normalButton = document.getElementById('normal-button');
    const fixedButton = document.getElementById('fixed-button');
    
    function toggleButton() {
        const rect = normalButton.getBoundingClientRect();
        const isFullyVisible = rect.bottom <= (window.innerHeight - 64);
        
        if (isFullyVisible) {
            fixedButton.classList.add('hidden');
        } else {
            fixedButton.classList.remove('hidden');
        }
    }
    
    window.addEventListener('scroll', toggleButton);
    toggleButton();
});

function formatDuration(minutes) {
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (hours > 0 && mins > 0) {
        return hours + 'h' + (mins < 10 ? '0' : '') + mins;
    } else if (hours > 0) {
        return hours + 'h';
    } else {
        return mins + 'min';
    }
}

function adjustDuration(change) {
    const input = document.getElementById('duration_minutes');
    const display = document.getElementById('duration_display');
    let value = parseInt(input.value) || 60;
    value = Math.max(15, value + change);
    input.value = value;
    display.value = formatDuration(value);
}

document.addEventListener('DOMContentLoaded', function() {
    const display = document.getElementById('duration_display');
    const input = document.getElementById('duration_minutes');
    display.value = formatDuration(parseInt(input.value) || 60);
});
</script>
@endsection