@include('header')
<div class="container-fluid flex-grow-1 container-p-y">


    <div class="row">
        <!-- customar project  start -->
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center m-l-0">



                        <div class="col-sm-2 text-left">
                            <button class="btn btn-success btn-sm mb-3 btn-round" data-toggle="modal"
                                data-target="#modal-report" id="add_button"><i class="feather icon-plus"></i> Add
                                User</button>
                        </div>


                    </div>
                    <hr>
                    <div class="table-responsive" id="custresult">

                    </div>
                </div>
            </div>
        </div>
        <!-- customar project  end -->
    </div>
</div>

<div class="modal fade" id="modal-report" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" style="max-width: 70rem; ">
        <div class="modal-content">


            <div class="modal-header">
                <h5 class="modal-title">Add User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="validation-form" method="POST" enctype="multipart/form-data">
                    <div class="row">
                        @csrf
                        <input type="hidden" name="action" id="action" value="Save">
                        <input type="hidden" name="id" id="id" />
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="floating-label" for="Name">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Name" name="Name" placeholder="" required>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="floating-label" for="ShortName">Short Name</label>
                                <input type="text" class="form-control" id="ShortName" name="ShortName" placeholder="">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="floating-label" for="Name">User Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Username" name="Username" placeholder=""
                                    oninput="checkUsername()" required>
                                <span id="error_msg" style="color:red;display: none;">Username Already Exists!</span>
                            </div>

                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="floating-label" for="Name">Password <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Password" name="Password" placeholder=""
                                    required>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="floating-label" for="gender">Type <span
                                        class="text-danger">*</span></label>
                                <select class="form-control" id="Type" name="Type" required
                                    onchange="getType(this.value)">
                                    <option value=""></option>
                                    <option value="Admin">Admin</option>
                                    <option value="Consultant">Consultant</option>
                                    <option value="Optometrist">Optometrist</option>
                                    <option value="Reception">Reception</option>
                                    <option value="Optical">Optical</option>
                                    <option value="Optical Admin">Optical Admin</option>
                                </select>
                            </div>
                        </div>
                        <script type="text/javascript">
                        function getType(val) {
                            if (val == 'Consultant') {
                                $('.required_cls').attr('required', 'required');
                                $('.star').show();
                                $('.consultant-sign-field').show();
                            } else {
                                $('.required_cls').attr('required', false);
                                $('.star').hide();
                                $('.consultant-sign-field').hide();
                            }
                            $('.referred-user-field').show();
                        }

                        function updateDigitalSignPreviewSize() {
                            var w = parseInt($('#DigitalSignWidth').val(), 10) || 130;
                            var h = parseInt($('#DigitalSignHeight').val(), 10) || 45;
                            $('#DigitalSignPreviewImg').css({
                                width: w + 'px',
                                height: h + 'px',
                                maxHeight: 'none',
                                objectFit: 'contain'
                            });
                        }
                        </script>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="floating-label" for="Phone">Mobile <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Phone" name="Phone" placeholder=""
                                    onKeyPress="return isNumberKey(event)" required>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="Phone">Registration No <span class="text-danger star"
                                        style="display:none;">*</span></label>
                                <input type="text" class="form-control required_cls" id="RegNo" name="RegNo"
                                    placeholder="">
                            </div>
                        </div>


                        <div class="col-sm-2">
                            <div class="form-group">
                                <label class="floating-label" for="Phone">Fees <span class="text-danger star"
                                        style="display:none;">*</span></label>
                                <input type="text" class="form-control required_cls" id="Fees" name="Fees"
                                    placeholder="" onKeyPress="return isNumberKey(event)" value="0">
                            </div>
                        </div>

                        <div class="col-sm-4 consultant-sign-field" style="display:none;">
                            <div class="form-group">
                                <label class="floating-label" for="DigitalSign">Digital Signature</label>
                                <input type="hidden" name="RemoveDigitalSign" id="RemoveDigitalSign" value="0">
                                <input type="file" class="form-control" id="DigitalSign" name="DigitalSign"
                                    accept="image/jpeg,image/jpg,image/png,image/webp">
                                <small class="text-muted">Shown on OPD print above consultant name (PNG/JPG).</small>
                                <div class="row mt-2">
                                    <div class="col-6">
                                        <label class="small text-muted mb-1" for="DigitalSignWidth">Width (px)</label>
                                        <input type="number" class="form-control" id="DigitalSignWidth" name="DigitalSignWidth"
                                            min="10" max="500" value="130" oninput="updateDigitalSignPreviewSize()">
                                    </div>
                                    <div class="col-6">
                                        <label class="small text-muted mb-1" for="DigitalSignHeight">Height (px)</label>
                                        <input type="number" class="form-control" id="DigitalSignHeight" name="DigitalSignHeight"
                                            min="10" max="200" value="45" oninput="updateDigitalSignPreviewSize()">
                                    </div>
                                </div>
                                <div id="DigitalSignPreview" class="mt-2 align-items-center" style="display:none;">
                                    <img id="DigitalSignPreviewImg" src="" alt="Current signature"
                                        style="width:130px;height:45px;object-fit:contain;border:1px solid #ddd;padding:4px;background:#fff;">
                                    <button type="button" class="btn btn-sm btn-danger ml-2" id="DeleteDigitalSignBtn"
                                        title="Remove signature">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4 referred-user-field">
                            <div class="form-group" style="padding-top:28px;">
                                <label class="custom-control custom-checkbox m-0">
                                    <input type="checkbox" class="custom-control-input" id="ShowInReferredUser"
                                        name="ShowInReferredUser" value="1">
                                    <span class="custom-control-label">Show in referred user</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-sm-4 referred-user-field">
                            <div class="form-group" style="padding-top:28px;">
                                <label class="custom-control custom-checkbox m-0">
                                    <input type="checkbox" class="custom-control-input" id="SetAsDefaultSendToUser"
                                        name="SetAsDefaultSendToUser" value="1">
                                    <span class="custom-control-label">Set as default</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="OtScheduledApproval">OT Scheduled Approval</label>
                                <select class="form-control" id="OtScheduledApproval" name="OtScheduledApproval">
                                    <option value="0" selected>No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="CanUpdateBackDate">Update Back Date Record</label>
                                <select class="form-control" id="CanUpdateBackDate" name="CanUpdateBackDate">
                                    <option value="0" selected>No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <div class="form-group mb-2">
                                <label class="font-weight-bold">Menu Access</label>
                                <div class="mb-2">
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="select_all_menu">Select All</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="clear_all_menu">Clear All</button>
                                </div>
                                @include('masters.partials.menu-access-accordion')
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <button class="btn btn-primary" type="submit" name="submit" id="submit">Submit</button>
                            <button class="btn btn-danger" type="reset">Clear</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@include('footerscript')
