<?php
/**
 * Message to Students Page
 * 
 * Allows administrators to select students by Darja and send them messages via Email/WhatsApp.
 */
if (!isset($_SESSION['userid'])) {
    die("Unauthorized access");
}

// No manual query needed, using $crud->darjaatCmb()
$whatsapp_config = $crud->getRecordSet("SELECT whatsapp_enabled FROM config LIMIT 1");
$whatsapp_enabled = !empty($whatsapp_config) ? (bool) $whatsapp_config[0]['whatsapp_enabled'] : false;
?>

<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-4">
                        <div class="icon-box bg-primary-subtle text-primary rounded-circle me-3">
                            <i class="bi bi-chat-left-dots fs-3"></i>
                        </div>
                        <div>
                            <h4 class="mb-0 fw-bold">طلباء سے رابطہ</h4>
                            <p class="text-muted mb-0">درجہ کے مطابق طلباء کو پیغام بھیجیں</p>
                        </div>
                    </div>

                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <label for="darja_select" class="form-label fw-semibold">درجہ منتخب کریں</label>
                            <?php $crud->darjaatCmb('darja_select', '', 'form-select form-select-lg shadow-none'); ?>
                        </div>
                        <div class="col-md-auto ms-auto">
                            <button id="check_all" class="btn btn-outline-secondary btn-sm d-none">سب منتخب
                                کریں</button>
                            <button id="uncheck_all" class="btn btn-outline-secondary btn-sm d-none">سب ختم
                                کریں</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4 d-none" id="student_list_container">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 fw-bold text-primary">طلباء کی فہرست</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light sticky-top">
                                <tr>
                                    <th width="50" class="text-center">#</th>
                                    <th>نام طالب العلم</th>
                                    <th>ولدیت</th>
                                    <th width="100" class="text-center">انتخاب</th>
                                </tr>
                            </thead>
                            <tbody id="student_table_body">
                                <!-- AJAX Content -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row d-none" id="message_composition_container">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h5 class="fw-bold mb-3">پیغام تحریر کریں</h5>
                    <div class="mb-4">
                        <textarea id="message_editor"></textarea>
                    </div>

                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <h6 class="fw-bold mb-3">ارسال کرنے کا طریقہ</h6>
                            <div class="d-flex gap-4">
                                <div class="form-check custom-checkbox">
                                    <input class="form-check-input" type="checkbox" id="send_email" value="email">
                                    <label class="form-check-label" for="send_email">
                                        ای میل (Email) کے ذریعے
                                    </label>
                                </div>
                                <div class="form-check custom-checkbox <?= !$whatsapp_enabled ? 'opacity-50' : '' ?>">
                                    <input class="form-check-input" type="checkbox" id="send_whatsapp" value="whatsapp"
                                        <?= !$whatsapp_enabled ? 'disabled' : '' ?>>
                                    <label class="form-check-label" for="send_whatsapp">
                                        واٹس ایپ (WhatsApp) کے ذریعے
                                        <?= !$whatsapp_enabled ? '<span class="badge bg-secondary ms-2 small">Disabled</span>' : '' ?>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-center gap-3">
                        <button id="send_message" class="btn btn-primary btn-lg px-5 shadow">
                            <i class="bi bi-send me-2"></i> پیغام بھیجیں
                        </button>
                        <div id="loader" class="spinner-border text-primary d-none" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>

                    <div id="progress_container" class="mt-4 d-none">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted small" id="progress_label">پیغام بھیجے جا رہے ہیں...</span>
                            <span class="text-primary fw-bold small" id="progress_percent">0%</span>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated"
                                role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TinyMCE Core -->
<?php
$config_res = $crud->getRecordSet("SELECT tinymce_api_key FROM config LIMIT 1");
$tinymce_api_key = !empty($config_res) ? $config_res[0]['tinymce_api_key'] : 'no-api-key';
?>
<script src="https://cdn.tiny.cloud/1/<?= $tinymce_api_key ?>/tinymce/6/tinymce.min.js"
    referrerpolicy="origin"></script>
<!-- Page JS -->
<script src="assets/js/message_to_students.js"></script>

<style>
    .icon-box {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-checkbox .form-check-input:checked {
        background-color: #198754;
        border-color: #198754;
    }

    .progress {
        background-color: #e9ecef;
        border-radius: 5px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    }

    .progress-bar {
        background-color: #0d6efd;
    }
</style>