@extends('frontend.layouts.main')
@section('title', $seo['title'] ?? 'Liên hệ')
@section('keywords', $seo['keywords'] ?? 'Liên hệ')
@section('description', $seo['description'] ?? 'Liên hệ')
@section('abstract', $seo['abstract'] ?? 'Liên hệ')
@section('idMain', 'page-contact')
@section('image', asset($header['seo_home']->image_path))
@section('css')
	<link rel="stylesheet" href="{{ asset('frontend/css/style.css') }}?v={{ time() }}" type="text/css" />
	<link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/contact.css') }}?v={{ time() }}">
@endsection

@section('content')
	<div class="breadcrumb">
		<div class="ctnr">
			<ul>
				<li>
					<a href="/">Trang chủ</a>
				</li>
				<li>
					Liên hệ
				</li>
			</ul>
		</div>
	</div>

	<div class="layout-contact">
		<div class="ctnr">
			<div class="row">
				<div class="clm" style="--w-lg:6;--w-md:6;--w-xs:12">
					<div class="contact">
						{!! $contactInfo->description !!}
						<div class="info-contact">
							<div class="group-address">
								<ul>

									<li>
										<div class="icon">
											<img src="{{ asset($contactInfo->icon_path) }}"
												alt="{{ asset($contactInfo->icon_path) }}">
										</div>
										<div class="info">
											{!! $contactInfo->content !!}
										</div>
									</li>

									<li>
										<div class="icon"><img src="{{ asset($contactInfo->icon_path2) }}"
												alt="{{ asset($contactInfo->icon_path) }}"></div>
										<div class="info">
											{!! $contactInfo->content2 !!}
										</div>
									</li>

									<li>
										<div class="icon"><img src="{{ asset($contactInfo->icon_path3) }}" alt=""></div>
										<div class="info">
											{!! $contactInfo->content3 !!}
										</div>
									</li>

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

					<form action="{{ route('contact.storeAjax') }}" id="form-contact">
						<div class="contact-block__group d-flex fw-wrap justify-space-between">
							<div class="contact-block__item" style="--w-md: 5.9; --w-xs: 12">
								<label for="" class="contact-block__label">Họ tên *</label>
								<input type="text" class="contact-block__input" placeholder="Nguyễn Văn A" name="name">
							</div>
							<div class="contact-block__item" style="--w-md: 5.9; --w-xs: 12">
								<label for="" class="contact-block__label">Email</label>
								<input type="text" class="contact-block__input" placeholder="email@email.com" name="email">
							</div>
						</div>
						<div class="contact-block__group ">
							<label for="" class="contact-block__label">Số điện thoại *</label>
							<input type="number" class="contact-block__input" placeholder="0987654321" name="phone">
						</div>
						<div class="contact-block__group">
							<label for="" class="contact-block__label">Nội dung</label>
							<textarea name="content" class="contact-block__input" placeholder="Nhập nội dung" id="content"
								cols="30" rows="5"></textarea>
						</div>
						<button type="submit" class="c-btn-02">Gửi thông tin</button>
					</form>
				</div>
				<div class="clm" style="--w-lg:6;--w-md:6;--w-xs:12">
					<div id="contact_map" class="map">

						{!! remove_iframe_sandbox($contactInfo->content4) !!}

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

@endsection

@section('js')

	<script>
		(function () {
			$('#form-contact').on('submit', function (e) {
				e.preventDefault();

				const $form = $(this);
				const formData = $form.serializeArray();
				const action = $form.attr('action');
				const btn = $form.find('button[type="submit"]');

				// Lấy giá trị input
				const name = $.trim($('input[name="name"]').val());
				const phone = $.trim($('input[name="phone"]').val());
				const email = $.trim($('input[name="email"]').val());

				// Validate frontend bắt buộc
				if (!name) {
					datgin.warning('Họ và tên là bắt buộc');
					return;
				}

				if (!phone) {
					datgin.warning('Số điện thoại là bắt buộc');
					return;
				}
				// Regex phone (10-11 số, bắt đầu bằng 0)
				const phoneRegex = /^0\d{9,10}$/;
				if (!phoneRegex.test(phone)) {
					datgin.warning('Số điện thoại không hợp lệ');
					return;
				}

				// if (!email) {
				// 	datgin.warning('Email là bắt buộc');
				// 	return;
				// }
				// Regex kiểm tra email cơ bản
				if (email.length > 0) {
					const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
					if (!emailRegex.test(email)) {
						datgin.warning('Email không hợp lệ');
						return;
					}
				}

				$.ajax({
					url: action,
					method: 'POST',
					data: formData,
					beforeSend: () => btn.prop('disabled', true),
					success: (response) => {
						$form[0].reset();
						datgin.success(response.message);
					},
					error: (xhr) => {
						const mes = xhr.responseJSON?.message || 'Gửi thông tin thất bại!';
						datgin.error(mes);
					},
					complete: () => btn.prop('disabled', false)
				});
			});
		})();
	</script>


@endsection