@extends('layout.app')

@section('content')
    <!-- section start -->
    <section class="layout-pt-xl layout-pb-xs">
        <!-- container start -->
        <div data-anim-wrap class="container">
            <!-- row start -->
            <div class="row">
                <div class="col-xl-9 offset-xl-1 col-lg-11">
                    <div
                        data-anim-child="slide-up delay-1"
                        class="sectionHeading -lg"
                    >
                    <p class="sectionHeading__subtitle">Hire Us</p>
                    <h1 class="sectionHeading__title leading-sm">
                        Got a project to discuss? Get in touch.
                    </h1>
                    </div>
                </div>
            </div>
            <!-- row end -->

            <!-- row start -->
            <div
                data-anim-child="slide-up delay-2"
                class="row justify-content-center layout-pt-md"
            >
                <div class="col-xl-10">
                    <div class="row x-gap-48 y-gap-48">
                        <div class="col-lg-3 col-md-6 col-sm-8">
                            <h4 class="text-xl fw-600">Address</h4>
                            <div class="text-dark mt-12">
                            <p>Srijana Chowk, Pokhara</p>
                            </div>
                        </div>

                        <div class="col-lg-auto offset-lg-1 col-md-6">
                            <h4 class="text-xl fw-600">Contact Us</h4>
                            <div class="text-dark mt-12">
                            <div>
                                <a class="button -underline" href="mailto:info@businessbasket.com.np"
                                >info@businessbasket.com.np</a
                                >
                            </div>
                            <div class="mt-4">
                                <a class="button -underline" href="#"
                                >9856081265, 061-530196</a
                                >
                            </div>
                            </div>
                        </div>

                        <div class="col-md-auto offset-lg-1">
                            <h4 class="text-xl fw-600">Follow Us</h4>

                            <div class="social -bordered mt-16 md:mt-12">
                                <a
                                    class="social__item text-black border-dark"
                                    href="https://www.facebook.com/business.basket977"
                                    target="_blank"
                                >
                                    <i class="fa fa-facebook"></i>
                                </a>

                                <a
                                    class="social__item text-black border-dark"
                                    href="https://www.instagram.com/businessbasket_/"
                                    target="_blank"
                                >
                                    <i class="fa fa-instagram"></i>
                                </a>

                                <a
                                    class="social__item text-black border-dark"
                                    href="https://www.linkedin.com/company/business-basket/"
                                    target="_blank"
                                >
                                    <i class="fa-brands fa-linkedin-in"></i>
                                </a>
                                
                                <a
                                    class="social__item text-black border-dark"
                                    href="https://www.instagram.com/businessbasket_/"
                                    target="_blank"
                                >
                                    <i class="fa-brands fa-google"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- section start -->
    <section class="layout-pt-md layout-pb-lg">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div
                data-anim="slide-up delay-3"
                class="row justify-content-center"
            >
                <div class="col-xl-10">
                    <div class="sectionHeading -sm">
                    <h2 class="sectionHeading__title">Drop us a line</h2>
                    <p class="text-black leading-md mt-12">
                        Use the form below or
                        <a href="mailto:info@businessbasket.com.np" class="fw-700"
                        >send us an email</a
                        >.
                    </p>
                    </div>
                </div>

                <div class="w-1/1"></div>

                {{-- @if (session()->has('message') || count($errors) > 0)
                    <div class="col-xl-10 mt-48 sm:mt-32">
                        <div class="contact-form -type-1">
                            @if (session()->has('message'))
                                <div class="row">
                                    <div class="col-12 ajax-form-alert js-ajax-form-alert is-active is-success">
                                        <div class="ajax-form-alert__content">
                                            Your message has been sent! We will reply you as soon as possible.
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if(count($errors) > 0)
                                <div class="row">
                                    <div class="col-12 ajax-form-alert js-ajax-form-alert is-active is-error">
                                        <div class="ajax-form-alert__content">
                                            Something went wrong. Please contact us directly at <a href='mailto:info@businessbasket.com.np'>info@businessbasket.com.np</a>.

                                            @foreach($errors->all() as $error)
                                                <span>{{ $error }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif --}}

                <div class="col-xl-10 mt-48 sm:mt-32">
                    <div class="contact-form -type-1">
                        <form
                            class="row x-gap-40 y-gap-32 js-ajax-form"
                            method="POST"
                            action="contact"
                            data-message-success="Your message has been sent! We will reply you as soon as possible."
                            data-message-error="Something went wrong. Please contact us directly at <a href='info@businessbasket.com.np'>info@businessbasket.com.np</a>."
                        >
                            <label class="js-input-group">
                                @csrf
                            </label>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Name
                                    <input
                                        type="text"
                                        name="name"
                                        data-required
                                        placeholder="Fill in your name"
                                        value="{{ old('name') }}"
                                        required
                                    />
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Your phone number (optional)
                                    <input
                                        type="text"
                                        name="phone"
                                        placeholder="Phone number"
                                        value="{{ old('phone') }}"
                                        required
                                    />
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Email
                                    <input
                                        type="text"
                                        name="email"
                                        data-required
                                        placeholder="Fill in your email"
                                        value="{{ old('email') }}"
                                        required
                                    />
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Subject
                                    <input
                                        type="text"
                                        name="subject"
                                        placeholder="What are you looking for?"
                                        value="{{ old('subject') }}"
                                        required
                                    />
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-12">
                                <label class="js-input-group">
                                    Message
                                    <textarea
                                        name="message"
                                        rows="2"
                                        placeholder="Fill in your message"
                                    >{{ old('message') }}</textarea>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-12 ajax-form-alert js-ajax-form-alert">
                                <div class="ajax-form-alert__content"></div>
                            </div>

                            <div class="col-12">
                                <button class="button -md -black text-white">
                                    Send Message
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- map section start -->
    {{-- <div class="sectionVideo h-lg layout-pt-lg"> --}}
        <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3515.8582249520236!2d83.97904641547306!3d28.211619709755986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19f13acacdab%3A0x6090e585be9cdea2!2sBusiness%20Basket%20Pvt%20Ltd.!5e0!3m2!1sen!2snp!4v1671597898448!5m2!1sen!2snp" 
            width="100%^" 
            height="350" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade"
        ></iframe>
    {{-- </div> --}}
    <!-- map section end -->
@endsection