<script type="text/javascript">
var menuTypeDefaults = @json($menuTypeDefaults ?? []);
var canEditPassword = @json($canEditPassword ?? false);
var canEditUsername = @json($canEditUsername ?? false);
var passwordMask = '********';

function configureUsernameField(mode) {
    var $username = $('#Username');
    if (mode === 'add') {
        $username.prop('readonly', false).prop('required', true);
        return;
    }

    if (canEditUsername) {
        $username.prop('readonly', false).prop('required', true);
        return;
    }

    $username.prop('readonly', true).prop('required', false);
}

function configurePasswordField(mode) {
    var $pwd = $('#Password');
    if (mode === 'add') {
        $pwd.val('').prop('readonly', false).prop('required', true);
        return;
    }

    if (canEditPassword) {
        $pwd.prop('readonly', false).prop('required', true);
        return;
    }

    $pwd.val(passwordMask).prop('readonly', true).prop('required', false);
}
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

function success_toast() {
    var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';
    $.growl.notice({
        title: 'Success',
        message: 'New User Added Successfully!',
        location: isRtl ? 'tl' : 'tr'
    });
}

function error_toast() {
    var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';
    $.growl.error({
        title: 'Error',
        message: 'Username Already Exists',
        location: isRtl ? 'tl' : 'tr'
    });
}

function user_lists() {
    $.ajax({
        type: "POST",
        url: "{{ url('usermasterlist') }}",
        data: {
            _token: '{{csrf_token()}}'
        },
        success: function(data) {
            $('#custresult').html(data);
        }
    });
}

function clearMenuAccess() {
    $('.menu-module-checkbox, .menu-item-checkbox').prop('checked', false);
    $('.menu-module-checkbox').prop('indeterminate', false);
}

function expandMenuAccessValues(values) {
    var modules = @json(config('menu_access.modules'));
    var expanded = [];

    (values || []).forEach(function(key) {
        expanded.push(key);
        if (modules[key] && modules[key].items) {
            Object.keys(modules[key].items).forEach(function(itemKey) {
                expanded.push(key + '.' + itemKey);
            });
        }
    });

    return expanded;
}

