@extends('layouts.app')

@section('title', 'Paramètres de notifications - Prestataire')

@push('styles')
<style>
    .settings-container {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        min-height: 100vh;
    }
    
    .settings-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .setting-group {
        border-bottom: 1px solid #f1f5f9;
        padding: 1.5rem;
    }
    
    .setting-group:last-child {
        border-bottom: none;
    }
    
    .toggle-switch {
        position: relative;
        width: 48px;
        height: 26px;
    }
    
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e5e7eb;
        transition: 0.3s;
        border-radius: 26px;
    }
    
    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    input:checked + .toggle-slider {
        background-color: #3b82f6;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(22px);
    }
</style>
@endpush

@section('content')
<div class="settings-container py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">
                <i class="fas fa-bell text-orange-500 mr-2"></i>Paramètres de notifications
            </h1>
            <p class="text-gray-600 mt-1">Configurez comment vous souhaitez être notifié</p>
        </div>
        
        <form action="{{ route('prestataire.notification-settings.update') }}" method="POST">
            @csrf
            @method('PUT')
            
            <!-- Email Notifications -->
            <div class="settings-card mb-6">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-envelope text-blue-600"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Notifications par Email</h2>
                            <p class="text-sm text-gray-500">Recevez des notifications dans votre boîte mail</p>
                        </div>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Nouvelles réservations</h3>
                            <p class="text-sm text-gray-500">Être notifié lors d'une nouvelle demande de réservation</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="email_new_booking" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Messages clients</h3>
                            <p class="text-sm text-gray-500">Recevoir un email pour chaque nouveau message</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="email_messages" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Paiements reçus</h3>
                            <p class="text-sm text-gray-500">Confirmation de paiement par email</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="email_payments" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Nouveaux avis</h3>
                            <p class="text-sm text-gray-500">Être notifié quand un client laisse un avis</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="email_reviews" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Résumé hebdomadaire</h3>
                            <p class="text-sm text-gray-500">Rapport de performance de la semaine</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="email_weekly_summary">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- SMS Notifications -->
            <div class="settings-card mb-6">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-sms text-green-600"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Notifications SMS</h2>
                            <p class="text-sm text-gray-500">Recevez des alertes par SMS</p>
                        </div>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Réservations urgentes</h3>
                            <p class="text-sm text-gray-500">SMS pour les réservations de dernière minute</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="sms_urgent_booking" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Rappels de rendez-vous</h3>
                            <p class="text-sm text-gray-500">SMS de rappel 1h avant chaque prestation</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="sms_reminders" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Annulations</h3>
                            <p class="text-sm text-gray-500">Alerte immédiate en cas d'annulation</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="sms_cancellations" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- Push Notifications -->
            <div class="settings-card mb-6">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-bell text-purple-600"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Notifications Push</h2>
                            <p class="text-sm text-gray-500">Notifications sur votre appareil</p>
                        </div>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Toutes les notifications</h3>
                            <p class="text-sm text-gray-500">Activer les notifications push</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="push_enabled" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Nouvelles enchères</h3>
                            <p class="text-sm text-gray-500">Notification quand une nouvelle offre est placée</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="push_auctions" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium text-gray-900">Promotions et offres</h3>
                            <p class="text-sm text-gray-500">Informations sur les offres spéciales</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="push_promotions">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- Quiet Hours -->
            <div class="settings-card mb-6">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-moon text-gray-600"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">Heures calmes</h2>
                            <p class="text-sm text-gray-500">Suspendre les notifications pendant certaines heures</p>
                        </div>
                    </div>
                </div>
                
                <div class="setting-group">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="font-medium text-gray-900">Activer les heures calmes</h3>
                            <p class="text-sm text-gray-500">Pas de notifications pendant cette période</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="quiet_hours_enabled">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">De</label>
                            <input type="time" name="quiet_start" value="{{ $settings->quiet_start ?? '22:00' }}" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">À</label>
                            <input type="time" name="quiet_end" value="{{ $settings->quiet_end ?? '08:00' }}" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Save Button -->
            <div class="flex justify-end gap-4">
                <button type="button" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors">
                    Annuler
                </button>
                <button type="submit" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors flex items-center gap-2">
                    <i class="fas fa-save"></i>
                    Enregistrer les préférences
                </button>
            </div>
        </form>
    </div>
</div>
@endsection