@extends('layouts.main-app')

@section('title', 'SMN Contact Us')

@section('content')


<style>


  .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }
        
        .ubuntu-font {
            font-family: 'Ubuntu';
        }
    
  .input-field {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem;
    width: 100%;
    outline: none;
    transition: border-color 0.3s;
  }

  .input-field:focus {
    border-color: #4A90E2;
  }

  textarea {
    resize: none;
  }
 
            /* ########################################### */

        /* Shrunk Navbar Style */
        #navbar.shrink {
            margin: 0 auto;
            width: 65%;
        }
        /* Shrunk Navbar Style */
        #navbar.unshrink {
            margin: 0 auto;
            width: 100%;
        }
</style>
    

<div class="">
             @include('layouts.header')

<section class="container max-w-screen-lg mx-auto roboto-font pb-20">
    <div class="container mx-auto py-10 px-4 lg:px-0">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8  px-3 ">
          <!-- Left Column: Contact Form -->
          <div>
            <div class="flex ">
                <h2 class="text-2xl font-bold mb-4 border-t-[3px] border-[#7199CF] py-3">Your Inquiry</h2>
            </div>
            <p class="text-gray-600 mb-6">
              We welcome any enquiries. Please fill in the form below to submit your enquiry. Alternatively, you may also call, fax or drop us an email.
            </p>
            <form action="{{ route('contact.store') }}" method="POST" class="space-y-8">
              @csrf
              <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Full Name:</label>
                <input type="text" id="name" name="name" class="input-field" required>
              </div>
              <div>
                <label for="phone" class="block text-sm font-medium text-gray-700">Contact Number:</label>
                <input type="text" id="phone" name="phone" class="input-field" required>
              </div>
              <div>
                <label for="email" class="block text-sm font-medium text-gray-700">Email Address:</label>
                <input type="email" id="email" name="email" class="input-field" required>
              </div>
              <div>
                <label for="subject" class="block text-sm font-medium text-gray-700">Subject:</label>
                <input type="text" id="subject" name="subject" class="input-field" required>
              </div>
              <div>
                <label for="message" class="block text-sm font-medium text-gray-700">Message:</label>
                <textarea id="message" name="message" rows="4" class="input-field" required></textarea>
              </div>
              <div>
                <button type="submit" class="bg-[#709ACF] text-white px-4 py-2 rounded hover:bg-[#6084b1] tracking-widest">
                  Submit
                </button>
              </div>
            </form>
          </div>
    
          <!-- Right Column: Map and Contact Info -->
          <div>
            <div class="flex">
                <h2 class="text-2xl font-bold mb-4 border-t-[3px] border-[#7199CF] py-3">Main Office</h2>
            </div>
            <div class="mb-4">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31573.864558080364!2d103.9318837!3d1.3520837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da11094c470d03%3A0x35f8e7da1e77ec1b!2sT-Space!5e0!3m2!1sen!2ssg!4v1694686862404!5m2!1sen!2ssg"
                width="100%"
                height="400"
                style="border:0; border-radius: 4px;"
                allowfullscreen=""
                loading="lazy"
              ></iframe>
            </div>
            <h3 class="text-lg font-semibold">Contact Information</h3>
            <div class="mt-4 space-y-4 text-gray-600">
              <div>
                <span>📍</span> 
                <strong>Singapore</strong><br>
                1 Tampines North Drive 1, #01-07, T-Space, Singapore 528559
              </div>
              <div>
                <span>📞</span> 
                Tel: +65 6677 1937 / +65 6988 5634
              </div>
              <div>
                <span>✉️</span> 
                E-mail: info@smn.sg
              </div>
              <div>
                <span>⏰</span> 
                Opening Hours: Mondays - Fridays, 09:00 - 18:00
              </div>
              <hr class="border-gray-200">
              <div>
                <span>📍</span> 
                <strong>Dubai</strong><br>
                Office 405, 4th Floor, The Elite Business Tower, Al Barsha 1, Dubai, UAE
              </div>
              <div>
                <span>📞</span> 
                +971 52 347 3973
              </div>
            </div>
          </div>
        </div>
    </div>
</section>
</div>





  
@endsection




<!-- Add this script to handle the shrinking navbar event -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', function() {
            if (window.innerWidth >= 1200 && window.scrollY > 100) { // Check for mobile screen
                navbar.classList.add('shrink');
                navbar.classList.remove('unshrink');
            } else {
                navbar.classList.remove('shrink');
                navbar.classList.add('unshrink');
            }
        });
    });
</script>