<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap 5 JS (HANYA JS, tanpa CSS) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<!-- DataTables CSS (tetap diperlukan untuk styling tabel) -->
<link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">

<style>
/* Custom styling untuk Bootstrap components yang kita gunakan */
/* Modal positioning - pastikan muncul di atas konten */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    pointer-events: none;
    z-index: 1055;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 1rem;
    outline: 0;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: none;
}

.modal-backdrop.show {
    display: block;
    opacity: 0.5;
}

.fade {
    transition: opacity .15s linear;
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

/* Styling untuk modal header dengan gradient */
.modal-header.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
}

.modal-header.bg-red-500 {
    background: #ef4444;
    color: white;
    border-bottom: none;
}

.modal-header.bg-yellow-500 {
    background: #f59e0b;
    color: white;
    border-bottom: none;
}

.modal-header.bg-green-500 {
    background: #10b981;
    color: white;
    border-bottom: none;
}

/* Tombol close */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: .5;
    cursor: pointer;
}

.btn-close:hover {
    opacity: .75;
}

.btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
    opacity: 1;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Tooltip styling dari Bootstrap (minimal) */
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0;
}

.tooltip.show {
    opacity: .9;
}

.tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: .8rem;
    height: .4rem;
}

.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.bs-tooltip-top .tooltip-arrow {
    bottom: calc(-.4rem - 1px);
}

.bs-tooltip-top .tooltip-arrow::before {
    top: -1px;
    border-width: .4rem .4rem 0;
    border-top-color: #000;
}

.tooltip-inner {
    max-width: 200px;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .375rem;
}

/* Rounded utilities */
.rounded-2xl {
    border-radius: 1rem !important;
}

.rounded-t-2xl {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}
</style>

<!-- Modal Konfirmasi Hapus -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-2xl">
            <div class="modal-header bg-red-500 text-white rounded-t-2xl">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle mr-2"></i>Konfirmasi Hapus
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-gray-600 mb-2">Apakah Anda yakin ingin menghapus data ini?</p>
                <p class="font-semibold text-gray-800" id="deleteItemInfo"></p>
                <p class="text-sm text-red-600 mt-3">
                    <i class="fas fa-info-circle mr-1"></i>
                    Data yang sudah dihapus tidak dapat dikembalikan!
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-outline-primary text-sm" data-bs-dismiss="modal">
                    <i class="fas fa-times mr-1"></i>Batal
                </button>
                <a href="#" id="confirmDeleteBtn" class="bg-red-500 text-white px-6 py-2 rounded-full hover:bg-red-600 transition text-sm">
                    <i class="fas fa-trash mr-1"></i>Ya, Hapus
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Modal Notifikasi -->
<div class="modal fade" id="notificationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-2xl">
            <div class="modal-header gradient-bg text-white rounded-t-2xl" id="modalHeader">
                <h5 class="modal-title" id="modalTitle"></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="modalMessage" class="text-gray-600"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-primary text-sm" data-bs-dismiss="modal">
                    <i class="fas fa-check mr-1"></i>Tutup
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer class="bg-white border-t border-gray-200 mt-8 py-4">
    <div class="container mx-auto px-4">
        <div class="text-center text-gray-500 text-sm">
            <i class="fas fa-heart text-purple-400 mr-1"></i>
            © <?php echo date('Y'); ?> BKCare SMAN 1 Bantaran. All rights reserved.
        </div>
    </div>
</footer>

<!-- Custom JS -->
<script>
$(document).ready(function() {
    // DataTables customization
    if ($.fn.DataTable) {
        $('.table').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/id.json'
            },
            dom: '<"flex justify-between items-center mb-4"<"length"l><"search"f>>rt<"flex justify-between items-center mt-4"<"info"i><"pagination"p>>',
            pageLength: 10,
            responsive: true
        });
    }

    // Initialize Bootstrap tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Cek apakah ada session modal yang perlu ditampilkan
    <?php if (isset($_SESSION['modal_title']) && isset($_SESSION['modal_message'])): ?>
    
    // Tunggu sebentar sebelum menampilkan modal
    setTimeout(function() {
        // Set konten modal
        $('#modalTitle').text('<?= addslashes($_SESSION['modal_title']) ?>');
        $('#modalMessage').html('<?= addslashes($_SESSION['modal_message']) ?>');
        
        // Set warna header berdasarkan tipe
        <?php if ($_SESSION['modal_type'] == 'success'): ?>
        $('#modalHeader').removeClass('bg-red-500 bg-yellow-500').addClass('gradient-bg');
        <?php elseif ($_SESSION['modal_type'] == 'danger'): ?>
        $('#modalHeader').removeClass('gradient-bg bg-yellow-500').addClass('bg-red-500');
        <?php elseif ($_SESSION['modal_type'] == 'warning'): ?>
        $('#modalHeader').removeClass('gradient-bg bg-red-500').addClass('bg-yellow-500');
        <?php endif; ?>
        
        // Tampilkan modal
        var notificationModal = new bootstrap.Modal(document.getElementById('notificationModal'));
        notificationModal.show();
        
        // Redirect setelah modal ditutup jika ada redirect
        <?php if (isset($_SESSION['modal_redirect'])): ?>
        document.getElementById('notificationModal').addEventListener('hidden.bs.modal', function() {
            window.location.href = '<?= $_SESSION['modal_redirect'] ?>';
        });
        <?php endif; ?>
    }, 100); // Delay 100ms untuk memastikan DOM sudah siap
    
    <?php 
        // Hapus session modal setelah digunakan
        unset($_SESSION['modal_title']);
        unset($_SESSION['modal_message']);
        unset($_SESSION['modal_type']);
        unset($_SESSION['modal_redirect']);
    endif; 
    ?>
});

// Auto-hide alerts
setTimeout(function() {
    $('.alert').fadeOut('slow');
}, 5000);

// Global function untuk konfirmasi delete
function confirmDelete(id, info, deleteUrl) {
    if (info) {
        document.getElementById('deleteItemInfo').textContent = info;
    }
    
    // Set the delete link
    var deleteBtn = document.getElementById('confirmDeleteBtn');
    if (deleteUrl) {
        deleteBtn.href = deleteUrl + '?id=' + id;
    } else {
        deleteBtn.href = 'hapus.php?id=' + id;
    }
    
    var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}
</script>

</body>
</html>