<div class="row">
    <div class="col-md-12 col-sm-12">
        <div class="card">
            <div class="card-header space-between">
                <h4><?= __('waiter_list'); ?></h4>
                <a href="#addModal" class="btn btn-secondary btn-sm" data-toggle="modal"><i class="fa fa-plus"></i> <?= __('add_new'); ?></a>
            </div>
            <div class="card-body">
                <div class="table-responsive responsiveTable">
                    <table class="table table-sprited">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th><?= __('name'); ?></th>
                                <th><?= __('email'); ?></th>
                                <th><?= __('phone'); ?></th>
                                <th><?= __('table'); ?></th>
                                <th><?= __('permission'); ?></th>
                                <th><?= __('status'); ?></th>
                                <th><?= __('action'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($staff_list as  $key => $row): ?>
                                <tr>
                                    <td data-label="#"><?= $key + 1;; ?></td>
                                    <td data-label="<?= __('name'); ?>"><?= $row['name'] ?? ''; ?></td>
                                    <td data-label="<?= __('email'); ?>"><?= $row['email'] ?? ''; ?></td>
                                    <td data-label="<?= __('phone'); ?>"><?= $row['phone'] ?? ''; ?></td>
                                    <td data-label="<?= __('table'); ?>">

                                        <?php
                                        $table_nos = __convertData($row['table_no'], 'array');

                                        foreach ($table_nos as $table_no):
                                            $table = __table($table_no);
                                            if (!empty($table)):
                                        ?>
                                                <?= $table->area_name ?? ""; ?> / <?= $table->name ?? ""; ?><br>
                                        <?php
                                            endif;
                                        endforeach;
                                        ?>
                                    </td>

                                    <td data-label="<?= __('permission'); ?>">

                                        <?php
                                        $permissions = __convertData($row['permission'], 'array');
                                        if (!empty($permissions)):
                                            foreach ($permissions as $key => $per):
                                                if (!empty($key)):
                                        ?>
                                                    <label class="label label-default"> <?= __($key) ?></label>
                                        <?php
                                                endif;
                                            endforeach;
                                        endif;
                                        ?>
                                    </td>
                                    <td data-label="<?= __('status'); ?>"> <?php if (is_access('change-status') == 1) : ?>
                                            <a href="javascript:;" data-id="<?= html_escape($row['id']); ?>" data-status="<?= html_escape($row['status']); ?>" data-table="staff_list" class="label <?= $row['status'] == 1 ? 'label-success' : 'label-danger' ?> change_status"> <i class="fa <?= $row['status'] == 1 ? 'fa-check' : 'fa-close' ?>"></i>&nbsp; <?= $row['status'] == 1 ? (!empty(lang('live')) ? lang('live') : "Live") : (!empty(lang('hide')) ? lang('hide') : "Hide"); ?></a>
                                        <?php endif; ?>
                                    </td>
                                    <td data-label="<?= __('action'); ?>">
                                        <?php if (is_access('update') == 1) : ?>
                                            <a href="javascript:;" class="btn btn-info btn-sm edit-staff"
                                                data-staff='<?= htmlspecialchars(json_encode($row), ENT_QUOTES, 'UTF-8') ?>'>
                                                <i class="fa fa-edit"></i> <?= !empty(lang('edit')) ? lang('edit') : "edit"; ?></a>
                                        <?php endif; ?>
                                        <?php if (is_access('delete') == 1) : ?>
                                            <a href="<?= base_url('delete-item/' . html_escape($row['id']) . '/staff_list'); ?>" class="action_btn btn btn-danger btn-sm" data-msg="<?= !empty(lang('want_to_delete')) ? lang('want_to_delete') : "want to delete"; ?>"><i class="fa fa-trash"></i> <?= !empty(lang('delete')) ? lang('delete') : "Delete"; ?></a>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form action="<?= base_url("admin/restaurant/add_waiter") ?>" method="post" onsubmit="formSubmit(event,this);">
            <?= csrf(); ?>
            <div class="modal-content">
                <div class="modal-header space-between">
                    <h5 class="modal-title flex-1" id="my-modal-title"><?= __('add_new'); ?></h5>
                    <button class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label><?= __('table'); ?></label>
                        <select name="table_no[]" id="table_no" class="form-control select2" multiple>
                            <?php foreach ($table_list as  $key => $table): ?>
                                <option value="<?= $table['id']; ?>"><?= $table['area_name'] ?> / <?= $table['name'] ?? ''; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label><?= __('name'); ?></label>
                        <input type="text" name="name" class="form-control">
                    </div>

                    <div class="form-group">
                        <label><?= __('email'); ?></label>
                        <input type="text" name="email" class="form-control">
                    </div>
                    <div class="form-group">
                        <label><?= __('phone'); ?></label>
                        <input type="text" name="phone" class="form-control">
                    </div>
                    <div class="form-group">
                        <label><?= __('password'); ?></label>
                        <input type="password" name="password" class="form-control">
                    </div>

                    <div class="form-group">
                        <label><?= __('permission'); ?></label>
                        <div class="mt-10 d-flex gap-10">
                            <label class="custom-checkbox label label-default label_input"><input type="checkbox" name="permission[pos]" value="1"><?= __('pos'); ?></label>
                            <label class="custom-checkbox label label-default label_input"><input type="checkbox" name="permission[live_order]" value="1"><?= __('live_order'); ?></label>
                            <label class="custom-checkbox label label-default label_input"><input type="checkbox" name="permission[kds]" value="1"><?= __('kds'); ?></label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-secondary"><?= __('submit'); ?></button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <form action="<?= base_url("admin/restaurant/add_waiter") ?>" method="post" onsubmit="formSubmit(event,this);">
            <?= csrf(); ?>
            <div class="modal-content">
                <div class="modal-header space-between">
                    <h5 class="modal-title flex-1" id="my-modal-title"><?= __('edit'); ?></h5>
                    <button class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label><?= __('table'); ?></label>
                        <select name="table_no[]" id="table_no1" class="form-control select2" multiple>
                            <?php foreach ($table_list as  $key => $table): ?>
                                <option value="<?= $table['id']; ?>"><?= $table['area_name'] ?> / <?= $table['name'] ?? ''; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label><?= __('name'); ?></label>
                        <input type="text" name="name" class="form-control" value="">
                    </div>

                    <div class="form-group">
                        <label><?= __('email'); ?></label>
                        <input type="text" name="email" class="form-control" value="">
                    </div>
                    <div class="form-group">
                        <label><?= __('phone'); ?></label>
                        <input type="text" name="phone" class="form-control number" value="">
                    </div>

                    <div class="form-group">
                        <label><?= __('permission'); ?></label>
                        <div class="mt-10 d-flex gap-10">
                            <label class="custom-checkbox label label-default label_input"><input type="checkbox" name="permission[pos]" value="1"><?= __('pos'); ?></label>
                            <label class="custom-checkbox label label-default label_input"><input type="checkbox" name="permission[live_order]" value="1"><?= __('live_order'); ?></label>
                            <label class="custom-checkbox label label-default label_input"><input type="checkbox" name="permission[kds]" value="1"><?= __('kds'); ?></label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="id" value="<?= isset($staff["id"]) && !empty($staff["id"]) ? $staff["id"] : 0; ?>">
                    <button type="submit" class="btn btn-secondary"><?= __('submit'); ?></button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        $(document).on('click', '.edit-staff', function() {
            const staffData = $(this).data('staff');


            $('#editModal [name="id"]').val(staffData.id);
            $('#editModal [name="name"]').val(staffData.name);
            $('#editModal [name="email"]').val(staffData.email);
            $('#editModal [name="phone"]').val(staffData.phone);


            if (staffData.table_no) {
                const tables = JSON.parse(staffData.table_no);
                $('#editModal [name="table_no[]"]').val(tables).trigger('change');
            }

            $('#editModal [name^="permission"]').prop('checked', false);

            if (staffData.permission) {
                const perms = typeof staffData.permission === 'string' ? JSON.parse(staffData.permission) : staffData.permission;
                for (const key in perms) {
                    if (perms[key]) {
                        $('#editModal [name="permission[' + key + ']"]').prop('checked', true);
                    }
                }
            }

            $('#editModal').modal('show');
        });
    });
</script>