@extends('layouts.website')

@section('title', 'Hubungi Kami')

@section('content')

{{-- CSS KHUSUS HALAMAN KONTAK --}}
<style>
    /* --- TYPOGRAPHY --- */
    .page-title {
        font-weight: 800;
        color: #1a237e;
        position: relative;
        display: inline-block;
        padding-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .page-title::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 80px;
        height: 5px;
        background-color: #ffc107;
        border-radius: 2px;
    }

    /* --- CONTACT CARD WRAPPER --- */
    .contact-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        overflow: hidden; /* Penting agar border radius tidak tertutup anak elemen */
        border: none;
    }

    /* --- FORM SECTION (LEFT) --- */
    .form-section {
        padding: 40px;
    }
    .form-label {
        font-weight: 700;
        color: #1a237e;
        font-size: 0.9rem;
    }
    .form-control-modern {
        background-color: #f8f9fa;
        border: 2px solid #f0f0f0;
        border-radius: 10px;
        padding: 12px 15px;
        transition: all 0.3s;
    }
    .form-control-modern:focus {
        background-color: #fff;
        border-color: #1a237e;
        box-shadow: 0 0 0 4px rgba(26, 35, 126, 0.1);
    }
    
    /* Tombol Kirim */
    .btn-send {
        background: linear-gradient(45deg, #1a237e, #283593);
        color: white;
        border: none;
        padding: 12px 35px;
        border-radius: 50px;
        font-weight: 700;
        transition: all 0.3s;
        box-shadow: 0 5px 15px rgba(26, 35, 126, 0.3);
    }
    .btn-send:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(26, 35, 126, 0.4);
        color: white;
    }

    /* --- INFO SECTION (RIGHT) --- */
    .info-section {
        background: linear-gradient(180deg, #fdfdfd 0%, #f4f6f9 100%);
        padding: 40px;
        border-left: 1px solid #eee;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 25px;
        padding: 15px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        transition: transform 0.3s;
    }
    .info-item:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    }
    
    .info-icon {
        width: 50px;
        height: 50px;
        background-color: #e8eaf6;
        color: #1a237e;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
        margin-right: 20px;
    }

    .info-content h6 {
        font-weight: 800;
        color: #1a237e;
        margin-bottom: 5px;
    }
    .info-content p {
        margin-bottom: 0;
        color: #555;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* --- MAP WRAPPER --- */
    .map-wrapper {
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border: 4px solid #fff;
        height: 250px; /* Tinggi peta fix */
        margin-top: auto; /* Dorong ke bawah */
    }

    /* Responsive untuk HP */
    @media (max-width: 991px) {
        .info-section {
            border-left: none;
            border-top: 1px solid #eee;
        }
    }
</style>

<div class="container my-5">
    
    {{-- 1. HEADER HALAMAN --}}
    <div class="text-center mb-5" data-aos="fade-down" data-aos-duration="1000">
        <h2 class="page-title">Hubungi Kami</h2>
        <p class="text-muted mt-3">Punya pertanyaan? Jangan ragu untuk mengirimkan pesan kepada kami.</p>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-11">

            {{-- ALERT MESSAGES --}}
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 mb-4" role="alert" data-aos="fade-in">
                    <div class="d-flex align-items-center">
                        <div class="bg-success text-white rounded-circle p-2 me-3"><i class="fas fa-check"></i></div>
                        <div>
                            <strong>Berhasil!</strong> {{ session('success') }}
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger shadow-sm border-0 mb-4" role="alert" data-aos="fade-in">
                    <div class="d-flex">
                        <div class="bg-danger text-white rounded-circle p-2 me-3" style="height: fit-content;"><i class="fas fa-exclamation"></i></div>
                        <div>
                            <strong>Oops! Ada kesalahan:</strong>
                            <ul class="mb-0 mt-1 ps-3">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif

            {{-- 2. MAIN CARD (SPLIT VIEW) --}}
            <div class="contact-card" data-aos="fade-up" data-aos-duration="1000">
                <div class="row g-0"> {{-- g-0 untuk menghilangkan jarak antar kolom --}}
                    
                    {{-- KOLOM KIRI: FORMULIR --}}
                    <div class="col-lg-7">
                        <div class="form-section">
                            <h4 class="fw-bold mb-4" style="color: #1a237e;">
                                <i class="fas fa-paper-plane me-2 text-warning"></i> Kirim Pesan
                            </h4>
                            
                            <form action="{{ route('kontak.store') }}" method="POST">
                                @csrf
                                
                                <div class="row">
                                    <div class="col-md-6 mb-4">
                                        <label for="nama_lengkap" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-modern" id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap') }}" placeholder="Masukkan nama anda" required>
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label for="email" class="form-label">Alamat Email <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control form-control-modern" id="email" name="email" value="{{ old('email') }}" placeholder="email@contoh.com" required>
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label for="pesan" class="form-label">Isi Pesan <span class="text-danger">*</span></label>
                                    <textarea class="form-control form-control-modern" id="pesan" name="pesan" rows="6" placeholder="Tuliskan pertanyaan, saran, atau masukan Anda di sini..." required>{{ old('pesan') }}</textarea>
                                </div>

                                <div class="d-flex align-items-center justify-content-between mt-4">
                                    <span class="text-muted small">* Wajib diisi</span>
                                    <button type="submit" class="btn-send">
                                        Kirim Sekarang <i class="fas fa-arrow-right ms-2"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- KOLOM KANAN: INFO & MAP --}}
                    <div class="col-lg-5">
                        <div class="info-section">
                            <h4 class="fw-bold mb-4" style="color: #1a237e;">
                                <i class="fas fa-info-circle me-2 text-warning"></i> Kontak & Lokasi
                            </h4>

                            {{-- Item Info 1: Alamat --}}
                            <div class="info-item" data-aos="fade-left" data-aos-delay="100">
                                <div class="info-icon">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div class="info-content">
                                    <h6>Alamat Sekolah</h6>
                                    {{-- Jika mau paksa alamat juga, hapus $school->alamat ?? dan ganti teks langsung --}}
                                    <p>{{ $school->alamat ?? 'Jl. Indra Giri Gang 3 Serangkai, Padang Harapan, Kota Bengkulu' }}</p>
                                </div>
                            </div>

                            {{-- Item Info 2: Kontak --}}
                            <div class="info-item" data-aos="fade-left" data-aos-delay="200">
                                <div class="info-icon">
                                    <i class="fas fa-headset"></i>
                                </div>
                                <div class="info-content">
                                    <h6>Hubungi Kami</h6>
                                    {{-- [UPDATED] Saya hapus variable database agar teks di bawah ini yang muncul --}}
                                    <p><i class="fas fa-phone-alt me-2 text-primary"></i> (0736) 22070</p>
                                    <p><i class="fas fa-envelope me-2 text-primary"></i> smks16.farmasi.bkl@gmail.com</p>
                                </div>
                            </div>

                            {{-- Peta Lokasi --}}
                            <div class="mt-4" data-aos="zoom-in" data-aos-delay="300">
                                <h6 class="fw-bold mb-3 text-secondary">Lokasi di Peta:</h6>
                                <div class="map-wrapper">
                                    @if(!empty($school->maps))
                                        <iframe src="{{ $school->maps }}" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                                    @else
                                        {{-- Fallback Map --}}
                                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3980.978264619851!2d102.28224859999999!3d-3.8147737999999993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e36b075fd7f72f1%3A0xfa05fe55078e4d33!2sSMKS%2016%20FARMASI%20BENGKULU!5e0!3m2!1sid!2sid!4v1769346583154!5m2!1sid!2sid" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                    @endif
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

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

@endsection