@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    /* label {
        margin-bottom: unset !important;
    } */

    input[type="radio"][name="user_type"]{
        display: none;
    }
    
    input[type="radio"][name="user_type"]+label{
        display: inline-block;
        padding: 10px 15px;
        background-color: #f1f5fe;
        border-radius: 0.8rem;
        cursor: pointer;
    }

    input[type="radio"][name="user_type"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    }

    @media (max-width: 770px)   {
        td>label,td>h6>label {
            font-size: 11px !important;
        }
    }
    @media (max-width: 387px)   {
        td>label,td>h6>label {
            font-size: 8px !important;
        }
    }

    #user_username::placeholder,
    #user_email::placeholder {
        text-transform: none; /* Reset the text-transform for placeholder */
    }

    /* .days_selection_wrapper_container {
        display: flex;
        justify-content: center;
    } */

    .days_selection_wrapper {
        overflow-x: auto;
        display: flex;
        white-space: nowrap; 
        padding: 10px 0;
        width: fit-content;
        border-radius: 0.8rem;
        /* background-color: #f1f5fe; */
        max-width: 100%;
    }

    /* @media (min-width: 1111px) {
        .days_selection_wrapper {
            margin-left: auto;
            margin-right: auto;
        }
    } */
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18">
                        <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="prevbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                    </h4>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>
        
        <!-- start row -->
        <div class="row">
            <div class="card">
            <form id="formUser" action="{{ route('user.save') }}" method="POST" class="needs-validation m-0" novalidate>
                @csrf
                <input type="hidden" name="user_id" id="user_id">
                <div class="modal-body">
                    <div class="row pt-1 radiobtn">
                        <div class="col-md-12 mt-2">
                            <div class="mb-3 ">
                                <input class="form-check-inline" type="radio" name="user_type" id="super_admin" value="1" checked>
                                <label class="form-check-label me-3" for="super_admin">Super Admin</label>
                                <input class="form-check-inline" type="radio" name="user_type" id="sub_admin" value="2">
                                <label class="form-check-label me-3" for="sub_admin">Sub Admin</label>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="user_first_name" class="form-label">First Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="user_first_name" name="user_first_name"placeholder="First name" value="" required maxlength="64" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="user_last_name" class="form-label">Last Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="user_last_name" name="user_last_name"placeholder="Last name" value="" required maxlength="64" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="designation" class="form-label">Designation<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="designation" name="designation"placeholder="Designation" value="" required maxlength="64" autocomplete="off"> 
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_username" class="form-label">Username<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="user_username" name="user_username" placeholder="User name" value="" required maxlength="32" autocomplete="off" style="text-transform: lowercase;">
                            </div>
                        </div>
                        <div class="col-md-6" id="paasword_id">
                            @if($data['can_edit'] == 0)
                                <label for="user_password" class="form-label">Password<span class="text-danger">*</span></label>
                            @else
                                <div class="d-flex justify-content-between">
                                    <label for="user_password" class="form-label">Password</label>
                                    @if(Auth::user()->id == 1)
                                        <label for="reset_password" class="form-label">Reset Password <input class="form-check-input" type="checkbox" name="reset_password" id="reset_password" value="Reset Password"></label>
                                    @endif
                                </div>
                            @endif
                            <div class="mb-3 d-flex">
                                <input type="password" class="form-control" id="user_password" name="user_password" placeholder="Password" value="" required minlength="6" maxlength="14" autocomplete="off">
                                <button class="btn btn-light" title="eyebtn" type="button" id="eye1"><i class="mdi mdi-eye-off-outline"></i></button>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_email" class="form-label">Email<span class="text-danger">*</span></label>
                                @if ($id == 1 && $canEdit == 1)
                                    <input type="email" class="form-control" id="user_email" name="user_email" placeholder="Email" required autocomplete="off" disabled>
                                @else
                                    <input type="email" class="form-control" id="user_email" name="user_email" placeholder="Email" required autocomplete="off" style="text-transform: lowercase;">
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_mobile" class="form-label">Mobile<span class="text-danger">*</span></label>
                                @if ($id == 1 && $canEdit == 1)
                                    <input type="text" class="form-control" id="user_mobile" name="user_mobile" placeholder="Mobile" value="" required maxlength="10" minlength="10" autocomplete="off" disabled>
                                @else
                                    <input type="text" class="form-control" id="user_mobile" name="user_mobile" placeholder="Mobile" value="" required maxlength="10" minlength="10" autocomplete="off">
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_status" class="form-label">Status<span class="text-danger">*</span></label>
                                <select id="user_status" name="user_status" class="form-select" required>
                                    <option value="1" id="active">Active</option>
                                    <option value="0" id="Deactive">Deactive</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label" for="user_avatar">Profile Image</label>
                                <input type="file" class="form-control" id="user_avatar" name="user_avatar" placeholder="upload image" accept="image/jpeg,image/png">
                            </div>
                        </div>
                    </div>

                    @if(Auth::user()->id == 1)
                        <div class="row">
                        <div class="col-xl-12" id="time_type_id">
                                <div class="mb-3">
                                    <label for="time_category" class="form-label">Time Category<span class="text-danger">*</span></label>
                                    <select class="form-control select2-ajax" name="time_category" id="time_category" required>
                                        <option value=""></option>
                                        <option value="All Time">All Time</option>
                                        <option value="Customized Time">Customized Time</option>
                                    </select>
                                    <div class="invalid-feedback">This value is required</div>
                                </div>
                        </div>
                        </div>
                    
                        <div class="row d-none" id="days_selection_id">
                            <div class="col-xl-4">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="from_time" class="form-label">From Time<span class="text-danger">*</span></label>
                                            <input type="time" class="form-control" name="from_time" id="from_time" placeholder="hh:mm" autocomplete="off" onclick="this.showPicker()">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="to_time" class="form-label">To Time<span class="text-danger">*</span></label>
                                            <input type="time" class="form-control" name="to_time" id="to_time" placeholder="hh:mm" autocomplete="off" onclick="this.showPicker()">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-8">
                                <div class="mb-3">
                                    <label for="sunday" class="form-label">Select Days</label>
                                    {{-- <div class="days_selection_wrapper_container"> --}}
                                        <div class="days_selection_wrapper">
                                            <div class="form-check">
                                                <div class="form-check-inline">
                                                    <input type="checkbox" class="form-check-inline" name="days[]" id="sunday" value="Sunday">
                                                    <label for="sunday" class="form-label me-3">Sunday</label>
                                                    <input type="checkbox" class="form-check-inline" name="days[]" id="monday" value="Monday" checked>
                                                    <label for="monday" class="form-label me-3">Monday</label>
                                                    <input type="checkbox" class="form-check-inline" name="days[]" id="tuesday" value="Tuesday">
                                                    <label for="tuesday" class="form-label me-3">Tuesday</label>
                                                    <input type="checkbox" class="form-check-inline" name="days[]" id="wednesday" value="Wednesday">
                                                    <label for="wednesday" class="form-label me-3">Wednesday</label>
                                                    <input type="checkbox" class="form-check-inline" name="days[]" id="thursday" value="Thursday">
                                                    <label for="thursday" class="form-label me-3">Thursday</label>
                                                    <input type="checkbox" class="form-check-inline" name="days[]" id="friday" value="Friday">
                                                    <label for="friday" class="form-label me-3">Friday</label>
                                                    <input type="checkbox" class="form-check-inline" name="days[]" id="saturday" value="Saturday">
                                                    <label for="saturday" class="form-label me-3">Saturday</label>
                                                </div>
                                            </div>
                                        </div>
                                    {{-- </div> --}}
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- @if($canEdit == 1 && Auth::user()->id == 1)
                        <div class="row">
                            <div class="form-check">
                                <div class="form-input-inline">
                                    <input class="form-check-inline" type="checkbox" name="reset_password" id="reset_password" value="Reset Password" required>
                                    <label class="form-check-label me-5" for="reset_password">Reset Password</label>
                                </div>
                            </div>
                        </div>
                    @endif --}}

                    <div class="row mt-4" id="privilegeTable" style="display: none;">
                        @foreach($data['privileges'] as $key => $value)
                            @if($value['parent_id'] == 0)
                                <div class="col-xxl-3 col-md-12">
                                    <h5>
                                        <strong class="f-16">{{ $value['tab_name'] }}</strong>
                                    </h5>
                                </div>
                            @endif

                            @if ($key < count($data['privileges']) - 1 && $value['parent_id'] == 0)
                                <div class="col-xxl-9 col-md-12">
                                    <div class="row mb-3">
                                        @foreach($data['privileges'] as $subKey => $subValue)
                                            @if($subValue['parent_id'] == $value['id'])
                                                <div class="col-xxl-4 col-md-6">
                                                    <div class="form-check form-switch form-switch-md pb-2" dir="ltr">
                                                        <div class="form-check-inline">
                                                            <input class="form-check-input privileges" type="checkbox" name="privilege[{{$subValue['parent_id']}}][{{ $subValue['id'] }}]" id="child_{{ $subValue['parent_id'] }}_{{$subValue['id']}}" value="1" data-main-tab="{{ $subValue['dependent_id'] }}" data-tab-id="{{ $subKey + 1 }}" data-parent-id="{{ $subValue['parent_id'] }}">
                                                            <label for="child_{{ $subValue['parent_id'] }}_{{$subValue['id']}}" class="privilege-label">{{ $subValue['tab_name'] }}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                                <hr>
                            @endif
                        @endforeach
                    </div>

                    <div class="row">
                        <div class="col-md-10"></div>
                        <div class="col-md-2">
                            <div class="my-4">
                                <button type="submit" id="btnSaveProfile" class="btn btn-primary form-control">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            </div>
        </div>
        <!-- end row -->
    </div>
    <!-- end container-fluid -->
