@extends('layout.app')

@section('title', 'Agenda')

@section('content')
<!-- Elements cachés pour Morris.js -->
<div style="display: none;">
    <div id="line_chart"></div>
    <div id="area_line_chart"></div>
    <div id="bar-example"></div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-calendar-alt me-2"></i>Agenda
                    </h4>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-primary" id="btn-today">
                            <i class="fas fa-calendar-day me-1"></i>Aujourd'hui
                        </button>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-secondary active" id="btn-month">
                                Mois
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="btn-week">
                                Semaine
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="btn-day">
                                Jour
                            </button>
                        </div>
                        <button type="button" class="btn btn-success" id="btn-add-rdv">
                            <i class="fas fa-plus me-1"></i>Nouveau Rendez-vous
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter/modifier un rendez-vous -->
<div class="modal fade" id="rdvModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rdvModalTitle">Nouveau Rendez-vous</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="rdvForm">
                    <input type="hidden" id="rdvId" name="id">
                    <div class="mb-3">
                        <label for="patient_id" class="form-label">Patient *</label>
                        <select class="form-select" id="patient_id" name="patient_id" required>
                            <option value="">Sélectionner un patient</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="user_id" class="form-label">Praticien</label>
                        <select class="form-select" id="user_id" name="user_id">
                            <option value="">Non assigné</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="datetime" class="form-label">Date et Heure *</label>
                        <input type="datetime-local" class="form-control" id="datetime" name="datetime" required>
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">Notes</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger me-auto" id="btn-delete-rdv" style="display: none;">
                    <i class="fas fa-trash me-1"></i>Supprimer
                </button>
                <button type="button" class="btn btn-primary" id="btn-save-rdv">
                    <i class="fas fa-save me-1"></i>Enregistrer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour afficher les détails d'un rendez-vous -->
<div class="modal fade" id="rdvDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Détails du Rendez-vous</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="rdvDetails"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-muted" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-warning" id="btn-toggle-done">
                    <i class="fas fa-check me-1"></i>Marquer comme fait
                </button>
                <button type="button" class="btn btn-primary" id="btn-edit-rdv">
                    <i class="fas fa-edit me-1"></i>Modifier
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
<style>
    #calendar {
        height: calc(100vh - 200px);
    }
    
    .fc-header-toolbar {
        padding: 1rem;
    }
    
    .fc-button-primary {
        background-color: #007bff;
        border-color: #007bff;
    }
    
    .fc-button-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }
    
    .fc-event {
        cursor: pointer;
        border-radius: 4px;
    }
    
    .fc-event-done {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
    }
    
    .modal-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }
    
    .btn-group .btn {
        border-radius: 0;
    }
    
    .btn-group .btn:first-child {
        border-top-left-radius: 0.375rem;
        border-bottom-left-radius: 0.375rem;
    }
    
    .btn-group .btn:last-child {
        border-top-right-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
    }
</style>
@endsection

