@extends('frontend.layouts.app')

@section('metatags')
    <meta name="description"
        content="Unique Packing is a fruit export company, Who is deeply committed to provid fresh produce that contain higher nutritional values." />
    <meta name="keywords" content="Unique, Packing, Fruit,export, Avocados, morocco" />
    <meta name="copyright" content="Unique Produce">
    <meta name="author" content="Yacine Boughalem">
    <meta name="url" content="http://uniqpacking.ma/contact-us">
    <meta name="identifier-URL" content="http://uniqpacking.ma/contact-us">

    <meta itemprop="image" content="https://www.uniqpacking.ma/assets/images/logo-uniq.jpg" />
    <meta property="og:image" itemprop="image/*" content="https://www.uniqpacking.ma/assets/images/logo-uniq.jpg" />
    <meta property="og:image:width" content="256" />
    <meta property="og:image:height" content="256" />
    <meta property="og:site_name" content="Unique Packing" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

@endsection
@section('title', 'Contact-us')

@section('content')

    <div class="uniq--breadcrumb--area" style="background-image: linear-gradient(to right,
    rgba(27, 38, 105, 0.8),rgba(58, 182, 74, .4)),url('./assets/images/banner001.jpg');">
        <div class="container">
            <div class="uniq--breadcrumb--area--content">
                <h1 class="p-top-10 wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">We are here to
                    serve you the best.
                </h1>
                <p class="p-top-30 wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">
                    Our experts are always here to answers your questions in the most quickest and effective way.
                </p>
            </div>
        </div>
        <img src="./assets/images/logo--shape.svg" class="shape--logo--01 wow animated bounceInRight"
            data-wow-duration="1.5s" data-wow-delay=".1s" />
    </div>



    {{-- <section class="contact-page-sec section--40">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="contact-info">
                        <div class="contact-info-item">
                            <div class="contact-info-icon">
                                <i class="fa fa-map"></i>
                            </div>
                            <div class="contact-info-text">
                                <h2>Office Location
                                </h2>
                                <span>Appt 04 N° 74 Ang, Av Farhat Hachad Et Ghandi, Agadir 80000, Morocco

                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">

                    <div class="contact-info">
                        <div class="contact-info-item">
                            <div class="contact-info-icon">
                                <i class="fa fa-envelope"></i>
                            </div>
                            <div class="contact-info-text">
                                <h2>E-mail Us</h2>
                                <span>Contact@uniqpacking.ma</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-info">
                        <div class="contact-info-item">
                            <div class="contact-info-icon">
                                <i class="fa fa-mobile-alt"></i>
                            </div>
                            <div class="contact-info-text">
                                <h2>Phone Number</h2>
                                <span>Phone 1: +212 661 461 060</span>
                                <span>Phone 2: +212 661 191 812</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}


    <section class="uniq--form--area section--40">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12">
                    <div class="primary--title--center--prim wow animated bounceInLeft" data-wow-duration="1.5s"
                        data-wow-delay=".1s">
                        <h2>
                            What are you waiting for
                        </h2>
                    </div>
                    <div class="t--paragraph--one text-center p-top-10 wow animated bounceInLeft" data-wow-duration="1.5s"
                        data-wow-delay=".1s">
                        Tell us how we can help you more
                    </div>
                </div>
            </div>
            <div class="row align-items-center justify-content-center p-top-20 p-bottom-40 wow animated bounceInLeft"
                data-wow-duration="1.5s" data-wow-delay=".1s">
                <div class="col-md-6 ">
                    <form action="{{ route('contact.message') }}" method="post" class="form">
                        @csrf
                        <input type="hidden" id="type" name="type" value="CONTACT">

                        <div class="form-group">
                            <label for="name" class="form-label form-label--required">
                                @lang('uniqpacking.NAME'):
                            </label>

                            <div class="form-addon" data-states-for="name">
                                <div class="form-addon__addon">
                                    <span class="fa fa-user"></span>
                                </div>
                                <input type="text" id="name" name="name" class="form-input" placeholder=""
                                    required>

                                <span class="form-addon__icon icon-valid"></span>
                                <span class="form-addon__icon icon-invalid"></span>
                            </div>


                        </div>

                        <div class="form-group">
                            <label for="email" class="form-label form-label--required">
                                @lang('uniqpacking.EMAIL'):
                            </label>

                            <div class="form-addon" data-states-for="email">
                                <div class="form-addon__addon">
                                    <span class="fa fa-envelope"></span>
                                </div>

                                <input type="email" id="email" name="email" class="form-input" placeholder=""
                                    required>
                                <span class="form-addon__icon icon-valid"></span>
                                <span class="form-addon__icon icon-invalid"></span>
                            </div>

                        </div>

                        <div class="form-group">
                            <label for="phone" class="form-label">
                                @lang('uniqpacking.PHONENUMBER'):
                            </label>

                            <div class="form-addon" data-states-for="phone">
                                <div class="form-addon__addon">
                                    <span class="fa fa-phone"></span>
                                </div>

                                <input type="text" id="phone" name="phone" class="form-input" placeholder="">

                                <span class="form-addon__icon icon-valid"></span>
                                <span class="form-addon__icon icon-invalid"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="company" class="form-label">
                                Company
                            </label>

                            <div class="form-addon" data-states-for="company">
                                <div class="form-addon__addon">
                                    <span class="fas fa-building"></span>
                                </div>

                                <input type="text" id="company" name="company" class="form-input" placeholder="">

                                <span class="form-addon__icon icon-valid"></span>
                                <span class="form-addon__icon icon-invalid"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="country" class="form-label">
                                Country
                            </label>

                            <div class="form-addon" data-states-for="country">
                                <div class="form-addon__addon">
                                    <span class="fas fa-map"></span>                                    
                                </div>

                                <input type="text" id="country" name="country" class="form-input" placeholder="">

                                <span class="form-addon__icon icon-valid"></span>
                                <span class="form-addon__icon icon-invalid"></span>
                            </div>
                        </div>

                        


                        <div class="form-group">
                            <label for="message" class="form-label form-label--required">
                                @lang('uniqpacking.MESSAGE')
                            </label>

                            <div class="form-addon" data-states-for="message">
                                <div class="form-addon__addon">
                                    <span class="fas fa-pen"></span>
                                </div>

                                <textarea type="text" id="message" name="message" class="form-input"
                                    placeholder="Write your message here..." required></textarea>
                            </div>

                        </div>


                        <div class="form-footer text-center">
                            <div class="button button-5 btn-auto">
                                <div id="circle"></div>
                                <button type="submit">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4 contact-infos ">
                    <div class="contact-info  wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">
                        <div class="contact-info-item">
                            <div class="contact-info-icon">
                                <i class="fa fa-map"></i>
                            </div>
                            <div class="contact-info-text">
                                <h2>Office Location
                                </h2>
                                <span>Appt 04 N° 74 Ang, Av Farhat Hachad Et Ghandi, Agadir 80000, Morocco

                                </span>
                            </div>
                        </div>
                    </div>


                    <div class="contact-info wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">
                        <div class="contact-info-item">
                            <div class="contact-info-icon">
                                <i class="fa fa-envelope"></i>
                            </div>
                            <div class="contact-info-text">
                                <h2>E-mail Us</h2>
                                <span>Contact@uniqpacking.ma</span>
                            </div>
                        </div>
                    </div>

                    <div class="contact-info wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">
                        <div class="contact-info-item">
                            <div class="contact-info-icon">
                                <i class="fa fa-mobile-alt"></i>
                            </div>
                            <div class="contact-info-text">
                                <h2>Phone Number</h2>
                                <span><i class="fa fa-mobile-alt"></i> +212 661 461 060</span>
                                <span><i class="fa fa-mobile-alt"></i> +212 661 191 812</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="contact-page-map wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13763.032338868928!2d-9.5581802!3d30.4146048!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6599291630e16d7e!2sUnique%20packing!5e0!3m2!1sen!2sma!4v1646341881509!5m2!1sen!2sma"
                            width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>


    @include('frontend/partials/subscribe')

@endsection

@section('scripts')
    {{-- <script src="https://gabinaureche.com/GentleForm/dist/GentleForm.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>


    @if (Session::has('message'))
        <script>
            toastr.options = {
                toastClass: 'alert',
                iconClasses: {
                    error: 'alert-error',
                    info: 'alert-info',
                    success: 'alert-success',
                    warning: 'alert-warning'
                }
            }
            toastr.success("{{ session('message') }}");
        </script>
    @endif
@endsection