{% extends "home.html" %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'novedades/css/style.css' %}">
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/es.min.js"></script>
{% endblock %}

{% block content %}
<div class="body-container fade-in">
    <div class="container-fluid">
        <div class="row justify-content-center h-100">
            <div class="col-12 main-content-wrapper h-100">

                <div class="card glass-card fade-in h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h2>
                            <i class="fas fa-calendar-alt me-2"></i>Novedades <span class="text-white-50 mx-2">-</span>
                            <span id="renderRange" class="text-white-50"></span>
                        </h2>

                        <div class="btn-group">
                            <button id="todayBtn" class="btn btn-outline-light btn-sm">Hoy</button>
                            <button id="prevBtn" class="btn btn-outline-light btn-sm"><i
                                    class="fas fa-chevron-left"></i></button>
                            <button id="nextBtn" class="btn btn-outline-light btn-sm"><i
                                    class="fas fa-chevron-right"></i></button>
                        </div>
                    </div>
                    <div class="card-body p-0 flex-grow-1" style="position: relative; overflow: hidden;">
                        <div id="calendar" style="height: 100%;"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Sidebar -->
<div id="novedadSidebar" class="user-sidebar">
    <div class="sidebar-header d-flex justify-content-between align-items-center">
        <h4 id="sidebarTitle" class="mb-0">Registro Novedad</h4>
        <div class="d-flex gap-2">
            <button type="button" id="btnGuardarNovedad" class="btn btn-primary btn-sm fw-bold" onclick="saveNovedad()">
                <i class="fas fa-save me-1"></i>Guardar
            </button>
            <button type="button" class="btn-close btn-close-white" onclick="closeSidebar()"></button>
        </div>
    </div>
    <div class="sidebar-body">
        <!-- Tab Buttons -->
        <div id="tabButtonsContainer" class="card glass-card mb-4">
            <div class="card-body p-2">
                <div class="btn-group w-100" role="group">
                    <button type="button" class="btn btn-outline-light active" id="btnTabNovedad"
                        onclick="switchTab('novedad')">Novedad</button>
                    <button type="button" class="btn btn-outline-light" id="btnTabLicencia"
                        onclick="switchTab('licencia')">Licencias o Incapacidades</button>
                </div>
            </div>
        </div>

        <!-- Novedad Form -->
        <div id="novedadFormContainer" class="flex-grow-1 d-flex flex-column">
            <form id="novedadForm" class="d-flex flex-column gap-3 flex-grow-1">
                {% csrf_token %}
                <input type="hidden" id="currentUserId" value="{{ user.id }}">
                <input type="hidden" id="novedadId" name="id">
                <div class="p-3 rounded d-flex flex-column flex-grow-1" style="background: rgba(255, 255, 255, 0.05);">
                    <h6 class="text-info mb-3 border-bottom border-secondary pb-2">
                        <i class="fas fa-edit me-2"></i>Detalles de la Novedad
                    </h6>

                    <div class="form-group mb-3">
                        <label class="text-white-50 small mb-1">Título</label>
                        <input type="text" id="novedadTitulo" name="titulo"
                            class="form-control bg-transparent text-white border-secondary" required>
                    </div>

                    <div class="mb-3">
                        <label class="text-white-50 small mb-1">Estado</label>
                        <input type="text" id="novedadEstado"
                            class="form-control bg-transparent text-white border-secondary" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="text-white-50 small mb-1">Cantidad Días</label>
                        <input type="number" id="novedadCantidadDias"
                            class="form-control bg-transparent text-white border-secondary" value="1" min="1" required
                            onchange="calculateEndDate()" style="width:80px;">
                    </div>

                    <!-- Row 1: Dates -->
                    <div class="row g-2 mb-3">
                        <div class="col-4">
                            <label class="text-white-50 small mb-1">Fecha Inicio</label>
                            <input type="date" id="novedadFechaInicio" name="fecha_inicio"
                                class="form-control bg-transparent text-white border-secondary" required
                                onchange="calculateEndDate()">
                        </div>
                        <div class="col-4">
                            <label class="text-white-50 small mb-1">Fecha Fin</label>
                            <input type="date" id="novedadFechaFin" name="fecha_fin"
                                class="form-control bg-transparent text-white border-secondary" readonly>
                        </div>
                    </div>

                    <!-- Row 2: Times -->
                    <div class="row g-2 mb-3">
                        <div class="col-4">
                            <label class="text-white-50 small mb-1">Hora Inicio</label>
                            <input type="time" id="novedadHoraInicio" name="hora_inicio"
                                class="form-control bg-transparent text-white border-secondary">
                        </div>
                        <div class="col-4">
                            <label class="text-white-50 small mb-1">Hora Fin</label>
                            <input type="time" id="novedadHoraFin" name="hora_fin"
                                class="form-control bg-transparent text-white border-secondary">
                        </div>
                        <div class="col-4 d-flex align-items-end pb-2">
                            <div class="form-check mb-0">
                                <input class="form-check-input" type="checkbox" id="checkTodoDia"
                                    onchange="toggleTimeInputs()">
                                <label class="form-check-label text-white small" for="checkTodoDia">Todo el día</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group flex-grow-1 d-flex flex-column">
                        <label class="text-white-50 small mb-1">Detalle</label>
                        <textarea id="novedadDetalle" name="detalle"
                            class="form-control bg-transparent text-white border-secondary flex-grow-1"
                            style="resize: none;" required></textarea>
                    </div>

                    <button type="button" id="btnEliminar" class="btn btn-danger w-100" onclick="deleteNovedad()"
                        style="display: none; margin-top: 1rem;">
                        <i class="fas fa-trash me-2"></i>Eliminar
                    </button>
                </div>
            </form>
        </div>

        <!-- Licencia Content (Empty for now) -->
        <div id="licenciaContainer" class="d-none">
            <div class="alert alert-info bg-transparent text-white border-white border-opacity-25">
                Módulo de Licencias e Incapacidades en construcción.
            </div>
        </div>
    </div>
</div>
<div id="sidebarOverlay" class="sidebar-overlay" onclick="closeSidebar()"></div>
{% endblock %}

{% block extra_js %}
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
<script src="{% static 'novedades/js/main.js' %}" defer></script>
{% endblock %}