function setMenuAccess(values) {
    clearMenuAccess();
    var expanded = expandMenuAccessValues(parseMenuAccess(values));
    expanded.forEach(function(key) {
        if (key === 'optical.hospital_dashboard') {
            key = 'dashboard.hospital_dashboard';
        }
        var safeId = 'menu_item_' + key.replace(/\./g, '_');
        $('#' + safeId).prop('checked', true);
    });
    syncAllModuleCheckboxes();
}

function syncModuleCheckbox(moduleKey) {
    var $items = $('.menu-item-checkbox[data-module="' + moduleKey + '"]');
    var $module = $('#menu_module_' + moduleKey);
    var checkedCount = $items.filter(':checked').length;

    if (checkedCount === 0) {
        $module.prop('checked', false).prop('indeterminate', false);
    } else if (checkedCount === $items.length) {
        $module.prop('checked', true).prop('indeterminate', false);
    } else {
        $module.prop('checked', false).prop('indeterminate', true);
    }
}

function syncAllModuleCheckboxes() {
    $('.menu-module-checkbox').each(function() {
        syncModuleCheckbox($(this).data('module'));
    });
}

function toggleModuleRows(moduleKey, show) {
    $('[data-submenu="' + moduleKey + '"], [data-submenu-head="' + moduleKey + '"]').toggleClass('d-none', !show);
    $('[data-toggle-module="' + moduleKey + '"]').text(show ? '-' : '+');
}

function applyDefaultMenuAccess(type) {
    if (!type || !menuTypeDefaults[type]) {
        return;
    }
    clearMenuAccess();
    setMenuAccess(menuTypeDefaults[type]);
    syncAllModuleCheckboxes();
}

function parseMenuAccess(raw) {
    if (!raw) {
        return [];
    }
    if (Array.isArray(raw)) {
        return raw;
    }
    try {
        var parsed = JSON.parse(raw);
        return Array.isArray(parsed) ? parsed : [];
    } catch (e) {
        return String(raw).split(',').map(function(item) {
            return item.trim();
        }).filter(Boolean);
    }
}

