@extends('layouts.app')

@section('title', 'Mon Agenda - Prestataire')

@section('content')
<div class="pb-24 sm:pb-12 bg-slate-50">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-2">Mon Agenda</h1>
            <p class="text-slate-500">Visualisez et gérez tous vos réservations en un seul endroit</p>
        </div>

        <!-- Quick Stats -->
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 mb-6">
            <div class="bg-gradient-to-br from-slate-50 to-slate-100 rounded-xl p-3 sm:p-4 shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-slate-500 text-xs font-semibold uppercase mb-1">Total</div>
                        <div class="text-xl sm:text-2xl font-bold text-slate-900">{{ $stats['total'] ?? 0 }}</div>
                    </div>
                    <div class="text-2xl sm:text-3xl opacity-10">📋</div>
                </div>
            </div>
            <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-3 sm:p-4 shadow-sm border border-orange-200 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-orange-600 text-xs font-semibold uppercase mb-1">En attente</div>
                        <div class="text-xl sm:text-2xl font-bold text-orange-600">{{ $stats['pending'] ?? 0 }}</div>
                    </div>
                    <div class="text-2xl sm:text-3xl">⏳</div>
                </div>
            </div>
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-3 sm:p-4 shadow-sm border border-blue-200 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-blue-600 text-xs font-semibold uppercase mb-1">Confirmées</div>
                        <div class="text-xl sm:text-2xl font-bold text-blue-600">{{ $stats['confirmed'] ?? 0 }}</div>
                    </div>
                    <div class="text-2xl sm:text-3xl">✓</div>
                </div>
            </div>
            <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-xl p-3 sm:p-4 shadow-sm border border-emerald-200 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-emerald-600 text-xs font-semibold uppercase mb-1">Complétées</div>
                        <div class="text-xl sm:text-2xl font-bold text-emerald-600">{{ $stats['completed'] ?? 0 }}</div>
                    </div>
                    <div class="text-2xl sm:text-3xl">🎉</div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 sm:gap-6">
            <!-- Sidebar: Demandes récentes -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl sm:rounded-3xl p-4 sm:p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-100 lg:sticky lg:top-24 max-h-[600px] flex flex-col">
                    <h2 class="text-base sm:text-lg font-bold text-slate-800 mb-3 sm:mb-4 flex items-center flex-shrink-0">
                        <span class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center mr-2 sm:mr-3 text-xs sm:text-sm flex-shrink-0">
                            <i class="fas fa-inbox"></i>
                        </span>
                        <span class="truncate">Demandes</span>
                    </h2>

                    <!-- Demands List -->
                    <div class="space-y-2 overflow-y-auto flex-1 min-h-0 pr-2">
                        @forelse($recentDemands as $demand)
                            <div class="booking-item-wrapper" data-demand-id="{{ $demand['id'] }}">
                                <button onclick="showDemandDetails({{ $demand['id'] }}, '{{ $demand['type'] }}')" 
                                    class="w-full text-left p-2.5 sm:p-3 rounded-xl border-2 transition-all duration-200 text-sm
                                    @if($demand['type'] === 'service') 
                                        border-blue-200 bg-blue-50 hover:border-blue-400 hover:bg-blue-100
                                    @else 
                                        border-green-200 bg-green-50 hover:border-green-400 hover:bg-green-100
                                    @endif">
                                    
                                    <div class="flex items-start gap-2">
                                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex-shrink-0 flex items-center justify-center
                                            @if($demand['type'] === 'service') bg-blue-500 @else bg-green-500 @endif text-white text-xs sm:text-sm">
                                            @if($demand['type'] === 'service')
                                                <i class="fas fa-briefcase text-xs"></i>
                                            @else
                                                <i class="fas fa-tools text-xs"></i>
                                            @endif
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h4 class="font-bold text-xs sm:text-sm text-slate-900 truncate">{{ $demand['title'] }}</h4>
                                            <p class="text-xs text-slate-600 mt-0.5 truncate">{{ $demand['client_name'] }}</p>
                                            <div class="flex items-center justify-between mt-1.5 gap-2">
                                                <span class="text-xs text-slate-500 flex-shrink-0">
                                                    <i class="fas fa-calendar mr-1"></i>
                                                    @if($demand['type'] === 'service')
                                                        {{ $demand['start_date']->format('d/m') }}
                                                    @else
                                                        {{ \Carbon\Carbon::parse($demand['start_date'])->format('d/m') }}
                                                    @endif
                                                </span>
                                                <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-bold flex-shrink-0
                                                    @if($demand['status'] === 'confirmed' || $demand['status'] === 'accepted') bg-emerald-100 text-emerald-700
                                                    @elseif($demand['status'] === 'pending') bg-orange-100 text-orange-700
                                                    @elseif($demand['status'] === 'completed') bg-blue-100 text-blue-700
                                                    @else bg-slate-100 text-slate-700 @endif">
                                                    {{ ucfirst($demand['status']) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>
                        @empty
                            <div class="text-center py-6">
                                <i class="fas fa-inbox text-3xl text-slate-200 mb-2 block"></i>
                                <p class="text-xs text-slate-500">Aucune demande</p>
                            </div>
                        @endforelse
                    </div>

                    <a href="{{ route('prestataire.bookings.index') }}" 
                       class="w-full block mt-3 sm:mt-4 py-2 sm:py-3 px-3 sm:px-4 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-lg text-xs sm:text-sm transition-all text-center flex-shrink-0">
                        Voir tous
                    </a>
                </div>
            </div>

            <!-- Main Calendar -->
            <div class="lg:col-span-3">
                <div class="bg-white rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-100 p-4 sm:p-6 overflow-hidden">
                    <!-- Controls Bar -->
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6 pb-4 border-b border-slate-200">
                        <!-- View Buttons -->
                        <div class="flex items-center gap-1.5 bg-slate-100 rounded-lg p-1">
                            <button onclick="changeView('dayGridDay')" class="view-btn p-2 rounded-md transition-all duration-200 text-sm font-medium flex items-center justify-center min-w-10 hover:bg-slate-200" title="Vue du jour">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M7 10h10V7H7v3zm0 7h10v-3H7v3zM5 3h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2z"/></svg>
                            </button>
                            <button onclick="changeView('timeGridWeek')" class="view-btn p-2 rounded-md transition-all duration-200 text-sm font-medium flex items-center justify-center min-w-10 hover:bg-slate-200 bg-blue-100 text-blue-700" title="Vue de la semaine">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/></svg>
                            </button>
                            <button onclick="changeView('dayGridMonth')" class="view-btn p-2 rounded-md transition-all duration-200 text-sm font-medium flex items-center justify-center min-w-10 hover:bg-slate-200" title="Vue du mois">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/></svg>
                            </button>
                        </div>

                        <!-- Filter Buttons -->
                        <div class="flex flex-wrap items-center gap-1.5">
                            <button id="allEventsBtn" onclick="filterEvents('all')" class="filter-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 bg-slate-100 hover:bg-slate-200 text-slate-700">
                                Tous
                            </button>
                            <button id="servicesBtn" onclick="filterEvents('service')" class="filter-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 bg-slate-100 hover:bg-blue-100 text-slate-700">
                                Services
                            </button>
                            <button id="equipmentBtn" onclick="filterEvents('equipment')" class="filter-btn px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 bg-slate-100 hover:bg-green-100 text-slate-700">
                                Équipement
                            </button>
                        </div>

                        <!-- Add Event Button -->
                        <button onclick="openEventModal()" class="w-full sm:w-auto px-3 sm:px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all font-semibold text-sm flex items-center justify-center gap-2 whitespace-nowrap">
                            <i class="fas fa-plus text-xs"></i>
                            <span class="hidden sm:inline">Ajouter</span>
                            <span class="sm:hidden">+</span>
                        </button>
                    </div>

                    <!-- Calendar -->
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Event Creation Modal -->
    <div id="eventModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden flex items-end sm:items-center justify-center z-50 p-4">
        <div class="bg-white rounded-3xl w-full sm:w-2/3 lg:w-1/2 max-h-[90vh] overflow-y-auto shadow-2xl animate-in">
            <div class="p-6 border-b border-slate-200">
                <div class="flex justify-between items-start">
                    <h3 class="text-2xl font-bold text-slate-900">Ajouter un événement</h3>
                    <button onclick="closeEventModal()" class="text-slate-400 hover:text-slate-600 transition-all p-2">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <form id="eventForm" class="p-6 space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-2">Titre</label>
                    <input type="text" id="eventTitle" name="title" required class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Ex: Indisponible, Réunion...">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-2">Description</label>
                    <textarea id="eventDescription" name="description" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Description optionnelle" rows="3"></textarea>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Date/Heure début</label>
                        <input type="datetime-local" id="eventStart" name="start_datetime" required class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Date/Heure fin</label>
                        <input type="datetime-local" id="eventEnd" name="end_datetime" required class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Type</label>
                        <select id="eventType" name="type" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="other">Autre</option>
                            <option value="unavailable">Indisponible</option>
                            <option value="appointment">Rendez-vous</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Couleur</label>
                        <input type="color" id="eventColor" name="color" value="#3788d8" class="w-full h-10 border border-slate-300 rounded-lg cursor-pointer">
                    </div>
                </div>

                <div class="flex gap-3 pt-4">
                    <button type="submit" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all font-semibold">
                        Créer l'événement
                    </button>
                    <button type="button" onclick="closeEventModal()" class="flex-1 px-4 py-2 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 transition-all font-semibold">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    /* Modern Calendar Styling */
    #calendar {
        --fc-border-color: #e2e8f0;
        --fc-button-bg-color: #f1f5f9;
        --fc-button-border-color: #cbd5e1;
        --fc-button-text-color: #334155;
        --fc-button-hover-bg-color: #e2e8f0;
        --fc-button-hover-border-color: #94a3b8;
        --fc-button-active-bg-color: #3b82f6;
        --fc-button-active-border-color: #3b82f6;
        --fc-button-active-text-color: white;
        --fc-today-bg-color: rgba(59, 130, 246, 0.05);
        --fc-daygrid-day-frame-padding: 4px;
    }

    .fc-toolbar {
        display: none !important; /* Hide the default toolbar */
    }

    .fc-toolbar-title {
        font-size: 1.875rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0 !important;
    }

    .fc-button {
        padding: 0.4rem 0.8rem !important;
        font-weight: 600 !important;
        border-radius: 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 32px !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        color: #334155 !important;
    }

    .fc-button-active {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: white !important;
    }

    .fc-daygrid-day {
        padding: 0 !important;
        min-height: 120px;
        border: 1px solid #e2e8f0 !important;
        background: white;
        position: relative;
    }

    .fc-daygrid-day:hover {
        background: #f8fafc;
    }

    .fc-daygrid-day-number {
        padding: 0.5rem !important;
        font-weight: 600 !important;
        color: #334155 !important;
    }

    .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
        color: #cbd5e1;
    }

    .fc-daygrid-day.fc-day-today {
        background: rgba(59, 130, 246, 0.05) !important;
    }

    .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
        color: #3b82f6 !important;
        background: white;
        border: 2px solid #3b82f6;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700 !important;
    }

    .fc-event {
        border: none !important;
        padding: 2px 6px !important;
        font-size: 0.75rem !important;
        margin: 2px 0 !important;
        border-radius: 4px !important;
        cursor: pointer;
    }

    .fc-event-title {
        font-weight: 600 !important;
        padding: 2px 0 !important;
    }

    .fc-daygrid-event {
        background: #3b82f6 !important;
        border-radius: 0.5rem !important;
        color: white !important;
    }

    .fc-daygrid-event:hover {
        background: #2563eb !important;
        transform: scale(1.02);
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
        .fc-daygrid-day {
            min-height: 80px;
        }
        .fc-event {
            font-size: 10px !important;
            padding: 1px 3px !important;
        }
    }
