{% extends "base.html" %}
{% block title %}{{ title }} — GMAO Collège{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <a href="{{ url_for('planning.availability') }}" class="btn btn-outline-secondary mb-3">
                <i class="bi bi-arrow-left"></i> Retour aux disponibilités
            </a>
            <h1><i class="bi bi-calendar2-event"></i> {{ title }}</h1>
            {% if closure %}
            <p class="text-muted">Du {{ closure.start_date.strftime('%d/%m/%Y') }} au {{ closure.end_date.strftime('%d/%m/%Y') }}</p>
            {% endif %}
        </div>
    </div>
    
    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="bi bi-info-circle me-1"></i> Informations générales
                </div>
                <div class="card-body">
                    <form method="POST" id="closureForm">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">Nom de la période</label>
                                <input type="text" class="form-control" id="name" name="name" 
                                       value="{{ closure.name if closure else '' }}" required placeholder="ex: Vacances de Noël">
                            </div>
                            <div class="col-md-6">
                                <label for="work_hours_type" class="form-label">Type de travail</label>
                                <select class="form-select" id="work_hours_type" name="work_hours_type">
                                    <option value="none" {% if closure and closure.work_hours_type == 'none' %}selected{% endif %}>Non travaillé (congé)</option>
                                    <option value="reduced" {% if closure and closure.work_hours_type == 'reduced' %}selected{% endif %}>Horaires réduits</option>
                                    <option value="custom" {% if closure and closure.work_hours_type == 'custom' %}selected{% endif %}>Horaires spécifiques</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="start_date" class="form-label">Du</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" 
                                       value="{{ closure.start_date.strftime('%Y-%m-%d') if closure and closure.start_date else '' }}" required>
                            </div>
                            <div class="col-md-6">
                                <label for="end_date" class="form-label">Au</label>
                                <input type="date" class="form-control" id="end_date" name="end_date"
                                       value="{{ closure.end_date.strftime('%Y-%m-%d') if closure and closure.end_date else '' }}" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="notes" class="form-label">Notes</label>
                            <textarea class="form-control" id="notes" name="notes" rows="2">{{ closure.notes if closure else '' }}</textarea>
                        </div>
                    </form>
                </div>
            </div>
            
            {% if closure and closure.work_hours_type == 'custom' %}
            <div class="card" id="schedulesCard">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-clock me-1"></i> Horaires de travail pendant cette période</span>
                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal">
                        <i class="bi bi-plus"></i> Ajouter un jour
                    </button>
                </div>
                <div class="card-body">
                    <div id="schedulesList">
                        {% for schedule in closure.schedules if closure.schedules %}
                        <div class="row mb-2 align-items-center schedule-row" data-schedule-id="{{ schedule.id }}">
                            <div class="col-md-2">
                                <strong>{{ days.get(schedule.day_of_week, schedule.day_of_week) }}</strong>
                            </div>
                            <div class="col-md-3">
                                {{ schedule.start_time.strftime('%H:%M') if schedule.start_time else '-' }} - {{ schedule.end_time.strftime('%H:%M') if schedule.end_time else '-' }}
                            </div>
                            <div class="col-md-3">
                                {% if schedule.lunch_start and schedule.lunch_end %}
                                <small class="text-muted">Pause: {{ schedule.lunch_start.strftime('%H:%M') }}-{{ schedule.lunch_end.strftime('%H:%M') }}</small>
                                {% endif %}
                            </div>
                            <div class="col-md-4 text-end">
                                <form method="POST" action="{{ url_for('planning.delete_closure_schedule', closure_id=closure.id, schedule_id=schedule.id) }}" style="display:inline">
                                    <button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Supprimer cet horaire?')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                        {% else %}
                        <p class="text-muted">Aucun horaire défini. Ajoutez les jours où vous travaillez.</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
            
            <div class="d-flex justify-content-between mt-4">
                <a href="{{ url_for('planning.availability') }}" class="btn btn-secondary">
                    <i class="bi bi-x"></i> Annuler
                </a>
                <button type="submit" form="closureForm" class="btn btn-primary">
                    <i class="bi bi-check"></i> Enregistrer
                </button>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-info-circle me-1"></i> Aide
                </div>
                <div class="card-body">
                    <h6><i class="bi bi-calendar-x"></i> Non travaillé</h6>
                    <p class="small text-muted">Vous êtes en congé, aucune intervention ne sera planifiée.</p>
                    
                    <h6><i class="bi bi-clock-history"></i> Horaires réduits</h6>
                    <p class="small text-muted">Indiquez dans les notes vos horaires réduits (ex: "9h-12h").</p>
                    
                    <h6><i class="bi bi-calendar-check"></i> Horaires spécifiques</h6>
                    <p class="small text-muted">Définissez précisément vos horaires pour chaque jour de travail. Le système utilisera ces horaires pour planifier les interventions.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Ajouter Horaire -->
{% if closure and closure.work_hours_type == 'custom' %}
<div class="modal fade" id="scheduleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('planning.new_closure_schedule', closure_id=closure.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Ajouter des horaires</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Jours de travail</label>
                        <div class="row">
                            {% for day_num, day_name in days.items() %}
                            {% if day_num > 0 and day_num < 6 %}{# Lundi à Vendredi par défaut cochés #}
                            <div class="col-md-4 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="days" value="{{ day_num }}" id="day_{{ day_num }}" checked>
                                    <label class="form-check-label" for="day_{{ day_num }}">{{ day_name }}</label>
                                </div>
                            </div>
                            {% else %}
                            <div class="col-md-4 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="days" value="{{ day_num }}" id="day_{{ day_num }}">
                                    <label class="form-check-label" for="day_{{ day_num }}">{{ day_name }}</label>
                                </div>
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                        <small class="text-muted">Cochez les jours où vous travaillez avec ces horaires</small>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="start_time" class="form-label">Heure de début</label>
                            <input type="time" class="form-control" id="start_time" name="start_time" value="08:00" required>
                        </div>
                        <div class="col-md-6">
                            <label for="end_time" class="form-label">Heure de fin</label>
                            <input type="time" class="form-control" id="end_time" name="end_time" value="17:00" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="lunch_start" class="form-label">Début pause déjeuner</label>
                            <input type="time" class="form-control" id="lunch_start" name="lunch_start" value="12:00">
                            <small class="text-muted">Optionnel</small>
                        </div>
                        <div class="col-md-6">
                            <label for="lunch_end" class="form-label">Fin pause déjeuner</label>
                            <input type="time" class="form-control" id="lunch_end" name="lunch_end" value="13:00">
                            <small class="text-muted">Optionnel</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Enregistrer pour les jours sélectionnés</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}