@section('scripts')
<!-- Désactiver Morris.js pour cette page -->
<script>
// Désactiver les graphiques Morris.js pour éviter les erreurs
window.Morris = {
    Line: function() { return {element: null}; },
    Area: function() { return {element: null}; },
    Bar: function() { return {element: null}; }
};
</script>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/fr.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Chargement de l\'agenda...');
    
    let calendar;
    let currentView = 'dayGridMonth';
    
    // Initialiser le calendrier
    const calendarEl = document.getElementById('calendar');
    if (!calendarEl) {
        console.error('Élément calendar non trouvé');
        return;
    }
    
    try {
        calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'fr',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            events: '/admin/agenda/events',
            editable: true,
            selectable: true,
            selectMirror: true,
            dayMaxEvents: true,
            weekends: true,
            eventClick: function(info) {
                console.log('Click sur événement:', info.event);
                showRdvDetails(info.event);
            },
            select: function(info) {
                console.log('Sélection:', info.start);
                openRdvModal(info.start);
            },
            eventDrop: function(info) {
                console.log('Déplacement événement:', info.event);
                updateRdvDate(info.event);
            },
            eventResize: function(info) {
                console.log('Redimensionnement événement:', info.event);
                updateRdvDate(info.event);
            },
            loading: function(bool) {
                console.log('Chargement:', bool);
            },
            eventDidMount: function(info) {
                console.log('Événement monté:', info.event);
            }
        });
        
        calendar.render();
        console.log('Calendrier initialisé avec succès');
    } catch (error) {
        console.error('Erreur lors de l\'initialisation du calendrier:', error);
    }
    
    // Charger les données pour les formulaires
    loadFormData();
    
    // Gestion des boutons de vue
    document.getElementById('btn-today').addEventListener('click', function() {
        calendar.today();
    });
    
    document.getElementById('btn-month').addEventListener('click', function() {
        setView('dayGridMonth', this);
    });
    
    document.getElementById('btn-week').addEventListener('click', function() {
        setView('timeGridWeek', this);
    });
    
    document.getElementById('btn-day').addEventListener('click', function() {
        setView('timeGridDay', this);
    });
    
    // Bouton ajouter un rendez-vous
    document.getElementById('btn-add-rdv').addEventListener('click', function() {
        openRdvModal();
    });
    
    // Formulaire de rendez-vous
    document.getElementById('btn-save-rdv').addEventListener('click', function() {
        saveRdv();
    });
    
    document.getElementById('btn-delete-rdv').addEventListener('click', function() {
        deleteRdv();
    });
    
    document.getElementById('btn-toggle-done').addEventListener('click', function() {
        toggleRdvDone();
    });
    
    document.getElementById('btn-edit-rdv').addEventListener('click', function() {
        editRdv();
    });
    
    function setView(view, button) {
        calendar.changeView(view);
        currentView = view;
        
        // Mettre à jour les boutons actifs
        document.querySelectorAll('.btn-group .btn').forEach(btn => {
            btn.classList.remove('active');
        });
        button.classList.add('active');
    }
    
    function loadFormData() {
        fetch('/admin/agenda/form-data')
            .then(response => response.json())
            .then(data => {
                // Remplir la liste des patients
                const patientSelect = document.getElementById('patient_id');
                patientSelect.innerHTML = '<option value="">Sélectionner un patient</option>';
                data.patients.forEach(patient => {
                    patientSelect.innerHTML += `<option value="${patient.id}">${patient.name}</option>`;
                });
                
                // Remplir la liste des utilisateurs
                const userSelect = document.getElementById('user_id');
                userSelect.innerHTML = '<option value="">Non assigné</option>';
                data.users.forEach(user => {
                    userSelect.innerHTML += `<option value="${user.id}">${user.name}</option>`;
                });
            });
    }
    
    function openRdvModal(date = null) {
        document.getElementById('rdvModalTitle').textContent = 'Nouveau Rendez-vous';
        document.getElementById('rdvForm').reset();
        document.getElementById('rdvId').value = '';
        document.getElementById('btn-delete-rdv').style.display = 'none';
        
        if (date) {
            document.getElementById('datetime').value = date.toISOString().slice(0, 16);
        }
        
        const modal = new bootstrap.Modal(document.getElementById('rdvModal'));
        modal.show();
    }
    
    function showRdvDetails(event) {
        const props = event.extendedProps;
        const details = `
            <div class="row">
                <div class="col-6"><strong>Patient:</strong></div>
                <div class="col-6">${props.patient_name}</div>
            </div>
            <div class="row">
                <div class="col-6"><strong>Praticien:</strong></div>
                <div class="col-6">${props.user_name}</div>
            </div>
            <div class="row">
                <div class="col-6"><strong>Date:</strong></div>
                <div class="col-6">${event.start.toLocaleString('fr-FR')}</div>
            </div>
            <div class="row">
                <div class="col-6"><strong>Statut:</strong></div>
                <div class="col-6">
                    <span class="badge ${props.done ? 'bg-success' : 'bg-primary'}">
                        ${props.done ? 'Terminé' : 'En attente'}
                    </span>
                </div>
            </div>
            ${props.notes ? `
            <div class="row mt-3">
                <div class="col-12"><strong>Notes:</strong></div>
                <div class="col-12">${props.notes}</div>
            </div>
            ` : ''}
        `;
        
        document.getElementById('rdvDetails').innerHTML = details;
        document.getElementById('btn-toggle-done').innerHTML = props.done ? 
            '<i class="fas fa-undo me-1"></i>Marquer comme non fait' : 
            '<i class="fas fa-check me-1"></i>Marquer comme fait';
        document.getElementById('btn-toggle-done').setAttribute('data-id', event.id);
        document.getElementById('btn-edit-rdv').setAttribute('data-id', event.id);
        
        const modal = new bootstrap.Modal(document.getElementById('rdvDetailsModal'));
        modal.show();
    }
    
    function saveRdv() {
        const form = document.getElementById('rdvForm');
        const formData = new FormData(form);
        const rdvId = document.getElementById('rdvId').value;
        
        const url = rdvId ? `/admin/agenda/${rdvId}` : '/admin/agenda';
        const method = rdvId ? 'PUT' : 'POST';
        
        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(Object.fromEntries(formData))
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('rdvModal')).hide();
                calendar.refetchEvents();
                showToast(data.message, 'success');
            } else {
                showToast(data.message || 'Erreur lors de l\'enregistrement', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Erreur lors de l\'enregistrement', 'error');
        });
    }
    
    function updateRdvDate(event) {
        fetch(`/admin/agenda/${event.id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                datetime: event.start.toISOString()
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('Rendez-vous déplacé avec succès', 'success');
            } else {
                showToast(data.message || 'Erreur lors du déplacement', 'error');
                calendar.refetchEvents();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Erreur lors du déplacement', 'error');
            calendar.refetchEvents();
        });
    }
    
    function deleteRdv() {
        const rdvId = document.getElementById('rdvId').value;
        
        if (!confirm('Êtes-vous sûr de vouloir supprimer ce rendez-vous ?')) {
            return;
        }
        
        fetch(`/admin/agenda/${rdvId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('rdvModal')).hide();
                calendar.refetchEvents();
                showToast(data.message, 'success');
            } else {
                showToast(data.message || 'Erreur lors de la suppression', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Erreur lors de la suppression', 'error');
        });
    }
    
    function toggleRdvDone() {
        const rdvId = document.getElementById('btn-toggle-done').getAttribute('data-id');
        
        fetch(`/admin/agenda/${rdvId}/toggle-done`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('rdvDetailsModal')).hide();
                calendar.refetchEvents();
                showToast(data.message, 'success');
            } else {
                showToast(data.message || 'Erreur lors de la mise à jour', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Erreur lors de la mise à jour', 'error');
        });
    }
    
    function editRdv() {
        const rdvId = document.getElementById('btn-edit-rdv').getAttribute('data-id');
        // Implémenter l'édition ici
        bootstrap.Modal.getInstance(document.getElementById('rdvDetailsModal')).hide();
        // Ouvrir le modal d'édition avec les données du rendez-vous
    }
    
    function showToast(message, type = 'info') {
        // Implémenter un toast ou utiliser une librairie existante
        console.log(message);
        alert(message); // Temporaire, à remplacer par un vrai toast
    }
});
</script>
@endsection