<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Sistem Jadwal Perkuliahan{% endblock %}</title>
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
    
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
    
    <style>
        /* Extra styles for table responsiveness and polish */
        .table-responsive {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        .btn-check-all {
            cursor: pointer;
        }
        .mass-delete-btn {
            display: none;
        }
        .select2-container {
            width: 100% !important;
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body>

    <!-- Sidebar -->
    <div id="sidebar">
        <div class="sidebar-header">
            <h4 class="mb-0 text-white"><i class="fas fa-calendar-alt me-2"></i>SJP Admin</h4>
        </div>
        <nav class="nav flex-column">
            <a class="nav-link {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}" href="{% url 'dashboard' %}">
                <i class="fas fa-th-large"></i> Dashboard
            </a>
            <div class="sidebar-heading px-3 mt-3 mb-1 text-muted text-uppercase small" style="font-size: 0.7rem; font-weight: 800; letter-spacing: 1px;">Master Data</div>
            <a class="nav-link {% if 'prodi' in request.path %}active{% endif %}" href="{% url 'prodi_list' %}">
                <i class="fas fa-university"></i> Program Studi
            </a>
            <a class="nav-link {% if 'dosen' in request.path and 'pengampu' not in request.path %}active{% endif %}" href="{% url 'dosen_list' %}">
                <i class="fas fa-user-tie"></i> Dosen
            </a>
            <a class="nav-link {% if 'matkul' in request.path %}active{% endif %}" href="{% url 'matkul_list' %}">
                <i class="fas fa-book"></i> Mata Kuliah
            </a>
            <a class="nav-link {% if 'ruangan' in request.path %}active{% endif %}" href="{% url 'ruangan_list' %}">
                <i class="fas fa-door-open"></i> Ruangan
            </a>
            <a class="nav-link {% if 'kelas' in request.path %}active{% endif %}" href="{% url 'kelas_list' %}">
                <i class="fas fa-users"></i> Kelas
            </a>
            <a class="nav-link {% if 'jam' in request.path %}active{% endif %}" href="{% url 'jam_list' %}">
                <i class="fas fa-clock"></i> Waktu / Jam
            </a>
            <a class="nav-link {% if 'hari' in request.path %}active{% endif %}" href="{% url 'hari_list' %}">
                <i class="fas fa-calendar-week"></i> Hari
            </a>
            <a class="nav-link {% if 'tahun' in request.path %}active{% endif %}" href="{% url 'tahun_list' %}">
                <i class="fas fa-calendar-day"></i> Tahun Akademik
            </a>
            
            <div class="sidebar-heading px-3 mt-3 mb-1 text-muted text-uppercase small" style="font-size: 0.7rem; font-weight: 800; letter-spacing: 1px;">Operasional</div>
            <a class="nav-link {% if 'pengampu' in request.path %}active{% endif %}" href="{% url 'pengampu_list' %}">
                <i class="fas fa-chalkboard-teacher"></i> Dosen Pengampu
            </a>
            <a class="nav-link {% if 'buat' in request.path %}active{% endif %}" href="{% url 'buat_jadwal' %}">
                <i class="fas fa-magic"></i> Buat Jadwal
            </a>
            <a class="nav-link {% if 'jadwal' in request.path and 'buat' not in request.path %}active{% endif %}" href="{% url 'jadwal_list' %}">
                <i class="fas fa-list-check"></i> Hasil Jadwal
            </a>
            <a class="nav-link {% if 'daftar-hadir' in request.path %}active{% endif %}" href="{% url 'daftar_hadir_list' %}">
                <i class="fas fa-clipboard-check"></i> Daftar Hadir
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div id="main-content">
        <div class="top-navbar">
            <div class="breadcrumb-container">
                <h5 class="mb-0">{% block page_title %}Dashboard{% endblock %}</h5>
            </div>
            <div class="profile-section">
                <div class="text-end me-3 d-none d-md-block">
                    <p class="mb-0 fw-bold">Administrator</p>
                    <small class="text-muted">Super Admin</small>
                </div>
                <div class="profile-img">
                    <i class="fas fa-user"></i>
                </div>
            </div>
        </div>

        <div class="p-4">
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        <i class="fas {% if message.tags == 'success' %}fa-check-circle{% else %}fa-exclamation-circle{% endif %} me-2"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}

            {% block content %}{% endblock %}
        </div>
    </div>

    <!-- jQuery (needed for Select2) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Select2 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <script>
        // Common logic for Bulk Delete checkbox
        $(document).ready(function() {
            const checkAll = $('#checkAll');
            const checkboxes = $('.item-checkbox');
            const deleteBtn = $('#massDeleteBtn');

            if (checkAll.length) {
                checkAll.on('change', function() {
                    checkboxes.prop('checked', $(this).prop('checked'));
                    toggleDeleteBtn();
                });
            }

            checkboxes.on('change', toggleDeleteBtn);

            function toggleDeleteBtn() {
                if (deleteBtn.length) {
                    const anyChecked = checkboxes.filter(':checked').length > 0;
                    deleteBtn.toggle(anyChecked);
                }
            }

            // Initialize Select2
            $('.select2').select2({
                theme: 'bootstrap-5',
                placeholder: 'Pilih...',
                allowClear: true
            });

            // Re-init select2 inside modals when shown
            $('.modal').on('shown.bs.modal', function() {
                $(this).find('.select2-modal').select2({
                    theme: 'bootstrap-5',
                    dropdownParent: $(this),
                    placeholder: 'Pilih...',
                    allowClear: true
                });
            });
        });
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>