</div>
<!-- end page-content -->

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">  
    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };

        $('#formUser').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {
        showLoader();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();

        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            window.location="{{route('users')}}";

        } else if (responseText['status'] == 0) {
            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                        // $("#" + $form[0].id + "").removeClass('was-validated');
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }

    $(document).ready(function(){ 
        $("#user_status").select2();

        $('#user_first_name , #user_last_name, #designation').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeString(inputValue);
            $(this).val(capitalizedValue);
        });

        $('#user_mobile').on('input paste', function(){
            let value = $(this).val();

            // Remove leading zeros but keep "0" if it's the only digit
            value = notAllZeroAmt(value);

            // Set the cleaned value back to the input field
            $(this).val(value);            
        });

        $("input[type=radio][name=user_type]").on("change",function(){
            var checkedvlaue = $(this).val();

            if(checkedvlaue == 2){
                $('#privilegeTable').show();
            }else{
                $('#privilegeTable').hide();
            }
        });

        $(".privileges").on('change', function() {
            var checkbox = $(this);
            var status = $(this).is(':checked') ? 1 : 0;
           
            var activeSubTab = $(this).closest('.col-md-6').find('.privilege-label').text().trim(); // Get the sub-tab value
           
            var dependent_id = $(this).data('main-tab'); // Get the main-tab value from data attribut
            var tabId = $(this).data('tab-id');
            var ParentId = $(this).data('parent-id');
            
            var changeAgentUserPrivilegesStatusURL = "{{route('agent.user.privileges.status')}}";

            $.ajax({
                type: 'GET',
                url: changeAgentUserPrivilegesStatusURL ,
                data: {
                    dependent_id : dependent_id,
                    status : status,
                    activeSubTab : activeSubTab,
                    tabIdentifier: tabId,
                    ParentId: ParentId,
                },
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        if (status == 1) {
                            checkbox.prop("checked", true);
                        }
                        toastr["success"](resultData['msg']);
                    } else if (resultData['status'] == 0) {
                        if (resultData['msg'] == "You can't disable your dependent privilegs active status") {
                            toastr["error"](resultData['msg']);
                            checkbox.prop("checked", true);
                        } else {
                            toastr["error"](resultData['msg']);
                            checkbox.prop("checked", false);
                        }
                    }
                }
            });
        });

                    // for all checkbox status = 0
            var statusResetPrivilegs = "{{route('status.reset.privileges')}}";

            $.ajax({
                type: 'GET',
                url: statusResetPrivilegs ,
            });

            $("#time_category").val("All Time").trigger('change');
          
        $("form input").on("keyup change", function() {
            var form = $(this).closest("form");
          
            if (form.find("input.is-invalid").length > 0) {
                form.find("button").attr("disabled", true);
            } else {
                form.find("button").removeAttr("disabled");
            }
        });

        $('#user_first_name , #user_last_name').bind('keyup blur', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-zA-Z ]/g, ''));
        });
    
        $('#designation').bind('keyup blur', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-zA-Z0-9 ]/g, ''));
        });
    
        $('#user_username').bind('keyup blur', function() {
            // var node = $(this);
            // node.val(node.val().replace(/[^a-z0-9]/g, ''));

            var agent_username = $(this).val();
            var alphanumericRegex =/^[a-zA-Z][a-zA-Z0-9]*$/;

            if (agent_username !== '') {
                if (alphanumericRegex.test(agent_username)) { 
                }else{
                    $(this).val('');
                }
            }else{
                $(this).val('');
            }
        });

        $('#user_password').bind('keyup blur', function(e) {
            // $(this).val(function(_, v) {
            //     return v.replace(/\s+/g, '');
            // });
            var keyCode = e.which;

            if (keyCode === 32) {
                e.preventDefault();
                $(this).val('');
                return;
            } 
        }).on('change', function() {
            var agent_password = $(this).val();

            if (agent_password.length != 0  && (agent_password.length < 6 || agent_password.length > 14)) {
                toastr['error']("Password should be between 6 and 14 characters.");
                $("#user_password").addClass('is-invalid');
                $("#btnSaveProfile").attr("disabled", true);
            } else {
                $("#user_password").removeClass('is-invalid');
                $("#btnSaveProfile").attr("disabled", false);
            }
        });

        $('#eye1').click(function() {
            if ($('#eye1 i').hasClass('mdi-eye-off-outline')) {
                $('#eye1 i').removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline');
                $('#user_password').attr('type', 'text');
            } else {
                $('#eye1 i').removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline');
                $('#user_password').attr('type', 'password');
            }
        });
    
        $("#user_email").on("keyup", function() {
            var email = $(this).val();
            var id = $("#user_id").val();
    
            if(email != ''){
                if (!validateEmail(email)) {
                    $(this).addClass("is-invalid");
                    $("#btnSaveProfile").attr("disabled", true);
                } else {
                    $(this).removeClass("is-invalid");
                }
            }else{
                $(this).removeClass("is-invalid");
            }
            
            $.ajax({
                type: "GET",
                url: "{{ route('user.email.exits') }}",
                data: {
                    email: email,
                    user_id: id
                },
                success: function(resultData) {
                    if (resultData['status'] == 0) {
                        $("#user_email").val('').addClass("is-invalid");
                        $("#btnSaveProfile").attr("disabled", true);
    
                        toastr["error"](resultData['msg']);
                    // } else {
                    //     $("#btnSaveProfile").removeAttr("disabled");
                    }
                }
            });
        }).on('change',function(e) {
            var email = $(this).val();

            if(email.length != ''){
                if (!validateEmail(email)) {
                    $(this).addClass("is-invalid").removeClass("is-valid");
                    $("#btnSaveProfile").attr("disabled", true);
                    toastr['error']("Please enter a valid email address");
                } else {
                    $(this).removeClass("is-invalid");
                }
            }else{
                $(this).removeClass("is-invalid");
            }
        });

        var lastMobileValue = ""; 

        $('#user_mobile').on('keyup', function(e) {
            var mobile = $(this).val();
            var id = $("#user_id").val();

            if (mobile.length > 10) {
                e.preventDefault();
            }
                                                                                             
            e.target.value = this.value.replace(/[^0-9\.]/g, '');

            if (e.target.value === lastMobileValue &&  e.target.value.length === 10) {
                return;
            }
    
            if(mobile != ''){
                if (e.target.value.length === 10) {
                    $(this).removeClass("is-invalid");
        
                    // var ph = e.target.value.split("");
                    // ph.splice(3, 0, "-");
                    // ph.splice(7, 0, "-");
        
                    $.ajax({
                        type: "GET",
                        url: "{{ route('user.mobile.exits') }}",
                        data: {
                            mobile: mobile,
                            user_id: id
                        },
                        success: function(resultData) {
                            if (resultData['status'] == 0) {
                                $("#user_mobile").addClass("is-invalid");
                                $("#btnSaveProfile").attr("disabled", true);
                               
                                toastr["error"](resultData['msg']);
                                
                            // } else {
                            //     $("#btnSaveProfile").removeAttr("disabled");
                            }
                        }
                    });
                } else {
                    $(this).addClass("is-invalid");
                    $("#btnSaveProfile").attr("disabled", true);
                }
            } else {
                $(this).removeClass("is-invalid");
            }

            lastMobileValue = e.target.value;

            $('#user_mobileLength').val(e.target.value.length);
        }).on('change',function(e) {
            var mobile = $(this).val();

            if (mobile.length > 10) {
                e.preventDefault();
            }

            if(mobile.length != ''){
                if (e.target.value.length === 10) {
                    $(this).removeClass("is-invalid");
        
                }else{
                    $(this).addClass("is-invalid").removeClass("is-valid");
                    $("#btnSaveProfile").attr("disabled", true);
                    toastr['error']("Mobile number length must be 10 digits");
                }
            }else{
                $(this).removeClass("is-invalid");
            }
        });

        $("#time_category").select2({
            placeholder:'Select time type'

        }).on('change',function(){
            var value = $(this).val();

            if(value == "All Time"){
                $("#days_selection_id").addClass('d-none').find('input').attr('required',false);
                // $("#time_type_id").addClass('col-xl-12').removeClass('col-xl-6');
            }else{
                $("#days_selection_id").removeClass('d-none').find('input').attr('required',true);
                // $("#time_type_id").addClass('col-xl-6').removeClass('col-xl-12');
            }
        })
    });   

    var canEdit = "{{ $data['can_edit'] }}";

       
</script>
@endsection