@extends("frontend.layouts.app")

@section("title")
    {{ app_name() }}
@endsection

@section("content")

  <style>
      input{
          background: none!important;
      }
  </style>

  <section class="py-12 mt-4 contact-page inner-page-sec">
      <div class="mb-10 text-center">
        <h2 class="mb-2 text-2xl font-semibold text-black-500 sub-heading">Contact Us</h2>
        <h1 class="text-4xl font-bold">
          Let’s Get In <span class="text-red-500">Touch</span>
        </h1>
      </div>
      <div class="grid grid-cols-1 gap-8 pt-4 mx-auto mt-5 lg:grid-cols-2 left-box" style="max-width: 85rem;">
        <!-- Contact Form -->
        <div class="p-6 bg-white rounded-lg shadow-lg">
          <h3 class="mb-4 text-3xl font-bold">
            Contact <span class="text-red-500">brokeroos</span>
          </h3>
          @if(session('success'))
            <div class="p-4 mb-4 text-green-700 bg-green-100 rounded-lg">
                {{ session('success') }}
            </div>
          @endif
          @if(session('error'))
            <div class="p-4 mb-4 text-red-700 bg-red-100 rounded-lg">
                {{ session('error') }}
            </div>
          @endif
          <form action="{{ route('contact.submit') }}" method="POST" class="space-y-4">
            @csrf
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
              <input
                type="text"
                name="name"
                placeholder="Name"
                required
                class="w-full form-control focus:ring-2 focus:ring-red-500 focus:outline-none"
              />
              <input
                type="email"
                name="email"
                placeholder="Email"
                required
                class="w-full form-control focus:ring-2 focus:ring-red-500 focus:outline-none"
              />
            </div>
            <input
              type="text"
              name="phone"
              placeholder="Phone"
              class="w-full form-control focus:ring-2 focus:ring-red-500 focus:outline-none"
            />
            <textarea
              name="message"
              placeholder="Message"
              rows="4"
              required
              class="w-full form-control focus:ring-2 focus:ring-red-500 focus:outline-none"
            ></textarea>
            <button
              type="submit"
              class="w-full font-semibold text-white bg-red-500 rounded-lg hover:bg-red-600 btn"
            >
              Submit
            </button>
          </form>
        </div>

        <!-- Contact Info and Map -->
        <div class="space-y-6 right-box">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d848300.8253314648!2d150.27255546310082!3d-33.84648855820782!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b129838f39a743f%3A0x3017d681632a850!2sSydney%20NSW%2C%20Australia!5e0!3m2!1sen!2sin!4v1748342197020!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
          <div>
            <div class="flex items-start space-x-4 align-items-center">
              <div class="text-red">
              <i class="fa-solid fa-location-dot"></i>
              </div>
              <p class="text-gray-700">
                Penshurst NSW 2222
              </p>
            </div>
            {{-- <div class="flex items-start mt-4 space-x-4">
              <div class="text-red">
              <i class="fa-solid fa-phone"></i>
              </div>
              <p class="text-gray-700">(62-21) 5747550</p>
            </div> --}}
            <div class="flex items-start mt-4 space-x-4">
              <div class="text-red">
              <i class="fa-solid fa-envelope"></i>
              </div>
              <p class="text-gray-700">info@brokeroos.au</p>
            </div>
          </div>
        </div>
      </div>
    </section>
@endsection