<?php
session_start();
require_once '../../config/database.php';
require_once '../../config/function.php';

// Cek login
checkLogin();

$current_user = getCurrentUser();
$tahun_ajaran_aktif = getTahunAjaranAktif();

// Ambil parameter filter
$tahun_ajaran_id = isset($_GET['tahun_ajaran']) ? (int)$_GET['tahun_ajaran'] : ($tahun_ajaran_aktif ? $tahun_ajaran_aktif['id_tahun_ajaran'] : 0);
$status = isset($_GET['status']) ? mysqli_real_escape_string($conn, $_GET['status']) : '';
$search = isset($_GET['search']) ? mysqli_real_escape_string($conn, $_GET['search']) : '';

// Filter berdasarkan role
$role_filter = "";
if ($current_user['role'] == 'guru_bk') {
    $guru_query = "SELECT id_guru FROM bkcare_guru WHERE id_user = {$current_user['id_user']}";
    $guru_result = mysqli_query($conn, $guru_query);
    $guru = mysqli_fetch_assoc($guru_result);
    if ($guru) {
        $role_filter = " AND k.id_guru_bk = {$guru['id_guru']}";
    }
} elseif ($current_user['role'] == 'siswa') {
    $siswa_query = "SELECT id_siswa FROM bkcare_siswa WHERE id_user = {$current_user['id_user']}";
    $siswa_result = mysqli_query($conn, $siswa_query);
    $siswa = mysqli_fetch_assoc($siswa_result);
    if ($siswa) {
        $role_filter = " AND k.id_siswa = {$siswa['id_siswa']}";
    }
}

// Query untuk mengambil data konseling
$query = "SELECT k.*, 
          s.nis, s.nama as nama_siswa,
          g.nama_guru,
          ta.tahun_ajaran, ta.semester
          FROM bkcare_konseling k
          LEFT JOIN bkcare_siswa s ON k.id_siswa = s.id_siswa
          LEFT JOIN bkcare_guru g ON k.id_guru_bk = g.id_guru
          LEFT JOIN bkcare_tahun_ajaran ta ON k.id_tahun_ajaran = ta.id_tahun_ajaran
          WHERE 1=1
          $role_filter";

if ($tahun_ajaran_id > 0) {
    $query .= " AND k.id_tahun_ajaran = $tahun_ajaran_id";
}

if (!empty($status)) {
    $query .= " AND k.status = '$status'";
}

if (!empty($search)) {
    $query .= " AND (s.nama LIKE '%$search%' OR s.nis LIKE '%$search%' OR k.jenis_konseling LIKE '%$search%' OR g.nama_guru LIKE '%$search%')";
}

$query .= " ORDER BY k.tanggal DESC, k.id_konseling DESC";
$result = mysqli_query($conn, $query);

// Ambil data untuk filter
$tahun_ajaran_list = mysqli_query($conn, "SELECT * FROM bkcare_tahun_ajaran ORDER BY tahun_ajaran DESC, semester");

include '../../includes/header.php';
include '../../includes/navbar.php';
?>

