@extends('admin.layouts.layout')

@section('content')

<div class="page-container">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom border-dashed d-flex align-items-center">
                    <h4 class="header-title">Add User</h4>
                </div>

                <div class="card-body">
                    <form action="{{ route('users.store') }}" method="POST" id="userForm">
                        @csrf
                        @if ($errors->any())
                            <div class="text-red-500">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="row">
                            <div class="mb-3 col-lg-6">
                                <label for="type_of_person" class="form-label">Type of Person</label>
                                <select class="form-control whitespace-trim" name="type_of_person" id="type_of_person">
                                    <option value="">Select Type of Person</option>
                                    <option value="Individual">Individual</option>
                                    <option value="Advocate">Advocate</option>
                                    <option value="Builder">Builder</option>
                                    <option value="Bank">Bank</option>
                                    <option value="Deed Writer">Deed Writer</option>
                                </select>
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="full_name" class="form-label">Full Name</label>
                                <input type="text" id="full_name" name="full_name" placeholder="Enter Full Name" value="" class="form-control whitespace-trim">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" id="email" name="email" value="" placeholder="Enetr Email" class="form-control whitespace-trim">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="mobile_no" class="form-label">Mobile</label>
                                <input type="text" id="mobile_no" name="mobile_no" value="" placeholder="Enter Mobile No." class="form-control whitespace-trim only-number">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="address" class="form-label">Address</label>
                                <textarea type="text" id="address" name="address" value="" placeholder="Enter Address" class="form-control whitespace-trim" ></textarea>
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="id_proof_id" class="form-label">Id Proof</label>
                                <select class="form-control whitespace-trim" name="id_proof_id" id="id_proof_id">
                                    <option value="">Select Id Proof</option>
                                    @foreach ($IdProofTypes as $IdProofType)
                                        <option value="{{$IdProofType->id}}">{{$IdProofType->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="id_proof_no" class="form-label">Id Proof No.</label>
                                <input type="text" id="id_proof_no" name="id_proof_no" value="" placeholder="Enter Id Proof No." class="form-control whitespace-trim">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="password" class="form-label">Password</label>
                                <input type="text" id="password" name="password" value="" placeholder="Enter Password" class="form-control whitespace-trim">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="password_confirmation" class="form-label">Confirm Password</label>
                                <input type="text" id="password_confirmation" name="password_confirmation" value="" placeholder="Enter Confirm Password" class="form-control whitespace-trim">
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


</div> <!-- container -->

@endsection

@section('footer-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

<script>
    $(document).ready(function () {

        // Trim leading spaces
        $('.whitespace-trim').on('input', function () {
            var value = $(this).val();
            if (value && value.charAt(0) === ' ') {
                $(this).val(value.trimStart());
            }
        });

        // Allow only numbers (max 10 digits)
        $('.only-number').on('input', function () {
            var value = $(this).val().replace(/\D/g, '');
            $(this).val(value.substring(0, 10));
        });

        // Custom method for letters only
        $.validator.addMethod("lettersonly", function (value, element) {
            return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
        }, "Please enter only alphabetic characters and spaces.");

        // Custom method for email
        $.validator.addMethod("regexEmail", function (value, element) {
            return this.optional(element) || /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
        }, "Please enter a valid email address.");

        // Form validation rules
        $('#userForm').validate({
            errorElement: 'span',
            errorClass: 'text-danger',

            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            },

            rules: {
                type_of_person: { required: true },
                full_name: { required: true,},
                email: { required: true, regexEmail: true },
                mobile_no: { required: true, digits: true, minlength: 10, maxlength: 10 },
                address: { required: true, minlength: 5 },
                id_proof_id: { required: true },
                id_proof_no: { required: true },
                password: { required: true, minlength: 6 },
                password_confirmation: { required: true, equalTo: "#password" }
            },

            messages: {
                type_of_person: "Please select type of person",
                full_name: {
                    required: "Please enter full name",
                    // lettersonly: "Only alphabets and spaces allowed",
                },
                email: {
                    required: "Please enter email",
                    regexEmail: "Please enter a valid email"
                },
                mobile_no: {
                    required: "Please enter mobile number",
                    digits: "Only numbers allowed",
                    minlength: "Mobile number must be 10 digits",
                    maxlength: "Mobile number must be 10 digits"
                },
                address: {
                    required: "Please enter address",
                    minlength: "Minimum 5 characters required"
                },
                id_proof_id: "Please select ID proof",
                id_proof_no: "Please enter ID proof number",
                password: {
                    required: "Please enter password",
                    minlength: "Password must be at least 6 characters"
                },
                password_confirmation: {
                    required: "Please confirm password",
                    equalTo: "Passwords do not match"
                }
            }
        });
    });
</script>



@endsection