<style type="text/css">
    .dragger {
        background: url(../../assets/img/dragger.png) 0px 15px no-repeat;
        cursor: move;
        cursor: grab;
    }
    .dragger:active {
        cursor: grabbing;
    }
    .ui-state-highlight {
        height: 60px;
        background: rgb(var(--primary) / 0.1);
        border: 2px dashed rgb(var(--primary));
        border-radius: 0.5rem;
    }
</style>

<!-- Admin Dashboard Settings -->
<div class="rounded-2xl border border-border bg-card shadow-sm mb-6">
    <div class="border-b border-border bg-muted/50 px-6 py-4">
        <div class="flex items-center gap-2">
            <i class="text-primary" data-lucide="layout-dashboard"></i>
            <h3 class="text-lg font-semibold text-foreground"><?= lang('admin') . ' ' . lang('dashboard') . ' ' . lang('settings') ?></h3>
        </div>
    </div>
    <div class="p-6">
        <div class="overflow-hidden rounded-lg border border-border">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-border">
                    <?php
                    $all_report = $this->db->where('report', 1)->order_by('order_no', 'ASC')->get('tbl_dashboard')->result();
                    ?>
                    <thead class="bg-muted/50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('widget_name') ?></th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('columns') ?></th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('status') ?></th>
                        </tr>
                    </thead>
                    <tbody id="report_menu" class="divide-y divide-border bg-background">
                    <?php
                    foreach ($all_report as $v_report) {
                        ?>
                        <tr class="report_menu hover:bg-muted/30 transition-colors" id="<?= $v_report->id ?>">
                            <td class="px-6 py-4 dragger">
                                <div class="flex items-center gap-2">
                                    <i class="text-muted-foreground" data-lucide="grip-vertical"></i>
                                    <span class="text-sm font-medium text-foreground"><?= lang($v_report->name) ?></span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <input type="text" data-id="<?= $v_report->id ?>" name="col" value="<?= $v_report->col ?>"
                                       class="w-24 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 change_status">
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <label class="text-sm font-medium text-foreground"><?= lang('active') ?></label>
                                    <div class="change_status">
                                        <input data-id="<?= $v_report->id ?>" data-toggle="toggle"
                                               name="status"
                                               value="1" <?php if ($v_report->status == 1) {
                                            echo 'checked';
                                        } ?> data-on="<?= lang('yes') ?>" data-off="<?= lang('no') ?>"
                                               data-onstyle="success btn-xs"
                                               data-offstyle="danger btn-xs" type="checkbox">
                                    </div>
                                </div>
                            </td>
                        </tr>
                    <?php }
                    ?>
                    </tbody>
                    <tbody id="menu" class="divide-y divide-border bg-background">
                    <?php $all_dashboard_data = $this->db->where('report', 0)->order_by('order_no', 'ASC')->get('tbl_dashboard')->result();
                    foreach ($all_dashboard_data as $v_dashboard) {
                        ?>
                        <tr class="menu hover:bg-muted/30 transition-colors" id="<?= $v_dashboard->id ?>">
                            <td class="px-6 py-4 dragger">
                                <div class="flex items-center gap-2">
                                    <i class="text-muted-foreground" data-lucide="grip-vertical"></i>
                                    <span class="text-sm font-medium text-foreground"><?= lang($v_dashboard->name) ?></span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <input data-id="<?= $v_dashboard->id ?>" type="text" name="col"
                                       value="<?= $v_dashboard->col ?>" class="w-24 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 column">
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <label class="text-sm font-medium text-foreground"><?= lang('active') ?></label>
                                    <div class="change_status">
                                        <input data-id="<?= $v_dashboard->id ?>" data-toggle="toggle"
                                               name="status"
                                               value="1" <?php if ($v_dashboard->status == 1) {
                                            echo 'checked';
                                        } ?> data-on="<?= lang('yes') ?>" data-off="<?= lang('no') ?>"
                                               data-onstyle="success btn-xs"
                                               data-offstyle="danger btn-xs" type="checkbox">
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <label data-toggle="tooltip" data-placement="top" title="<?= lang('staff_also_can_see') ?>"
                                           class="text-sm font-medium text-foreground flex items-center gap-1">
                                        <?= lang('staff') ?>
                                        <i class="text-xs text-muted-foreground" data-lucide="circle-help"></i>
                                    </label>
                                    <div class="for_staff">
                                        <input data-id="<?= $v_dashboard->id ?>" data-toggle="toggle"
                                               name="for_staff"
                                               value="1" <?php if ($v_dashboard->for_staff == 1) {
                                            echo 'checked';
                                        } ?> data-on="<?= lang('yes') ?>" data-off="<?= lang('no') ?>"
                                               data-onstyle="success btn-xs"
                                               data-offstyle="danger btn-xs" type="checkbox">
                                    </div>
                                </div>
                            </td>
                        </tr>
                    <?php }
                    ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Client Dashboard Settings -->
