@extends('public_layouts.layout')
@section('title', __('messages.contact us'))
@section('description', '')
@section('seo')
@section('content')

<div id="site-main" class="site-main">
	<div id="main-content" class="main-content">
		<div id="primary" class="content-area">
			<div id="title" class="page-title">
				<img class="page-title__bg" src="{{ locale_storage('images/'. $banners['contact']) }}" alt="{{__('messages.contact us')}} Banner" title="{{__('messages.contact us')}} Banner"> 
				<div class="section-container">
					<div class="content-title-heading">
						<h1 class="text-title-heading">
							{{__('messages.contact us')}}	
						</h1>
					</div>
				</div>	
			</div>

			<div id="content" class="site-content" role="main">
				<div class="page-contact">
					<section class="section section-padding p-t-70 p-b-70">
						<div class="section-container small">
							<!-- Block Contact Map -->
							<div class="block block-contact-map">
								<div class="block-widget-wrap">
									@if(app()->getLocale() == 'zh-TW')
									<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7231.913237473635!2d121.419156!3d25.00159!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34681d00275a277f%3A0x3ab6122d0f6ad2d2!2z5a625paw6IiI5qWt5pyJ6ZmQ5YWs5Y-4!5e0!3m2!1szh-TW!2sus!4v1763714859640!5m2!1szh-TW!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
									@else
									<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7231.913237473635!2d121.419156!3d25.00159!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34681d00275a277f%3A0x3ab6122d0f6ad2d2!2z5a625paw6IiI5qWt5pyJ6ZmQ5YWs5Y-4!5e0!3m2!1sen!2sus!4v1763714859640!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
									@endif
								</div>
							</div>
						</div>
					</section>	

					<section class="section section-padding m-b-70">
						<div class="section-container">
							<!-- Block Contact Info -->
							<div class="block block-contact-info">
								<div class="block-widget-wrap">
									
									<div class="info-title">
										<h2>{{__('messages.contact us')}}?</h2>
									</div>
									<div class="info-items">
										<div class="row">
											<div class="col-md-3 sm-m-b-30">
												<div class="info-item">
													<div class="item-tilte">
														<h2>{{__('messages.phone')}}</h2>
													</div>
													<div class="item-content">
														{{$setting['telephone']}}
													</div>
												</div>
											</div>
											<div class="col-md-3">
												<div class="info-item">
													<div class="item-tilte">
														<h2>{{__('messages.fax')}}</h2>
													</div>
													<div class="item-content">
														{{$setting['fax']}}
													</div>
												</div>
											</div>
											<div class="col-md-3 sm-m-b-30">
												<div class="info-item">
													<div class="item-tilte">
														<h2>{{__('messages.address')}}</h2>
													</div>
													<div class="item-content">
														<p>{{$setting['address']}}</p>
													</div>
												</div>
											</div>
											<div class="col-md-3">
												<div class="info-item">
													<div class="item-tilte">
														<h2>{{__('messages.email')}}</h2>
													</div>
													<div class="item-content">
														<p>{{$setting['email']}}</p>
													</div>
												</div>
											</div>
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>

					<section class="section section-padding contact-background m-b-0">
						<div class="section-container small">
							<!-- Block Contact Form -->
							<div class="block block-contact-form">
								<div class="block-widget-wrap">
									<div class="block-title">
										<h2>{{__('messages.fill_form')}}</h2>
									</div>
									<div class="block-content">
										<form action="" method="post" class="contact-form mb-5" novalidate="novalidate">
											@csrf
											<div class="contact-us-form">
												<div class="row">
													<div class="col-sm-12 col-md-6">
														<label class="required">{{__('messages.name')}}</label><br>
														<span class="form-control-wrap">
															<input type="text" name="name" value="" size="40" class="form-control" aria-required="true">
														</span>
													</div>
													<div class="col-sm-12 col-md-6">
														<label class="required">{{__('messages.phone')}}</label><br>
														<span class="form-control-wrap">
															<input type="text" name="phone" value="" size="40" class="form-control" aria-required="true">
														</span>
													</div>
													<div class="col-sm-12 col-md-12">
														<label class="required">{{__('messages.email')}}</label><br>
														<span class="form-control-wrap">
															<input type="email" name="email" value="" size="40" class="form-control" aria-required="true">
														</span>
													</div>
												</div>
												<div class="row">
													<div class="col-sm-12">
														<label class="required">{{__('messages.message')}}</label><br>
														<span class="form-control-wrap">
															<textarea name="message" cols="40" rows="10" class="form-control" aria-required="true"></textarea>
														</span>
													</div>
												</div>
												<div class="form-group captcha-group mt-3" style="display: flex; flex-direction: column; gap: 0.5rem;">
													<div style="display: flex; align-items: center; gap: 0.5rem; width: 100%;">
														<span class="captcha-img">
															<img src="{{ captcha_src('default') }}" alt="captcha" class="captcha-image">
														</span>
														<button type="button" class="btn-refresh captcha-refresh-button" title="{{__('messages.refresh_captcha')}}" style="flex-shrink: 0; padding: 0.25rem 0.5rem;">
															<i class="fas fa-sync-alt"></i>
														</button>
													</div>
													<input type="text" id="captcha" name="captcha" required placeholder="{{__('messages.please_enter_captcha')}}" style="margin-top: 0.5rem; width: 100%;">
												</div>
												<div class="form-button">
													  <button type="submit" class="button">{{__('messages.submit_form')}}</button>
												</div>
											</div>
										</form>
										<div class="alert-container">
											@if($errors->any())
											<div class="alert alert-danger">
												<strong>{{__('messages.please_correct_the_following_errors')}}</strong>
												<ul>
													@foreach($errors->all() as $error)
														<li>{{ $error }}</li>
													@endforeach
												</ul>
											</div>
											@endif
											@if(session('success'))
											<div class="alert alert-success">
												{{ session('success') }}
											</div>
											@endif
											<div id="ajax-success-message" class="alert alert-success" style="display:none;"></div>
											<div id="ajax-error-message" class="alert alert-danger" style="display:none;">
												<strong>{{__('messages.please_correct_the_following_errors')}}</strong>
												<ul id="ajax-error-list"></ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>
				</div>
			</div><!-- #content -->
		</div><!-- #primary -->
	</div><!-- #main-content -->
