@extends('layouts.main')

@section('title', 'Connect With Us - Grace Family Church')
@section('meta_description', 'Get in touch with Grace Family Church. Contact us for prayer, questions, or visit us in Plumstead, Cape Town.')

@section('content')

<!-- HERO / TOP HEADING -->
<x-page-header section="header_connect">
    <h1 class="display-4 fw-bold">Get in Touch</h1>
    <div class="section-divider" style="background: var(--gfc-accent);"></div>
    <p class="lead">
        We'd love to hear from you. Reach out for prayer, questions, or more information.
    </p>
</x-page-header>

<!-- CONTACT DETAILS & FORM -->
<section class="py-5">
    <div class="container">
        <div class="row g-5">

            <!-- Left Column: Contact Details -->
            <div class="col-lg-5 mb-4">
                <h2 class="section-title">Contact Details</h2>
                <div class="section-divider" style="margin-left: 0;"></div>

                @php
                    $cPhone = setting('contact.phone', '+27 82 934 0021');
                    $cWhats = setting('contact.whatsapp');
                    $cEmail = setting('contact.email');
                    $cAddress = setting('contact.address', '7 Burnham Rd, Plumstead, Cape Town, 7801');
                    $officeHours = \App\Http\Controllers\SiteSettingController::officeHours();
                    $today = now()->format('l');
                    $isOpenDay = collect($officeHours)->contains(fn($r) => !$r['closed']);
                @endphp
                <div class="mt-4 contact-cards">
                    @if($cPhone)
                    <a href="tel:{{ preg_replace('/[^0-9+]/', '', $cPhone) }}" class="contact-card">
                        <span class="contact-card-ico" style="background:#e8f0fe; color:#1b2f9c;"><i class="fas fa-phone"></i></span>
                        <span class="contact-card-body">
                            <span class="contact-card-label">📞 Call Us</span>
                            <span class="contact-card-value">{{ $cPhone }}</span>
                        </span>
                    </a>
                    @endif

                    @if($cWhats)
                    <a href="https://wa.me/{{ $cWhats }}" target="_blank" rel="noopener" class="contact-card">
                        <span class="contact-card-ico" style="background:#e7f8ee; color:#25D366;"><i class="fab fa-whatsapp"></i></span>
                        <span class="contact-card-body">
                            <span class="contact-card-label">💬 WhatsApp</span>
                            <span class="contact-card-value">Chat with us</span>
                        </span>
                    </a>
                    @endif

                    @if($cEmail)
                    <a href="mailto:{{ $cEmail }}" class="contact-card">
                        <span class="contact-card-ico" style="background:#fdeef0; color:#c0392b;"><i class="fas fa-envelope"></i></span>
                        <span class="contact-card-body">
                            <span class="contact-card-label">✉️ Email</span>
                            <span class="contact-card-value">{{ $cEmail }}</span>
                        </span>
                    </a>
                    @endif

                    @if($cAddress)
                    <a href="https://www.google.com/maps?q={{ urlencode(setting('contact.address_maps_query', $cAddress)) }}" target="_blank" rel="noopener" class="contact-card">
                        <span class="contact-card-ico" style="background:#fff4e0; color:#c8913a;"><i class="fas fa-map-marker-alt"></i></span>
                        <span class="contact-card-body">
                            <span class="contact-card-label">📍 Visit Us</span>
                            <span class="contact-card-value">{{ $cAddress }}</span>
                        </span>
                    </a>
                    @endif
                </div>

                @if($isOpenDay)
                <!-- Office Hours (per day) -->
                <div class="office-hours-card mt-4">
                    <div class="office-hours-head">
                        <i class="fas fa-clock me-2"></i> Office Hours
                    </div>
                    <ul class="office-hours-list">
                        @foreach($officeHours as $row)
                            <li class="{{ $row['day'] === $today ? 'is-today' : '' }}">
                                <span class="oh-day">{{ $row['day'] }} @if($row['day'] === $today)<span class="oh-today-badge">Today</span>@endif</span>
                                <span class="oh-time">
                                    @if($row['closed'] || (!$row['open'] && !$row['close']))
                                        <span class="oh-closed">Closed</span>
                                    @else
                                        {{ $row['open'] }} – {{ $row['close'] }}
                                    @endif
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <!-- Social Media -->
                <h5 class="section-title mt-4 mb-3">Find Us On</h5>
                <div class="d-flex gap-3" role="list" aria-label="Social media links">
                    @if(setting('social.youtube'))
                    <a href="{{ setting('social.youtube') }}" target="_blank" rel="noopener noreferrer" class="social-btn youtube" data-bs-toggle="tooltip" title="YouTube" aria-label="Visit our YouTube channel" role="listitem">
                        <i class="fab fa-youtube" aria-hidden="true"></i>
                    </a>
                    @endif
                    @if(setting('social.facebook'))
                    <a href="{{ setting('social.facebook') }}" target="_blank" rel="noopener noreferrer" class="social-btn facebook" data-bs-toggle="tooltip" title="Facebook" aria-label="Visit our Facebook page" role="listitem">
                        <i class="fab fa-facebook-f" aria-hidden="true"></i>
                    </a>
                    @endif
                    @if(setting('social.instagram'))
                    <a href="{{ setting('social.instagram') }}" target="_blank" rel="noopener noreferrer" class="social-btn instagram" data-bs-toggle="tooltip" title="Instagram" aria-label="Visit our Instagram" role="listitem">
                        <i class="fab fa-instagram" aria-hidden="true"></i>
                    </a>
                    @endif
                    @if(setting('social.tiktok'))
                    <a href="{{ setting('social.tiktok') }}" target="_blank" rel="noopener noreferrer" class="social-btn tiktok" data-bs-toggle="tooltip" title="TikTok" aria-label="Visit our TikTok" role="listitem">
                        <i class="fab fa-tiktok" aria-hidden="true"></i>
                    </a>
                    @endif
                </div>
            </div>

            <!-- Right Column: Contact Form -->
            <div class="col-lg-7">
                <div class="service-card p-4 p-lg-5">
                    <h2 class="section-title mb-4">Send Us a Message</h2>

                    @include('partials.alerts')

                    <form method="POST" action="{{ route('connect.submit') }}">
                        @csrf

                        <!-- Honeypot -->
                        <div style="position: absolute; left: -9999px;" aria-hidden="true">
                            <input type="text" name="website" tabindex="-1" autocomplete="off">
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label fw-bold">Full Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-lg @error('name') is-invalid @enderror" id="name" name="name" placeholder="Your name" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label fw-bold">Phone Number</label>
                            <input type="tel" class="form-control form-control-lg @error('phone') is-invalid @enderror" id="phone" name="phone" placeholder="Phone number (optional)" value="{{ old('phone') }}">
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label fw-bold">Email Address <span class="text-danger">*</span></label>
                            <input type="email" class="form-control form-control-lg @error('email') is-invalid @enderror" id="email" name="email" placeholder="you@example.com" value="{{ old('email') }}" required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label for="message" class="form-label fw-bold">Message <span class="text-danger">*</span></label>
                            <textarea class="form-control form-control-lg @error('message') is-invalid @enderror" id="message" name="message" rows="5" placeholder="Write your message here" required>{{ old('message') }}</textarea>
                            @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-gfc-primary btn-lg">
                                <i class="fas fa-paper-plane me-2"></i> Send Message
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- PRAYER REQUEST CTA -->
<section class="py-5" style="background: linear-gradient(135deg, var(--gfc-primary) 0%, var(--gfc-secondary) 100%);">
    <div class="container text-center text-white">
        <i class="fas fa-praying-hands fa-2x mb-3" style="color: var(--gfc-accent);"></i>
        <h2 class="fw-bold mb-3">Need Prayer?</h2>
        <p class="lead mb-4" style="max-width: 600px; margin: 0 auto;">
            We believe in the power of prayer. Share your prayer request and our church family will lift you up.
        </p>
        <a href="{{ route('prayer.create') }}" class="btn btn-lg px-4 py-2 rounded-pill fw-semibold" style="background-color: var(--gfc-accent); color: #fff;">
            <i class="fas fa-praying-hands me-2"></i> Submit a Prayer Request
        </a>
    </div>
</section>

<!-- GOOGLE MAPS -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-4">
            <h2 class="section-title">Find Us Here</h2>
            <div class="section-divider"></div>
        </div>
        <div class="ratio ratio-16x9 rounded shadow overflow-hidden" style="border-radius: 12px !important;">
            <iframe
                src="https://www.google.com/maps?q={{ urlencode(setting('contact.address_maps_query', setting('contact.address', '7 Burnham Rd, Plumstead, Cape Town, 7801, South Africa'))) }}&output=embed"
                style="border:0;"
                allowfullscreen=""
                loading="lazy">
            </iframe>
        </div>
    </div>
</section>

@endsection