@extends('ageless_new.maintemplate.maintemplate')
@section('title', 'Contact :: AgeLess Institute')
@section('content')
    <!-- Hero Section  -->
    <section class="hero-section-wrapper placement-hero-section contact-hero-section">
        <div class="bg-wrapper" style="background-image: url('{{ asset('ageless-new/assets/images/courses/courses-hero-banner.png') }}');">
            <div class="container-fluid">
                <div class="hero-section-inner">
                    <h2 data-aos="fade-up">Real Students. <br />Real Careers. <br /><span class="last-span">Real
                            Results.</span>
                    </h2>
                    <p data-aos="fade-up" data-aos-delay="50">Hear from the graduates who walked in with a dream and
                        walked out with the skills, confidence, and career to match.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- Hero Section  -->

    <!-- Contact Section  -->
    <section class="contact-section-wrapper">
        <div class="container-fluid">
            <div class="contact-section-inner" data-aos="fade-up" data-aos-delay="50">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <form action="{{ route('contact.submit') }}" method="POST" id="contactForm">
                    @csrf
                    <div class="section">
                        <h3>About Your Practice</h3>
                        <div class="form-group">
                            <label for="">Clinic / Company Name:<span>*</span></label>
                            <input type="text" name="clinic_name" placeholder="Clinic / Company Name:*" class="form-control"
                                value="{{ old('clinic_name') }}">
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Type of Practice:<span>*</span></label>
                                    <select class="form-select" name="type_of_practice" aria-label="Default select example">
                                        <option value="" selected disabled>Select Practice Type</option>
                                        <option value="Aesthetic Clinic" {{ old('type_of_practice') == 'Aesthetic Clinic' ? 'selected' : '' }}>Aesthetic Clinic</option>
                                        <option value="Dermatology Clinic" {{ old('type_of_practice') == 'Dermatology Clinic' ? 'selected' : '' }}>Dermatology Clinic</option>
                                        <option value="Cosmetology Clinic" {{ old('type_of_practice') == 'Cosmetology Clinic' ? 'selected' : '' }}>Cosmetology Clinic</option>
                                        <option value="Salon / Spa" {{ old('type_of_practice') == 'Salon / Spa' ? 'selected' : '' }}>Salon / Spa</option>
                                        <option value="Other" {{ old('type_of_practice') == 'Other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">City / Location:<span>*</span></label>
                                    <input type="text" name="city" placeholder="Mumbai" class="form-control" value="{{ old('city') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Website URL: (Optional)</label>
                                    <input type="text" name="website_url" placeholder="www.example.com" class="form-control"
                                        value="{{ old('website_url') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <h3>Contact Details</h3>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Your Name:<span>*</span></label>
                                    <input type="text" name="name" placeholder="AgeLess Trainer" class="form-control" value="{{ old('name') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Your Role / Designation:<span>*</span></label>
                                    <input type="text" name="role" placeholder="Trainer" class="form-control" value="{{ old('role') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">WhatsApp / Mobile Number:<span>*</span></label>
                                    <input type="text" name="mobile" placeholder="9876543210" class="form-control"
                                        value="{{ old('mobile') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Email Address:<span>*</span></label>
                                    <input type="text" name="email" placeholder="@gmail.com" class="form-control" value="{{ old('email') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Best Time to Reach You:<span>*</span></label>
                                    <input type="text" name="best_time_to_reach_you" placeholder="Morning (9am-12pm)" class="form-control"
                                        value="{{ old('best_time_to_reach_you') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <h3>What You're Looking For</h3>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Roles You Need to Fill:<span>*</span></label>
                                    <select class="form-select" name="role_you_need_to_fill" aria-label="Default select example">
                                        <option value="" selected disabled>Select Role</option>
                                        <option value="Aesthetic Therapist" {{ old('role_you_need_to_fill') == 'Aesthetic Therapist' ? 'selected' : '' }}>Aesthetic Therapist</option>
                                        <option value="Nurse" {{ old('role_you_need_to_fill') == 'Nurse' ? 'selected' : '' }}>Nurse</option>
                                        <option value="Doctor" {{ old('role_you_need_to_fill') == 'Doctor' ? 'selected' : '' }}>Doctor</option>
                                        <option value="Front Desk" {{ old('role_you_need_to_fill') == 'Front Desk' ? 'selected' : '' }}>Front Desk</option>
                                        <option value="Other" {{ old('role_you_need_to_fill') == 'Other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Approx. Number of People Needed:<span>*</span></label>
                                    <select class="form-select" name="people_needed" aria-label="Default select example">
                                        <option value="" selected disabled>Select Number</option>
                                        <option value="1" {{ old('people_needed') == '1' ? 'selected' : '' }}>1</option>
                                        <option value="2-3" {{ old('people_needed') == '2-3' ? 'selected' : '' }}>2-3</option>
                                        <option value="4-5" {{ old('people_needed') == '4-5' ? 'selected' : '' }}>4-5</option>
                                        <option value="6+" {{ old('people_needed') == '6+' ? 'selected' : '' }}>6+</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">How Soon Do You Need Them?:</label>
                                    <select class="form-select" name="how_soon_do_you_need_them" aria-label="Default select example">
                                        <option value="" selected disabled>Select Timeline</option>
                                        <option value="Immediately" {{ old('how_soon_do_you_need_them') == 'Immediately' ? 'selected' : '' }}>Immediately</option>
                                        <option value="Within 1 month" {{ old('how_soon_do_you_need_them') == 'Within 1 month' ? 'selected' : '' }}>Within 1 month</option>
                                        <option value="Within 2-3 months" {{ old('how_soon_do_you_need_them') == 'Within 2-3 months' ? 'selected' : '' }}>Within 2-3 months</option>
                                        <option value="Flexible" {{ old('how_soon_do_you_need_them') == 'Flexible' ? 'selected' : '' }}>Flexible</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <h3>Anything Specific We Should Know?</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{-- <textarea name="anything_specific" class="form-control" rows="3">{{ old('anything_specific') }}</textarea> --}}
                                    <input type="text" name="anything_specific" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="form-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="agreement" value="1" id="flexCheckDefault"
                                    {{ old('agreement') ? 'checked' : '' }}>
                                <label class="form-check-label" for="flexCheckDefault">
                                    I agree to be contacted by the AgeLess Institute placement team*
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="captcha-wrapper">
                            <div class="g-recaptcha" data-sitekey="6Lfi4bQsAAAAANL0UiHnv9yvz5BGaXx_AKc5b33t"
                                data-callback="onContactCaptchaSuccess"></div>
                            <div id="contactCaptchaError" style="color:red; font-size:12px; text-align: center; display:none;">Please verify you are human.</div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="submit-wrapper">
                            <button type="submit" class="submit_btn">Submit</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </section>
    <!-- Contact Section  -->
@endsection

@section('custome_js')
    <script>
        function onContactCaptchaSuccess() {
            $("#contactCaptchaError").hide();
        }

        $(document).ready(function() {
            setTimeout(function() {
                $('.contact-section-inner .alert').fadeOut(500, function() {
                    $(this).remove();
                });
            }, 5000);

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

            $('#contactForm .submit_btn').on('click', function() {
                if ($('#contactForm').find('[name="g-recaptcha-response"]').val() === "") {
                    $("#contactCaptchaError").show();
                } else {
                    $("#contactCaptchaError").hide();
                }
            });

            $("#contactForm").validate({
                rules: {
                    clinic_name: "required",
                    type_of_practice: "required",
                    city: "required",
                    website_url: {
                        url: true
                    },
                    name: "required",
                    role: "required",
                    mobile: {
                        required: true,
                        digits: true,
                    },
                    email: {
                        required: true,
                        strictEmail: true
                    },
                    best_time_to_reach_you: "required",
                    role_you_need_to_fill: "required",
                    people_needed: "required",
                    agreement: "required"
                },
                messages: {
                    clinic_name: "Please enter clinic/company name",
                    type_of_practice: "Please select practice type",
                    city: "Please enter city/location",
                    website_url: "Please enter a valid website URL",
                    name: "Please enter your name",
                    role: "Please enter your role/designation",
                    mobile: {
                        required: "Please enter mobile number",
                        digits: "Please enter only numeric values",
                    },
                    email: "Please enter a valid email address",
                    best_time_to_reach_you: "Please enter best time to reach you",
                    role_you_need_to_fill: "Please select role you need to fill",
                    people_needed: "Please select number of people needed",
                    agreement: "Please accept the consent checkbox"
                },
                errorElement: "span",
                errorPlacement: function(error, element) {
                    error.addClass("invalid-feedback");
                    element.closest(".form-group").append(error);
                },
                highlight: function(element) {
                    $(element).addClass("is-invalid");
                },
                unhighlight: function(element) {
                    $(element).removeClass("is-invalid");
                },
                submitHandler: function(form) {
                    if ($(form).find('[name="g-recaptcha-response"]').val() === "") {
                        $("#contactCaptchaError").show();
                        return false;
                    }

                    $("#contactCaptchaError").hide();
                    var submitBtn = $(form).find('.submit_btn');
                    submitBtn.html('<i class="fa fa-spinner fa-spin"></i> Please wait...');
                    submitBtn.prop('disabled', true);
                    form.submit();
                }
            });
        });
    </script>
@endsection