@extends('layouts.customer')

@section('title', $title)
@section('meta_description', $metaDescription)

@section('content')
<div class="kontak-page-wrapper py-5 bg-white overflow-hidden">
    <div class="container-fluid container-wide">
        
        {{-- Section Header --}}
        <div class="mb-5">
            <h1 class="fw-bold display-5 text-navy mt-0 mb-2" style="color: #1e3a5f;">
                {{ $lang->judul_halaman ?? 'Hubungi Kami' }}
            </h1>
            <p class="fs-5 text-secondary">
                {{ $lang->subjudul_halaman ?? 'Temukan Solusi yang Tepat untuk Kebutuhan Anda' }}
            </p>
        </div>

        @if(session('success_message'))
            <div class="alert alert-success alert-dismissible fade show rounded-3 mb-4 shadow-sm" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{ session('success_message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div id="contactAlert" class="d-none alert alert-success alert-dismissible fade show rounded-3 mb-4 shadow-sm" role="alert">
            <span id="contactAlertText"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <div id="contactErrorAlert" class="d-none alert alert-danger alert-dismissible fade show rounded-3 mb-4 shadow-sm" role="alert">
            <span id="contactErrorAlertText"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <div class="row g-5 align-items-start">
            
            {{-- Sisi Kiri: Informasi Kontak & Peta --}}
            <div class="col-lg-5">
                <div class="d-flex flex-column gap-4 mb-4">
                    
                    {{-- Alamat / Lokasi --}}
                    @if(!empty($kontak->alamat))
                    <div class="d-flex align-items-start">
                        <div class="icon-box me-3 mt-1">
                            <i class="fas fa-map-marker-alt fs-3 text-navy" style="color: #1e3a5f;"></i>
                        </div>
                        <div>
                            <span class="fs-5 fw-medium text-dark">{!! nl2br(e($kontak->alamat)) !!}</span>
                        </div>
                    </div>
                    @endif

                    {{-- Telepon --}}
                    @if(!empty($kontak->telepon))
                    <div class="d-flex align-items-center">
                        <div class="icon-box me-3">
                            <i class="fas fa-phone-alt fs-3 text-navy" style="color: #1e3a5f;"></i>
                        </div>
                        <div>
                            <a href="tel:{{ preg_replace('/[^0-9+]/', '', $kontak->telepon) }}" class="fs-5 fw-medium text-dark text-decoration-none hover-navy">
                                {{ $kontak->telepon }}
                            </a>
                        </div>
                    </div>
                    @endif

                    {{-- Email --}}
                    @if(!empty($kontak->email))
                    <div class="d-flex align-items-center">
                        <div class="icon-box me-3">
                            <i class="far fa-envelope fs-3 text-navy" style="color: #1e3a5f;"></i>
                        </div>
                        <div>
                            <a href="mailto:{{ $kontak->email }}" class="fs-5 fw-medium text-dark text-decoration-underline hover-navy">
                                {{ $kontak->email }}
                            </a>
                        </div>
                    </div>
                    @endif

                </div>

                {{-- Section Peta --}}
                <div class="map-container rounded-4 overflow-hidden border shadow-sm mt-4 position-relative" style="min-height: 250px; background-color: #f8fafc;">
                    @if(!empty($kontak->link_maps))
                        <iframe src="{{ $kontak->link_maps }}" width="100%" height="280" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    @elseif(!empty($kontak->gambar_peta))
                        <img src="{{ asset('storage/' . $kontak->gambar_peta) }}" alt="Map Location" class="img-fluid w-100 object-fit-cover" style="height: 280px;">
                    @else
                        {{-- Fallback Map Illustration --}}
                        <div class="p-4 d-flex flex-column align-items-center justify-content-center h-100 text-center position-relative overflow-hidden" style="min-height: 260px; background: linear-gradient(135deg, #eef2f7 0%, #e2e8f0 100%);">
                            <div class="position-absolute top-50 start-50 translate-middle w-100 opacity-25">
                                <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" class="w-100 h-auto">
                                    <path d="M10 80 Q 100 20, 200 80 T 390 80" fill="none" stroke="#1e3a5f" stroke-width="4" stroke-dasharray="8 8"/>
                                    <circle cx="100" cy="50" r="12" fill="#e11d48"/>
                                    <circle cx="280" cy="110" r="12" fill="#0284c7"/>
                                </svg>
                            </div>
                            <i class="fas fa-map-marked-alt display-4 text-navy opacity-50 mb-2" style="color: #1e3a5f;"></i>
                            <span class="fw-semibold text-secondary fs-6">{{ $kontak->alamat ?? 'Indonesia' }}</span>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Sisi Kanan: Form Kontak Minimalist Floating Labels --}}
            <div class="col-lg-7">
                <form id="contactForm" action="{{ route('customer.kontak.kirim') }}" method="POST" class="needs-validation" novalidate>
                    @csrf
                    
                    <div class="row g-3">
                        {{-- Nama --}}
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" name="nama" id="namaInput" class="form-control border-secondary-subtle rounded-3" placeholder=" " required>
                                <label for="namaInput" class="text-secondary">{{ app()->getLocale() === 'en' ? 'Full Name *' : 'Nama Lengkap *' }}</label>
                                <div class="invalid-feedback text-xs mt-1" id="namaFeedback"></div>
                            </div>
                        </div>

                        {{-- Email (Harus @gmail.com) --}}
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="email" name="email" id="emailInput" class="form-control border-secondary-subtle rounded-3" placeholder=" " required>
                                <label for="emailInput" class="text-secondary">Email (@gmail.com) *</label>
                                <div class="invalid-feedback text-xs mt-1" id="emailFeedback"></div>
                            </div>
                        </div>

                        {{-- Perusahaan --}}
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" name="perusahaan" id="perusahaanInput" class="form-control border-secondary-subtle rounded-3" placeholder=" " required>
                                <label for="perusahaanInput" class="text-secondary">{{ app()->getLocale() === 'en' ? 'Company Name *' : 'Nama Perusahaan *' }}</label>
                                <div class="invalid-feedback text-xs mt-1" id="perusahaanFeedback"></div>
                            </div>
                        </div>

                        {{-- Nomor Telepon dengan Kode Negara --}}
                        <div class="col-md-6">
                            <div class="d-flex rounded-3 border border-secondary-subtle overflow-hidden floating-group-wrapper" style="background: #ffffff; height: calc(3.5rem + 2px);">
                                <select name="country_code" id="countryCodeSelect" class="form-select border-0 px-3 fw-medium text-dark" style="max-width: 120px; background-color: #f8fafc; font-size: 0.95rem; cursor: pointer; border-radius: 0;">
                                    <option value="+62" selected>🇮🇩 +62</option>
                                    <option value="+60">🇲🇾 +60</option>
                                    <option value="+65">🇸🇬 +65</option>
                                    <option value="+66">🇹🇭 +66</option>
                                    <option value="+63">🇵🇭 +63</option>
                                    <option value="+84">🇻🇳 +84</option>
                                    <option value="+1">🇺🇸 +1</option>
                                    <option value="+44">🇬🇧 +44</option>
                                    <option value="+61">🇦🇺 +61</option>
                                    <option value="+81">🇯🇵 +81</option>
                                    <option value="+82">🇰🇷 +82</option>
                                    <option value="+86">🇨🇳 +86</option>
                                    <option value="+91">🇮🇳 +91</option>
                                    <option value="+966">🇸🇦 +966</option>
                                    <option value="+971">🇦🇪 +971</option>
                                    <option value="+49">🇩🇪 +49</option>
                                    <option value="+33">🇫🇷 +33</option>
                                    <option value="+31">🇳🇱 +31</option>
                                </select>
                                <div class="form-floating flex-grow-1 border-start">
                                    <input type="tel" name="telepon" id="phoneInput" class="form-control border-0 shadow-none rounded-0" placeholder=" " required pattern="[0-9]{5,15}" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                                    <label for="phoneInput" class="text-secondary">{{ app()->getLocale() === 'en' ? 'Phone Number *' : 'Nomor Telepon *' }}</label>
                                </div>
                            </div>
                            <div class="invalid-feedback text-xs mt-1" id="phoneFeedback"></div>
                        </div>

                        {{-- Subject --}}
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" name="subject" id="subjectInput" class="form-control border-secondary-subtle rounded-3" placeholder=" " required>
                                <label for="subjectInput" class="text-secondary">{{ app()->getLocale() === 'en' ? 'Subject *' : 'Subjek / Topik Pesan *' }}</label>
                                <div class="invalid-feedback text-xs mt-1" id="subjectFeedback"></div>
                            </div>
                        </div>

                        {{-- Pesan --}}
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea name="pesan" id="pesanInput" class="form-control border-secondary-subtle rounded-3" placeholder=" " style="height: 160px;" required></textarea>
                                <label for="pesanInput" class="text-secondary">{{ app()->getLocale() === 'en' ? 'Message *' : 'Pesan *' }}</label>
                                <div class="invalid-feedback text-xs mt-1" id="pesanFeedback"></div>
                            </div>
                        </div>

                        {{-- Submit Button --}}
                        <div class="col-12 mt-3">
                            <button type="submit" id="btnSubmitContact" class="btn btn-navy-custom w-100 py-3 fs-4 fw-bold rounded-3 shadow-sm">
                                {{ app()->getLocale() === 'en' ? 'Send Message' : 'Kirim Pesan' }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>

    </div>
</div>

<style>
.text-navy {
    color: #1e3a5f !important;
}
.btn-navy-custom {
    background-color: #1e3a5f !important;
    border-color: #1e3a5f !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}
.btn-navy-custom:hover {
    background-color: #152b48 !important;
    border-color: #152b48 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.3) !important;
}
.icon-box {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Minimalist Floating Label Styling */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1.25rem 1rem 0.6rem 1rem;
    border-color: #cbd5e1;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    background-color: #ffffff;
}
.form-floating > textarea.form-control {
    height: 160px;
    padding-top: 1.6rem;
}
.form-floating > label {
    padding: 1rem 1rem;
    color: #64748b;
    font-weight: 500;
    font-size: 0.95rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control:focus ~ label,
.form-floating > textarea.form-control:not(:placeholder-shown) ~ label {
    opacity: 0.9;
    transform: scale(0.82) translateY(-0.75rem) translateX(0.15rem);
    color: #1e3a5f;
    font-weight: 700;
}
.form-control:focus {
    border-color: #1e3a5f !important;
    box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.15) !important;
}
.floating-group-wrapper {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.floating-group-wrapper:focus-within {
    border-color: #1e3a5f !important;
    box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.15) !important;
}
</style>
@endsection

@push('js')
<script>
$(document).ready(function() {
    const isEn = "{{ app()->getLocale() }}" === "en";

    // Real-time client side validation for email ending with @gmail.com
    $('#emailInput').on('input blur', function() {
        const val = $(this).val().trim().toLowerCase();
        if (val === '') {
            $(this).addClass('is-invalid');
            $('#emailFeedback').text(isEn ? 'Email is required.' : 'Email wajib diisi.');
        } else if (!val.endsWith('@gmail.com')) {
            $(this).addClass('is-invalid');
            $('#emailFeedback').text(isEn ? 'Email must end with @gmail.com domain.' : 'Email harus menggunakan domain @gmail.com.');
        } else {
            $(this).removeClass('is-invalid').addClass('is-valid');
        }
    });

    // Real-time numeric validation for phone number
    $('#phoneInput').on('input blur', function() {
        const val = $(this).val().trim();
        if (val === '') {
            $(this).addClass('is-invalid');
            $('#phoneFeedback').text(isEn ? 'Phone number is required.' : 'Nomor telepon wajib diisi.');
        } else if (!/^[0-9]{5,15}$/.test(val)) {
            $(this).addClass('is-invalid');
            $('#phoneFeedback').text(isEn ? 'Phone number must be numeric (5-15 digits).' : 'Nomor telepon hanya berupa angka (5-15 digit).');
        } else {
            $(this).removeClass('is-invalid').addClass('is-valid');
        }
    });

    $('#contactForm').on('submit', function(e) {
        e.preventDefault();
        
        $('#contactAlert').addClass('d-none');
        $('#contactErrorAlert').addClass('d-none');
        $('.form-control').removeClass('is-invalid');

        const emailVal = $('#emailInput').val().trim().toLowerCase();
        if (!emailVal.endsWith('@gmail.com')) {
            $('#emailInput').addClass('is-invalid');
            $('#emailFeedback').text(isEn ? 'Email must end with @gmail.com domain.' : 'Email harus menggunakan domain @gmail.com.');
            $('html, body').animate({ scrollTop: $('#emailInput').offset().top - 150 }, 300);
            return false;
        }

        const phoneVal = $('#phoneInput').val().trim();
        if (!/^[0-9]{5,15}$/.test(phoneVal)) {
            $('#phoneInput').addClass('is-invalid');
            $('#phoneFeedback').text(isEn ? 'Phone number must be numeric (5-15 digits).' : 'Nomor telepon hanya berupa angka (5-15 digit).');
            $('html, body').animate({ scrollTop: $('#phoneInput').offset().top - 150 }, 300);
            return false;
        }

        const form = $(this);
        const btn = $('#btnSubmitContact');
        const originalText = btn.text();

        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i> ' + (isEn ? 'Sending...' : 'Mengirim...'));

        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: form.serialize(),
            success: function(response) {
                btn.prop('disabled', false).text(originalText);
                form[0].reset();
                $('.form-control').removeClass('is-valid is-invalid');
                $('#contactAlertText').text(response.message);
                $('#contactAlert').removeClass('d-none').addClass('show');
                $('html, body').animate({ scrollTop: $('#contactAlert').offset().top - 100 }, 500);
            },
            error: function(xhr) {
                btn.prop('disabled', false).text(originalText);
                let errorMsg = isEn ? 'Form validation error. Please check your input.' : 'Terjadi kesalahan validasi. Silakan periksa kembali isian Anda.';
                
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(field, messages) {
                        const input = $('[name="' + field + '"]');
                        if (input.length) {
                            input.addClass('is-invalid');
                            $('#' + field + 'Feedback').text(messages[0]);
                        }
                    });
                    errorMsg = Object.values(errors).flat().join('<br>');
                }

                $('#contactErrorAlertText').html(errorMsg);
                $('#contactErrorAlert').removeClass('d-none').addClass('show');
                $('html, body').animate({ scrollTop: $('#contactErrorAlert').offset().top - 100 }, 500);
            }
        });
    });
});
</script>
@endpush