</div>
<script>
	const form = document.querySelector('.contact-form');
    if (!form) throw new Error('Contact form element not found');

    const successMessageContainer = document.getElementById('ajax-success-message');
    const errorMessageContainer = document.getElementById('ajax-error-message');
    const errorList = document.getElementById('ajax-error-list');
    const submitButton = form.querySelector('button[type="submit"]');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        submitButton.disabled = true;
        submitButton.textContent = '{{__('messages.sending')}}...';

        // Clear previous messages
        successMessageContainer.style.display = 'none';
        errorMessageContainer.style.display = 'none';
        errorList.innerHTML = '';

        const formData = new FormData(form);

        fetch('{{ locale_asset('message') }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            }
        })
        .then(response => {
            if (response.status === 422) { // Validation error
                return response.json().then(data => {
                    throw data;
                });
            }
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                successMessageContainer.textContent = data.message;
                successMessageContainer.style.display = 'block';
                form.reset(); 
            }
        })
        .catch(errorData => {
            if (errorData.errors) {
                Object.values(errorData.errors).forEach(errors => {
                    errors.forEach(error => {
                        const li = document.createElement('li');
                        li.textContent = error;
                        errorList.appendChild(li);
                    });
                });
                errorMessageContainer.style.display = 'block';
            } else {
                const li = document.createElement('li');
                li.textContent = '發生未預期的錯誤，請稍後再試。';
                errorList.appendChild(li);
                errorMessageContainer.style.display = 'block';
            }
        })
        .finally(() => {
            // Re-enable button
            submitButton.disabled = false;
            submitButton.textContent = '{{__('messages.submit_form')}}';
            // Refresh captcha
            const captchaImg = form.querySelector('.captcha-image');
            if (captchaImg) {
                captchaImg.src = '{{ captcha_src('default') }}' + '?' + new Date().getTime();
            }
        });
    });

    const refreshButton = form.querySelector('.captcha-refresh-button');
    if (refreshButton) {
        refreshButton.addEventListener('click', function() {
            const captchaImg = form.querySelector('.captcha-image');
            if (captchaImg) {
                captchaImg.src = '{{ captcha_src('default') }}' + '?' + new Date().getTime();
            }
        });
    }	
</script>
@endsection