@extends('frontend.default.layouts.app')

@section('meta_title', 'Contact - '.getSetting('web_name', config('app.name')))
@section('meta_description', 'Hubungi tim '.getSetting('web_name', config('app.name')))

@section('breadcrumbs')
    <div class="breadcrumbs panel z-1 py-2 bg-gray-25 dark:bg-gray-100 dark:bg-opacity-5 dark:text-white">
        <div class="container max-w-xl">
            <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 m-0">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li><i class="unicon-chevron-right opacity-50"></i></li>
                <li><span class="opacity-50">Contact</span></li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    @php
        $siteName = getSetting('web_name', config('app.name'));
        $siteDescription = getSetting('web_description', 'Kami siap membantu kebutuhan informasi dan komunikasi Anda.');
    @endphp

    <div class="section panel overflow-hidden">
        <div class="section-outer panel py-5 lg:py-8 xl:py-9">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-4 lg:gap-6 xl:gap-8">
                    <header class="page-header panel">
                        <div class="panel vstack justify-center items-center gap-2 lg:gap-3 text-center max-w-750px mx-auto">
                            <span class="fs-7 fw-semibold text-uppercase py-narrow px-2 rounded-pill bg-primary bg-opacity-10 text-primary dark:bg-white dark:bg-opacity-10 dark:text-white">
                                Contact
                            </span>
                            <h1 class="h4 sm:h3 lg:h2 m-0">Mari Terhubung Dengan Tim {{ $siteName }}</h1>
                            <p class="fs-6 lg:fs-5 text-gray-700 dark:text-gray-300 opacity-80 m-0 max-w-650px">
                                Sampaikan pertanyaan, kebutuhan kerja sama, masukan, atau informasi penting melalui halaman kontak resmi kami.
                            </p>
                        </div>
                    </header>

                    <div class="row child-cols-12 lg:child-cols g-4 xl:g-6">
                        <div class="col-12 lg:col-5">
                            <div class="panel vstack gap-4 lg:gap-5">
                                <div class="panel p-3 sm:p-4 lg:p-5 rounded-2 border border-primary border-opacity-10 bg-gradient-to-br from-primary-50 via-white to-secondary-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800 dark:border-gray-700 shadow-sm">
                                    <div class="vstack gap-3">
                                        <div class="vstack gap-1">
                                            <span class="fs-7 fw-semibold text-uppercase opacity-60">Official Contact Desk</span>
                                            <h2 class="h4 m-0">{{ $siteName }}</h2>
                                        </div>
                                        <p class="fs-6 opacity-80 m-0">{{ $siteDescription }}</p>
                                        <div class="vstack gap-3 pt-2">
                                            <div class="hstack items-start gap-2">
                                                <span class="cstack w-40px h-40px rounded-circle bg-primary bg-opacity-10 text-primary dark:bg-white dark:bg-opacity-10 dark:text-white">
                                                    <i class="unicon-globe icon-1"></i>
                                                </span>
                                                <div class="vstack gap-0">
                                                    <span class="fs-7 text-uppercase opacity-60">Website</span>
                                                    <span class="fs-6 fw-medium">{{ $siteName }}</span>
                                                    <a href="{{ url('/') }}" class="text-primary text-none">{{ url('/') }}</a>
                                                </div>
                                            </div>
                                            <div class="hstack items-start gap-2">
                                                <span class="cstack w-40px h-40px rounded-circle bg-primary bg-opacity-10 text-primary dark:bg-white dark:bg-opacity-10 dark:text-white">
                                                    <i class="unicon-envelopes icon-1"></i>
                                                </span>
                                                <div class="vstack gap-0">
                                                    <span class="fs-7 text-uppercase opacity-60">Layanan</span>
                                                    <span class="fs-6 fw-medium">Pertanyaan, saran, dan kerja sama</span>
                                                    <span class="fs-7 opacity-70">Tim kami akan meninjau pesan yang masuk secepat mungkin.</span>
                                                </div>
                                            </div>
                                            <div class="hstack items-start gap-2">
                                                <span class="cstack w-40px h-40px rounded-circle bg-primary bg-opacity-10 text-primary dark:bg-white dark:bg-opacity-10 dark:text-white">
                                                    <i class="unicon-clock-five icon-1"></i>
                                                </span>
                                                <div class="vstack gap-0">
                                                    <span class="fs-7 text-uppercase opacity-60">Respon</span>
                                                    <span class="fs-6 fw-medium">Diproses secara profesional</span>
                                                    <span class="fs-7 opacity-70">Mohon sertakan subjek dan pesan yang jelas agar tindak lanjut lebih cepat.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="panel p-3 sm:p-4 rounded-2 border border-primary border-opacity-10 bg-gradient-to-br from-white via-primary-25 to-white dark:from-gray-900 dark:via-gray-900 dark:to-gray-800 dark:border-gray-700 shadow-sm">
                                    <div class="vstack gap-3">
                                        <div class="vstack gap-1">
                                            <span class="fs-7 fw-semibold text-uppercase opacity-60">Mengapa Menghubungi Kami</span>
                                            <h3 class="h5 m-0">Komunikasi yang cepat dan terarah</h3>
                                        </div>
                                        <div class="vstack gap-2 fs-6 opacity-85">
                                            <div class="hstack items-start gap-2">
                                                <i class="unicon-checkmark-circle text-primary mt-narrow"></i>
                                                <span>Saluran resmi untuk pertanyaan publik dan kebutuhan informasi.</span>
                                            </div>
                                            <div class="hstack items-start gap-2">
                                                <i class="unicon-checkmark-circle text-primary mt-narrow"></i>
                                                <span>Cocok untuk usulan kerja sama, klarifikasi, atau masukan redaksional.</span>
                                            </div>
                                            <div class="hstack items-start gap-2">
                                                <i class="unicon-checkmark-circle text-primary mt-narrow"></i>
                                                <span>Pesan yang lengkap membantu tim kami memberi jawaban yang lebih akurat.</span>
                                            </div>
                                        </div>
                                        <div class="pt-2 border-top dark:border-gray-700">
                                            <a href="{{ route('home') }}" class="btn btn-sm btn-alt-primary bg-transparent border rounded-pill dark:text-white">Kembali ke Beranda</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 lg:col-7">
                            <div class="panel p-3 sm:p-4 lg:p-5 xl:p-6 rounded-2 border border-primary border-opacity-10 bg-gradient-to-br from-white via-primary-25 to-secondary-25 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800 dark:border-gray-700 shadow-sm">
                                <div class="vstack gap-4">
                                    <div class="vstack gap-1">
                                        <span class="fs-7 fw-semibold text-uppercase opacity-60">Kirim Pesan</span>
                                        <h2 class="h4 m-0">Hubungi Tim Kami</h2>
                                        <p class="fs-6 opacity-75 m-0">Lengkapi formulir berikut dan kami akan meninjau pesan Anda sesegera mungkin.</p>
                                    </div>

                                    <form method="post" action="{{ route('contact.send') }}" class="vstack gap-3">
                                        @csrf
                                        <div class="row g-3">
                                            <div class="col-12 md:col-6">
                                                <label class="form-label fw-medium">Nama Lengkap</label>
                                                <input type="text" name="name" value="{{ old('name') }}" class="form-control form-control-md w-100" placeholder="Masukkan nama Anda" required>
                                                @error('name')<div class="text-danger fs-7 mt-1">{{ $message }}</div>@enderror
                                            </div>
                                            <div class="col-12 md:col-6">
                                                <label class="form-label fw-medium">Email</label>
                                                <input type="email" name="email" value="{{ old('email') }}" class="form-control form-control-md w-100" placeholder="nama@email.com" required>
                                                @error('email')<div class="text-danger fs-7 mt-1">{{ $message }}</div>@enderror
                                            </div>
                                        </div>

                                        <div>
                                            <label class="form-label fw-medium">Subjek</label>
                                            <input type="text" name="subject" value="{{ old('subject') }}" class="form-control form-control-md w-100" placeholder="Contoh: Permohonan informasi / kerja sama">
                                            @error('subject')<div class="text-danger fs-7 mt-1">{{ $message }}</div>@enderror
                                        </div>

                                        <div>
                                            <label class="form-label fw-medium">Pesan</label>
                                            <textarea name="message" rows="8" class="form-control form-control-md w-100" placeholder="Tuliskan pesan Anda secara jelas dan lengkap..." required>{{ old('message') }}</textarea>
                                            @error('message')<div class="text-danger fs-7 mt-1">{{ $message }}</div>@enderror
                                        </div>

                                        @if ($useRecaptcha)
                                            <div>
                                                {!! NoCaptcha::renderJs() !!}
                                                {!! NoCaptcha::display() !!}
                                                @error('g-recaptcha-response')<div class="text-danger fs-7 mt-1">{{ $message }}</div>@enderror
                                            </div>
                                        @else
                                            <div class="row g-3">
                                                <div class="col-12 md:col-6">
                                                    <label class="form-label fw-medium">Captcha</label>
                                                    <div class="form-control form-control-md d-flex align-items-center fw-semibold bg-gray-25 dark:bg-gray-800">
                                                        {{ $captchaQuestion }}
                                                    </div>
                                                </div>
                                                <div class="col-12 md:col-6">
                                                    <label class="form-label fw-medium">Jawaban Captcha</label>
                                                    <input type="text" name="captcha_answer" value="{{ old('captcha_answer') }}" class="form-control form-control-md w-100" placeholder="Masukkan hasil perhitungan" required>
                                                    @error('captcha_answer')<div class="text-danger fs-7 mt-1">{{ $message }}</div>@enderror
                                                </div>
                                            </div>
                                        @endif

                                        <div class="hstack justify-between items-center flex-wrap gap-2 pt-2 border-top dark:border-gray-700">
                                            <div class="fs-7 opacity-70">
                                                Dengan mengirim form ini, Anda menyampaikan pesan melalui kanal resmi {{ $siteName }}.
                                            </div>
                                            <button type="submit" class="btn btn-primary rounded-pill px-4 w-100 sm:w-auto">Kirim Pesan</button>
                                        </div>
                                    </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection