@extends('admin/app/layout')
@section('content')
    <style>
        .edit_preview {
            margin: 0 5px;
            border: 0;
            background: transparent;
            width: auto;
            text-align: center;
            display: block;
            font-weight: 700;
        }
    </style>
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row justify-content-end mb-4">
            <!-- <div class="col-lg-auto  col-md-6 col-sm-6">
                                    <select class="form-select js-example-basic-single" aria-label="Default select example">
                                      <option selected Default>Select TLM</option>
                                      <option value="1"> TLM 1</option>
                                      <option value="2">TLM 2</option>
                                      <option value="3">TLM 2</option>
                                    </select>
                                  </div>
                                  <div class="col-lg-auto  col-md-6 col-sm-6">
                                    <select class="form-select js-example-basic-single" aria-label="Default select example">
                                      <option selected Default>Select SLM</option>
                                      <option value="1"> SLM 1</option>
                                      <option value="2">SLM 2</option>
                                      <option value="3">SLM 2</option>
                                    </select>
                                  </div>
                                  <div class="col-lg-auto  col-md-6 col-sm-6">
                                    <select class="form-select js-example-basic-single" aria-label="Default select example">
                                      <option selected Default>Select FLM</option>
                                      <option value="1"> FLM 1</option>
                                      <option value="2">FLM 2</option>
                                      <option value="3">FLM 2</option>
                                    </select>
                                  </div>
                                  <div class="col-lg-auto  col-md-6 col-sm-6">
                                    <select class="form-select js-example-basic-single" aria-label="Default select example">
                                      <option selected Default>Select SO</option>
                                      <option value="1"> SO 1</option>
                                      <option value="2">SO 2</option>
                                      <option value="3">SO 2</option>
                                    </select>
                                  </div> -->
            {{-- <div class="col-lg-auto  col-md-auto col-sm-auto">
                <div class="d-flex align-items-center">
                    <div id="reportrange" class="daterange">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span>October 25, 2023 - November 23, 2023</span> <i class="fa fa-caret-down"></i>
                    </div>
                    <input type="hidden" name="datefilter" id="datefilter">

                    <button id="applyfilter" class="btn btn-primary ms-2"><i class="fa fa-search"></i></button>
                    <button id="clearfilter" class="btn btn-danger ms-2"><i class="fa fa-times"></i></button>
                </div>
            </div> --}}
            <div class="col-lg-auto  col-md-4 col-sm-4 my-auto">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upsertUserModal"><i class="fa-solid fa-plus me-2"></i>Add User</button>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto my-auto col-12 text-center">
                <button id="ExportUserData" class="btn btn-light"> <img src="{{ asset('admin-assets/images/excel.png') }}"
                        class="me-2">Export</button>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="white_table">
                    <table class="table table-striped datatable" id="dataTable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Position Code</th>
                                <th>Employee Name</th>
                                <th>Employee Code</th>
                                <th>Parent Name</th>
                                <th>Card No.</th>
                                <th>Expiry date</th>
                                <th>Total Credits</th>
                                <th>Total Orders Placed</th>
                                <th>Status</th>
                                <th>Order Restriction</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="modal fade" id="track_hours" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="exampleModalLabel">Track Hours Details</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">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="track_houre_row">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Sr No </th>
                                                <th>Total Cartridges </th>
                                                <th>Patient Name</th>
                                                <th>Doctor Name</th>
                                                <th>Requested by</th>
                                                <th>Colleague Name</th>
                                                <th>Date And Time</th>
                                                <th>Total Hours</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>10 Cartridges </td>
                                                <td> S K Mishra</td>
                                                <td>Ajoy Choudhary</td>
                                                <td>Colleague</td>
                                                <td> Ajoy Choudhary</td>
                                                <td>
                                                    <p class="mb-0">
                                                        <span class="d-flex justify-content-center align-items-center"><i
                                                                class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                                        <span
                                                            class="d-flex justify-content-center align-items-center time_span"><i
                                                                class="fa fa-clock me-2"></i>07:00AM</span>
                                                    </p>
                                                </td>
                                                <td> <span class="badge rounded-pill text-bg-secondary"><i
                                                            class="fa-regular fa-clock me-2"></i>04
                                                        Hour</span></td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>10 Cartridges </td>
                                                <td> S K Mishra</td>
                                                <td>Ajoy Choudhary</td>
                                                <td>Colleague</td>
                                                <td> Ajoy Choudhary</td>
                                                <td>
                                                    <p class="mb-0">
                                                        <span class="d-flex justify-content-center align-items-center"><i
                                                                class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                                        <span
                                                            class="d-flex justify-content-center align-items-center time_span"><i
                                                                class="fa fa-clock me-2"></i>07:00AM</span>
                                                    </p>
                                                </td>
                                                <td> <span class="badge rounded-pill text-bg-secondary"><i
                                                            class="fa-regular fa-clock me-2"></i>04
                                                        Hour</span></td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="modal fade" id="upsertUserModal" tabindex="-1" aria-labelledby="upsertUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="upsertUserLabel">Add User</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">
                    <form id="upsertUserForm" method="post">
                        <div class="row">
                            @csrf
                            <input type="hidden" name="user_edit_id" id="user_edit_id">
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="employee_name" class="form-label">Employee Name <span
                                            class="red_star">*</span></label>
                                    <input type="text" class="form-control br_from" id="employee_name" name="employee_name"
                                        placeholder="Enter Employee Name">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="employee_code" class="form-label">Employee Code <span
                                            class="red_star">*</span></label>
                                    <input type="text" class="form-control br_from" id="employee_code" name="employee_code"
                                        placeholder="Enter Employee Code">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="designation" class="form-label">Designation <span
                                            class="red_star">*</span></label>
                                    <input type="text" class="form-control br_from" id="designation" name="designation"
                                        placeholder="Enter Designation">
                                </div>
                            </div>
                            {{-- <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1" class="form-label">Mobile Number <span
                                            class="red_star">*</span></label>
                                    <div class="flag_icon">
                                        <select class="form-select js-example-basic-single only_br"
                                            aria-label="Default select example">
                                            <option selected Default>+ 91</option>
                                            <option value="1">+ 91</option>
                                            <option value="2">+ 92</option>
                                            <option value="3">+ 93</option>
                                        </select>
                                        <input type="email" class="form-control br_from" id="exampleFormControlInput1"
                                            placeholder="Enter Mobile Number">
                                    </div>
                                </div>
                            </div> --}}
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email ID <span
                                            class="red_star">*</span></label>
                                    <input type="email" class="form-control br_from" id="email" name="email"
                                        placeholder="Enter Email ID">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="position_code" class="form-label">Position Code </label>
                                    <input type="text" class="form-control br_from" id="position_code" name="position_code"
                                        placeholder="Enter Position Code">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="parent_position_code" class="form-label">Parent Position Code </label>
                                    <input type="text" class="form-control br_from" id="parent_position_code" name="parent_position_code"
                                        placeholder="Enter Parent Position Code">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="employee_state" class="form-label">ZONE </label>
                                    <input type="text" class="form-control br_from" id="employee_state" name="employee_state"
                                        placeholder="Enter ZONE">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="employee_hq" class="form-label">HQ Name </label>
                                    <input type="text" class="form-control br_from" id="employee_hq" name="employee_hq"
                                        placeholder="Enter HQ Name">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="employee_address" class="form-label">AREA </label>
                                    <input type="text" class="form-control br_from" id="employee_address" name="employee_address"
                                        placeholder="Enter AREA">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="total_points" class="form-label">Total Points <span
                                            class="red_star">*</span></label>
                                    <input type="text" class="form-control br_from" id="total_points" name="total_points"
                                        placeholder="Enter Total Points">
                                </div>
                            </div>
                            <div class="col-lg-12 text-center">
                                <div class="mb-3">
                                    {{-- onclick="location.href = '';" --}}
                                    <button type="submit" id="upsertUserSubmitBtn" class="btn btn-primary mt-4">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/additional-methods.min.js"></script>
    <script>
        function editUserFormDataSet(userId, employee_name, employee_code, designation, email, position_code, parent_position_code, employee_state,
        employee_hq, employee_address, total_points) {
            $("#upsertUserLabel").text("Edit User");
            $("#user_edit_id").val(userId);

            $("#employee_name").val(employee_name);
            $("#employee_code").val(employee_code);
            $("#designation").val(designation);
            $("#email").val(email);
            $("#position_code").val(position_code);
            $("#parent_position_code").val(parent_position_code);
            $("#employee_state").val(employee_state);

            $("#employee_hq").val(employee_hq);
            $("#employee_address").val(employee_address);
            $("#total_points").val(total_points);
            // $("#position_code").prop('disabled', true);
        }
        // $('#applyfilter').click(function() {
        //     filterData();
        // });

        // $('#clearfilter').click(function() {
        //     window.location.reload();
        // });

        $('#ExportUserData').on('click', function() {
            // var select_user = $('#select_user').val();
            var datefilter = $('#datefilter').val();
            var url = "{{ route('downloadUserData') }}" + "?datefilter=" + datefilter;
            window.location.replace(url);
        });

        function restrictOrder(id) {
            $.ajax({
                url: "{{ route('restrictOrder') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $.notify(response.msg, "success");
                        filterData();
                    } else
                        $.notify(response.msg, "error");
                }
            });
        }

        function status(id) {
            $.ajax({
                url: "{{ route('updateUserStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $.notify(response.msg, "success");
                        filterData();
                    } else
                        $.notify(response.msg, "error");
                }
            });
        }

        function filterData() {
            var table = $('#dataTable').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                language: {
                    searchPlaceholder: "Search"
                },
                ajax: {
                    url: "{{ route('userDetailPaginate') }}",
                    data: function(d) {
                        _token: "{{ csrf_token() }}";
                        d.datefilter = $('#datefilter').val();
                    },
                },
                // "drawCallback": function(settings) {
                    // new VenoBox({
                    //     selector: ".vbox-item",
                    //     numeration: true,
                    //     infinigall: true,
                    //     share: true,
                    //     spinner: 'plane'
                    // });
                // },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'position_code',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'employee_name',
                        name: 'employee_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'employee_code',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'parent_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'card_number',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'card_date',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'total_points',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total_orders',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'user_status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'restrict_order',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false,
                        searchable: true
                    }
                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    },
                }, ],
            });
        }

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

            $('#upsertUserModal').on('hidden.bs.modal', function() {
                // Reset form fields
                $(this).find('form')[0].reset();

                $("#upsertUserLabel").text("Add User");
                // Reset hidden input specifically
                $('#user_edit_id').val('');

                // Reset select boxes to their default value (usually the first option)
                // $(this).find('select').val('').trigger('change');

                // Clear validation error messages and reset the form's validation state
                var form = $(this).find('form');
                form.validate().resetForm(); // Clears error messages
                form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
            });

            // Custom validations for form
            jQuery.validator.addMethod("alphanumericWithSpaces", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9\s]+$/.test(value);
            }, "Only letters, numbers, and spaces are allowed");

            $.validator.addMethod("alphanumericOnly", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
            }, "Only letters and numbers are allowed");

            $.validator.addMethod("notOnlySpaces", function(value, element) {
                if (this.optional(element)) {
                    return true; // ✅ allow empty values if field not required
                }
                return $.trim(value).length > 0;
            }, "This field cannot contain only spaces.");

            $("#upsertUserForm").validate({
                ignore: ".ignore",
                rules: {
                    employee_name: {
                        required: true,
                        alphanumericWithSpaces: true,
                        minlength: 1,
                        maxlength: 200,
                        notOnlySpaces: true
                    },
                    employee_code: {
                        required: true,
                        alphanumericOnly: true,
                        minlength: 1,
                        maxlength: 50,
                        notOnlySpaces: true
                    },
                    position_code: {
                        alphanumericOnly: true,
                        minlength: 1,
                        maxlength: 25,
                        notOnlySpaces: true,
                    },
                    parent_position_code: {
                        alphanumericOnly: true,
                        minlength: 1,
                        maxlength: 25,
                        notOnlySpaces: true,
                    },
                    // mobile_no: {
                    //     required: true,
                    //     minlength: 8,
                    //     maxlength: 10,
                    //     pattern: /^[0-9]*$/,
                    //     notOnlySpaces: true,
                    // },
                    designation: {
                        required: true,
                        alphanumericWithSpaces: true,
                        minlength: 1,
                        maxlength: 100,
                        notOnlySpaces: true
                    },
                    email: {
                        required: true,
                        email: true,
                        // minlength: 1,
                        maxlength: 200,
                        notOnlySpaces: true
                    },
                    employee_state: {
                        alphanumericOnly: true,
                        minlength: 1,
                        maxlength: 100,
                        notOnlySpaces: true
                    },
                    employee_hq: {
                        alphanumericOnly: true,
                        minlength: 1,
                        maxlength: 100,
                        notOnlySpaces: true
                    },
                    employee_address: {
                        alphanumericOnly: true,
                        minlength: 1,
                        maxlength: 255,
                        notOnlySpaces: true
                    },
                    total_points: {
                        required: true,
                        digits: true
                    }
                },
                messages: {
                    employee_name: {
                        required: "Employee Name is required.",
                        pattern: "Employee Name can only contain letters and spaces.",
                        minlength: "Employee Name must be at least 1 character long.",
                        maxlength: "Employee Name must not exceed 100 characters."
                    },
                    employee_code: {
                        required: "Employee Code is required.",
                        pattern: "Employee Code can only contain letters and numbers.",
                        minlength: "Employee Code must be at least 1 character long.",
                        maxlength: "Employee Code must not exceed 20 characters."
                    },
                    // mobile_no: {
                    //     required: "Mobile No is required.",
                    //     minlength: "Mobile No must be at least 8 digits long.",
                    //     maxlength: "Mobile No must not exceed 10 digits.",
                    //     pattern: "Mobile No can only contain digits."
                    // },
                    email: {
                        required: "Email Id is required.",
                        // email: "Enter a valid email address.",
                        // minlength: "Email Id must be at least 1 character long.",
                        maxlength: "Email Id must not exceed 200 characters."
                    },
                    designation: {
                        required: "Designation is required.",
                        pattern: "Designation can only contain letters and numbers.",
                        minlength: "Designation must be at least 1 character long.",
                        maxlength: "Designation must not exceed 100 characters."
                    },
                    employee_state: {
                        required: "ZONE is required.",
                        pattern: "ZONE can only contain letters and numbers.",
                        minlength: "ZONE must be at least 1 character long.",
                        maxlength: "ZONE must not exceed 20 characters."
                    },
                    employee_hq: {
                        required: "HQ Name is required.",
                        pattern: "HQ Name can only contain letters and spaces.",
                        minlength: "HQ Name must be at least 1 character long.",
                        maxlength: "HQ Name must not exceed 100 characters."
                    },
                    employee_address: {
                        required: "AREA is required.",
                        pattern: "AREA can only contain letters and spaces.",
                        minlength: "AREA must be at least 1 character long.",
                        maxlength: "AREA must not exceed 100 characters."
                    },
                    total_points: {
                        required: "Total Points is required.",
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.is("select")) {
                        error.appendTo(element.closest(".mb-3"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    let formData = new FormData($("#upsertUserForm")[0]);
                    $.ajax({
                        url: "{{ route('admin.upsertUser') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1) {
                                $.notify(response.message, "success");

                                form.reset();
                                $('#upsertUserModal').modal('hide');
                                $('#dataTable').DataTable().ajax.reload();
                            } else {
                               $.notify(response.message, "error");
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection