<?php
include("../../config/web_mysqlconnect.php");
?>

<span class="breadcrumb_head" style="height:37px;padding:9px 16px">
    Assign Queue to Department
</span>

<div class="style2-table">
    <div class="assign-card">

        <div class="row g-3">

            <!-- QUEUE -->
            <div class="col-md-4">
                <label class="section-title">Select Queue (Case)</label>
                <select id="queue_id" class="form-control">
                    <option value="">Select Queue</option>
                    <?php
                    $q = $link->query("SELECT id,queue_name FROM queue_master WHERE channel_type='Case'");
                    while ($row = $q->fetch_assoc()) {
                        echo "<option value='{$row['id']}'>{$row['queue_name']}</option>";
                    }
                    ?>
                </select>
            </div>

            <!-- DEPARTMENT -->
            <div class="col-md-4">
                <label class="section-title">Select Department</label>
                <select id="department_id" class="form-control">
                    <option value="">Select Department</option>
                    <?php
                    $d = $link->query("SELECT departmentID,department FROM department ORDER BY department");
                    while ($row = $d->fetch_assoc()) {
                        echo "<option value='{$row['departmentID']}'>{$row['department']}</option>";
                    }
                    ?>
                </select>
                <small class="text-muted">Selected departments will queue below</small>
            </div>

            <!-- BUTTON -->
            <div class="col-md-2 d-flex align-items-center">
                <button id="assignBtn" class="btn btn-success w-55">
                    Assign
                </button>
            </div>

        </div>

        <!-- Pending -->
        <hr class="hr-soft">
        <label class="section-title">Selected Departments (Pending)</label>
        <div id="pendingBox" class="tag-box"></div>

        <!-- Assigned -->
        <hr class="hr-soft">
        <label class="section-title">Assigned Departments</label>
        <div id="tagBox" class="tag-box"></div>

    </div>
</div>

<div id="toastBox" class="toast-box"></div>

<!-- ================= STYLES ================= -->
<style>
    .assign-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 18px;
    }

    .section-title {
        font-weight: 600;
        margin-bottom: 8px;
    }

    .form-control {
        height: 38px;
        border-radius: 6px;
    }
    .btn-success{
        height:38px;
        border-radius:6px;
    }


    .tag-box {
        min-height: 70px;
        border: 1px solid #d1d5db;
        background: #fafafa;
        padding: 10px;
        border-radius: 6px;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        background: #e7f1ff;
        color: #1e3a8a;
        padding: 6px 12px;
        margin: 6px 6px 0 0;
        border-radius: 20px;
        font-size: 13px;
        animation: popIn .25s ease-out;
    }

    .tag span {
        margin-left: 10px;
        cursor: pointer;
        color: red;
        font-weight: bold;
    }

    @keyframes popIn {
        from {
            transform: scale(.7);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .hr-soft {
        border-top: 1px solid #e5e7eb;
        margin: 18px 0;
    }

    .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid #fff;
        border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin .6s linear infinite;
        display: inline-block;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .toast-box {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }

    .toast-msg {
        background: #16a34a;
        color: #fff;
        padding: 10px 16px;
        border-radius: 6px;
        margin-bottom: 10px;
    }
</style>

<!-- ================= JS ================= -->
<script>
    let pendingDepartments = [];

    $(document).ready(function () {

        function showToast(msg) {
            let t = $("<div class='toast-msg'>" + msg + "</div>");
            $("#toastBox").append(t);
            setTimeout(() => { t.fadeOut(300, () => t.remove()); }, 2000);
        }

        /* LOAD ASSIGNED */
        $("#queue_id").change(function () {

            let q = $(this).val();
            if (q == "") { $("#tagBox").html(""); return; }

            $.post("admin/ajax_queue_department.php",
                { action: "get_departments", queue_id: q },
                function (res) {
                    $("#tagBox").html(res);
                });
        });

        /* ADD TO PENDING */
        $("#department_id").change(function () {

            let id = $(this).val();
            let text = $("#department_id option:selected").text();
            if (id == "") return;

            if (pendingDepartments.includes(id)) {
                $(this).val("");
                return;
            }

            pendingDepartments.push(id);

            $("#pendingBox").append(`
        <div class="tag" data-id="${id}">
            ${text}
            <span class="removePending">×</span>
        </div>
    `);

            $(this).val("");
        });

        /* REMOVE PENDING */
        $(document).on("click", ".removePending", function () {
            let id = $(this).parent().data("id");
            pendingDepartments = pendingDepartments.filter(v => v != id);
            $(this).parent().remove();
        });

        /* ASSIGN */
        $("#assignBtn").click(function () {

            let queue = $("#queue_id").val();

            if (queue == "") {
                alert("Select Queue");
                return;
            }

            if (pendingDepartments.length == 0) {
                alert("Select at least one department");
                return;
            }

            let btn = $(this);
            btn.prop("disabled", true).html("<span class='spinner'></span>");

            $.post("admin/ajax_queue_department.php", {
                action: "assign_bulk",
                departments: pendingDepartments,
                queue_id: queue
            }, function (res) {

                $("#tagBox").html(res);
                $("#pendingBox").html("");
                pendingDepartments = [];
                showToast("Departments assigned");
                btn.prop("disabled", false).html("Assign");

            });
        });

        /* REMOVE ASSIGNED */
        $(document).on("click", ".removeTag", function () {

            if (!confirm("Remove department from queue?")) return;

            let id = $(this).data("id");
            let q = $("#queue_id").val();

            $.post("admin/ajax_queue_department.php",
                { action: "remove", id: id, queue_id: q },
                function (res) {
                    $("#tagBox").html(res);
                    showToast("Department removed");
                });

        });

    });
</script>