@extends('layouts.main')
@push('title')
<title>contact</title>  
@endpush
@section('main-section')

<style>

.navabout{
  position: fixed;
  z-index: 99;
}

/* From Uiverse.io by SelfMadeSystem */ 
.outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rect {
  stroke-dashoffset: 5;
  stroke-dasharray: 0 0 10 40 10 40;
  transition: 0.5s;
  stroke: #fff;
}

.navabout {
  /* position: relative; */
  width: 500px;
  height: 60px;
  bottom: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  left:50%;
  transform: translateX(-50%);
  white-space: nowrap; 
}

.containerabout:hover .outline .rect {
  transition: 999999s;
  /* Must specify these values here as something *different* just so that the transition works properly */
  stroke-dashoffset: 1;
  stroke-dasharray: 0;
}

.containerabout {
    position: absolute;
    inset: 0;
    background: #45689e;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0.5em;
}

.btn {
  padding: 0.5em 1.5em;
  color: #fff;
  cursor: pointer;
  transition: 0.1s;
  display: inline-block;
}

.btn:hover {
  background: #ce4088;
}

.btn:nth-child(1):hover ~ svg .rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 2 8 73.3 8 10.7;
}

.btn:nth-child(2):hover ~ svg .rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 12.6 9.5 49.3 9.5 31.6;
}

.btn:nth-child(3):hover ~ svg .rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 24.5 8.5 27.5 8.5 55.5;
}

.btn:nth-child(4):hover ~ svg .rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 34.7 6.9 10.2 6.9 76;
}

.btn:hover ~ .outline .rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 0 10 40 10 40;
  transition: 0.5s !important;
}

a {
    color: #fff;
    text-decoration: none;
}

.fixed-top {
    transition: 0.5s;
    background: var(--bs-white);
    border: 0;
    display: none;
}

.container-fluid.bg-dark.text-white-50.footer.pt-5 {
    display: none;
}

.container-fluid.copyright.bg-dark.py-4 {
    display: none;
}

    #ajax-form input::placeholder,
    #ajax-form textarea::placeholder {
        opacity: 0.5 !important;
        color: #6c757d !important;
    }

</style>
<!-- Single Page Header start -->
<div class="container-fluid page-header py-5">
    <h1 class="text-center text-white display-6">Contact</h1>
    <ol class="breadcrumb justify-content-center mb-0">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Pages</a></li>
        <li class="breadcrumb-item active text-white">Contact</li>
    </ol>
</div>
<!-- Single Page Header End -->

    <!-- Contact Start -->

    <section class="section">
        <div class="container-fluid contact pt-5">

 

            <div class="container">
    
            @if (session('success'))
                <div id="success-message"  class="btn btn-success mb-2 w-100">
                    {{ session('success') }}
                </div>
            @endif
    
                <div class="p-5 bg-light rounded">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="text-center mx-auto" style="max-width: 700px;">
                                <h2 class="home-text">Get in touch</h2>
                                <p class="mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem magnam eum nostrum laudantium eaque explicabo soluta sunt minus consequatur quo.</p>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="h-100 rounded">
                                <iframe class="rounded w-100" style="height: 400px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15062.815773053147!2d72.85386278094343!3d19.295236741392678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b067fc900b23%3A0x5355f3517eb77d9!2sShree%20AGT%20Multimedia%20(%20Software%20Development%20%26%20IT%20Consulting%20)!5e0!3m2!1sen!2sin!4v1725896610886!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                        <div class="col-lg-7">
    <form action="{{ route('contacts.create') }}" method="POST" name="ajax-form" id="ajax-form">
        @csrf
        <div>
            <label for="name">Enter Your Name</label>
            <input name="name" id="name" class="w-100 form-control border-0 py-3 mb-4" type="text" placeholder="Your Name: *" />
        </div>
        <div>
            <label for="email">Enter Your Email</label>
            <input name="email" id="email" type="email" class="w-100 form-control border-0 py-3 mb-4" placeholder="E-Mail: *" />
        </div>
        <div>
            <label for="message">Enter Your Message</label>
            <textarea class="w-100 form-control border-0 mb-4" name="message" id="message" rows="5" cols="10" placeholder="Your Message"></textarea>
        </div>
        <button class="w-100 btn form-control border-secondary py-3 bg-white text-primary" type="submit">Submit</button>
    </form>
                        </div>
                        <div class="col-lg-5">
                            <div class="d-flex p-4 rounded mb-4 bg-white">
                                <i class="fas fa-map-marker-alt fa-2x text-primary me-4"></i>
                                <div>
                                    <h4>Address</h4>
                                    <p class="mb-2">Phase-5, Annapurna Estate, Bhayander(East)</p>
                                </div>
                            </div>
                            <div class="d-flex p-4 rounded mb-4 bg-white">
                                <i class="fas fa-envelope fa-2x text-primary me-4"></i>
                                <div>
                                    <h4>Mail Us</h4>
                                    <p class="mb-2">info@example.com</p>
                                </div>
                            </div>
                            <div class="d-flex p-4 rounded bg-white">
                                <i class="fa fa-phone-alt fa-2x text-primary me-4"></i>
                                <div>
                                    <h4>Telephone</h4>
                                    <p class="mb-2">9123456789</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="navabout">
        <div class="containerabout">
         <a href="/" class="btn">Home</a>
          <a href="/refund-policy" class="btn">Refund Policy</a>
         <a href="/about" class="btn">About</a>
          <a href="/privacy-policy" class="btn">Privacy Policy</a>
          <svg
            class="outline"
            overflow="visible"
            width="500"
            height="60"
            viewBox="0 0 500 60"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              class="rect"
              pathLength="100"
              x="0"
              y="0"
              width="500"
              height="60"
              fill="transparent"
              stroke-width="5"
            ></rect>
          </svg>
        </div>
      </div>

    <!-- Contact End -->

    <script src="{{asset('js/webeasty/contact.js')}}"></script>

    <script>
        // Wait until the page is fully loaded
        document.addEventListener('DOMContentLoaded', function () {
            // Find the success message div
            const successMessage = document.getElementById('success-message');
            if (successMessage) {
                // Set a timer to fade out after 1.5 seconds
                setTimeout(() => {
                    successMessage.style.transition = "opacity 0.5s ease";
                    successMessage.style.opacity = 0;
                }, 1500);
    
                // Remove the element from the DOM after the fade-out
                setTimeout(() => {
                    successMessage.remove();
                }, 2000);
            }
        });
    </script>
    @endsection