@extends('../layout/form-layout')

@section('form-name', 'Users')

@section('form-area')


<form class="validate-form" id="frmdt" name="frmdt" method="POST" action="{{route('add_update_user')}}" enctype="multipart/form-data" >
    @csrf

     <!-- BEGIN: Profile Info -->
     <div class="intro-y box px-5 pt-5 mt-5">
        <div class="flex flex-col lg:flex-row border-b border-gray-200 dark:border-dark-5 pb-5 -mx-5">
            <div class="flex flex-1 px-5 items-center justify-center lg:justify-start">
                <div class="w-20 h-20 sm:w-24 sm:h-24 flex-none lg:w-32 lg:h-32 image-fit relative">
                    <img class="rounded-full" id="img_review" @if(isset($user)) src="{{asset('storage/img/userprofiles/'.$user->photo.'')}}" @else src="{{asset('dist/images/fake_user.png')}}" @endif >
                    <div class="absolute mb-1 mr-1 flex items-center justify-center bottom-0 right-0 bg-theme-1 rounded-full p-2"> <i onclick="alert('asd')" class="w-4 h-4 text-white" data-feather="camera"></i> 
                        <input @if(isset($user)) value="{{asset('storage/img/userprofiles/'.$user->photo.'')}}" @endif onchange="loadPreview(this);" type="file" id="room_img" name="room_img"
                        class="w-full h-full top-0 left-0 absolute opacity-0"> </div>
                </div>

                @if(isset($user))

                <div class="ml-5">
                    <div class="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg">{{$user->name}}</div>
                    <div class="text-gray-600">{{$user->user_group_name}}</div>
                </div>

                @endif

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

    <input name="user_id" id="user_id" type="input"  value="{{isset($user_id)? $user_id:''}}"  hidden class="input w-full border flex-1" >

    <!-- END: Profile Info -->
    <div class="intro-y tab-content mt-5">
        <div class="tab-content__pane active" id="dashboard">
            <div class="grid grid-cols-12 gap-6">
                <!-- BEGIN: Top Categories -->
                <div class="intro-y box col-span-12 lg:col-span-6">
                    <div class="p-5">
                        <div class=" mt-5" >
                            <div class="intro-y   input-form">
                                <div class="mb-2">User full name</div>
                                <input  name="user_name"  id="user_name" type="input" required class="input w-full border flex-1"
                                    value="{{isset($user)? $user->name:old('user_name')}}">
                            </div>
                        </div>
                        <div class=" mt-5" >
                            <div class="intro-y   input-form">
                                <div class="mb-2">Login Name</div>
                                <input onkeyup="usernameValidator(this)" name="username"  id="username" type="input" required class="input w-full border flex-1"
                                    value="{{isset($user)? $user->username:old('username')}}">
                            </div>
                        </div>
                        <div class=" mt-5">
                            <div class="intro-y col-span-12 sm:col-span-6 input-form">
                                <div class="mb-2">Email</div>
                                <input name="user_email" id="user_email" type="email"  required
                                    class="input w-full border flex-1" value="{{isset($user)? $user->email:old('user_email')}}">
                            </div>
                        </div>

                        <div class=" mt-5">
                            <div class="intro-y col-span-12 sm:col-span-6 input-form">
                                <div class="mb-2">Gender</div>
                                <select required  name="user_gender" id="user_gender" class="input w-full border flex-1" >
                                    <option @if(isset($user)&&$user->gender=='male') selected @endif value="male">Male</option>
                                    <option @if(isset($user)&&$user->gender=='female') selected @endif value="female" >Female</option>
                                </select>
                            </div>
                        </div>


                        <div class=" mt-5" @if(isset($permission)&&$permission) @else hidden @endif>
                            <div class="intro-y col-span-12 sm:col-span-6 input-form">
                                <div class="mb-2">Branch</div>
                                <select required name="user_branch" id="user_branch" class="input w-full border flex-1" >
                                    @foreach ($branches as $branch)
                                        <option @if(isset($user)&&$user->branch_id==$branch->id) selected @endif value="{{$branch->id}}">{{$branch->b_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- END: Top Categories -->
                <!-- BEGIN: Work In Progress -->
                
                <div class="intro-y box col-span-12 lg:col-span-6">
                    <div class="p-5">

                        <div class=" mt-5" @if(isset($permission)&&$permission) @else hidden @endif >
                            <div class="intro-y col-span-12 sm:col-span-6 input-form">
                                <div class="mb-2">User Group</div>
                                <select required name="user_group" id="user_group" class="input w-full border flex-1" >
                                    @foreach ($user_groups as $ugroup)
                                        <option @if(isset($user)&&$user->user_group_id==$ugroup->user_group_id) selected @endif value="{{$ugroup->user_group_id}}">{{$ugroup->user_group_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class=" mt-5">
                            <div class="intro-y col-span-12 sm:col-span-6 input-form">
                                <div class="mb-2">Contact Number 1</div>
                                <input onkeydown="validateMobileNumber(this)" name="user_contact" id="user_contact"  type="tel" maxlength="15"  class="input w-full border flex-1"
                                    placeholder="Eg : 081xxxxxxxxx" value="{{isset($user)? $user->contact_no:old('user_contact')}}" >
                                <label hidden id="phone_no_error"></label>
                            </div>
                        </div>

                        <div class=" mt-5">
                            <div class="intro-y col-span-12 sm:col-span-6 input-form">
                                <div class="mb-2">Address</div>
                                <input required  value="{{isset($user)? $user->address:old('user_address')}}" name="user_address" id="user_address" type="text" class="input w-full border flex-1">
                            </div>
                        </div>

                        <div class="mt-5">
                            <div class="intro-y col-span-12 sm:col-span-6 input-form">
                                <div class="mb-2">Password</div>
                                <input value="{{isset($user)? 'edited':old('user_password')}}" required name="user_password" id="user_password" type="password" class="input w-full border flex-1">
            
                            </div>
                        </div>

                        <div class="mt-5">
                            <div class="intro-y col-span-12 sm:col-span-6 input-form">
                                <div class="mb-2">Confirm Password</div>
                                <input value="{{isset($user)? 'edited':old('confirm_password')}}" name="confirm_password" id="confirm_password" type="password" class="input w-full border flex-1">
                            </div>
                        </div>

                    </div>
                </div>

                <!-- END: Work In Progress --> 
            
            </div>
        </div>
    </div>

</form>



@endsection


@if (isset($status_info))


@section('status', $status_info['status'] )

@section('status_button')
   <input class="input input--switch border" type="checkbox" id='status_btn' onchange="changeStatus(this)" @if($details->status=='1') checked @endif >
@endsection

@section('additional-info') 
    <tr>
        <th>Created By</th>
        <th style="text-align:right">{{ $status_info['created_by'] }}</th>
    </tr>
    <tr>
        <th>Created Date:</th>
        <th style="text-align:right">{{ $status_info['created_at'] }}</th>
    </tr>
    <tr>
        @if(isset($status_info['updated_by']))
        <th>Updated By:</th>
        <th style="text-align:right">{{ $status_info['updated_by'] }}</th>
        @endif
    </tr>
    <tr>
        @if(isset($status_info['updated_by']))
        <th>Updated Date:</th>
        <th style="text-align:right">{{ $status_info['updated_at'] }}</th>
        @endif
    </tr>
@endsection

@endif


@section('script-area')

<script>

    $(document).ready(function(){

        $('#save').attr('hidden',false);

    });


    function usernameValidator(x){
        
        var id = '#'+x.id;
        
        var value = $(id).val();
        
        if(value!=""&&value!=null){

            $(id).val(value.replace(/ /g,'_'));

        }

    }

    function loadPreview(input, id) {
            id = id || '#img_review';
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $(id)
                        .attr('src', e.target.result)
                        .width(200)
                        .height(150);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }


      $('#save').click(function(){

        var url = "{{route('user_validate_email')}}";
        
        $('#frmdt').validate({
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            rules:{
                username:{
                    required:true,
                    chk_username:true,
                },
                user_name:{
                    required:true,
                    chk_user_name:true,
                },
                user_email:{
                    required:true,
                    email:true,
                    chk_email:true,
                },
                user_gender:{
                    required:true,
                },
                user_branch:{
                    required:true,
                },
                user_group:{
                    required:true,
                },
                user_contact:{
                    required:true,
                },
                user_address:{
                    required:true,
                },
                user_password:{
                    required:true,
                }
            }
        });


        jQuery.validator.addMethod("chk_user_name",function(value,element){

        var user_id = $('#user_id').val();
        var user_name = $('#user_name').val();

        if(user_name!=''){

            function valdt(){
                var temp = 0;
                $.ajax({
                    type        : "POST",
                    url         : "{{ route('user_validate_user_name') }}",
                    async       : false,
                    data        : {"user_name":user_name,'user_id':user_id},
                    headers     : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    beforeSend  : function(){$("body").css("cursor","wait"); $('#user_name').addClass('data_loading');},
                    success     : function(msg){ temp=msg; $("body").css("cursor","default"); $('#user_name').removeClass('data_loading');},
                    error       : function(){ $("body").css("cursor","default"); $('#user_name').removeClass('data_loading'); console.log("Error");  }
                });

                return temp;

            }

            var vlrs = valdt();

            if(vlrs){
                return false;
            }else {
                return true;
            }

        }

        },"full name already exists");


        jQuery.validator.addMethod("chk_username",function(value,element){

        var user_id = $('#user_id').val();
        var username = $('#username').val();

        if(username!=''){

            function valdt(){
                var temp = 0;
                $.ajax({
                    type        : "POST",
                    url         : "{{ route('user_validate_username') }}",
                    async       : false,
                    data        : {"username":username,'user_id':user_id},
                    headers     : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    beforeSend  : function(){$("body").css("cursor","wait"); $('#username').addClass('data_loading');},
                    success     : function(msg){ temp=msg; $("body").css("cursor","default"); $('#username').removeClass('data_loading');},
                    error       : function(){ $("body").css("cursor","default"); $('#username').removeClass('data_loading'); console.log("Error");  }
                });

                return temp;

            }

            var vlrs = valdt();

            if(vlrs){
                return false;
            }else {
                return true;
            }

        }

        },"login name already exists");



        jQuery.validator.addMethod("chk_email",function(value,element){

            var user_id = $('#user_id').val();
            var user_email= $('#user_email').val();

            if(user_email!=''){

                function valdt(){
                    var temp = 0;
                    $.ajax({
                        type        : "POST",
                        url         : "{{ route('user_validate_email') }}",
                        async       : false,
                        data        : {"user_email":user_email,'user_id':user_id},
                        headers     : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        beforeSend  : function(){$("body").css("cursor","wait"); $('#user_email').addClass('data_loading');},
                        success     : function(msg){ temp=msg; $("body").css("cursor","default"); $('#user_email').removeClass('data_loading');},
                        error       : function(){ $("body").css("cursor","default"); $('#user_email').removeClass('data_loading'); console.log("Error");  }
                    });

                    return temp;

                }

                var vlrs = valdt();

                if(vlrs){
                    return false;
                }else {
                    return true;
                }

            }

        },"Already Existing user email");

        if($('#frmdt').valid()){

            preloader();

            $('#frmdt').submit();

        }

      });  

</script>


@if(isset($user))

<script>
    $(function(){
        $('#save').text('UPDATE');
    });
</script>

@endif




@endsection