@extends('layouts.app')

@section('title', 'Contact Us - ' . $branding['company_name'])

@section('content')

<!-- BREADCRUMBS -->
<div class="bg-light py-3 border-bottom mb-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-danger text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container mb-5">
    <div class="row g-4 mb-5">
        
        <!-- CONTACT INFORMATION WIDGETS -->
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm rounded-4 p-4 bg-white h-100">
                <h3 class="brand-font text-uppercase text-secondary mb-1">Get In <span class="text-danger">Touch</span></h3>
                <p class="text-muted small mb-4">Reach out to us via any channel or visit our physical workshop.</p>
                
                <div class="d-flex flex-column gap-4">
                    <!-- WhatsApp -->
                    <div class="d-flex align-items-start gap-3">
                        <div class="rounded-circle bg-success bg-opacity-10 text-success d-flex align-items-center justify-content-center" style="width: 45px; height: 45px; flex-shrink: 0;">
                            <i class="bi bi-whatsapp fs-4"></i>
                        </div>
                        <div>
                            <span class="text-muted d-block small" style="font-size: 11px;">WHATSAPP CHAT</span>
                            <a href="https://wa.me/{{ $branding['whatsapp_clean'] }}" target="_blank" class="fw-bold text-success text-decoration-none">{{ $branding['footer_whatsapp'] }}</a>
                            <small class="text-muted d-block" style="font-size: 10px;">Instant showroom response (Mon-Sat)</small>
                        </div>
                    </div>

                    <!-- Phone Calls -->
                    <div class="d-flex align-items-start gap-3">
                        <div class="rounded-circle bg-danger bg-opacity-10 text-danger d-flex align-items-center justify-content-center" style="width: 45px; height: 45px; flex-shrink: 0;">
                            <i class="bi bi-telephone-inbound fs-4"></i>
                        </div>
                        <div>
                            <span class="text-muted d-block small" style="font-size: 11px;">PHONE CALLS</span>
                            <a href="tel:{{ preg_replace('/\s+/', '', $branding['footer_phone']) }}" class="fw-bold text-secondary text-decoration-none">{{ $branding['footer_phone'] }}</a>
                            <small class="text-muted d-block" style="font-size: 10px;">General inquiries & diagnostic bookings</small>
                        </div>
                    </div>

                    <!-- Email Inquiries -->
                    <div class="d-flex align-items-start gap-3">
                        <div class="rounded-circle bg-secondary bg-opacity-10 text-secondary d-flex align-items-center justify-content-center" style="width: 45px; height: 45px; flex-shrink: 0;">
                            <i class="bi bi-envelope fs-4"></i>
                        </div>
                        <div>
                            <span class="text-muted d-block small" style="font-size: 11px;">EMAIL SUPPORT</span>
                            <a href="mailto:{{ $branding['footer_email'] }}" class="fw-bold text-secondary text-decoration-none">{{ $branding['footer_email'] }}</a>
                        </div>
                    </div>

                    <!-- Location Address -->
                    <div class="d-flex align-items-start gap-3">
                        <div class="rounded-circle bg-dark bg-opacity-10 text-dark d-flex align-items-center justify-content-center" style="width: 45px; height: 45px; flex-shrink: 0;">
                            <i class="bi bi-geo-alt fs-4"></i>
                        </div>
                        <div>
                            <span class="text-muted d-block small" style="font-size: 11px;">PHYSICAL WORKSHOP</span>
                            <span class="text-secondary fw-semibold">{{ $branding['footer_address'] }}</span>
                            <small class="text-muted d-block" style="font-size: 10px;">Free secure customer parking</small>
                        </div>
                    </div>

                    <!-- Opening Hours -->
                    <div class="d-flex align-items-start gap-3">
                        <div class="rounded-circle bg-warning bg-opacity-10 text-warning d-flex align-items-center justify-content-center" style="width: 45px; height: 45px; flex-shrink: 0;">
                            <i class="bi bi-clock fs-4"></i>
                        </div>
                        <div>
                            <span class="text-muted d-block small" style="font-size: 11px;">BUSINESS HOURS</span>
                            <span class="text-secondary small fw-semibold">{{ $branding['business_hours'] }}</span>
                            <small class="text-muted d-block" style="font-size: 10px;">Sunday & Holidays: Closed</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- CONTACT INQUIRY FORM -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white h-100">
                <h4 class="brand-font text-uppercase text-secondary mb-1">Send a <span class="text-danger">Message</span></h4>
                <p class="text-muted small mb-4">Have questions about a bike frame size or delivery costs? Write to us.</p>
                
                <form action="{{ route('contact.store_message') }}" method="POST">
                    @csrf
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="name" class="form-label small fw-semibold text-muted">Your Name</label>
                            <input type="text" class="form-control rounded-pill px-3" id="name" name="name" value="{{ old('name') }}" required>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="email" class="form-label small fw-semibold text-muted">Email Address</label>
                            <input type="email" class="form-control rounded-pill px-3" id="email" name="email" value="{{ old('email') }}" required>
                        </div>

                        <div class="col-md-6">
                            <label for="phone" class="form-label small fw-semibold text-muted">Phone Number (Optional)</label>
                            <input type="text" class="form-control rounded-pill px-3" id="phone" name="phone" placeholder="e.g. 0712345678" value="{{ old('phone') }}">
                        </div>

                        <div class="col-md-6">
                            <label for="subject" class="form-label small fw-semibold text-muted">Subject</label>
                            <input type="text" class="form-control rounded-pill px-3" id="subject" name="subject" value="{{ old('subject') }}" required>
                        </div>

                        <div class="col-12">
                            <label for="message" class="form-label small fw-semibold text-muted">Message Details</label>
                            <textarea class="form-control rounded-4" id="message" name="message" rows="5" placeholder="Write your inquiry details here..." required>{{ old('message') }}</textarea>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary-mj btn-lg w-100 rounded-pill py-2.5 text-uppercase fs-6 mt-4">
                        Send Message <i class="bi bi-send ms-1"></i>
                    </button>
                </form>
            </div>
        </div>

    </div>

    <!-- GOOGLE MAPS INTEGRATION -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden bg-white">
        <div class="p-3 bg-light border-bottom">
            <h5 class="fw-bold text-secondary mb-0"><i class="bi bi-map text-danger me-2"></i>Find Our Showroom</h5>
        </div>
        <!-- Embedded responsive Google Map iframe -->
        <div class="ratio ratio-21x9" style="min-height: 350px;">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15955.076878453472!2d36.8837375!3d-1.3444007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f11edb5847e33%3A0x6b5edcf27bb2155e!2sCabanas%20Bus%20Stop%2C%20Mombasa%20Road!5e0!3m2!1sen!2ske!4v1719999999999!5m2!1sen!2ske" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
</div>

@endsection