@extends('layouts.app')

@push('header')
    <div class="container-fluid position-relative bg-breadcrumb">
        <!-- Gradient Overlay -->
        <div class="overlay-gradient position-absolute w-100 h-100" style="background: rgba(0, 0, 0, 0.6); top: 0; left: 0;">
        </div>
        <div class="container text-center py-5 position-relative" style="max-width: 900px; z-index: 2;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s"
                style="font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 2px;">
                Where Can You Find Us?
            </h4>
            <p class="text-white wow fadeInUp" data-wow-delay="0.3s"
                style="font-size: 18px; max-width: 700px; margin: 0 auto;">
                We're here to help you. Feel free to reach out!
            </p>
        </div>
    </div>
    <!-- Header End -->
@endpush
@section('content')
    <!-- Contact Start -->
    <div class="container-fluid contact py-5" style="background-color: #f9f9f9;">
        <div class="container py-5">
            <div class="row g-5">
                @if (\Session::has('success'))
                    <div class="alert alert-success alert-dismissible" alert-dismissible fade show role="alert">
                        <strong>{{ \Session::get('success') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-warning alert-dismissible" alert-dismissible fade show role="alert">
                        <strong>Please check your inputs</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                <div class="col-xl-6">
                    <div class="wow fadeInUp" data-wow-delay="0.2s">
                        <div class="bg-light rounded p-5 mb-5 shadow-sm">
                            <h4 class="text-primary mb-4" style="font-family: 'Poppins', sans-serif;">Get in Touch</h4>
                            <div class="row g-4">
                                <!-- Contact Address -->
                                <div class="col-12">
                                    <div class="contact-add-item d-flex align-items-center p-4 rounded shadow-sm bg-white">
                                        <div class="contact-icon text-primary me-3">
                                            <i class="fas fa-map-marker-alt fa-2x"></i>
                                        </div>
                                        <div>
                                            <h5 class="text-dark mb-1">Address</h5>
                                            <p class="mb-0 text-muted">{{ $infosite->address }}</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- Contact Whatsapp and Email -->
                                <div class="col-md-12">
                                    <div class="contact-add-item d-flex align-items-center p-4 rounded shadow-sm bg-white">
                                        <div class="contact-icon text-primary me-3">
                                            <i class="fa fa-phone-alt fa-2x"></i>
                                        </div>
                                        <div>
                                            <h5 class="text-dark mb-1">Whatsapp</h5>
                                            <p class="mb-0 text-muted">{{ $infosite->phone }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="contact-add-item d-flex align-items-center p-4 rounded shadow-sm bg-white">
                                        <div class="contact-icon text-primary me-3">
                                            <i class="fas fa-envelope fa-2x"></i>
                                        </div>
                                        <div>
                                            <h5 class="text-dark mb-1">Mail Us</h5>
                                            <p class="mb-0 text-muted">{{ $infosite->email }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                        

                        <div class="bg-light p-5 rounded h-100 wow fadeInUp shadow-sm" data-wow-delay="0.2s">
                            <h4 class="text-primary" style="font-family: 'Poppins', sans-serif;">Send Your Message</h4>
                            <form id="data-form" action="{{ route('contact.store') }}" method="POST">
                                @csrf
                                <div class="row g-4">
                                    <div class="col-lg-12 col-xl-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control border-0 shadow-sm" id="name"
                                                placeholder="Your Name" name="name" value="{{ old('name') }}"
                                                style="background-color: #f0f0f0;" required>
                                            <label for="name">Your Name<span class="text-danger">*</span></label>
                                        </div>
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-12 col-xl-6">
                                        <div class="form-floating">
                                            <input type="email" class="form-control border-0 shadow-sm" id="email"
                                                placeholder="Your Email" name="email" value="{{ old('email') }}"
                                                style="background-color: #f0f0f0;" required>
                                            <label for="email">Your Email<span class="text-danger">*</span></label>
                                        </div>
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-12 col-xl-6">
                                        <div class="form-floating">
                                            <input type="phone" class="form-control border-0 shadow-sm" id="phone"
                                                placeholder="Phone" name="phone" value="{{ old('phone') }}"
                                                style="background-color: #f0f0f0;">
                                            <label for="phone">Your Phone</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-xl-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control border-0 shadow-sm" id="project"
                                                placeholder="Company" name="company" value="{{ old('company') }}"
                                                style="background-color: #f0f0f0;">
                                            <label for="project">Your Company</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-floating">
                                            <input type="text" class="form-control border-0 shadow-sm" id="subject"
                                                placeholder="Subject" name="subject" value="{{ old('subject') }}"
                                                style="background-color: #f0f0f0;" required>
                                            <label for="subject">Subject<span class="text-danger">*</span></label>
                                        </div>
                                        @error('subject')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <div class="form-floating">
                                            <textarea class="form-control border-0 shadow-sm" placeholder="Leave a message here" id="message" name="message"
                                                style="height: 160px; background-color: #f0f0f0;" required>{{ old('message') }}</textarea>
                                            <label for="message">Message<span class="text-danger">*</span></label>
                                        </div>
                                        @error('message')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <button type="button" class="btn btn-primary" id="submit-btn">Submit</button>
                                        {{-- <button type="submit" class="btn btn-primary w-100 py-3" style="background-color: #007bff; font-weight: bold;">Send Message</button> --}}
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 wow fadeInRight" data-wow-delay="0.2s">
                    <div class="rounded h-100 shadow-sm">
                        <iframe class="rounded h-100 w-100" style="height: 400px; border: 3px solid #007bff;"
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.1497185906114!2d106.85475807453149!3d-6.243991461139429!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3a44e9b2a2b%3A0x409801a08ab57afd!2sMENARA%20HIJAU!5e0!3m2!1sid!2sid!4v1725891765339!5m2!1sid!2sid"
                            allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact End -->

    <!-- Modal -->
    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmationModalLabel">Confirm Submission</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to submit this data?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirm-submit">Confirm</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        // Show modal on submit button click
        document.getElementById('submit-btn').addEventListener('click', function() {
            var confirmationModal = new bootstrap.Modal(document.getElementById('confirmationModal'));
            confirmationModal.show();
        });

        // If confirm button in modal is clicked, submit the form
        document.getElementById('confirm-submit').addEventListener('click', function() {
            document.getElementById('data-form').submit();
        });
    </script>
@endpush