@include('components/uheader')
@include('components/usidebar')

<!--  Begin CONTENT AREA  -->
<style>
.ui-datepicker-week-end {
  background: #ddd !important;
  pointer-events: none !important;
}
.ui-datepicker-week-end  a{
  background: #ddd !important;
  pointer-events: none !important;
}
</style>
        <div id="content" class="main-content">
            <div class="topbar_content mt-4">
                <h2>Candidate List</h2>
                <div class="viewAll mr-4">
                    <a href="/employee_dashboard" class="viewAllBtn">
                        <button class="btn btn-danger mr-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back</button>
                    </a>
                </div>
            </div>
            <div class="layout-px-spacing layout-top-spacing justify-content-center">
                <div class="modal-footer"> </div>
                <div class="popup_modal" id="popup">
                </div>
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                        <div class="widget-content widget-content-area br-6">
                            <form method="post" action="/send_mail">  
                                {{csrf_field()}}
                                <table id="zero-config" class="table dt-table-striped dt-table-hover" style="width:100%">
                                    <thead>
                                        <tr class="text-center">
                                            <th>Sr No</th>
                                            <th>Employee ID</th>
                                            <th>Employee Name</th>
                                            <th>Employee Email</th>
                                            <th>Status</th>
                                            <th>Password Reset</th>
                                            <th>Action</th>
                                        </tr>
                                        
                                    </thead>
                                    <tbody>
                                        @php $i = 0; @endphp
                                        @foreach($employee as $key => $employee)                                       
                                            <tr class="text-center">
                                                <td>{{$key + 1}}</td>                                         
                                                <td>{{$employee->emp_id}}</td>
                                                <td>{{$employee->name}}</td>
                                                <td>{{$employee->email}}</td>
                                                @if($employee->send_mail != "1")
                                                    <td>Mail Not Sended</td>                                                
                                                @else
                                                    <td>Mail Sended</td>
                                                @endif
                                                <td><a href="#" class="form1" data-id="{{$employee->emp_id}}"> Click Here </a> </td>
                                                <td class="text-dark"><a href="{{ route('employee.edit_candidate',$employee->emp_id) }}"> <img src="http://dev.hrms.developstaging.com/design/img/edit.svg" width="20" height="20"> </a></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="row p-2">
                                    <div class="ml-4">   
                                    <!-- <button type="submit" class="btn btn-success col-1 d-none" id="mail_submit">Submit</button> -->
                                    <!-- <a href="/employee_dashboard" class="btn btn-primary col-1">Cancel</a> -->
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Popup for reset Password -->
            <div class="modal fade" id="role" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <center>
                            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                                <div class="media-body text-start">
                                    <h5><b>Reset Password</b></h5>
                                </div>
                            </div>
                        </center>
                        <div class="modal-body">
                            <form class="form-group mb-0" method="post" action="{{route('it.change_password')}}">
                                {{@csrf_field()}}    
                                <input type="hidden" name="emp_id" value="" id="emp_change_id">
                                <div class="p-1">
                                    <input type="password" name="password" class ="form-control text" id="password" placeholder="Enter New Password">
                                </div>
                                <p class="text-danger" id="error_new"></p>                          

                                <div class="p-1">
                                    <input type="password" name="confirm_password" class ="form-control text" id="confirm_password" placeholder="Enter Confirm Password">  
                                </div>
                                <p class="text-danger" id="error_check"></p>                          
                                <div class="password-policies" id="password-policies">
                                    <h3 class="text-info" style="font-size: 20px;">What makes a strong password? </h3>
                                    <div class="hide p-2">
                                        <div>
                                            <p class="policy-length"><i class="text-dark"><strong>-></strong></i> It should be minimum 8 or maximum 12 characters long</p>
                                        </div>
                                        <div>
                                            <p class="policy-number"><i class="text-dark"><strong>-></strong></i> It should contain numbers</p>
                                        </div>
                                        <div>
                                            <p class="policy-uppercase"><i class="text-dark"><strong>-></strong></i> It should contain atleast one-uppercase</p>
                                        </div>
                                        <div>
                                            <p class="policy-special"><i class="text-dark"><strong>-></strong></i> It should contain atleast one special character</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <input type="submit" name="wish" value="Submit" id="change_pass" class="btn btn-success">
                                    <input type="button" data-dismiss="modal" value="Cancel" class="btn btn-primary ml-2" id="cancel_rolePopup">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        @if(session('done'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("done")@endphp',
                type: 'success',
                padding: '2em'
                })
            </script> 
        @elseif(session('edit'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("edit")@endphp',
                type: 'success',
                padding: '2em'
                })
            </script>
        @elseif(session('message'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("message")@endphp',
                type: 'success',
                padding: '2em'
                })
            </script>
        @elseif(session('error'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("error")@endphp',
                type: 'warning',
                padding: '2em'
            })
            </script>
        @elseif(session('delete'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("delete")@endphp',
                type: 'success',
                padding: '2em'
            })
            </script>
        @endif
    @include('components/ufooter')

    <script>
        $("#cancel_rolePopup").click(function(){
            $('#role').modal('hide');
        })

        $('.form1').click(function(){
            var emp_id = $(this).data('id');
            $('#emp_change_id').val(emp_id);


            Swal.fire({
              title: 'Are you sure?',
              text: "You want to change the password ?",
              type: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, change it!'
            }).then((result) => {
                if (result.value == true) {
                    $('#role').modal('show');
                }
            })
        });


        $("#password").keyup(function(){
            $("#password-policies").css("display","block");
                var password = $("#password").val();
                if(/[0-9]/.test(password)){
                $(".policy-number").css("color","green");
            }else{
                $(".policy-number").css("color","red");
            }
            if(/[A-Z]/.test(password)){
                $(".policy-uppercase").css("color","green");
            }else{
                $(".policy-uppercase").css("color","red");
            }
            if(/[^A-Za-z0-9]/.test(password)){
                $(".policy-special").css("color","green");
            }else{
                $(".policy-special").css("color","red");
            }
            if(password.length > 7){
                $(".policy-length").css("color","green");
            }else{
                $(".policy-length").css("color","red");
            }
            if(/[0-9]/.test(password) && /[A-Z]/.test(password) && /[^A-Za-z0-9]/.test(password) && password.length > 7) {
                $("#password-policies").css("display","none");
            }
        });
        $("#password").blur(function(){
            var password = $("#password").val();
            if(/[0-9]/.test(password) && /[A-Z]/.test(password) && /[^A-Za-z0-9]/.test(password) && password.length > 7) {
            }else{
                $("#submit").click(function(e){
                    e.preventDefault();
                });
            }
        });

        $('#change_pass').click(function(e){
            if($('#password').val() == ''){
                $('#error_new').text('This field is required*');
                e.preventDefault();
            }else{
                $('#error_new').text('');
            }
            if($('#confirm_password').val() == ''){
                $('#error_check').text('This field is required*');
                e.preventDefault();
            }else{
                $('#error_check').text('');
            }

            if($('#password').val() != $('#confirm_password').val()){
                $('#error_check').text('Password and Confirm password are not same');
                e.preventDefault();
            }
        })

      
    </script>