@extends('layouts.app')

@section('title')
    <title>{{$contact->title}}</title>  
    <meta name="description" content="{{$contact->meta_description}}">
    <!-- Open Graph / Facebook -->
    <meta property="og:url" content="{{Request::url()}}" />
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{$contact->title}}">
    <meta property="og:description" content="{{$contact->meta_description}}">
    <meta property="og:image" content="{{Voyager::image($contact->banner)}}">
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{$contact->title}}" />
    <meta name="twitter:description" content="{{$contact->meta_description}}" />
    <meta name="twitter:image" content="{{Voyager::image($contact->banner)}}" />
    <link rel="canonical" href="{{Request::url()}}" />
    {!! htmlScriptTagJsApi() !!}
@endsection

@section('body') 

      <section class="banner" style="background: url({{Voyager::image($contact->banner)}})">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="breadcrumb-info text-center" data-lag="0.2" data-stagger="0.08" data-speed="1" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); will-change: transform;">
								<h1>{{$contact->title}}</h1>
							</div>
						</div>
					</div>
				</div>
			</section>

  <section class="contact_detail p90">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          {!!$contact->message!!}
        </div>

        <div class="col-md-7">
          <div class="row">
            <div class="col-md-6">
            {!!$contact->contact!!}
            </div>

            <div class="col-md-6">
            {!!$contact->info_guys!!}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="contact_chat" style="padding-bottom:90px;">
    <div class="container">
      <div class="r_text">
      {!!$contact->team!!}

        <br />
        <br />
      </div>

      <div class="row">
        <div class="col-md-4">
          <div class="contact_card">
            <div class="flag">
              <img src="{{asset('images/mail.png')}}" alt="">
            </div>

            <h4>Mail and Website</h4>

            <div class="text">
              {!!$contact->mail!!}
            </div>


          </div>
        </div>

        <div class="col-md-4">
          <div class="contact_card">
            <div class="flag">
              <img src="{{asset('images/contact.png')}}" alt="">
            </div>

            <h4>Contact </h4>

            <div class="text">
            {!!$contact->phone!!}
            </div>


          </div>
        </div>

        <div class="col-md-4">
          <div class="contact_card">
            <div class="flag">
              <img src="{{asset('images/address.png')}}" alt="">
            </div>

            <h4>Address</h4>

            <div class="text">
            {!!$contact->address!!}

            </div>


          </div>
        </div>


      </div>
    </div>
  </section>

  <section class="contact_form">
    <div class="container">
      <div class="row align-items-center">
          <div class="col-md-5">
            
            <form action="{{Route('send')}}" method="POST">
              @csrf
                <h3>Contact Us</h3>
                <p>Our friendly team would love to hear from you! </p>

                <div class="row">
                  <div class="col-md-6">
                    <div class="c_form">
                      <label>First Name</label>
                      <input type="text" placeholder="" name="first_name">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="c_form">
                      <label>Last Name</label>
                      <input type="text" placeholder="" name="last_name">
                    </div>
                  </div>

                  <div class="col-md-12">
                    <div class="c_form">
                      <label>Email</label>
                      <input type="email" placeholder="" name="email">
                    </div>
                  </div>

                  <div class="col-md-12">
                    <div class="c_form">
                      <label>Phone Number</label>
                      <input type="text" placeholder="" name="phone">
                    </div>
                  </div>

                  <div class="col-md-12">
                    <div class="c_form">
                      <label>Message</label>
                      <textarea name="message" id="" placeholder=""></textarea>
                    </div>
                  </div>
                  
  			        <div style="display:none;">
                        <input type="text" name="ip" value="">
                    </div>

                {!! htmlFormSnippet() !!}

                  <div class="col-md-12">
                    <div class="c_form">
                      <!--button type="submit" class="cta red">Send Message</button-->
                      <button type="submit" class="cta">
                        <span class="btn-flip">
                          <span data-text="Send Message">Send Message</span>
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
                
            </form>
          </div>

        <div class="col-md-7">
          <div class="map">
            <iframe
              src="{{$contact->maps}}"
              style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
          </div>
        </div>


      </div>
    </div>
  </section>

@endsection

@section('javascript')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>  
    @if(Session::has('success'))  
            toastr.success("{{ Session('success') }}");  
    @endif  
    @if(Session::has('error')) 
            toastr.error("{{ Session('error') }}");
    @endif
    </script>  
@endsection