$(document).ready(function() {
    user_lists();

    $('#ShowInReferredUser').on('change', function() {
        if (!this.checked) {
            $('#SetAsDefaultSendToUser').prop('checked', false);
        }
    });

    $('.module-row').on('click', function(e) {
        if ($(e.target).is('input[type="checkbox"]')) {
            return;
        }
        var moduleKey = $(this).data('module');
        var isHidden = $('[data-submenu="' + moduleKey + '"]').first().hasClass('d-none');
        toggleModuleRows(moduleKey, isHidden);
    });

    $('.toggle-icon').on('click', function(e) {
        e.stopPropagation();
        var moduleKey = $(this).data('toggle-module');
        var isHidden = $('[data-submenu="' + moduleKey + '"]').first().hasClass('d-none');
        toggleModuleRows(moduleKey, isHidden);
    });

    $('.menu-module-checkbox').on('click', function(e) {
        e.stopPropagation();
    });

    $('.menu-module-checkbox').on('change', function(e) {
        e.stopPropagation();
        var moduleKey = $(this).data('module');
        var checked = $(this).is(':checked');
        $('.menu-item-checkbox[data-module="' + moduleKey + '"]').prop('checked', checked);
        $(this).prop('indeterminate', false);
        toggleModuleRows(moduleKey, true);
    });

    $('.menu-item-checkbox').on('change', function() {
        syncModuleCheckbox($(this).data('module'));
    });

    $('#select_all_menu').on('click', function() {
        $('.menu-item-checkbox').prop('checked', true);
        syncAllModuleCheckboxes();
    });

    $('#clear_all_menu').on('click', function() {
        clearMenuAccess();
    });

    $('#Type').on('change', function() {
        getType(this.value);
        applyDefaultMenuAccess(this.value);
    });

    $('#add_button').click(function() {
        $('.modal-title').html("Add <span class='font-weight-light'>New User</span>");
        $('#action').val("Save");
        $('#id').val('');

        $('#Name').val('');
        $('#ShortName').val('');
        $('#Username').val('');
        configureUsernameField('add');
        $('#Type').val('').attr("selected", true);
        configurePasswordField('add');
        $('#Phone').val('');
        $('#RegNo').val('');
        $('#Fees').val(0);
        $('#DigitalSign').val('');
        $('#RemoveDigitalSign').val('0');
        $('#DigitalSignWidth').val(130);
        $('#DigitalSignHeight').val(45);
        $('#ShowInReferredUser').prop('checked', false);
        $('#SetAsDefaultSendToUser').prop('checked', false);
        $('#OtScheduledApproval').val('0');
        $('#CanUpdateBackDate').val('0');
        $('.referred-user-field').show();
        $('#DigitalSignPreview').hide();
        clearMenuAccess();
        $('#submit').text('Submit');
    })

    $('#validation-form').on('submit', function(e) {
        e.preventDefault();
        if ($('#validation-form').valid()) {
            $.ajax({
                url: "{{ url('usermastersave') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $('#submit').attr('disabled', 'disabled');
                    $('#submit').text('Please Wait...');
                },
                success: function(data) {
                    //alert(data);
                    $('#submit').attr('disabled', false);
                    $('#submit').text('Submit');
                    //console.log(data);exit();
                    if (data == 1) {
                        $('#modal-report').modal('hide');
                        success_toast();
                        user_lists();

                    } else {
                        error_toast();
                        $('#modal-report').modal('show');
                    }

                }
            });
        }
    });

    $(document).on("click", ".update", function(event) {
        event.preventDefault();
        event.stopPropagation();
        var id = $(this).attr("data-id");
        var action = "fetch_record";
        $.ajax({
            url: "{{ url('showData') }}",
            method: "POST",
            data: {
                _token: '{{csrf_token()}}',
                id: id
            },
            dataType: "json",
            success: function(data) {
                //console.log(data);exit();
                $('#Name').val(data.Name);
                $('#ShortName').val(data.ShortName || '');
                $('#Username').val(data.Username);
                configureUsernameField('edit');
                $('#Type').val(data.Type).attr("selected", true);
                getType(data.Type);
                if (canEditPassword) {
                    $('#Password').val(data.Password);
                }
                configurePasswordField('edit');
                $('#Phone').val(data.Phone);
                $('#RegNo').val(data.RegNo);
                $('#Fees').val(data.Fees);
                $('#DigitalSign').val('');
                $('#RemoveDigitalSign').val('0');
                $('#DigitalSignWidth').val(data.DigitalSignWidth || 130);
                $('#DigitalSignHeight').val(data.DigitalSignHeight || 45);
                $('#ShowInReferredUser').prop('checked', data.ShowInReferredUser == 1 || data.ShowInReferredUser === '1');
                $('#SetAsDefaultSendToUser').prop('checked', data.SetAsDefaultSendToUser == 1 || data.SetAsDefaultSendToUser === '1');
                $('#OtScheduledApproval').val(data.OtScheduledApproval == 1 || data.OtScheduledApproval === '1' ? '1' : '0');
                $('#CanUpdateBackDate').val(data.CanUpdateBackDate == 1 || data.CanUpdateBackDate === '1' ? '1' : '0');
                updateDigitalSignPreviewSize();
                if (data.DigitalSign) {
                    $('#DigitalSignPreviewImg').attr('src', '{{ url('uploads/user-signs') }}/' + data.DigitalSign);
                    $('#DigitalSignPreview').css('display', 'flex');
                } else {
                    $('#DigitalSignPreview').hide();
                }
                setMenuAccess(data.MenuAccess);
                syncAllModuleCheckboxes();
                $('#action').val('Edit');
                $('#id').val(id);
                $('#submit').text("Update");
                $('#modal-report').modal('show');
                $('.modal-title').html(
                "Update <span class='font-weight-light'>User</span>");

            }
        });
    });

    $(document).on('click', '#DeleteDigitalSignBtn', function() {
        swal({
            title: "Remove signature?",
            text: "The digital signature will be deleted when you click Update.",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes, remove",
            cancelButtonText: "Cancel",
            closeOnConfirm: true
        }, function(isConfirm) {
            if (isConfirm) {
                $('#DigitalSignPreview').hide();
                $('#DigitalSignPreviewImg').attr('src', '');
                $('#DigitalSign').val('');
                $('#RemoveDigitalSign').val('1');
            }
        });
    });

    $('#DigitalSign').on('change', function() {
        if (this.files && this.files.length) {
            $('#RemoveDigitalSign').val('0');
        }
    });

    $(document).on("click", ".delete", function(event) {
        event.preventDefault();
        var id = $(this).attr("data-id");
        var action = "delete";
        //alert(id);
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this User!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes, delete",
            cancelButtonText: "No, cancel",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function(isConfirm) {
            if (isConfirm) {
                $.ajax({
                    url: "{{ url('deleteuser') }}",
                    method: "POST",
                    data: {
                        _token: '{{csrf_token()}}',
                        id: id
                    },

                    success: function(data) {
                        //console.log(data);exit();
                        swal("Deleted!", "User has been deleted.", "success");

                        user_lists();

                    }
                });

            } else {
                swal("Cancelled", "User is safe :)", "error");
            }
        });


    });

});
</script>