@extends('layouts.front')
@section('content')
    <style>
        .contact-info {
            background-color: #f8f9fa;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
        }

        .contact-info h3 {
            color: #333;
            margin-bottom: 20px;
        }

        .contact-info p {
            margin-bottom: 10px;
            font-size: 16px;
            color: #555;
        }

        .contact-form {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
        }

        .contact-form h3 {
            color: #333;
            margin-bottom: 20px;
        }

        .contact-form .form-group {
            margin-bottom: 20px;
        }

        .contact-form label {
            font-weight: 600;
            color: #555;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        .contact-form textarea {
            resize: none;
            height: 150px;
        }

        .contact-form button {
            background-color: #B57067;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .contact-form button:hover {
            background-color: #0056b3;
        }

        #map {
            height: 400px;
            width: 100%;
            border-radius: 10px;
            margin-top: 20px;
        }

        .contact-details {
            display: flex;
            justify-content: space-between;
        }

        .contact-details>div {
            flex: 1;
        }
    </style>

    <div class="main-content">
        <section class="inner-header divider parallax layer-overlay overlay-dark-5"
            data-bg-img="{{ asset('images/banner-inner.png') }}">
            <div class="container pt-70 pb-20">
                <!-- Section Content -->
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h2 class="title text-white">Contact Us</h2>
                            <ol class="breadcrumb text-center text-black mt-10 header_display">
                                <li><a href="{{ route('front.index') }}">Home</a></li>
                                <li class="active text-gray-silver">Contact Us</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="container pt-70 pb-70">
            <div class="row">
                <div class="col-md-6">
                    <div class="contact-info">
                        <h3>Contact Information</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <h4>Head Office:</h4>
                                <p><strong>Address:</strong> VH2P+WFM, Ministries Road Juba, Juba, South Sudan</p>
                                <div class="contact-details">
                                    <div>
                                        <p><strong>Email:</strong></p>
                                        <ul>
                                            <li><a href="mailto:info@rrc.gov.ss">info@rrc.gov.ss</a></li>
                                            <li><a href="mailto:admin@rrc.gov.ss">admin@rrc.gov.ss</a></li>
                                            <li><a href="mailto:gatwechkulang@rrc.gov.ss">gatwechkulang@rrc.gov.ss</a></li>
                                            <li><a href="mailto:aduttakpiny@rrc.gov.ss">aduttakpiny@rrc.gov.ss</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <p><strong>Phone:</strong></p>
                                        <ul>
                                            <li><a href="tel:+211922636007">+211 922 636 007</a></li>
                                            <li><a href="tel:+211929222918">+211 929 222 918</a></li>
                                            <li><a href="tel:+211922661667">+211 922 661 667</a></li>
                                        </ul>
                                    </div>
                                </div>

                                {{-- <h4>Branch Office:</h4>
                                <p><strong>Address:</strong> Second Branch Address Here</p>
                                <div class="contact-details">
                                    <div>
                                        <p><strong>Email:</strong> branchemail@mail.com</p>
                                    </div>
                                    <div>
                                        <p><strong>Phone:</strong> +211 922 636 008</p>
                                    </div>
                                </div> --}}
                            </div>
                        </div>
                        <div class="map-responsive">
                            <iframe id="map"
                                src="https://www.openstreetmap.org/export/embed.html?bbox=31.57451%2C4.85622%2C31.57637%2C4.85703&amp;layer=mapnik&amp;marker=4.85661%2C31.57544"
                                width="100%" height="450" frameborder="0" scrolling="no" marginheight="0"
                                marginwidth="0"></iframe>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="contact-form">
                        <h3>Contact Us</h3>
                        <form action="{{ route('contact.submit') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="name">Your Name</label>
                                <input type="text" name="name" id="name" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Your Email</label>
                                <input type="email" name="email" id="email" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="message">Message</label>
                                <textarea name="message" id="message" class="form-control" rows="5" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <script>
        function initMap() {
            var uluru = {
                lat: -4.8588,
                lng: 31.5719
            };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
@endsection

@push('script')
@endpush