@extends('site::layouts.master')


@section('title', 'Apply Now')

@push('styles')
    <style>
        select {
            background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
            background-repeat: no-repeat;
            background-position-x: 99%;
            background-position-y: 13px;
        }
    </style>
@endpush

@section('content')

    <!--Page Title-->
    <x-frontend.breadcrumbs title="Apply Now" active="Apply Now" />

    <!--Apply Now Start-->
    <section>
        <div class="container pt-5">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8">
                    <h3 class="mb-0">Start Your Study Abroad</h3>
                    <p class="p-0">Kindly provide the necessary details, and we will respond to you with additional
                        information</p>
                    <form action="{{ route('frontend.apply-now.store') }}" method="POST" id="apply-now-form">
                        @csrf
                        <div class="mb-3">
                            <label for="checkuot-form-fname">Full Name <span class="text-danger">*</span></label>
                            <input id="checkuot-form-fname" type="text" class="form-control" name="name"
                                placeholder="Enter Your Full Name" required>
                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-lname">Email <span class="text-danger">*</span></label>
                            <input id="checkuot-form-lname" type="email" class="form-control" name="email"
                                placeholder="Enter Your Email Address" required>
                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-cname">Mobile Number <span class="text-danger">*</span></label>
                            <input id="checkuot-form-cname" type="text" class="form-control" name="phone"
                                placeholder="Enter Your Mobile Number"
                                oninput="this.value = this.value.replace(/[^0-9+-]/g, '').slice(0, 20);"
                                required>

                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-email">Field of Interest</label>
                            <select class="form-control" id="checkuot-form-email" name="field_of_interest">
                                <option value="">Choose Your Field of Interest</option>
                                @foreach ($fieldsOfInterest as $field)
                                    <option value="{{ $field->value }}">{{ $field->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-address">Preferred Study Level</label>
                            <select class="form-control" id="checkuot-form-address" name="preferred_study_level">
                                <option value="">Choose Your Preferred Study Level</option>
                                @foreach ($preferredStudyLevels as $level)
                                    <option value="{{ $level->value }}">{{ $level->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-address">Preferred Intake</label>
                            <select class="form-control" id="checkuot-form-address" name="preferred_intake">
                                <option value="">Choose Your Preferred Intake</option>
                                @foreach ($preferredIntakes as $intake)
                                    <option value="{{ $intake->value }}">{{ $intake->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-address">Preferred Branch</label>
                            <select class="form-control" id="checkuot-form-address" name="preferred_branch">
                                <option value="">Choose Your Preferred Branch</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->value }}">{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-address">Most Recent Qualification</label>
                            <input id="checkuot-form-address" type="text" class="form-control" name="most_recent_qualification"
                                placeholder="Enter Your Most Recent Qualification">
                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-address">Work Experience</label> <br>
                            <input type="radio" class="ms-2" id="yes" name="work_experience" value="1">
                            <label for="yes" class="me-3">Yes</label>
                            <input type="radio" id="no" name="work_experience" value="0">
                            <label for="no">No</label>
                        </div>
                        <div class="mb-3">
                            <label for="checkuot-form-address">English Proficiency Test and Score</label>
                            <input id="checkuot-form-address" type="text" class="form-control" name="english_proficiency_test"
                                placeholder="Enter Your English Proficiency Test and Score">
                        </div>
                        <div class="field-input message-btn mt-5">
                            <button type="submit" class="theme-btn btn-style-one" data-loading-text="Please wait..."><span
                                    class="btn-title">Submit</span></button>
                        </div>
                    </form>
                    <div id="success_message" class="my-3"></div>
                </div>
            </div>
        </div>
    </section>
    <!--Apply Now End-->

@endsection

@push('scripts')
<script>
    $(document).ready(function() {

        // Default Success Message Div Hide
        $('#success_message').hide();

        $('#apply-now-form').submit(function(e) {
            e.preventDefault(); // Prevent default form submission

            var form = $(this);
            var btn = form.find('button[type="submit"]');
            var btnTitle = btn.find('.btn-title').text();
            var formData = new FormData(this);

            // Clear previous validation errors
            form.find('.is-invalid').removeClass('is-invalid');
            form.find('.invalid-feedback').remove();

            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: formData,
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.find('.btn-title').text('Please wait...');
                },
                success: function(response) {
                    // console.log('Success response:', response);
                    if (response.status === 'success') {
                        // Show success message
                        $('#success_message').show().html('<span class="alert alert-success py-2 m-0 mb-3">' + response.message + '</span>');

                        // Hide success message after 5 seconds
                        setTimeout(function() {
                            $('#success_message').hide();
                        }, 15000);

                        // Reset form after submission
                        form[0].reset();
                    } else {
                        // console.log('Unexpected response:', response);
                    }
                },
                error: function(xhr, status, error) {
                    // console.log('Error response:', xhr.responseText);
                    var errors = xhr.responseJSON.errors;

                    // Display validation errors
                    for (var field in errors) {
                        if (errors.hasOwnProperty(field)) {
                            var input = form.find('[name="' + field + '"]');
                            input.addClass('is-invalid');
                            input.after('<div class="invalid-feedback">' + errors[field][0] + '</div>');
                        }
                    }
                },
                complete: function() {
                    btn.prop('disabled', false);
                    btn.find('.btn-title').text(btnTitle);
                }
            });
        });
    });
</script>
@endpush