@extends('frontend.layouts.app')

@section('content')
    <style>
        .contact-back {
            background-image: url('{{ asset('/frontend/assets/images/back.jpg') }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 800px;
            opacity: 90%;
        }
    </style>


    <div class="space contact-back" id="contact-sec">
        <div class="container">

            <div class="row justify-content-center">

                <div class="col-xl-8">
                    <div style="background:white; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-top:-45px; width:100%"
                        class="contact-form-wrap">
                        <div
                            style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;">
                            <img width="6%" height="6%" src="{{ asset('/frontend/assets/images/envelope.png') }}" />
                            <span style="font-size:20px; color:rgb(82, 82, 82)" class="sub-title mt-2">CONTACT US</span>
                            <p style="margin-top:-17px; margin-bottom:30px" class="">We will get back to you asap!</p>
                        </div>





                        <form id="contact" action="{{ route('frontend.contact.store') }}" method="POST"
                            class="contact-form">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group"><input
                                            style="border:1px solid rgb(180, 180, 180); backgound:white" type="text"
                                            class="form-control" name="name" id="name" placeholder="Your Name*"> <i
                                            class="fal fa-user"></i>
                                        <span id="name-error" class="error-message text-danger mt-3"></span>
                                    </div>

                                </div>
                                <div class="col-md-6">
                                    <div class="form-group"><input
                                            style="border:1px solid rgb(180, 180, 180); backgound:white" type="email"
                                            class="form-control" name="email" id="email" placeholder="Email Address*">
                                        <i class="fal fa-envelope"></i>
                                        <span id="email-error" class="error-message text-danger"></span>
                                    </div>

                                </div>
                                <div class="col-md-12">
                                    <div class="form-group"><select name="subject" id="subject"
                                            class="single-select nice-select form-select">
                                            <option value="" disabled="disabled" selected="selected" hidden>Select
                                                Subject*</option>
                                            <option value="Exam Information">Exam Information</option>
                                            <option value="Login Issue">Login Issue</option>
                                            <option value="Paymeny Issue">Paymeny Issue</option>
                                            <option value="Technical Issue">Technical Issue</option>
                                        </select>
                                        <span id="subject-error" class="error-message text-danger"></span>
                                    </div>

                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <textarea style="border:1px solid rgb(180, 180, 180); background:white" name="message" id="message" cols="30"
                                            rows="3" class="form-control" placeholder="Write Your Message*"></textarea> <i class="fal fa-pen"></i>
                                        <span id="message-error" class="error-message text-danger"></span>
                                    </div>

                                </div>
                                <div class="form-btn col-12 mt-7"><button id="contact_button" type="submit"
                                        style="background:rgb(1, 129, 151); right:0px" class="th-btn">Send Message<i
                                            class="fas fa-long-arrow-right ms-2"></i></button></div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).ready(function() {


            $('#contact').on('submit', function(e) {
                e.preventDefault();

                var formData = new FormData($(this)[0]);

                var form = this;

                $('#contact_button').text('Loading ...');


                // Make Ajax request
                $.ajax({

                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        console.log(res);

                        $('.error-message').html('');

                        if (res.errors) {
                            $.each(res.errors, function(key, value) {
                                $('#' + key + '-error').html(value[0]);
                            });
                            $('#contact_button').text('Send Message');
                        }

                        if (res.status == 'success') {
                            toastr.success(res.message);
                            form.reset();


                            $('#contact_button').text('Send Message');
                        }
                    },
                    error: function(error) {
                        // Handle error response
                        console.error(error);
                        $('#contact_button').text('Send Message');
                    }
                });
            });
        });
    </script>
@endpush