@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="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="assets/images/metalogo.png" />
<meta property="og:image" itemprop="image/*" content="assets/images/metalogo.png" />
<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">Let's make something awsome together.
                </h1>
                <p class="p-top-30 wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">
                    DROP US A LINE, OR GIVE US A HEADS UP IF YOU'RE INTERESTED IN DOING BUSINESS WITH US.
                </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>Get in touch
                        </h2>
                    </div>
                    <div class="t--paragraph--one text-center p-top-10 wow animated bounceInLeft" data-wow-duration="1.5s" data-wow-delay=".1s">
                        Let’s talk about our next project.
                    </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="icon-name"></span>
                                </div>
                                <input type="text" id="name" name="name" class="form-input" placeholder="Full name" 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="icon-email"></span>
                                </div>

                                <input type="email" id="email" name="email" class="form-input" placeholder="Your Mail" 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="icon-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="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="icon-name"></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">
                        <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>Phone 1: +212 661 461 060</span>
                                    <span>Phone 2: +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=!1m18!1m12!1m3!1d113616.26382537527!2d-13.25357309981725!3d27.140294771651085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xc3772c616b079c9%3A0x9bea0d2b555fce5f!2sLaayoune!5e0!3m2!1sen!2sma!4v1625927659912!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