<style>
    .card-stat {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: all 0.3s;
    }
    
    .card-stat:hover {
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .badge-status {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .badge-proses {
        background-color: #fff3cd;
        color: #856404;
    }
    
    .badge-selesai {
        background-color: #d4edda;
        color: #155724;
    }
    
    .btn-action {
        padding: 4px 8px;
        margin: 0 2px;
        border-radius: 8px;
        transition: all 0.3s;
    }
    
    .btn-action:hover {
        transform: translateY(-2px);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
        color: white;
        padding: 10px 20px;
        border-radius: 12px;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.4);
        color: white;
    }
    
    .filter-input {
        transition: all 0.3s;
    }
    
    .filter-input:focus {
        border-color: #8b5cf6;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    /* Tabel biasa dengan styling modern */
    .data-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .data-table th {
        background-color: #f9fafb;
        padding: 12px 16px;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .data-table td {
        padding: 12px 16px;
        font-size: 0.875rem;
        color: #4b5563;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .data-table tr:hover {
        background-color: #f9fafb;
    }
    
    /* Search dan filter tabel */
    .table-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .table-search-box {
        position: relative;
    }
    
    .table-search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }
    
    .table-search-box input {
        padding: 8px 12px 8px 36px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        width: 250px;
        font-size: 14px;
    }
    
    .table-search-box input:focus {
        outline: none;
        border-color: #8b5cf6;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }
    
    .table-info {
        font-size: 14px;
        color: #6b7280;
    }
    
    .pagination {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .pagination button {
        padding: 6px 12px;
        border: 1px solid #d1d5db;
        background: white;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 14px;
    }
    
    .pagination button:hover:not(:disabled) {
        background-color: #f3f4f6;
        border-color: #8b5cf6;
    }
    
    .pagination button.active {
        background-color: #8b5cf6;
        border-color: #8b5cf6;
        color: white;
    }
    
    .pagination button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .pagination select {
        padding: 6px 10px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: white;
    }
    
    @media (max-width: 640px) {
        .table-search {
            flex-direction: column;
            align-items: stretch;
        }
        .table-search-box input {
            width: 100%;
        }
    }
</style>

<div class="container mx-auto px-4 py-6">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="flex flex-wrap justify-between items-center mb-6">
            <div>
                <h1 class="text-2xl font-bold text-gray-800 flex items-center">
                    <i class="fas fa-hand-holding-heart text-purple-600 mr-3"></i>
                    Manajemen Konseling
                </h1>
                <p class="text-gray-600 text-sm mt-1">Kelola data konseling siswa</p>
            </div>
            <div class="mt-3 sm:mt-0">
                <a href="tambah.php" class="btn-primary">
                    <i class="fas fa-plus-circle mr-2"></i>
                    Tambah Konseling
                </a>
            </div>
        </div>

        <!-- Card Statistik -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
            <?php
            $base_query = "FROM bkcare_konseling k WHERE 1=1 $role_filter";
            
            $total_query = "SELECT COUNT(*) as total $base_query";
            $total_result = mysqli_query($conn, $total_query);
            $total = $total_result ? mysqli_fetch_assoc($total_result)['total'] : 0;
            
            $proses_query = "SELECT COUNT(*) as total $base_query AND status = 'proses'";
            $proses_result = mysqli_query($conn, $proses_query);
            $proses = $proses_result ? mysqli_fetch_assoc($proses_result)['total'] : 0;
            
            $selesai_query = "SELECT COUNT(*) as total $base_query AND status = 'selesai'";
            $selesai_result = mysqli_query($conn, $selesai_query);
            $selesai = $selesai_result ? mysqli_fetch_assoc($selesai_result)['total'] : 0;
            
            $sesi_query = "SELECT COUNT(*) as total FROM bkcare_sesi_konseling s 
                           LEFT JOIN bkcare_konseling k ON s.id_konseling = k.id_konseling 
                           WHERE 1=1 $role_filter";
            $sesi_result = mysqli_query($conn, $sesi_query);
            $total_sesi = $sesi_result ? mysqli_fetch_assoc($sesi_result)['total'] : 0;
            ?>
            
            <div class="card-stat p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">Total Konseling</p>
                        <p class="text-2xl font-bold text-gray-800"><?= $total ?></p>
                    </div>
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-chart-line text-purple-600 text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="card-stat p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">Sedang Berlangsung</p>
                        <p class="text-2xl font-bold text-yellow-600"><?= $proses ?></p>
                    </div>
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-spinner text-yellow-600 text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="card-stat p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">Telah Selesai</p>
                        <p class="text-2xl font-bold text-green-600"><?= $selesai ?></p>
                    </div>
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="card-stat p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">Total Sesi</p>
                        <p class="text-2xl font-bold text-blue-600"><?= $total_sesi ?></p>
                    </div>
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-comments text-blue-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="card-stat p-5 mb-6">
            <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">
                        <i class="fas fa-calendar-alt mr-1 text-purple-600"></i>Tahun Ajaran
                    </label>
                    <select name="tahun_ajaran" class="filter-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                        <option value="">Semua Tahun Ajaran</option>
                        <?php 
                        mysqli_data_seek($tahun_ajaran_list, 0);
                        while($ta = mysqli_fetch_assoc($tahun_ajaran_list)): 
                        ?>
                            <option value="<?= $ta['id_tahun_ajaran'] ?>" <?= $tahun_ajaran_id == $ta['id_tahun_ajaran'] ? 'selected' : '' ?>>
                                <?= $ta['tahun_ajaran'] ?> - Semester <?= ucfirst($ta['semester']) ?>
                                <?= $ta['status'] == 'aktif' ? '(Aktif)' : '' ?>
                            </option>
                        <?php endwhile; ?>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">
                        <i class="fas fa-tag mr-1 text-purple-600"></i>Status Konseling
                    </label>
                    <select name="status" class="filter-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                        <option value="">Semua Status</option>
                        <option value="proses" <?= $status == 'proses' ? 'selected' : '' ?>>Proses</option>
                        <option value="selesai" <?= $status == 'selesai' ? 'selected' : '' ?>>Selesai</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-xs font-medium text-gray-500 mb-1">
                        <i class="fas fa-search mr-1 text-purple-600"></i>Pencarian
                    </label>
                    <div class="flex">
                        <input type="text" 
                               name="search" 
                               value="<?= htmlspecialchars($search) ?>"
                               class="filter-input flex-1 px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"
                               placeholder="Cari siswa, NIS, jenis konseling, atau guru BK...">
                        <button type="submit" class="bg-purple-600 text-white px-5 py-2 rounded-r-lg hover:bg-purple-700 transition flex items-center gap-2">
                            <i class="fas fa-search"></i>
                            <span class="hidden sm:inline">Cari</span>
                        </button>
                        <?php if (!empty($search) || !empty($status) || !empty($tahun_ajaran_id)): ?>
                        <a href="index.php" class="ml-2 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition flex items-center gap-2">
                            <i class="fas fa-undo-alt"></i>
                            <span class="hidden sm:inline">Reset</span>
                        </a>
                        <?php endif; ?>
                    </div>
                    
                </div>
            </form>
        </div>

        <!-- Tabel Data Konseling dengan Tabel Biasa -->
        <div class="card-stat p-6">
            <div class="table-responsive">
                <!-- Search dan Info untuk tabel client-side -->
                <div class="table-search">
                    <div class="table-search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="tableSearchInput" placeholder="Cari di tabel...">
                    </div>
                    
                    <div class="table-info">
                        <span id="showingInfo">Menampilkan semua data</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-600">Tampilkan</span>
                        <select id="rowsPerPage" class="border border-gray-300 rounded-lg px-2 py-1 text-sm">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <span class="text-sm text-gray-600">baris</span>
                    </div>
                </div>
                
                <table id="konselingTable" class="data-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>Siswa</th>
                            <th>Guru BK</th>
                            <th>Jenis Konseling</th>
                            <th>Lokasi</th>
                            <th>Status</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <?php if (mysqli_num_rows($result) > 0): ?>
                            <?php $no = 1; ?>
                            <?php while($row = mysqli_fetch_assoc($result)): ?>
                            <tr class="table-row">
                                <td><?= $no++ ?></td>
                                <td data-sort="<?= $row['tanggal'] ?>">
                                    <div class="font-medium"><?= tgl_indonesia($row['tanggal']) ?></div>
                                    <div class="text-xs text-gray-500"><?= $row['tahun_ajaran'] ?></div>
                                </td>
                                <td>
                                    <div class="font-medium text-gray-800"><?= htmlspecialchars($row['nama_siswa']) ?></div>
                                    <div class="text-xs text-gray-500">NIS: <?= $row['nis'] ?></div>
                                </td>
                                <td><?= htmlspecialchars($row['nama_guru']) ?></td>
                                <td>
                                    <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded-full text-xs">
                                        <i class="fas fa-tag mr-1"></i><?= htmlspecialchars($row['jenis_konseling']) ?>
                                    </span>
                                </td>
                                <td>
                                    <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>
                                    <?= htmlspecialchars($row['lokasi']) ?>
                                </td>
                                <td>
                                    <?php if($row['status'] == 'proses'): ?>
                                        <span class="badge-status badge-proses">
                                            <i class="fas fa-spinner fa-fw mr-1"></i>Proses
                                        </span>
                                    <?php else: ?>
                                        <span class="badge-status badge-selesai">
                                            <i class="fas fa-check-circle fa-fw mr-1"></i>Selesai
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="text-center">
                                    <a href="detail.php?id=<?= $row['id_konseling'] ?>" 
                                       class="btn-action text-blue-600 hover:text-blue-800 inline-block"
                                       title="Detail Konseling">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="sesi.php?id=<?= $row['id_konseling'] ?>" 
                                       class="btn-action text-green-600 hover:text-green-800 inline-block ml-2"
                                       title="Sesi Konseling">
                                        <i class="fas fa-comments"></i>
                                    </a>
                                    <?php if($row['status'] == 'proses'): ?>
                                    <button type="button" 
                                            onclick="confirmSelesai(<?= $row['id_konseling'] ?>, '<?= htmlspecialchars($row['nama_siswa']) ?>')" 
                                            class="btn-action text-purple-600 hover:text-purple-800 inline-block ml-2"
                                            title="Selesaikan Konseling">
                                        <i class="fas fa-check-double"></i>
                                    </button>
                                    <?php endif; ?>
                                </td>
                            </tr>
                            <?php endwhile; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="8" class="text-center py-12 text-gray-500">
                                    <i class="fas fa-hand-holding-heart fa-3x mb-3 text-gray-300"></i>
                                    <p class="text-lg font-medium">Belum ada data konseling</p>
                                    <p class="text-sm mt-1">Klik tombol "Tambah Konseling" untuk memulai</p>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
                
                <!-- Pagination untuk client-side -->
                <div class="flex justify-between items-center mt-4 flex-wrap gap-3">
                    <div class="pagination">
                        <button id="prevPage" disabled>
                            <i class="fas fa-chevron-left"></i> Sebelumnya
                        </button>
                        <span id="pageNumbers"></span>
                        <button id="nextPage">
                            Selanjutnya <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Selesai -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-2xl">
            <div class="modal-header bg-success text-white rounded-t-2xl">
                <h5 class="modal-title">
                    <i class="fas fa-check-circle me-2"></i>
                    Konfirmasi Selesaikan Konseling
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center py-5">
                <div class="modal-icon mb-3">
                    <i class="fas fa-question-circle fa-3x text-warning"></i>
                </div>
                <p class="mb-2 text-gray-700">Apakah Anda yakin ingin menyelesaikan konseling ini?</p>
                <p class="font-semibold text-purple-600" id="confirmSiswaName"></p>
                <small class="text-muted">Konseling yang telah selesai tidak dapat diubah kembali</small>
            </div>
            <div class="modal-footer justify-content-center border-t border-gray-100 pt-4">
                <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Batal
                </button>
                <button type="button" class="btn btn-success px-4" id="confirmButton">
                    <i class="fas fa-check me-2"></i>Ya, Selesaikan
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Fungsi untuk filter tabel client-side
    function filterTable() {
        var searchTerm = $('#tableSearchInput').val().toLowerCase();
        var rows = $('#tableBody tr.table-row');
        var visibleCount = 0;
        
        rows.each(function() {
            var text = $(this).text().toLowerCase();
            if (text.indexOf(searchTerm) > -1) {
                $(this).show();
                visibleCount++;
            } else {
                $(this).hide();
            }
        });
        
        // Update info
        var totalRows = rows.length;
        if (searchTerm === '') {
            $('#showingInfo').text('Menampilkan semua ' + totalRows + ' data');
        } else {
            $('#showingInfo').text('Menampilkan ' + visibleCount + ' dari ' + totalRows + ' data (hasil pencarian)');
        }
        
        // Reset pagination setelah filter
        currentPage = 1;
        updatePagination();
        
        return visibleCount;
    }
    
    // Pagination variables
    var rowsPerPage = 10;
    var currentPage = 1;
    var allRows = [];
    
    function updatePagination() {
        // Ambil semua row yang visible
        allRows = $('#tableBody tr.table-row:visible').get();
        var totalPages = Math.ceil(allRows.length / rowsPerPage);
        
        // Sembunyikan semua row
        $('#tableBody tr.table-row').hide();
        
        // Tampilkan row sesuai halaman
        var start = (currentPage - 1) * rowsPerPage;
        var end = start + rowsPerPage;
        var rowsToShow = allRows.slice(start, end);
        
        $(rowsToShow).each(function() {
            $(this).show();
        });
        
        // Update tombol pagination
        $('#prevPage').prop('disabled', currentPage === 1);
        $('#nextPage').prop('disabled', currentPage === totalPages || totalPages === 0);
        
        // Update nomor halaman
        var pageNumbersHtml = '';
        for (var i = 1; i <= totalPages; i++) {
            pageNumbersHtml += `<button class="page-number ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`;
        }
        $('#pageNumbers').html(pageNumbersHtml || '<span class="text-gray-400 text-sm">Tidak ada halaman</span>');
        
        // Event untuk klik nomor halaman
        $('.page-number').off('click').on('click', function() {
            currentPage = parseInt($(this).data('page'));
            updatePagination();
        });
    }
    
    // Event search
    $('#tableSearchInput').on('keyup', function() {
        filterTable();
    });
    
    // Event rows per page
    $('#rowsPerPage').on('change', function() {
        rowsPerPage = parseInt($(this).val());
        currentPage = 1;
        updatePagination();
    });
    
    // Event next/prev
    $('#nextPage').on('click', function() {
        var totalPages = Math.ceil(allRows.length / rowsPerPage);
        if (currentPage < totalPages) {
            currentPage++;
            updatePagination();
        }
    });
    
    $('#prevPage').on('click', function() {
        if (currentPage > 1) {
            currentPage--;
            updatePagination();
        }
    });
    
    // Inisialisasi awal
    filterTable();
    
    // Tooltip
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

let selectedId = null;
let selectedSiswa = null;

function confirmSelesai(id, namaSiswa) {
    selectedId = id;
    selectedSiswa = namaSiswa;
    $('#confirmSiswaName').text('Siswa: ' + selectedSiswa);
    $('#confirmModal').modal('show');
}

$('#confirmButton').on('click', function() {
    if (selectedId) {
        window.location.href = 'proses_selesai.php?id=' + selectedId;
    }
});

// Tampilkan modal notifikasi jika ada session message
<?php if (isset($_SESSION['modal_title'])): ?>
    $(document).ready(function() {
        let modalType = '<?= $_SESSION['modal_type'] ?>';
        let modalTitle = '<?= $_SESSION['modal_title'] ?>';
        let modalMessage = '<?= addslashes($_SESSION['modal_message']) ?>';
        
        let bgColor = modalType == 'success' ? 'bg-green-500' : (modalType == 'danger' ? 'bg-red-500' : 'bg-yellow-500');
        let icon = modalType == 'success' ? 'check-circle' : (modalType == 'danger' ? 'times-circle' : 'exclamation-triangle');
        
        let modalHtml = `
            <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 ${bgColor} text-white rounded-t-2xl">
                            <h5 class="modal-title">
                                <i class="fas fa-${icon} me-2"></i>
                                ${modalTitle}
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body text-center py-5">
                            <div class="modal-icon mb-3">
                                <i class="fas fa-${icon} fa-3x text-${modalType}"></i>
                            </div>
                            <p class="mb-0 text-gray-700">${modalMessage}</p>
                        </div>
                        <div class="modal-footer justify-content-center border-t border-gray-100 pt-4">
                            <button type="button" class="btn btn-${modalType == 'success' ? 'success' : (modalType == 'danger' ? 'danger' : 'warning')}" data-bs-dismiss="modal">
                                <i class="fas fa-check me-2"></i>OK
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        if ($('#notificationModal').length === 0) {
            $('body').append(modalHtml);
        }
        
        $('#notificationModal').modal('show');
        
        $('#notificationModal').on('hidden.bs.modal', function() {
            $(this).remove();
        });
    });
    <?php unset($_SESSION['modal_title'], $_SESSION['modal_message'], $_SESSION['modal_type']); ?>
<?php endif; ?>
</script>

<?php include '../../includes/footer.php'; ?>