@include('admin.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row py-3">
        <div class="col-lg-4 my-auto col-md-4 col-sm-12">
            <h2>Manage MR</h2>
        </div>
        <div class="col-lg-8 my-auto col-md-8 col-sm-12">
            <div class="row justify-content-end">
                <div class="col-lg-auto  col-md-4 col-sm-4">
                    <select id="userStatus" name="userStatus" class="form-select js-example-basic-single"
                        aria-label="Default select example">
                        <option value="" selected Default>Select Status</option>
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                        {{-- <option value="3">Three</option> --}}
                    </select>
                </div>
                <div class="col-lg-auto col-md-4 col-sm-4">
                    <button type="button" onclick="downloadUsers()" class="btn btn-primary"><i
                            class="fa-solid fa-file-excel me-2"></i>Download
                        Report</button>
                </div>
                <div class="col-lg-auto col-md-4 col-sm-4">
                    <button type="button" onclick="showAddUserModal()" class="btn btn-primary"><i
                            class="fa-light fa-plus me-2"></i> Add New
                        MR</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_table">
                <table id="dataTable" class="table table-striped datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Qr Code</th>
                            <th>MR Name</th>
                            <th>Employee Code</th>
                            <th>Position Code</th>
                            <th>Mobile No</th>
                            <th>Registered Patients</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- <tr>
                            <td>01</td>
                            <td>
                                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
                                    data-bs-target="#view_qr">View QR</button>
                            </td>
                            <td>Ajoy Choudhary</td>
                            <td>540</td>
                            <td>15</td>
                            <td>15</td>
                            <td>
                                <div class="toggle">
                                    <input type="checkbox" />
                                    <label></label>
                                </div>
                            </td>
                        </tr> --}}

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


<div class="modal fade" id="view_qr" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title fs-5" id="userNameShow">Ajay Kaul's QR Code</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                        class="fa-solid fa-xmark"></i></button>
            </div>
            <div class="modal-body">
                <h4 class="pb-3 text-center">Scan QR code</h4>
                <div class="qr_code">
                    <img id="userQrCodeImage" src="{{ asset('admin-assets/assets/images/qr-code.png') }}">
                </div>
                <div class="input-group mb-3">
                    <input type="text" id="userQrUrl" class="form-control" placeholder="https://abc.com" disabled>
                    <span onclick="copyUrl()" class="input-group-text" id="basic-addon1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <g id="Group_21235" data-name="Group 21235" transform="translate(-1154 -439)">
                                <g id="vuesax_linear_copy" data-name="vuesax/linear/copy" transform="translate(472 57)">
                                    <g id="copy">
                                        <path id="Vector"
                                            d="M14,4.9V9.1c0,3.5-1.4,4.9-4.9,4.9H4.9C1.4,14,0,12.6,0,9.1V4.9C0,1.4,1.4,0,4.9,0H9.1C12.6,0,14,1.4,14,4.9Z"
                                            transform="translate(684 390)" fill="none" stroke="#f15a23"
                                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                        <path id="Vector-2" data-name="Vector"
                                            d="M14,4.9V9.1c0,3.5-1.4,4.9-4.9,4.9H8V10.9C8,7.4,6.6,6,3.1,6H0V4.9C0,1.4,1.4,0,4.9,0H9.1C12.6,0,14,1.4,14,4.9Z"
                                            transform="translate(690 384)" fill="none" stroke="#f15a23"
                                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                        <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z"
                                            transform="translate(682 382)" fill="none" opacity="0" />
                                    </g>
                                </g>
                            </g>
                        </svg>

                    </span>
                </div>
            </div>

        </div>
    </div>
</div>


{{-- Add User Modal --}}
<div class="modal fade" id="add_user" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add User</h3>
                <button type="button" class="btn-close" onclick="hideAddUserModal()"><i
                        class="fa-solid fa-xmark"></i></button>
            </div>
            <div class="modal-body">
                {!! Form::open([
                    'url' => '#',
                    'name' => 'validateForm',
                    'id' => 'validateForm',
                    'enctype' => 'multipart/form-data',
                ]) !!}
                <div class="mb-3">
                    <label class="form-label" for="addUserName">MR Name</label>
                    <input class="form-control" type="text" id="addUserName" name="addUserName"
                        placeholder="Enter Employee Name">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="addUserEmpCode">Employee Code</label>
                    <input class="form-control" type="text" id="addUserEmpCode" name="addUserEmpCode"
                        placeholder="Enter Employee Code">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="addUserPositionCode">Position Code</label>
                    <input class="form-control" type="text" id="addUserPositionCode" name="addUserPositionCode"
                        placeholder="Enter Position Code">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="addUserParentPositionCode">Parent Position Code</label>
                    <input class="form-control" type="text" id="addUserParentPositionCode"
                        name="addUserParentPositionCode" placeholder="Enter Parent Position Code">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="addUserMobile">Mobile</label>
                    <input class="form-control" type="text" id="addUserMobile" name="addUserMobile"
                        placeholder="Enter Mobile">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="addEmail">Email</label>
                    <input class="form-control" type="text" id="addEmail" name="addEmail"
                        placeholder="Enter Email">
                </div>

                <div class="mb-3">
                    <label class="form-label" for="addUserHq">User HQ</label>
                    <input class="form-control" type="text" id="addUserHq" name="addUserHq"
                        placeholder="Enter HQ">
                </div>

                <div class="mb-3">
                    <label class="form-label" for="addUserDesignation">Designation</label>
                    <select id="addUserDesignation" name="addUserDesignation" class="form-select"
                        aria-label="Default select example">
                        <option value="" disabled>Select Designation</option>
                        <option value="MR" selected Default>MR</option>
                        <option value="ABM">ABM</option>
                        <option value="RBM">RBM</option>
                        <option value="SM">SM</option>
                    </select>
                    {{-- <input class="form-control" type="text" id="addUserDesignation" name="addUserDesignation"> --}}
                </div>

                <div class="mb-3">
                    <label class="form-label" for="addUserStatus">Status</label>
                    <select id="addUserStatus" name="addUserStatus" class="form-select"
                        aria-label="Default select example">
                        <option value="" disabled>Select Status</option>
                        <option value="Active" selected Default>Active</option>
                        <option value="Inactive">Inactive</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="addUserRole">Role</label>
                    <select id="addUserRole" name="addUserRole" class="form-select"
                        aria-label="Default select example">
                        <option value="" disabled>Select Role</option>
                        <option value="user" selected Default>User</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>

                <div class="text-center">
                    <button type="submit" id="submit"
                        class="btn btn-primary">&nbsp;&nbsp;Submit&nbsp;&nbsp;</button>
                </div>
                {!! Form::close() !!}
            </div>

        </div>
    </div>
