@section('title','Edit User')
@include('layout.header')
@include('layout.sidebar')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
    .error{
        color: red;
    }
    .input-group-append {
    position: relative;
}
.input-group-append .input-group-text-start {
    position: absolute;    right: 10px;
    top: 11px;
}
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Edit User</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Edit User</li>
        </ul>
    </div>

</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                    <form action="{{ route('edit-user',[$user->id])}}" method="POST" id="user_form" >
                    @method('PUT')
                        @csrf
                            <div class="mt-5">
                                <div class="row mt-6">
                                    <div class="col-md-6 mt-3">
                                        <label  for="name" class="form-label">User Name <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="name" name="name" value="{{ old('name', $user->name) }}"  placeholder="User Name" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="email" class="form-label">User Email Id<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="email" class="form-control " id="email" name="email" value="{{ old('email', $user->email) }}" placeholder="User Email Id" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="mobile_no" class="form-label">User Mobile No <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="number" maxlength="15" minlength="10" class="form-control mobile-number" id="mobile_no" name="mobile_no" value="{{ old('mobile_no', $user->mobile_no) }}" placeholder="User Mobile No" >
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label for="dob" class="form-label">User Dob<span class="error"> *</span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="dob" name="dob" placeholder="Start Date" value="{{date('d/m/Y', strtotime($user->dob));}}">
                                            <div class="input-group-append">
                                                <span class="input-group-text-start" id="text-start-en"><i
                                                        class="fas fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- <div class="col-md-6 mt-3">
                                        <label  for="dob" class="form-label">User Dob </label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="dob" name="dob" placeholder="dob" value="{{date('d/m/Y', strtotime($user->dob));}}">
                                            <div class="input-group-append">
                                                <span class="input-group-text-start" id="text-start-en"><i
                                                        class="fas fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                    </div> -->

                                    <div class="col-md-6 mt-3">
                                        <label  for="address" class="form-label">User Address </label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="address" name="address" value="{{ old('address', $user->address) }}"  placeholder="User Address" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="status" class="form-label">Status <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" name="status" data-control="select2" data-placeholder="Select Status">
                                                <option value=""> Select Status </option>
                                                <option value="Active" {{ old('status', $user->status) == "Active" ? 'selected' : ''}}> Active </option>
                                                <option value="InActive" {{ old('status', $user->status) == "InActive" ? 'selected' : ''}}> InActive </option>
                                            </select>
                                        </div>
                                    </div>
                                    <!-- <div class="col-md-6 mt-3">
                                        <input type="checkbox" id="changePasswordCheckbox" name="pwdchecked"> Change Password
                                    </div> -->
                                    
                                    <div id="passwordFields" style="display:none;"> 
                                        <div class="row mt-6">
                                            <div class="col-md-6 mt-3">
                                                <label  for="password" class="form-label">New Password <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <input type="password" class="form-control " id="password" name="password" placeholder="User Password" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="col-md-6 mt-3">
                                                <label  for="confirm_password" class="form-label">Confirm Password <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <input type="password" class="form-control " id="confirm_password" name="confirm_password" placeholder="Confirm Password" >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group mb-5 col-md-2">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                    <div class="form-group mb-5 col-md-2">
                                        <a  href="{{ url('/Users')}}"  class="form-control btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                    </form>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')
<script>
     $(document).ready(function() {
        $('#dob').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoApply: true,
            minDate: true,
            locale: {
                format: 'DD/MM/YYYY'
        }});

        $('#dob').on('click', function() {
            $('#dob').focus();
        });

        $("#changePasswordCheckbox").change(function() {
            if (this.checked) {
                $("#passwordFields").show();
            } else {
                $("#passwordFields").hide();
            }
        });
    });

    // Password validation 
    $.validator.addMethod("checklower", function(value, element) {
    return /[a-z]/.test(value);
    }, "Need at least 1 lowercase alphabet");

    $.validator.addMethod("checkupper", function(value, element) {
    return /[A-Z]/.test(value);
    }, "Need at least 1 uppercase alphabet");

    $.validator.addMethod("checkdigit", function(value, element) {
    return /\d/.test(value);
    }, "Need at least 1 digit");
</script>
<script>
    $("#user_form").validate({
    debug: true,
    rules: {
        email: {required: true},
        mobile_no: {required: true,digits: true,minlength: 10,maxlength: 15, uniqueMobileNo: true},
        name: {required: true},
        status:{required: true},
    },
    messages: {
           
            name: {
            required: 'User Name is Required.',
            },

            email: {
            required: 'Email Id is Required.'
            },

            mobile_no: {
                required: "Mobile No is Required.",
                digits: "Please enter only digits.",
                minlength: "Mobile No must be at least 10 digits.",
                maxlength: "Mobile No must not exceed 15 digits."
            },

            status: {
            required: 'Status is Required.',
            },
          
    },
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },
    submitHandler: function(form) {
        $(".submit").attr("disabled", true);
        form.submit();
    }
});

$.validator.addMethod("uniqueMobileNo", function (value, element) {
    var mobileNumbers = $('.mobile-number').map(function () {
        return $(this).val();
    }).get();
    return $.grep(mobileNumbers, function (el, i) {
        return el === value;
    }).length === 1;
    }, "Duplicate mobile numbers are not allowed.");
</script>