@extends('layouts.app_web')

@section('title', __('contact.meta_title'))
@section('meta_description', __('contact.meta_description'))

@push('styles')
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            min-height: 100%;
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
            font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
            color: #333;
            line-height: 1.6;
        }

        #main-content {
            flex: 1 0 auto;
        }

        .container-custom {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

        .contact-section {
            padding: 60px 0 80px;
        }

        .contact-tag {
            color: #333;
            font-size: 28px;
            font-weight: 700;
            display: block;
            margin-bottom: 50px;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: start;
        }

        .office-title {
            color: #456C6C;
            font-size: 46px;
            font-weight: 500;
            line-height: 60px;
            margin-bottom: 24px;
        }

        .office-address {
            color: #555;
            font-size: 20px;
            line-height: 30px;
            margin-bottom: 0;
            font-weight: 300;
        }

        .office-address strong {
            color: #333;
            font-weight: 700;
        }

        .office-divider {
            border: none;
            border-top: 2px solid #456C6C;
            width: 120px;
            margin-top: 28px;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .error-msg {
            color: #dc3232;
            font-size: 13px;
            margin-top: 4px;
            display: block;
        }

        .error-msg[hidden] {
            display: none;
        }

        .form-error-summary {
            border: 2px solid #53767B;
            padding: 15px 20px;
            margin-top: 20px;
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            color: rgb(70, 70, 70);
        }

        .form-success-summary {
            border: 2px solid #53767B;
            padding: 15px 20px;
            margin-top: 20px;
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            color: rgb(70, 70, 70);
        }

        .form-danger-summary {
            border: 2px solid #53767B;
            padding: 15px 20px;
            margin-top: 20px;
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            color: rgb(70, 70, 70);
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 14px 18px;
            font-size: 16px;
            font-weight: 400;
            font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
            color: #53767B;
            background: #eef5f5;
            border: 1px solid #dde8e8;
            border-radius: 2px;
            outline: none;
            transition: border-color 0.2s, background 0.2s;
            appearance: none;
            -webkit-appearance: none;
        }

        .career-info {
            padding: 20px 22px;
            border: 1px solid #dde8e8;
            background: #eef5f5;
            color: #355C5D;
            font-size: 16px;
            line-height: 1.6;
        }

        .career-info a {
            color: #355C5D;
            text-decoration: underline;
            font-weight: 600;
        }

        .career-link-btn {
            display: inline-block;
            margin-top: 14px;
            padding: 10px 22px;
            background: #456C6C;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            border-radius: 2px;
            transition: 0.3s ease;
        }

        .career-link-btn:hover {
            background: #355C5D;
            color: #fff;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            border-color: #456C6C;
            background: #fff;
        }

        .form-input::placeholder,
        .form-textarea::placeholder {
            color: #53767B;
        }

        .form-select-wrap {
            position: relative;
        }

        .form-select-wrap::after {
            content: '▾';
            position: absolute;
            right: 18px;
            top: 45%;
            transform: translateY(-50%);
            color: #53767B;
            font-size: 22px;
            pointer-events: none;
        }

        .form-select {
            cursor: pointer;
            padding-right: 40px;
        }

        .form-textarea {
            min-height: 160px;
            resize: vertical;
        }

        .form-submit-row {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 4px;
        }

        .ajax-loader {
            display: none;
            width: 18px;
            height: 18px;
            background-color: #5C6266;
            border-radius: 50%;
            position: relative;
            animation: cf7-spin 1s infinite linear;
            margin-right: auto;
        }

        .ajax-loader::after {
            content: '';
            position: absolute;
            top: 3px;
            right: 3px;
            width: 4px;
            height: 4px;
            background-color: #ffffff;
            border-radius: 50%;
        }

        @keyframes cf7-spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .btn-submit {
            display: inline-block;
            padding: 10px 30px;
            font-size: 20px;
            font-weight: 300;
            font-family: 'Arial', sans-serif;
            color: #355C5D;
            background: transparent;
            border: 1px solid #355C5D;
            border-radius: 2px;
            cursor: pointer;
            transition: 0.3s;
        }

        .btn-submit:hover {
            background: #456C6C;
            color: white;
            border-color: #456C6C;
        }

        .social-footer {
            padding: 40px 0;
            display: flex;
            gap: 20px;
        }

        .social-footer a {
            color: #456C6C;
            font-size: 1.2rem;
            transition: 0.3s;
        }

        .social-footer a:hover {
            color: #4ECDC4;
        }

        @media (max-width: 980px) {
            .contact-grid {
                grid-template-columns: 1fr !important;
                gap: 32px !important;
            }

            .container-custom {
                padding: 0 20px !important;
            }

            .contact-section {
                padding: 40px 0 60px !important;
            }

            .contact-tag {
                font-size: 22px !important;
                margin-bottom: 16px !important;
            }

            .office-title {
                font-size: 26px !important;
                line-height: 1.3 !important;
                margin-bottom: 16px !important;
            }

            .office-address {
                font-size: 15px !important;
                line-height: 1.6 !important;
            }

            .office-divider {
                width: 100% !important;
                margin-top: 20px !important;
            }

            .btn-submit {
                font-size: 18px !important;
                padding: 8px 24px !important;
            }
        }
    </style>
@endpush

@section('content')

    <div class="container-custom">
        <div class="contact-section">

            <span class="contact-tag">{{ __('contact.form_tag') }}</span>

            <div class="contact-grid">

                <div class="left-column">
                    <h2 class="office-title">{{ __('contact.office_title') }}</h2>
                    <p class="office-address">
                        {{ __('contact.office_address_line1') }}<br>
                        {{ __('contact.office_address_line2') }}<br>
                        <strong>{{ __('contact.phone_label') }}</strong> {{ __('contact.phone_value') }}<br>
                        <strong>{{ __('contact.fax_label') }}</strong> {{ __('contact.fax_value') }}
                    </p>
                    <hr class="office-divider">
                </div>

                <div class="right-column">
                    <form class="contact-form" action="{{ url('/contact') }}" method="POST">
                        @csrf
                        <div aria-hidden="true"
                            style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
                            <label for="contact-website">Leave this field empty</label>
                            <input id="contact-website" name="contact-website" type="text" tabindex="-1"
                                autocomplete="off">
                        </div>

                        <div class="form-select-wrap">
                            @php
                                $contacts = \Illuminate\Support\Facades\DB::table('mst_contact')
                                    ->where('isactive', '1')
                                    ->get();
                            @endphp
                            <select name="your-recipient" class="form-select">
                                <option> {{ __('contact.select_recipient') }} </option>
                                @foreach ($contacts as $contact)
                                    <option value="{{ $contact->id_contact }}"
                                        data-career="{{ stripos($contact->posisi, 'career') !== false ? '1' : '0' }}"
                                        {{ old('your-recipient') == $contact->id_contact ? 'selected' : '' }}>
                                        {{ $contact->posisi }}</option>
                                @endforeach
                            </select>
                            @error('your-recipient')
                                <span class="error-msg">{{ $message }}</span>
                            @enderror
                        </div>

                        <div id="career-redirect-info" class="career-info" hidden>
                            <p>{{ __('contact.msg_career_redirect') }}</p>
                            <a class="career-link-btn" href="https://karir.spunindo.com/" target="_blank"
                                rel="noopener noreferrer"
                                style="display: inline-block; margin-top: 14px; padding: 10px 22px; background: #456C6C; color: #fff; text-decoration: none; font-weight: 600; border-radius: 2px; transition: 0.3s ease; text-align: center;">
                                {{ __('contact.link_career') }}
                            </a>
                        </div>

                        <div id="personal-fields">
                            <div>
                                <input type="text" name="your-name" value="{{ old('your-name') }}" class="form-input"
                                    placeholder="{{ __('contact.placeholder_name') }}" maxlength="400">
                                @error('your-name')
                                    <span class="error-msg">{{ $message }}</span>
                                @enderror
                            </div>

                            <div>
                                <input type="email" name="your-email" value="{{ old('your-email') }}" class="form-input"
                                    placeholder="{{ __('contact.placeholder_email') }}" maxlength="254">
                                @error('your-email')
                                    <span class="error-msg">{{ $message }}</span>
                                @enderror
                            </div>

                            <div>
                                <textarea name="your-message" class="form-textarea" placeholder="{{ __('contact.placeholder_message') }}"
                                    maxlength="2000" minlength="20" rows="7" required>{{ old('your-message') }}</textarea>
                                @error('your-message')
                                    <span class="error-msg">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        @if (config('contact.recaptcha_enabled'))
                            <div id="contact-recaptcha" data-sitekey="{{ config('contact.recaptcha_site_key') }}"></div>
                            <span id="contact-captcha-error" class="error-msg" role="alert"
                                hidden>{{ __('contact.msg_captcha') }}</span>
                        @endif
                        @error('g-recaptcha-response')
                            <span class="error-msg">{{ $message }}</span>
                        @enderror
                        <div class="form-submit-row" id="submit-row">
                            <span class="ajax-loader"></span>
                            <button type="submit" class="btn-submit" id="submit-btn">
                                {{ __('contact.btn_submit') }}
                            </button>
                        </div>

                        @if ($errors->any())
                            <div class="form-error-summary">
                                {{ __('contact.msg_validation_summary') }}
                            </div>
                        @endif

                        @if (session('success_contact'))
                            <div class="form-success-summary">
                                {{ session('success_contact') }}
                            </div>
                        @endif

                        @if (session('error_contact'))
                            <div class="form-danger-summary">
                                {{ session('error_contact') }}
                            </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container-custom">
        <div class="social-footer">
            <a href="https://www.facebook.com/multispunindojaya/" target="_blank" rel="noopener noreferrer"
                aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
            <a href="https://instagram.com/msj.nonwoven" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><i
                    class="fab fa-instagram"></i></a>
            <a href="https://www.youtube.com/channel/UCJQ3kXswqa6u-jFqD4nL6lA" target="_blank" rel="noopener noreferrer"
                aria-label="YouTube"><i class="fab fa-youtube"></i></a>
            <a href="https://www.linkedin.com/company/multispunindojaya" target="_blank" rel="noopener noreferrer"
                aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            let renderCaptcha = function() {};
            window.contactRecaptchaReady = function() {
                renderCaptcha();
            };

            function initContactForm() {
                const form = document.querySelector('.contact-form');
                const loader = document.querySelector('.ajax-loader');
                const btn = document.querySelector('.btn-submit');
                const captcha = document.getElementById('contact-recaptcha');
                const error = document.getElementById('contact-captcha-error');
                const recipientSelect = form ? form.querySelector('select[name="your-recipient"]') : null;
                const personalFields = document.getElementById('personal-fields');
                const careerInfo = document.getElementById('career-redirect-info');
                const submitRow = document.getElementById('submit-row');
                const personalInputs = form ? form.querySelectorAll(
                    'input[name="your-name"], input[name="your-email"], textarea[name="your-message"]') : [];
                let widgetId = null;
                let busy = false;
                let submitted = false;
                let timer;

                function toggleCareerRecipientFields() {
                    if (!recipientSelect || !personalFields || !careerInfo || !submitRow) return;

                    const selected = recipientSelect.options[recipientSelect.selectedIndex];
                    const isCareer = selected && selected.dataset.career === '1';

                    personalFields.hidden = isCareer;
                    careerInfo.hidden = !isCareer;
                    submitRow.hidden = isCareer;

                    personalInputs.forEach(function(input) {
                        input.disabled = isCareer;
                        if (isCareer) {
                            input.value = '';
                        }
                    });

                    if (btn) {
                        btn.disabled = isCareer;
                        btn.style.display = isCareer ? 'none' : '';
                    }
                }

                if (recipientSelect) {
                    recipientSelect.addEventListener('change', toggleCareerRecipientFields);
                    toggleCareerRecipientFields();
                }

                function setBusy(value) {
                    busy = value;
                    loader.style.display = value ? 'inline-block' : 'none';
                    btn.style.opacity = value ? '0.7' : '1';
                    btn.style.cursor = value ? 'not-allowed' : '';
                    btn.disabled = value;
                }

                function retryCaptcha() {
                    if (submitted || !busy) return;
                    clearTimeout(timer);
                    setBusy(false);
                    error.hidden = false;
                    if (widgetId !== null) window.grecaptcha.reset(widgetId);
                }

                if (form && loader && btn) {
                    renderCaptcha = function() {
                        if (!captcha || widgetId !== null || !window.grecaptcha || !window.grecaptcha.render)
                            return;
                        try {
                            widgetId = window.grecaptcha.render(captcha, {
                                sitekey: captcha.dataset.sitekey,
                                size: 'invisible',
                                callback: function(token) {
                                    if (!busy || submitted) return;
                                    if (!token || !form.reportValidity()) {
                                        retryCaptcha();
                                        return;
                                    }
                                    clearTimeout(timer);
                                    submitted = true;
                                    // Native submit avoids invoking the CAPTCHA a second time.
                                    HTMLFormElement.prototype.submit.call(form);
                                },
                                'expired-callback': retryCaptcha,
                                'error-callback': retryCaptcha
                            });
                        } catch (e) {
                            retryCaptcha();
                        }
                    };
                    renderCaptcha();

                    form.addEventListener('submit', function(event) {
                        if (busy || submitted) {
                            event.preventDefault();
                            return;
                        }
                        if (!captcha) {
                            setBusy(true);
                            return;
                        }
                        event.preventDefault();
                        if (!form.reportValidity()) return;
                        if (widgetId === null) {
                            error.hidden = false;
                            return;
                        }
                        error.hidden = true;
                        setBusy(true);
                        // Allow retry if a challenge is dismissed or never completes.
                        timer = setTimeout(retryCaptcha, 120000);
                        try {
                            window.grecaptcha.execute(widgetId);
                        } catch (e) {
                            retryCaptcha();
                        }
                    });
                }
            }
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initContactForm);
            } else {
                initContactForm();
            }
        })();
    </script>
    @if (config('contact.recaptcha_enabled'))
        <script src="https://www.google.com/recaptcha/api.js?onload=contactRecaptchaReady&amp;render=explicit" async defer>
        </script>
    @endif
@endpush

@push('schema_markup')
    @php
        $q1 = 'Di mana alamat pabrik dan kantor PT Multi Spunindo Jaya?';
        if (app()->getLocale() == 'en') {
            $q1 = 'Where is the factory and office address of PT Multi Spunindo Jaya?';
        } elseif (app()->getLocale() == 'ja') {
            $q1 = 'PT Multi Spunindo Jayaの工場とオフィスの住所はどこですか？';
        }

        $schema = [
            '@context' => 'https://schema.org',
            '@type' => 'FAQPage',
            'mainEntity' => [
                [
                    '@type' => 'Question',
                    'name' => $q1,
                    'acceptedAnswer' => [
                        '@type' => 'Answer',
                        'text' =>
                            strip_tags(__('contact.office_address_line1')) .
                            ' ' .
                            strip_tags(__('contact.office_address_line2')),
                    ],
                ],
            ],
        ];
    @endphp
    <script type="application/ld+json">
    {!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
@endpush