@extends('backend.layouts.app')

@section('content')
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Edit Employer</h4>
   </div>
   <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('employer') }}">Employer</a></li>
            <li class="breadcrumb-item active">Edit Employer</li>
         </ol>
      </div>
   </div>
</div>

<div class="container-fluid">
    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-body">
                            <form id="form" action="{{ route('employer.update', $user->id) }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="old_password">Old Password</label>
                                        <input id="old_password" type="password" class="form-control @error('old_password') is-invalid @enderror" name="old_password" required>
                                        @error('old_password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="new_password">New Password</label>
                                            <input id="new_password" type="password" class="form-control @error('new_password') is-invalid @enderror" name="new_password" required>
                                            @error('new_password')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="new_password_confirmation">Confirm New Password</label>
                                            <input id="new_password_confirmation" type="password" class="form-control @error('new_password_confirmation') is-invalid @enderror" name="new_password_confirmation" required>
                                            @error('new_password_confirmation')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>




                                    <div class="col-sm-12">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                        <a href="{{ url()->previous() }}"
                                        class="btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {

    $(document).ready(function() {
        $.validator.addMethod("regex", function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        }, "Please enter a valid email address.");

        $.validator.addMethod("strongPassword", function(value, element) {
            return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/.test(value);
        }, "Password must be at least 8 characters long and include one uppercase letter, one lowercase letter, one number, and one special character.");

        $.validator.addMethod("noOnlySpaces", function(value, element) {
            return $.trim(value).length !== 0;
        }, "Please enter a value other than spaces.");

        $('#form').validate({
            rules: {
                first_name: {
                    required: true,
                    maxlength: 100,
                    noOnlySpaces: true
                },
                last_name: {
                    required: true,
                    maxlength: 100,
                    noOnlySpaces: true
                },
                email: {
                    required: true,
                    maxlength: 100,
                    noOnlySpaces: true,
                    regex: /^\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
                },
                phone: {
                    required: true,
                    minlength: 8,
                    maxlength: 11,
                    noOnlySpaces: true,
                    number: true
                },
                gender: {
                    required: true
                },
                address: {
                    required: true,
                    maxlength: 255,
                    noOnlySpaces: true
                },
                city_id: {
                    required: true
                },
                state_id: {
                    required: true
                },
                country_id: {
                    required: true
                },
                post_code: {
                    required: true,
                    maxlength: 10,
                    noOnlySpaces: true
                },
                dob: {
                    required: true,
                    date: true
                },
                password: {
                    required: true,
                    maxlength: 100,
                    noOnlySpaces: true,
                    strongPassword: true
                },
                password_confirmation: {
                    required: true,
                    noOnlySpaces: true,
                    maxlength: 100,
                    equalTo: "#password"
                },
                mobile_country_id: {
                    required: true
                },
                is_email_verified: {
                    required: true
                }
            },
            highlight: function(element) {
            $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
            // .addClass('is-valid');
        },
        submitHandler: function(form) {
            // Disable the submit button to prevent multiple submissions
            $(form).find('button[type="submit"]').attr("disabled", true);

            // Submit the form
            form.submit();
        }
        });

        $('.toggle-password').click(function() {
            var passwordInput = $(this).closest('.form-group').find('.password-toggle');
            var passwordIcon = $(this).find('i');

            if (passwordInput.attr('type') === 'password') {
                passwordInput.attr('type', 'text');
                passwordIcon.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                passwordInput.attr('type', 'password');
                passwordIcon.removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });
    });
});
</script>
@endsection
