@extends('layouts.front-layout')
@section('title', 'Contact')
@section('content')
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="
{{$get_single_contact->getFirstMediaUrl('contact_top_banner_image') ?  $get_single_contact->getFirstMediaUrl('contact_top_banner_image') : asset('upload/placeholder.png')}}
            " class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>{{$pageData['Contact']['top_title'] ? : ""}}</h2>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- End: Main Slider -->

    <!-- Contact Section Map + Form -->
    <section class="contactpage">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">

                    <form action="{{ route('contact.info') }}" method="POST" class="contact-form"
                          enctype="multipart/form-data">
                        @csrf
                        <h2 class="mainHead text-center mb-1"
                            data-aos="fade-up">{{$pageData['Contact']['top_title'] ? : ""}}</h2>
                        <div class="text-center">
                            {!!$pageData['Contact']['description'] ? : ""!!}
                        </div>

                        <div class="row">

                            <div class="col-md-3"></div>
                            <div class="col-md-6">
                                <img id="contactImg"
                                     src="{{( isset($get_single_contact) && $get_single_contact->getFirstMediaUrl('contact_user_add_image') ?
                                $get_single_contact->getFirstMediaUrl('contact_user_add_image') : asset('upload/placeholder.png'))}}"
                                     alt="Profile Preview"
                                     style="width:100%; height: 350px;">
                                <div class="form-group">
                                    <input type="file" class="form-control"
                                           name="contact_user_add_image"
                                           id="contactImgInput">
                                </div>
                                <span class="text-danger">@error('contact_user_add_image') {{$message}}@enderror</span>

                            </div>

                            <div class="col-md-3"></div>


                            <div class="col-md-6">
                                <input type="text" class="form-control" name="first_name" placeholder="First Name*">
                                <span class="text-danger">@error('first_name') {{$message}}@enderror</span>
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="last_name" placeholder="Last Name*">
                                <span class="text-danger">@error('last_name') {{$message}}@enderror</span>

                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control" name="email" placeholder="Email*">
                                <span class="text-danger">@error('email') {{$message}}@enderror</span>

                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="phone" placeholder="Phone Number*">
                                <span class="text-danger">@error('phone') {{$message}}@enderror</span>

                            </div>
                            <div class="col-12">
                                <textarea rows="5" class="form-control" name="message"
                                          placeholder="Message "></textarea>
                                <span class="text-danger">@error('message') {{$message}}@enderror</span>

                            </div>
                            <div class="col-12 text-center">
                                <button class="btn themeBtn" type="submit"><span>Submit Now</span></button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </section>
    <!-- !@Contact Section Map + Form -->


@endsection


@section('script')

    <script>

        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        const contactImgInput = document.getElementById('contactImgInput');
        contactImgInput.addEventListener('change', function () {
            showImagePreview(this, 'contactImg');
        });


    </script>

@endsection