@extends('frontendLayout')

@section('frontend_layout')
    @push('frontend_css')
        <style>
            .contact-section {
                padding: 60px 0;
                background: #f8f9fa;
            }

            .contact-card {
                background: #fff;
                border-radius: 12px;
                padding: 30px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
                margin-bottom: 25px;
            }

            .contact-title {
                font-weight: 600;
                margin-bottom: 15px;
                color: #111;
            }

            .contact-info p {
                margin-bottom: 8px;
            }

            .form-control {
                border-radius: 8px;
            }

            .btn-custom {
                background: #111;
                color: #fff;
                border-radius: 8px;
                padding: 10px 20px;
            }

            .btn-custom:hover {
                background: #333;
            }
        </style>
    @endpush

    <div class="contact-section">
        <div class="container">

            @if (session('success'))
                <div class="alert alert-success mb-4">{{ session('success') }}</div>
            @endif

            {{-- Header --}}
            <div class="text-center mb-5">
                <h2 class="fw-bold">{{ data_get($contactData ?? [], 'title', 'Contact Us') }}</h2>
                <p class="text-muted">
                    {{ data_get($contactData ?? [], 'subtitle', 'We would love to hear from you. Get in touch with us anytime.') }}
                </p>
            </div>

            <div class="row">

                {{-- Contact Info --}}
                <div class="col-md-5">
                    <div class="contact-card contact-info">
                        <h5 class="contact-title">Get In Touch</h5>

                        <p><strong>Shop Name:</strong> {{ data_get($contactData ?? [], 'shop_name', 'ShopSphere') }}</p>
                        <p><strong>Location:</strong> {{ data_get($contactData ?? [], 'address', 'Bangladesh') }}</p>
                        <p><strong>Phone:</strong> {{ data_get($contactData ?? [], 'phone', '+880 1XXXXXXXXX') }}</p>
                        <p><strong>Email:</strong> {{ data_get($contactData ?? [], 'email', 'support@shopsphere.com') }}</p>
                        <p><strong>Working Hours:</strong>
                            {{ data_get($contactData ?? [], 'working_hours', '10:00 AM - 9:00 PM') }}</p>

                        <hr>

                        <p>
                            {{ data_get($contactData ?? [], 'intro', 'Feel free to contact us for inquiries, support, or feedback. Our team will get back to you as soon as possible.') }}
                        </p>
                    </div>
                </div>

                {{-- Contact Form --}}
                <div class="col-md-7">
                    <div class="contact-card">
                        <h5 class="contact-title">Send Message</h5>

                        <form action="{{ route('storefront.contact.message') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Your Name</label>
                                <input type="text" name="name" class="form-control" placeholder="Enter your name"
                                    value="{{ old('name') }}" required>
                                @error('name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Your Email</label>
                                <input type="email" name="email" class="form-control" placeholder="Enter your email"
                                    value="{{ old('email') }}" required>
                                @error('email')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Phone</label>
                                <input type="text" name="phone" class="form-control"
                                    placeholder="Enter your phone number" value="{{ old('phone') }}">
                                @error('phone')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Message</label>
                                <textarea name="message" rows="5" class="form-control" placeholder="Write your message..." required>{{ old('message') }}</textarea>
                                @error('message')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-custom">
                                Send Message
                            </button>
                        </form>
                    </div>
                </div>

            </div>

            {{-- Google Map --}}
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="contact-card p-0">


                        <iframe
                            src="{{ data_get($contactData ?? [], 'map_embed_url', 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3689.908850458656!2d91.8400065!3d22.357070300000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30ad27656c600855%3A0xa4be32d307a83aee!2sBali%20Arcade!5e0!3m2!1sen!2sbd!4v1776424657140!5m2!1sen!2sbd') }}"
                            width="100%" height="350" style="border:0; border-radius:12px;" allowfullscreen=""
                            loading="lazy"></iframe>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection