@extends('layouts.app')

@push('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.12/build/css/intlTelInput.css">
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.12/build/js/intlTelInput.min.js"></script>

    {{-- SiteManager 통합 보안 시스템 --}}
    @include('sitemanager::security.form-security', [
        'action' => 'contact_form',
        'tokenField' => 'recaptcha_token',
        'formId' => 'contact-form'
    ])

    {!! resource('css/contact-us.css') !!}
    {!! resource('css/form.css') !!}

    {!! setResources(['select2', 'flatpickr']) !!}
@endpush

@section('content')
<main>
    {{-- 동적 네비게이션 (메뉴 테이블 기반) --}}
    @include('partials.document-navigation')

    {{-- 페이지 컨텐츠 --}}
    <div class="container">
        <article>

            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <h1>Contact us</h1>

                    <h6 class="description">We welcome your feedback and inquiries!<br>
                    Please don't hesitate to reach out to us.<br>
                    Office hours 8:00 am to 5:00 pm, Monday to Friday.<br>
                    You can also contact us via email by completing the form below.</h6>


                    <form method="POST" action="{{ route('about.contact.submit') }}"
                          class="form-wrap form" id="contact-form"
                          data-recaptcha="true" data-recaptcha-action="contact_form">
                        @csrf
                        <div class="form-wrap-body">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 form-group">
                                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="country" class="form-label">Country or Region of Residence</label>
                                    <select class="form-select @error('country') is-invalid @enderror" id="country" name="country">
                                        <option value="">Select your country</option>
                                        @foreach(getCountries() as $code => $info)
                                            <option value="{{ $code }}" {{ old('country') == $code ? 'selected' : '' }}>
                                                {{ $info['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('country')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="tel" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}">
                                    <input type="hidden" id="phone_country" name="phone_country" value="{{ old('phone_country') }}">

                                    @if($errors->has('phone_country') || $errors->has('phone'))
                                        <div class="invalid-feedback" style="padding-left: 113px;">
                                            {{ $errors->first('phone_country') ?: $errors->first('phone') }}
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group">
                                    <label for="birth_date" class="form-label">Date of Birth</label>
                                    <input type="text" class="form-control @error('birth_date') is-invalid @enderror" id="birth_date" name="birth_date" value="{{ old('birth_date') }}" placeholder="Select your birth date" readonly>
                                    @error('birth_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="message" class="form-label">Your Message/Request</label>
                                <textarea class="form-control @error('message') is-invalid @enderror" id="message" name="message" rows="6" placeholder="Please provide details about your inquiry...">{{ old('message') }}</textarea>
                                @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group mt-4">
                                <label class="form-label">Privacy Policy <span class="text-danger">*</span></label>
                                <div class="privacy-policy" style="max-height: 300px; overflow-y: auto;">
                                    @include('partials.privacy-policy')
                                </div>
                            </div>

                            <div class="mb-5">
                                <div class="form-check">
                                    <input class="form-check-input @error('privacy_agreement') is-invalid @enderror" type="checkbox" id="privacy_agreement" name="privacy_agreement" value="1" {{ old('privacy_agreement') ? 'checked' : '' }} required>
                                    <label class="form-check-label" for="privacy_agreement">
                                        I have read and agree to the terms and conditions and privacy policy. <span class="text-danger">*</span>
                                    </label>
                                    @error('privacy_agreement')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- reCAPTCHA --}}
                            @if(config('services.recaptcha.site_key'))
                                @if(config('services.recaptcha.version') === 'v3')
                                    {{-- reCAPTCHA v3 (invisible) --}}
                                    <input type="hidden" name="recaptcha_token" id="recaptcha_token">
                                @else
                                    {{-- reCAPTCHA v2 (checkbox) --}}
                                    <div class="mb-3">
                                        <div class="g-recaptcha"
                                             data-sitekey="{{ config('services.recaptcha.site_key') }}"
                                             data-callback="onCaptchaSuccess"
                                             data-expired-callback="onCaptchaExpired"></div>
                                        <div class="invalid-feedback d-block" id="captcha-error" style="display: none !important;">
                                            Please complete the captcha verification.
                                        </div>
                                    </div>
                                @endif
                            @endif

                            {{-- Honeypot 필드들 (숨김) --}}
                            <div style="position: absolute; left: -5000px;" aria-hidden="true">
                                <input type="text" name="website" tabindex="-1" autocomplete="off" placeholder="Website">
                                <input type="text" name="url" tabindex="-1" autocomplete="off" placeholder="URL">
                                <input type="text" name="homepage" tabindex="-1" autocomplete="off" placeholder="Homepage">
                                <input type="text" name="phone_number" tabindex="-1" autocomplete="off" placeholder="Phone">
                                <input type="text" name="email_confirm" tabindex="-1" autocomplete="off" placeholder="Confirm Email">
                                <input type="text" name="company" tabindex="-1" autocomplete="off" placeholder="Company">
                                <input type="text" name="address" tabindex="-1" autocomplete="off" placeholder="Address">
                                <label>
                                    <input type="checkbox" name="subscribe_newsletter" tabindex="-1">
                                    Subscribe to newsletter
                                </label>
                                <textarea name="message_backup" tabindex="-1" autocomplete="off" placeholder="Additional message"></textarea>
                            </div>

                            {{-- 폼 토큰 (제출 시간 검증용) --}}
                            <input type="hidden" name="form_token" value="{{ Str::random(32) }}">

                            {{-- 타임스탬프 (JavaScript로 업데이트) --}}
                            <input type="hidden" name="form_timestamp" class="form-timestamp" value="{{ time() }}">

                            <div class="text-center">
                                <button type="submit" class="btn btn-lg btn-dark" id="contact-submit-btn">
                                    <span class="btn-text">Submit</span>
                                    <span class="btn-loading d-none">
                                        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                        Sending...
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div style="margin: 4rem 0;">
                <a href="https://api.whatsapp.com/qr/637LPDSKWXLJL1?autoload=1&app_absent=0" target="_blank">
                    <img src="{{ env('AWS_URL') }}/menu_images/contact-us/01.png" alt="Whatsapp" class="img-fluid w-100">
                </a>
            </div>

            {{-- 첫 번째 섹션: 한국 주소 - 데스크톱에서 좌우 배치 --}}
            <section class="korea-section">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="address-content">
                            <h5>Address</h5>
                            <div class="mb-4">
                                <address>4th floor, 16 Gangnam-daero 84-gil, Gangnam-gu, Seoul</address>
                                TEL. <a href="tel:+82269560909">+82 2 6956 0909</a><br>
                                E-mail. <a href="mailto:info@edmkorean.com">info@edmkorean.com</a><br>
                                Business. <a href="mailto:marketing@edmkorean.com">marketing@edmkorean.com</a>
                            </div>

                            <h5>Bus</h5>
                            <div class="mb-4">
                                <div class="bus-stop">Shinbundang Gangnamstation stop</div>
                                140, 400, 402, 420, 421, 440, 41, 452, 470, 542, 643, 741, 0411, 1550, 1570, 3030,
                                3100, 9202, 9400, 9800, 9404, 9408, 9409, 9711, 8008, 6009<br><br>

                                <div class="bus-stop">Gangnam Station, Yeoksam Tax Office</div>
                                146, 341, 360, 740, 8146
                            </div>

                            <h5>Subway</h5>
                            <div>
                                - Line 2 Gangnam Station, Exit 3,4<br>
                                - Shinbundang Line Gangnam Station Exit 3
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        {{-- google map: 4th floor, 16 Gangnam-daero 84-gil, Gangnam-gu, Seoul, South Korea - edm Korean Global Campus --}}
                        <div class="map-container" style="height: 500px;">
                            <div id="map-seoul" style="height: 500px; border-radius: 8px;"></div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="overseas-section">
                <h4 class="mb-4">Overseas Branch/Office</h4>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="overseas-office">
                            <h5>LONDON</h5>
                            <div class="office-info">
                                <a href="tel:+4407442804261">+44 074 4280 4261</a><br>
                                <address>10 York Rd London SE1 7ND</address>
                                10:00 AM to 5:00 PM (closed on Weekends and holidays)
                            </div>

                            {{-- google map: 10 York Rd London SE1 7ND - edm LONDON --}}
                            <div class="map-container">
                                <div id="map-london" style="height: 300px; border-radius: 8px;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="overseas-office">
                            <h5>TAIWAN</h5>
                            <div class="office-info">
                                <a href="tel:+886227113911">+886 2 2711 3911</a><br>
                                <address>106 Taipei City, Da'an District, Section 4, Zhongxiao E Rd, 166號4樓</address>
                                10:00 AM to 7:00 PM (closed on Weekends and holidays)
                            </div>

                            {{-- google map: 106 Taipei City, Da'an District, Section 4, Zhongxiao E Rd, 166號4樓- edm TAIWAN --}}
                            <div class="map-container">
                                <div id="map-taiwan" style="height: 300px; border-radius: 8px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </article>
    </div>
</main>
@endsection

@push('scripts')
<script>
// Contact Us 페이지 전역 설정
window.CONTACT_CONFIG = {
    googleMapsApiKey: '{{ env("GOOGLE_MAPS_API_KEY", "") }}',
    googleMapsMapId: '{{ env("GOOGLE_MAPS_MAP_ID", "") }}'
};
</script>

{!! resource('js/contact-us.js') !!}
@endpush