@extends('layouts.admin-modern')

@section('title', 'Paramètres d\'abonnement')
@section('page-title', 'Paramètres d\'abonnement')

@section('content')
<div class="page-header">
    <h1 class="page-title">💳 Paramètres d'abonnement</h1>
    <p class="page-subtitle">Gérez le mode abonnement pour les nouveaux prestataires</p>
</div>

@if(session('success'))
    <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
        <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
    </div>
@endif

<div class="card-base">
    <form action="{{ route('admin.settings.subscription.update') }}" method="POST">
        @csrf
        @method('PUT')

        <!-- Activation du mode abonnement -->
        <div class="mb-8 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-toggle-on mr-2 text-blue-600"></i>
                        Mode abonnement
                    </h3>
                    <p class="text-sm text-gray-600 mt-1">
                        Quand activé, les nouveaux prestataires doivent payer pour s'inscrire
                    </p>
                </div>
                <div class="flex items-center">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="hidden" name="subscription_enabled" value="0">
                        <input type="checkbox" name="subscription_enabled" value="1" 
                            {{ ($settings['subscription_enabled'] ?? '0') === '1' ? 'checked' : '' }}
                            class="sr-only peer">
                        <div class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
                        <span class="ms-3 text-sm font-medium text-gray-900">
                            {{ ($settings['subscription_enabled'] ?? '0') === '1' ? 'Activé' : 'Désactivé' }}
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Prix de l'abonnement -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-euro-sign mr-1 text-green-600"></i>
                    Prix de l'abonnement
                </label>
                <div class="relative">
                    <input type="number" name="subscription_price" step="0.01" min="0"
                        value="{{ $settings['subscription_price'] ?? '29.99' }}" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg font-semibold @error('subscription_price') border-red-500 @enderror">
                    <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 font-medium">€</span>
                </div>
                @error('subscription_price')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
                <p class="text-xs text-gray-500 mt-1">Ce prix sera affiché aux prestataires lors de l'inscription</p>
            </div>

            <!-- Devise -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-coins mr-1 text-yellow-600"></i>
                    Devise
                </label>
                <select name="subscription_currency" 
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('subscription_currency') border-red-500 @enderror">
                    <option value="EUR" {{ ($settings['subscription_currency'] ?? 'EUR') === 'EUR' ? 'selected' : '' }}>EUR (€)</option>
                    <option value="USD" {{ ($settings['subscription_currency'] ?? '') === 'USD' ? 'selected' : '' }}>USD ($)</option>
                    <option value="GBP" {{ ($settings['subscription_currency'] ?? '') === 'GBP' ? 'selected' : '' }}>GBP (£)</option>
                    <option value="MAD" {{ ($settings['subscription_currency'] ?? '') === 'MAD' ? 'selected' : '' }}>MAD (DH)</option>
                </select>
                @error('subscription_currency')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Durée de l'abonnement -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-calendar-alt mr-1 text-purple-600"></i>
                    Durée de l'abonnement (jours)
                </label>
                <select name="subscription_duration" 
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('subscription_duration') border-red-500 @enderror">
                    <option value="30" {{ ($settings['subscription_duration'] ?? '30') == '30' ? 'selected' : '' }}>30 jours (1 mois)</option>
                    <option value="90" {{ ($settings['subscription_duration'] ?? '') == '90' ? 'selected' : '' }}>90 jours (3 mois)</option>
                    <option value="180" {{ ($settings['subscription_duration'] ?? '') == '180' ? 'selected' : '' }}>180 jours (6 mois)</option>
                    <option value="365" {{ ($settings['subscription_duration'] ?? '') == '365' ? 'selected' : '' }}>365 jours (1 an)</option>
                </select>
                @error('subscription_duration')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Période d'essai -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-gift mr-1 text-pink-600"></i>
                    Période d'essai gratuite (jours)
                </label>
                <input type="number" name="subscription_trial_days" min="0" max="90"
                    value="{{ $settings['subscription_trial_days'] ?? '0' }}" 
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('subscription_trial_days') border-red-500 @enderror">
                @error('subscription_trial_days')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
                <p class="text-xs text-gray-500 mt-1">0 = pas de période d'essai</p>
            </div>

            <!-- Description -->
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-align-left mr-1 text-blue-600"></i>
                    Description de l'abonnement
                </label>
                <textarea name="subscription_description" rows="3" 
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('subscription_description') border-red-500 @enderror"
                    placeholder="Décrivez les avantages de l'abonnement...">{{ $settings['subscription_description'] ?? 'Abonnement prestataire mensuel' }}</textarea>
                @error('subscription_description')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Aperçu -->
        <div class="mt-8 p-6 bg-gray-50 rounded-xl border border-gray-200">
            <h4 class="font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-eye mr-2 text-gray-600"></i>
                Aperçu pour les prestataires
            </h4>
            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                <div class="text-center">
                    <div class="text-4xl font-bold text-blue-600" id="preview-price">
                        {{ number_format((float)($settings['subscription_price'] ?? 29.99), 2, ',', ' ') }} €
                    </div>
                    <div class="text-gray-500 mt-2" id="preview-duration">
                        / {{ ($settings['subscription_duration'] ?? '30') }} jours
                    </div>
                    <p class="text-gray-600 mt-4" id="preview-description">
                        {{ $settings['subscription_description'] ?? 'Abonnement prestataire mensuel' }}
                    </p>
                </div>
            </div>
        </div>

        <div class="mt-6 flex justify-end gap-4">
            <a href="{{ route('admin.dashboard') }}" class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                <i class="fas fa-times mr-2"></i> Annuler
            </a>
            <button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                <i class="fas fa-save mr-2"></i> Enregistrer
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    // Mise à jour de l'aperçu en temps réel
    const priceInput = document.querySelector('input[name="subscription_price"]');
    const durationSelect = document.querySelector('select[name="subscription_duration"]');
    const descriptionTextarea = document.querySelector('textarea[name="subscription_description"]');
    
    const previewPrice = document.getElementById('preview-price');
    const previewDuration = document.getElementById('preview-duration');
    const previewDescription = document.getElementById('preview-description');
    
    priceInput?.addEventListener('input', function() {
        const price = parseFloat(this.value) || 0;
        previewPrice.textContent = price.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
    });
    
    durationSelect?.addEventListener('change', function() {
        previewDuration.textContent = '/ ' + this.value + ' jours';
    });
    
    descriptionTextarea?.addEventListener('input', function() {
        previewDescription.textContent = this.value || 'Abonnement prestataire mensuel';
    });
    
    // Toggle switch label update
    const toggleInput = document.querySelector('input[name="subscription_enabled"][type="checkbox"]');
    toggleInput?.addEventListener('change', function() {
        const label = this.parentElement.querySelector('span');
        label.textContent = this.checked ? 'Activé' : 'Désactivé';
    });
</script>
@endpush
@endsection