@extends('layouts.web_master')

@section('header-content')

<div class="header-blog" style="background-image: url('{{asset($banner->contact_banner)}}'); background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;">
       <!-- ====== 9.1 hero section ====== -->
       <section class="hero">
        <div class="container">
            <div class="row justify-content-center mt-5">
                <div class="col-lg-11 col-md-12 text-center aos-init aos-animate" data-aos="fade">
                    <div>
                        <h2>Contact Us </h2>
                        <div class="d-flex justify-content-center gap-4 pt-4">
                            <nav aria-label="breadcrumb">
                                <div class="breadcrumb d-flex gap-4 align-items-center">
                                    <div class="breadcrumb-item"><a href="{{route('home')}}">Home</a></div>
                                    <i class="fa-solid fa-angles-right"></i>
                                    <div class="breadcrumb-item" aria-current="page">Contact</div>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
    <!-- ====== End 9.1 hero section ====== -->
@endsection
<style>
    .overlay {
        height: 347px !important;
    }
</style>
@section('main-content')
       <!-- ====== 9.2 contact section ====== -->
       <section id="contact">
        <div class="container">
            <div data-aos="fade" data-aos-duration="1500" class="aos-init aos-animate">
                <h4>Contact Us</h4>
                <h2>Get In Touch</h2>
            </div>
            <div class="row">
                <div class="col-md-8 bg-white aos-init aos-animate" data-aos="fade" data-aos-duration="1500">
                    <div>
                        <div class="d-flex justify-content-between align-items-center pb-4">
                            <h5>Send US A Message</h5> <a href="mailto:{{$info->email}}" target="_blank"> <i class="fa-regular fa-envelope"></i></a>
                        </div>
                    </div>
                    <div id="contact-message"></div>
                    <form  method="post" action="{{route('booking')}}">
                        @csrf
                        <div>
                            <input type="text" name="name" placeholder="Name" required>
                            <input type="email" name="email" placeholder="Email Address" required>
                        </div>
                        <div>
                            <input type="number" name="phone" placeholder="Phone Number" required>
                            <input type="text" name="address" placeholder="Address" required>
                        </div>
                        <div>
                            <input type="number" name="adult" placeholder="Adult" required>
                            <input type="number" name="child" placeholder="Child" required>
                        </div>
                        <div>
                            <input type="date" name="start_date" placeholder="start_date" required>
                            <input type="date" name="end_date" placeholder="end_date" required>
                        </div>

                        <div>
                            <div style="width:100%;justify-content:left;border-bottom: 1px solid #FB8E26;padding-bottom:6px;">
                                <select name="destination" required class="custom-select" style="border: none;color:#9b9b9b;vertical-align:center;width:100%;  outline: none;">
                                    <option value="" selected disabled>Destination</option>
                                    @foreach ($tourDestination as $item )
                                    <option value="{{$item->title}}">{{$item->title}}</option>
                                    @endforeach
                                    <!-- Add more options as needed -->
                                </select>
                            </div>


                        </div>


                        <textarea name="message" placeholder="Message"></textarea>
                        <div class="globalBtnActive mt-sm-5 mt-4 p-0">
                            <ul>
                                <li>
                                    <button type="submit">Submit
                                        <span></span><span></span><span></span><span></span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </form>

                </div>
                <div class="col-md-4 d-flex justify-content-center align-items-center aos-init aos-animate" data-aos="fade" data-aos-duration="1500">
                    <div>
                        <h3>Contact Info</h3>
                        <div class="address">
                            <div>
                                <i class="fa-solid fa-house"></i>
                                <a href="#">
                                    <p>{{$info->address}}</p>
                                </a>
                            </div>
                            <div>
                                <a href="mailto:{{$info->email}}" target="_blank"> <i class="fa-solid fa-envelope"></i></a>
                                <a href="mailto:{{$info->email}}" target="_blank">
                                    <p>{{$info->email}}</p>
                                </a>
                            </div>
                            <div>
                                <a href="tel:{{$info->phone}}" target="_blank">    <i class="fa-solid fa-phone"></i></a>
                                <a href="tel:{{$info->phone}}" target="_blank">
                                    <p>{{$info->phone}}</p>
                                </a>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center gap-4 mt-3">
                            <a href="{{$info->linkedin}}" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
                            <a href="{{$info->facebook}}" target="_blank" ><i class="fa-brands fa-facebook-f"></i></a>
                            <a href="{{$info->twitter}}" target="_blank"><i class="fa-brands fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 9.2 contact section ====== -->

@endsection