</style>

@endsection

@push('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
<script>
    let calendar;
    let currentView = '{{ $view }}';
    let currentFilter = 'all';
    
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM Content Loaded');
        
        // Ensure FullCalendar is loaded
        if (typeof FullCalendar === 'undefined') {
            console.error('FullCalendar is not loaded. Please check your internet connection or CDN.');
            alert('Erreur: Le calendrier ne peut pas être chargé. Vérifiez votre connexion internet.');
            return;
        }
        
        initCalendar();
        
        // Set initial active filter
        document.getElementById('allEventsBtn').classList.add('filter-active', 'bg-gray-100');
        
        // Initialize form handler
        initEventForm();
    });
    
    function initCalendar() {
        const calendarEl = document.getElementById('calendar');
        if (!calendarEl) {
            console.error('Calendar element not found');
            return;
        }
        
        calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: currentView === 'week' ? 'timeGridWeek' : 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            locale: 'fr',
            firstDay: 1,
            height: 'auto',
            events: {
                url: '{{ route("prestataire.agenda.events") }}',
                extraParams: function() {
                    return { filter: currentFilter };
                },
                failure: function(error) {
                    console.error('Failed to load events:', error);
                    showNotification('Erreur lors du chargement des événements', 'error');
                }
            },
            eventClick: function(info) {
                handleEventClick(info);
            },
            eventDidMount: function(info) {
                // Add tooltips or custom styling
                info.el.title = info.event.title;
            }
        });
        
        calendar.render();
        console.log('Calendar rendered');
    }
    
    function handleEventClick(info) {
        const event = info.event;
        const props = event.extendedProps;
        
        console.log('Event clicked:', event);
        
        if (props.type === 'manual_event' || props.itemType === 'manual_event') {
            if (confirm(`Événement: ${event.title}\n\nVoulez-vous supprimer cet événement ?`)) {
                deleteManualEvent(props.eventId || event.id.replace('event_', ''));
            }
        } else if (props.type === 'service') {
            window.location.href = props.url;
        } else if (props.type === 'equipment') {
            window.location.href = props.rentalUrl;
        }
    }
    
    function changeView(view) {
        if (!calendar) return;
        calendar.changeView(view);
        
        // Update UI
        document.querySelectorAll('.view-btn').forEach(btn => {
            btn.classList.remove('bg-blue-100', 'text-blue-700');
            btn.classList.add('text-slate-600', 'hover:bg-slate-200');
        });
        event.target.closest('button').classList.remove('text-slate-600', 'hover:bg-slate-200');
        event.target.closest('button').classList.add('bg-blue-100', 'text-blue-700');
    }
    
    function filterEvents(filterType) {
        currentFilter = filterType;
        
        // Update UI
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('filter-active', 'bg-gray-100', 'bg-blue-50', 'bg-green-50');
            btn.classList.add('bg-slate-100');
        });
        
        const btnId = filterType === 'all' ? 'allEventsBtn' : (filterType === 'service' ? 'servicesBtn' : 'equipmentBtn');
        const activeClass = filterType === 'all' ? 'bg-gray-100' : (filterType === 'service' ? 'bg-blue-50' : 'bg-green-50');
        
        document.getElementById(btnId).classList.add('filter-active', activeClass);
        document.getElementById(btnId).classList.remove('bg-slate-100');
        
        if (calendar) calendar.refetchEvents();
    }
    
    function openEventModal() {
        document.getElementById('eventModal').classList.remove('hidden');
    }
    
    function closeEventModal() {
        document.getElementById('eventModal').classList.add('hidden');
        document.getElementById('eventForm').reset();
    }
    
    function initEventForm() {
        const form = document.getElementById('eventForm');
        if (!form) return;
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());
            
            // Ensure seconds are added to datetime-local values
            if (data.start_datetime && data.start_datetime.length === 16) data.start_datetime += ':00';
            if (data.end_datetime && data.end_datetime.length === 16) data.end_datetime += ':00';
            
            fetch('{{ route("prestataire.agenda.events.store") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                },
                credentials: 'include',
                body: JSON.stringify(data)
            })
            .then(response => {
                if (response.status === 419) {
                    alert('Votre session a expiré. La page va se recharger.');
                    window.location.reload();
                    return;
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    showNotification('Événement créé avec succès', 'success');
                    closeEventModal();
                    if (calendar) calendar.refetchEvents();
                } else {
                    showNotification(data.message || 'Erreur lors de la création', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Une erreur est survenue', 'error');
            });
        });
    }
    
    function deleteManualEvent(eventId) {
        fetch(`/prestataire/agenda/events/${eventId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            },
            credentials: 'include'
        })
        .then(response => {
            if (response.status === 419) {
                alert('Votre session a expiré. La page va se recharger.');
                window.location.reload();
                return;
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                showNotification('Événement supprimé', 'success');
                if (calendar) calendar.refetchEvents();
            } else {
                showNotification(data.message || 'Erreur lors de la suppression', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Une erreur est survenue', 'error');
        });
    }
    
    function showDemandDetails(id, type) {
        if (type === 'service') {
            window.location.href = `/prestataire/bookings/${id}`;
        } else {
            window.location.href = `/prestataire/equipment-rental-requests/${id}`;
        }
    }
    
    function showNotification(message, type = 'info') {
        const div = document.createElement('div');
        div.className = `fixed top-4 right-4 z-50 px-6 py-3 rounded-lg shadow-lg text-white transform transition-all duration-300 ${
            type === 'success' ? 'bg-green-600' : (type === 'error' ? 'bg-red-600' : 'bg-blue-600')
        }`;
        div.textContent = message;
        document.body.appendChild(div);
        
        setTimeout(() => {
            div.style.opacity = '0';
            setTimeout(() => div.remove(), 300);
        }, 3000);
    }
</script>
@endpush