@extends('frontend.layouts.master')

@section('title', __('front.contact.page_title') . ' - Novalynk')

@section('content')
<!-- Page Header -->
<section class="py-5 bg-light-custom">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center" data-aos="fade-up">
                <h1 class="section-title">{{ app()->isLocale('en') ? __('front.content.contact.title') : ($settings['contact_title'] ?? __('front.content.contact.title')) }}</h1>
                <p class="section-subtitle mx-auto">{{ app()->isLocale('en') ? __('front.content.contact.subtitle') : ($settings['contact_subtitle'] ?? __('front.content.contact.subtitle')) }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-5" data-aos="fade-up">
                <div class="card-custom p-5 h-100">
                    <h3 class="mb-4">{{ __('front.contact.contact_information') }}</h3>
                    
                    <div class="mb-4">
                        <div class="d-flex align-items-start gap-3 mb-4">
                            <div style="width: 50px; height: 50px; background: var(--light-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa-solid fa-location-dot text-primary-custom"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ __('front.contact.address') }}</h6>
                                <p class="mb-0 text-muted">{{ $settings['contact_address'] ?? 'Jakarta, Indonesia' }}</p>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-start gap-3 mb-4">
                            <div style="width: 50px; height: 50px; background: var(--light-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa-solid fa-envelope text-primary-custom"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">Email</h6>
                                <a href="mailto:{{ $settings['contact_email'] ?? 'info@novalynk.com' }}" class="text-muted text-decoration-none">
                                    {{ $settings['contact_email'] ?? 'info@novalynk.com' }}
                                </a>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-start gap-3 mb-4">
                            <div style="width: 50px; height: 50px; background: var(--light-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa-solid fa-phone text-primary-custom"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ __('front.contact.phone') }}</h6>
                                <a href="tel:{{ $settings['contact_phone'] ?? '+6281234567890' }}" class="text-muted text-decoration-none">
                                    {{ $settings['contact_phone'] ?? '+62 812 3456 7890' }}
                                </a>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-start gap-3">
                            <div style="width: 50px; height: 50px; background: var(--light-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa-brands fa-whatsapp text-primary-custom"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">WhatsApp</h6>
                                <a href="https://wa.me/{{ $settings['contact_whatsapp'] ?? '6281234567890' }}" class="text-muted text-decoration-none">
                                    {{ __('front.contact.chat_whatsapp') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <h5 class="mb-3">{{ __('front.contact.operating_hours') }}</h5>
                    <p class="text-muted mb-1">{{ __('front.contact.weekday_hours') }}</p>
                    <p class="text-muted mb-0">{{ __('front.contact.saturday_hours') }}</p>
                </div>
            </div>
            
            <div class="col-lg-7" data-aos="fade-up" data-aos-delay="100">
                <div class="card-custom p-5">
                    <h3 class="mb-4">{{ __('front.contact.send_message') }}</h3>
                    
                    @if(session('success'))
                    <div class="alert alert-success-custom" role="alert">
                        <i class="fa-solid fa-circle-check me-2"></i>
                        {{ session('success') }}
                    </div>
                    @endif
                    
                    <form method="POST" action="{{ route('contact.store') }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">{{ __('front.contact.full_name') }}</label>
                                <input type="text" name="name" class="form-control form-control-admin" required placeholder="{{ __('front.contact.full_name_placeholder') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email *</label>
                                <input type="email" name="email" class="form-control form-control-admin" required placeholder="{{ __('front.contact.email_placeholder') }}">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">{{ __('front.contact.subject') }}</label>
                                <input type="text" name="subject" class="form-control form-control-admin" placeholder="{{ __('front.contact.subject_placeholder') }}">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">{{ __('front.contact.message') }}</label>
                                <textarea name="message" rows="5" class="form-control form-control-admin" required placeholder="{{ __('front.contact.message_placeholder') }}"></textarea>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary-custom">
                                    <i class="fa-solid fa-paper-plane me-2"></i> {{ __('front.contact.send_button') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Map Section -->
@if(isset($settings['google_maps_embed']) && $settings['google_maps_embed'])
<section class="py-5">
    <div class="container">
        <div class="card-custom rounded-4 overflow-hidden">
            {!! $settings['google_maps_embed'] !!}
        </div>
    </div>
</section>
@endif

<!-- FAQ Section -->
@if(count($faqs) > 0)
<section class="section-padding bg-light-custom">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <h2 class="section-title">{{ __('front.contact.faq_title') }}</h2>
            <p class="section-subtitle mx-auto">{{ __('front.contact.faq_subtitle') }}</p>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion" id="faqAccordion">
                    @foreach($faqs as $index => $faq)
                    <div class="accordion-item mb-3 border-0 rounded-3">
                        <h2 class="accordion-header">
                            <button class="accordion-button {{ $index == 0 ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $index }}">
                                {{ $faq->question }}
                            </button>
                        </h2>
                        <div id="faq{{ $index }}" class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}">
                            <div class="accordion-body">
                                <p class="mb-0">{{ $faq->answer }}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif
@endsection