<div class="rounded-2xl border border-border bg-card shadow-sm">
    <div class="border-b border-border bg-muted/50 px-6 py-4">
        <div class="flex items-center gap-2">
            <i class="text-primary" data-lucide="users"></i>
            <h3 class="text-lg font-semibold text-foreground"><?= lang('client') . ' ' . lang('dashboard') . ' ' . lang('settings') ?></h3>
        </div>
    </div>
    <div class="p-6">
        <div class="overflow-hidden rounded-lg border border-border">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-border">
                    <?php
                    $all_client_report = $this->db->where('report', 2)->order_by('order_no', 'ASC')->get('tbl_dashboard')->result();
                    ?>
                    <thead class="bg-muted/50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('widget_name') ?></th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('columns') ?></th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('status') ?></th>
                        </tr>
                    </thead>
                    <tbody id="client_report_menu" class="divide-y divide-border bg-background">
                    <?php
                    foreach ($all_client_report as $v_client_report) {
                        ?>
                        <tr class="client_report_menu hover:bg-muted/30 transition-colors" id="<?= $v_client_report->id ?>">
                            <td class="px-6 py-4 dragger">
                                <div class="flex items-center gap-2">
                                    <i class="text-muted-foreground" data-lucide="grip-vertical"></i>
                                    <span class="text-sm font-medium text-foreground"><?= lang($v_client_report->name) ?></span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <input data-id="<?= $v_client_report->id ?>" type="text" name="col"
                                       value="<?= $v_client_report->col ?>" class="w-24 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 column">
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <label class="text-sm font-medium text-foreground"><?= lang('active') ?></label>
                                    <div class="change_status">
                                        <input data-id="<?= $v_client_report->id ?>" data-toggle="toggle"
                                               name="status"
                                               value="1" <?php if ($v_client_report->status == 1) {
                                            echo 'checked';
                                        } ?> data-on="<?= lang('yes') ?>" data-off="<?= lang('no') ?>"
                                               data-onstyle="success btn-xs"
                                               data-offstyle="danger btn-xs" type="checkbox">
                                    </div>
                                </div>
                            </td>
                        </tr>
                    <?php }
                    ?>
                    </tbody>
                    <tbody id="client_menu" class="divide-y divide-border bg-background">
                    <?php $all_client_dashboard_data = $this->db->where('report', 3)->order_by('order_no', 'ASC')->get('tbl_dashboard')->result();
                    foreach ($all_client_dashboard_data as $v_client_dashboard) {
                        ?>
                        <tr class="client_menu hover:bg-muted/30 transition-colors" id="<?= $v_client_dashboard->id ?>">
                            <td class="px-6 py-4 dragger">
                                <div class="flex items-center gap-2">
                                    <i class="text-muted-foreground" data-lucide="grip-vertical"></i>
                                    <span class="text-sm font-medium text-foreground"><?= lang($v_client_dashboard->name) ?></span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <input data-id="<?= $v_client_dashboard->id ?>" type="text" name="col"
                                       value="<?= $v_client_dashboard->col ?>" class="w-24 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 column">
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <label class="text-sm font-medium text-foreground"><?= lang('active') ?></label>
                                    <div class="change_status">
                                        <input data-id="<?= $v_client_dashboard->id ?>" data-toggle="toggle"
                                               name="status"
                                               value="1" <?php if ($v_client_dashboard->status == 1) {
                                            echo 'checked';
                                        } ?> data-on="<?= lang('yes') ?>" data-off="<?= lang('no') ?>"
                                               data-onstyle="success btn-xs"
                                               data-offstyle="danger btn-xs" type="checkbox">
                                    </div>
                                </div>
                            </td>
                        </tr>
                    <?php }
                    ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="<?= base_url() ?>assets/plugins/jquery-ui/jquery-u.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.change_status input[type="checkbox"]').change(function () {
            var id = $(this).data().id;
            var status = $(this).is(":checked");
            if (status == true) {
                status = 1;
            } else {
                status = 2;
            }
            $.ajax({
                type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                url: '<?= base_url()?>admin/settings/save_dashboard/' + id + '/' + status, // the url where we want to POST
                dataType: 'json', // what type of data do we expect back from the server
                encode: true,
                success: function (res) {
                    if (res) {
//                        toastr[res.status](res.message);
                    } else {
                        alert(<?= json_encode(lang('ajax_problem')) ?>);
                    }
                }
            })

        });
        $('.for_staff input[type="checkbox"]').change(function () {
            var id = $(this).data().id;
            var status = $(this).is(":checked");
            if (status == true) {
                status = 's_' + 1;
            } else {
                status = 's_' + 0;
            }

            $.ajax({
                type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                url: '<?= base_url()?>admin/settings/save_dashboard/' + id + '/' + status, // the url where we want to POST
                dataType: 'json', // what type of data do we expect back from the server
                encode: true,
                success: function (res) {
                    if (res) {
//                        toastr[res.status](res.message);
                    } else {
                        alert(<?= json_encode(lang('ajax_problem')) ?>);
                    }
                }
            })

        });
        $('input[name="col"]').change(function () {
            var id = $(this).data().id;
            var col = $(this).val();
            $.ajax({
                type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                url: '<?= base_url()?>admin/settings/save_dashboard/' + id + '/' + col, // the url where we want to POST
                dataType: 'json', // what type of data do we expect back from the server
                encode: true,
                success: function (res) {
                    if (res) {
//                        toastr[res.status](res.message);
                    } else {
                        alert(<?= json_encode(lang('ajax_problem')) ?>);
                    }
                }
            })

        });
    })
    $(function () {
        $('tbody[id^="report_menu"]').sortable({
            connectWith: ".report_menu",
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true,
            stop: function (event, ui) {
                var id = JSON.stringify(
                    $('tbody[id^="report_menu"]').sortable(
                        'toArray',
                        {
                            attribute: 'id'
                        }
                    )
                );
                var formData = {
                    'report_menu': id
                };
                $.ajax({
                    type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                    url: '<?= base_url()?>admin/settings/save_dashboard/', // the url where we want to POST
                    data: formData, // our data object
                    dataType: 'json', // what type of data do we expect back from the server
                    encode: true,
                    success: function (res) {
                        if (res) {
//                            toastr[res.status](res.message);
                        } else {
                            alert(<?= json_encode(lang('ajax_problem')) ?>);
                        }
                    }
                })

            }
        });
        $(".report_menu").disableSelection();

        $('tbody[id^="menu"]').sortable({
            connectWith: ".menu",
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true,
            stop: function (event, ui) {
                var mid = JSON.stringify(
                    $('tbody[id^="menu"]').sortable(
                        'toArray',
                        {
                            attribute: 'id'
                        }
                    )
                );

                var formData = {
                    'menu': mid
                };
                $.ajax({
                    type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                    url: '<?= base_url()?>admin/settings/save_dashboard/', // the url where we want to POST
                    data: formData, // our data object
                    dataType: 'json', // what type of data do we expect back from the server
                    encode: true,
                    success: function (res) {
                        if (res) {
//                            toastr[res.status](res.message);
                        } else {
                            alert(<?= json_encode(lang('ajax_problem')) ?>);
                        }
                    }
                })
            }
        });
        $(".menu").disableSelection();
    });
    $(function () {
        $('tbody[id^="client_report_menu"]').sortable({
            connectWith: ".client_report_menu",
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true,
            stop: function (event, ui) {
                var id = JSON.stringify(
                    $('tbody[id^="client_report_menu"]').sortable(
                        'toArray',
                        {
                            attribute: 'id'
                        }
                    )
                );
                var formData = {
                    'report_menu': id
                };
                $.ajax({
                    type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                    url: '<?= base_url()?>admin/settings/save_dashboard/', // the url where we want to POST
                    data: formData, // our data object
                    dataType: 'json', // what type of data do we expect back from the server
                    encode: true,
                    success: function (res) {
                        if (res) {
//                            toastr[res.status](res.message);
                        } else {
                            alert(<?= json_encode(lang('ajax_problem')) ?>);
                        }
                    }
                })

            }
        });
        $(".client_report_menu").disableSelection();

        $('tbody[id^="client_menu"]').sortable({
            connectWith: ".client_menu",
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true,
            stop: function (event, ui) {
                var mid = JSON.stringify(
                    $('tbody[id^="client_menu"]').sortable(
                        'toArray',
                        {
                            attribute: 'id'
                        }
                    )
                );

                var formData = {
                    'menu': mid
                };
                $.ajax({
                    type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                    url: '<?= base_url()?>admin/settings/save_dashboard/', // the url where we want to POST
                    data: formData, // our data object
                    dataType: 'json', // what type of data do we expect back from the server
                    encode: true,
                    success: function (res) {
                        if (res) {
//                            toastr[res.status](res.message);
                        } else {
                            alert(<?= json_encode(lang('ajax_problem')) ?>);
                        }
                    }
                })
            }
        });
        $(".menu").disableSelection();
    });
</script>

