@extends('layout.master')
@section('content')
<section>
    <div class="w-full h-[25vh] lg:h-[50vh] relative">
        <div class="absolute z-[1] top-0 w-full left-0 h-full flex items-center justify-center">
          <div class="text-white   text-center w-1/2">
            <h2 class="lg:text-6xl md:text-4xl text-2xl font-extrabold wow animate__animated animate__lightSpeedInLeft">Contact Us</h2>
          </div>
        </div>
        <div class="w-full h-full">
          <img class="w-full h-full object-cover object-top brightness-50" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
        </div>
    </div>

    {{-- <div class="text-gray-600 body-font relative">
        <div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
            <div
                class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative wow animate__animated animate__fadeInLeft">
                <iframe width="100%" height="100%" class="absolute inset-0" frameborder="0" title="map" marginheight="0"
                    marginwidth="0" scrolling="no"
                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14126.60562171007!2d85.2953951!3d27.7280474!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb194759458ce7%3A0x9172391ea29568dc!2sOcean%20Heart%20Education%20Garden!5e0!3m2!1sen!2snp!4v1706938761782!5m2!1sen!2snp"
                    style="filter: grayscale(1) contrast(1.2) opacity(0.4);"></iframe>
                <div class=" relative px-5 ">
                    <div class="bg-white flex flex-wrap py-6 rounded shadow-md">
                        <div class="px-6">
                            <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
                            <p class="mt-1">Balaju, Kathmandu</p>
                        </div>
                        <div class=" px-6 mt-4 lg:mt-0 hyphens-auto">
                            <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
                            <a class="text-red-500 leading-relaxed ">oceanheartedu2023@gmail.com</a>
                            <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
                            <p class="leading-relaxed">9748292615</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0 wow animate__animated animate__zoomIn">
                <h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Get in Touch</h2>
                </p>
                <form action="{{route('contact.store')}}" method="POST" class="flex flex-col gap-5 mt-5">
                    @csrf
                    <div>
                        <div class="relative">
                            <input type="text" name="name" id="name" class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " value="{{old('name')}}" />
                            <label for="name"  class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white  px-2 peer-focus:px-2 peer-focus:text-blue-600  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">Name</label>
                        </div>
                        @error('name')
                            <p class="text-red-500 text-sm mt-1">* {{$message}}</p>
                        @enderror
                    </div>
                    <div>
                        <div class="relative">
                            <input type="text" name="email" id="email" class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " value="{{old('email')}}" />
                            <label for="email"  class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white  px-2 peer-focus:px-2 peer-focus:text-blue-600  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">Email</label>
                        </div>
                        @error('email')
                            <p class="text-red-500 text-sm mt-1">* {{$message}}</p>
                        @enderror
                    </div>
                    <div>
                        <div class="relative">
                            <input type="text" name="phone" id="phone" class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" "  value="{{old('phone')}}"/>
                            <label for="phone"  class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white  px-2 peer-focus:px-2 peer-focus:text-blue-600  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">Phone</label>
                        </div>
                        @error('phone')
                            <p class="text-red-500 text-sm mt-1">* {{$message}}</p>
                        @enderror
                    </div>
                    <div>
                        <div class="relative">
                            <textarea type="text" name="message" id="message" class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder="">{{old('message')}}</textarea>
                            <label for="message"  class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white  px-2 peer-focus:px-2 peer-focus:text-blue-600  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">Message</label>
                        </div>
                        @error('message')
                            <p class="text-red-500 text-sm mt-1">* {{$message}}</p>
                        @enderror
                    </div>
                    <div class="mt-2">
                        <button type="submit" class="w-full relative  bg-transparent border-2 border-primary  text-primary hover:text-white transition-all duration-500 px-6 py-3 font-xl rounded-md sm:mb-0 before:content-[''] before:absolute before:left-0 before:w-full before:bottom-0 before:h-0 hover:before:h-full before:bg-primary before:transition-all before:duration-500 overflow-hidden"><span class="relative">Send Message</span></button>
                    </div>
                </form>
            </div>
        </div>
    </div> --}}
    <section class="bg-blue-50" id="contact">
        <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
            <div class="mb-4">
                <div class="mb-6 max-w-3xl text-center sm:text-center md:mx-auto md:mb-12">
                    <p class="text-base font-semibold uppercase tracking-wide text-primary wow animate__animated animate__fadeInUp"">
                        Contact
                    </p>
                    <h2
                        class="font-heading mb-4 font-bold tracking-tight text-gray-900 text-3xl sm:text-5xl wow animate__animated animate__fadeInLeft">
                        Get in Touch
                    </h2>
                    <p class="mx-auto mt-4 max-w-3xl text-xl text-gray-600 wow animate__animated animate__fadeInUp animate__delay-1s">Feel free to contact us !!
                    </p>
                </div>
            </div>
            <div class="flex items-stretch justify-center">
                <div class="">
                    <div class="h-full pr-6">
                        <p class="mt-3 mb-12 text-lg text-gray-600 wow animate__animated animate__fadeInLeft animate__delay-1s">
                          If you have any questions, please don’t hesitate to contact us.
                        </p>
                        @if ($contact)
                        <ul class="mb-6 md:mb-0 wow animate__animated animate__fadeInLeft animate__delay-2s">
                            @if($contact->address)
                              <li class="flex">
                                  <div class="flex h-10 w-10 items-center justify-center rounded bg-blue-900 text-gray-50">
                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                          stroke-linejoin="round" class="h-6 w-6">
                                          <path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                                          <path
                                              d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z">
                                          </path>
                                      </svg>
                                  </div>
                                  <div class="ml-4 mb-4">
                                      <h3 class="mb-2 text-lg font-medium leading-6 text-gray-900">Our Address
                                      </h3>
                                      <p class="text-gray-600 dark:text-slate-400">{{$contact->address}}</p>
                                  </div>
                              </li>
                            @endif
                            @if ($contact->phone)
                              <li class="flex">
                                  <div class="flex h-10 w-10 items-center justify-center rounded bg-blue-900 text-gray-50">
                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                          stroke-linejoin="round" class="h-6 w-6">
                                          <path
                                              d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
                                          </path>
                                          <path d="M15 7a2 2 0 0 1 2 2"></path>
                                          <path d="M15 3a6 6 0 0 1 6 6"></path>
                                      </svg>
                                  </div>
                                  <div class="ml-4 mb-4">
                                      <h3 class="mb-2 text-lg font-medium leading-6 text-gray-900">Contact
                                      </h3>
                                      <p class="text-gray-600 dark:text-slate-400">{{$contact->phone}}</p>
                                  </div>
                              </li>
                            @endif
                            @if ($contact->mail)
                              <li class="flex">
                                  <div class="flex h-10 w-10 items-center justify-center rounded bg-blue-900 text-gray-50">
                                      <i class="fas fa-envelope"></i>
                                  </div>
                                  <div class="ml-4 mb-4">
                                      <h3 class="mb-2 text-lg font-medium leading-6 text-gray-900">Mail
                                      </h3>
                                      <p class="text-gray-600 dark:text-slate-400">{{$contact->mail}}</p>
                                  </div>
                              </li>
                            @endif
  
                              
                          </ul>
                        @endif
                        {{-- @if ($socialMedia)
                            
                            <div class="mt-10">
                                <h3 class="mb-2 text-xl font-medium leading-6 text-white">Social Media Links
                                </h3>
                                <ul class="flex gap-5 mt-5">
                                  @if ($socialMedia->facebook)
                                    <li>
                                      <a target="__blank" href="{{$socialMedia->facebook}}">
                                        <i class="hover:-translate-y-1 transition-all duration-300 cursor-pointer ease-linear fa-brands fa-facebook text-4xl text-white hover:text-blue-500"></i>
                                      </a>
                                    </li>
                                  @endif
                                  @if ($socialMedia->instagram)
                                    <li>
                                      <a target="__blank" href="{{$socialMedia->instagram}}">
                                        <i class="hover:-translate-y-1 transition-all duration-300 cursor-pointer ease-linear fa-brands fa-instagram text-4xl text-white hover:text-pink-600"></i>
                                      </a>
                                    </li>
                                  @endif
                                  @if ($socialMedia->youtube)
                                    <li>
                                      <a target="__blank" href="{{$socialMedia->youtube}}">
                                        <i class="hover:-translate-y-1 transition-all duration-300 cursor-pointer ease-linear fa-brands fa-youtube text-4xl text-white hover:text-red-600"></i>
                                      </a>
                                    </li>
                                  @endif
                                </ul>
                            </div>
                          @endif --}}
                    </div>
                </div>
            </div>
        </div>
      </section>
</section>
@endsection