@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">Application Report</h4>
                </div>

                <div class="card-body">
                    <form action="{{ route('report.export.application') }}" method="POST" >
                        @csrf
                        <div class="row">
                            <div class="mb-3 col-lg-6">
                                <label for="type_of_person" class="form-label">Site Name</label>
                                <select class="form-control whitespace-trim" name="type_of_person" id="type_of_person">
                                    <option>Select Site</option>
                                    <option value="">All Sites</option>
                                    @foreach ($sites as $site)
                                        <option value="{{ $site->id }}">{{ $site->site_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label class="form-label mb-0">Date to Date</label>
                                <input type="text" name="date_range" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="month" class="form-label">Month</label>
                                <input type="month" id="month" name="month" value="" 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