</div>

@include('admin.footer')

<script>
    $(document).ready(function() {
        $(function() {
            var i = 1;
            var table = $('#dataTable').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: true,
                ajax: {
                    url: "{{ route('manageMrAnalytic') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                            d.userStatus = $('#userStatus option:selected').val()
                        // d.division = $('#division option:selected').val()
                    },
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'qrCode',
                        searchable: true,
                        orderable: false,
                    },
                    {
                        data: 'userName',
                        searchable: true,
                        orderable: false,
                    },
                    {
                        data: 'empCode',
                        searchable: true,
                        orderable: false,
                    },
                    {
                        data: 'positionCode',
                        searchable: true,
                        orderable: false,
                    },
                    {
                        data: 'mobile',
                        searchable: true,
                        orderable: false,
                    },
                    {
                        data: 'registeredPatient',
                        searchable: true,
                        orderable: false,
                    },
                    {
                        data: 'status',
                        searchable: true,
                        orderable: false,
                    }

                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6, 7], // Column to target
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    }
                }, ],

            });

            $("#userStatus").on('change', function() {
                table.draw();
            });

            // $("#clearButton").click(function() {
            //     // $("#role").val('');
            //     $('#division').val('').trigger('change');
            //     $('#role').val('').trigger('change');
            //     table.draw();
            // });

        });

        jQuery.validator.addMethod("customEmailValidation", function(value, element) {
            // Modify the regex as needed for your email validation
            var emailRegex = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;

            // Check if the entered email matches the specified format
            return this.optional(element) || emailRegex.test(value);
        }, "Please enter a valid email address.");

        $('#validateForm').validate({
            ignore: ".ignore",
            rules: {
                addUserName: {
                    required: true,
                    maxlength: 25
                },
                addUserEmpCode: {
                    required: true,
                    maxlength: 10
                },
                addUserPositionCode: {
                    required: true,
                    maxlength: 10
                },
                addUserParentPositionCode: {
                    maxlength: 10
                },
                addUserMobile: {
                    required: true,
                    number: true,
                    maxlength: 10,
                    minlength: 10
                },
                addEmail: {
                    required: true,
                    email: true,
                    customEmailValidation: true,
                    maxlength: 250
                },
                addUserDesignation: {
                    required: true,
                    maxlength: 25
                },
                addUserHq: {
                    // required: true,
                    maxlength: 25
                }
            },
            messages: {

            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // return false;
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#validateForm")[0]);
                $.ajax({
                    url: "{{ route('addUser') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            $("#add_user").modal('hide');
                            $("#validateForm")[0].reset();
                            $("#validateForm").validate().resetForm();
                            $('#dataTable').DataTable().ajax.reload(null, false);

                        } else {
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.notify(jqXHR.responseJSON.message, "error");
                    }
                }); //ajax
            }
        });
    });
</script>

<script>
    function status(id) {
        $.ajax({
            url: "{{ route('statusActivity') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $.notify(response.message, "success");
                    // table.draw();
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }

    function viewQrCode(id) {
        $.ajax({
            url: "{{ route('showQrCode') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $("#userQrCodeImage").attr('src', response.UserQrData.qrImage);
                    $("#userQrUrl").val(response.UserQrData.url);
                    $("#userNameShow").html(response.UserDetails.userName);
                    $("#userQrUrl").attr('readOnly', true);
                    $("#view_qr").modal('show');
                    // $.notify(response.message, "success");
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }

    function copyUrl() {
        // Get the text to be copied
        var copyText = $("#userQrUrl").val();

        // Copy the text to the clipboard
        navigator.clipboard.writeText(copyText).then(function() {
            // Success callback
            $.notify("URL copied successfully.", "success");
        }).catch(function(error) {
            // Error callback
            console.error('Failed to copy URL: ', error);
            $.notify("Failed to copy URL. Please try again.", "error");
        });
    }

    function downloadUsers() {
        userStatus = $('#userStatus option:selected').val();

        window.location.replace("{{ route('downloadUsers') }}?userStatus=" + userStatus);
    }

    function showAddUserModal() {
        $("#add_user").modal('show');
    }

    function hideAddUserModal() {
        $("#add_user").modal('hide');
        $("#validateForm")[0].reset();
        $("#validateForm").validate().resetForm();
    }
</script>