@extends('front.layout.app')
@section('content')
		{{-- @php echo front_dashboard_links(); @endphp --}}
		<!-- Start Banner     ============================================= -->
		<script src='https://www.google.com/recaptcha/api.js'></script>
		  @php
	$scwidget_baner = get_widgets(widget: 81);
	$af_data = $scwidget_baner ? json_decode($scwidget_baner->additional_field_data) : null;
	@endphp
	 <!-- Slider start -->
	 @if($scwidget_baner && $scwidget_baner->sts == 1)
			<section class="hero-section" style="background-image: url('{{ asset_uploads('widgets/' . $scwidget_baner->featured_image) }}'); background-size: cover; background-position: center;">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="caption aos-init" data-aos="fade-up" data-aos-duration="1500">
								<strong class="title">{{ $scwidget_baner->heading }}</strong>
								{!! $scwidget_baner->content !!}
								<div class="main-btn">
									<a href="{{ $af_data->additional_field_2 ?? '#' }}"> 
										{{ $af_data->additional_field_1 ?? 'GET A FREE ESTIMATE' }} <i class="fa-solid fa-angle-right"></i>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
	@endif

		<!-- End Banner -->
		<main id="main">
							 @php
	$scwidget_about = get_widgets(widget: 94);
	$af_data = $scwidget_about ? json_decode($scwidget_about->additional_field_data) : null;
	@endphp
			<section class="about-us-section">
				<div class="container">
					<div class="row align-items-center g-4 g-lg-5">
						<div class="col-lg-6" data-aos="fade-right" data-aos-duration="1100">
							<div class="about-us-image-wrap text-center text-lg-start">
								<img
								src="{{ asset_uploads('widgets/' . $scwidget_about->featured_image) }}"
								title="{{ $scwidget_about->featured_img_title }}" alt="{{ $scwidget_about->featured_img_alt }}" class="img-fluid">
								<div class="experience-badge">
									<span class="years">{{  $af_data->additional_field_1 }}+</span>
									<span class="label">YEARS<br>EXPERIENCE</span>
								</div>
							</div>
						</div>
						<div class="col-lg-6" data-aos="fade-left" data-aos-delay="120" data-aos-duration="1100">
							<div class="about-us-content">
							{{-- @php echo get_excerpt(adjustUrl($about_us_page->content),786); @endphp --}}

								 @php
	                             echo $scwidget_about->content;
							@endphp
								<div class="main-btn about-us-btn">
									<a href="/about-us">
										MORE ABOUT US <i class="fa-solid fa-arrow-right"></i>
									</a>
								</div>
							</div> 
						</div>
					</div>
				</div>
			</section>


	{{-- Service Section --}}

			<section class="services-section">
				<div class="container">
					 @php
	$scwidget_service = get_widgets(widget: 92);
	$af_data = $scwidget_service ? json_decode($scwidget_service->additional_field_data) : null;
	@endphp
					<div class="row align-items-lg-center g-4 mb-4 mb-lg-5">
					{!!	$scwidget_service->content !!}
					</div>
{{-- 
					<div class="row g-4">

						 @foreach ($get_all_services as $serviceObj)
						<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-duration="1100">
							<a href="{{ url('services/' . $serviceObj->slug) }}" class="service-card d-block text-decoration-none">
								@if (!empty($serviceObj->featured_image) && file_exists(storage_uploads('services/' . $serviceObj->featured_image)))
									<img
										src="{{ asset_uploads('services/' . $serviceObj->featured_image) }}"
										title="{{ $serviceObj->featured_image_title }}"
										alt="{{ $serviceObj->featured_image_alt }}" class="img-fluid">
								@else
									<img
										src="{{ asset_uploads('back/images/no_image.jpg') }}"
										title="{{ $serviceObj->featured_image_title }}"
										alt="{{ $serviceObj->featured_image_alt }}" class="img-fluid">
								@endif
								<span class="service-icon"><i class="fa-solid fa-arrow-right"></i></span>
								<div class="service-card-content">
									<h3>{{ $serviceObj->title }}</h3>
									<p>{{ Str::limit($serviceObj->excerpt, 100, '...') }}</p>
								</div>
							</a>
						</div>
	@endforeach


					</div> --}}
						<div class="row g-4">

						 @foreach ($get_all_services as $serviceObj)
						<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-duration="1100">
							<a href="{{ url('services/' . $serviceObj->slug) }}" class="service-card d-block text-decoration-none">
															<img
											src="{{ asset_uploads('services/' . $serviceObj->featured_image) }}"
											title="{{ $serviceObj->featured_image_title }}"
											alt="{{ $serviceObj->featured_image_alt }}" class="img-fluid"> 
								<span class="service-icon"><i class="fa-solid fa-arrow-right"></i></span>
								<div class="service-card-content">
									<h3>{{ $serviceObj->title }}</h3>
									<p>{{ Str::limit($serviceObj->excerpt, 100, '...') }}</p>
								</div>
							</a>
						</div>
	@endforeach


					</div>
				</div>
			</section>
			<!-- End Services -->
				<section class="cta-wrap">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-lg-8">
						<div class="main_title">
							<span class="subtitle">Contact Us Today</span>
							<h2>Let's Refresh Your Home or Business</h2>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="main-btn">
							<a href="{{ route('contact') }}">GET A FREE ESTIMATE <i class="fa-solid fa-arrow-right"></i></a>
						</div>
					</div>
				</div>
				</div>
		</section>

			{{-- Why Choose --}}
			@php
	$scwidget_choose = get_widgets(widget: 93);
	$af_data = $scwidget_choose ? json_decode($scwidget_choose->additional_field_data) : null;
	@endphp
			<section class="why-choose-section py-5">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="main_title text-center mb-4 mb-lg-5" data-aos="fade-up" data-aos-duration="1200">
								<span class="subtitle">{{ $scwidget_choose->heading }}</span>
								<h2>Professional <span>Painting</span> <br>with a Perfect Finish</h2>
							</div>
						</div>
					</div>

					<div class="row g-4 align-items-stretch">
						<div class="col-lg-6">
							{!! $scwidget_choose->content !!}
						</div>

						<div class="col-lg-6" data-aos="fade-left" data-aos-duration="1200">
							<div class="why-choose-image">
								<img src="{{ asset_uploads('widgets/' . $scwidget_choose->featured_image) }}" alt=" " class="img-fluid">
								<div class="why-image-text">
									<h3>Only Top-Quality <span>Sherwin-Williams</span> Paint for Your Home</h3>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>

			{{-- Services Area --}}

			<section class="service-areas-section py-5">
				<div class="service-areas-box" data-aos="fade-up" data-aos-duration="1200">
				<div class="container">

						<div class="service-areas-overlay"></div>
						<div class="service-areas-content text-center">
							<div class="main_title serviceheading">
								<span class="subtitle">SERVICE AREAS</span>
								<h2>Proudly Serving Metro Atlanta &amp; Surrounding Areas</h2>
							</div>

							<div class="service-areas-tags">

								@foreach ($get_all_services_areas as $areaObj)
								<a href="{{ url('service-areas/' . basename($areaObj->post_slug)) }}" class="area-tag">{{ $areaObj->heading }} <i class="fa-solid fa-location-dot"></i></a>
								@endforeach
							</div>
						</div>
					</div>
				</div>
				
			</section>
			{{-- OUR WORK --}}
			
				<section class="recent-work-section">
					<div class="container">
						<div class="main_title text-center mb-4 mb-lg-5" data-aos="fade-up" data-aos-duration="1200">
							<span class="subtitle">OUR WORK SPEAKS FOR ITSELF</span>
							<h2>RECENT WORK</h2>
						</div>

						<div class="recent-work-slider owl-carousel owl-theme" data-aos="fade-up" data-aos-delay="120"
							data-aos-duration="1200">
						 @foreach ($get_all_work as $work)
									<div class="work-item has-hover-caption">
										<a href="#" class="work-popup-trigger" data-index="0">
											<img 	src="{{ asset_uploads('module/our-work/' . $work->featured_img) }}"
											title="{{ $work->featured_image_title }}"
											alt="{{ $work->featured_image_alt }}">

										</a>
										<div class="work-caption">
											<h3>{{ $work->heading }}</h3>
										</div>
									</div>
							
							@endforeach


						</div>
					</div>
				</section>
			
				<div class="modal fade recent-work-modal" id="recentWorkModal" tabindex="-1" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered modal-xl">
				<div class="modal-content">
					<div class="recent-work-popup-inner">
						<button type="button" class="popup-close-btn" data-bs-dismiss="modal" aria-label="Close">
							<i class="fa-solid fa-xmark"></i>
						</button>
						<div class="recent-work-popup-slider owl-carousel owl-theme">
							@foreach ($get_all_work as $work)
							<div class="popup-slide"><img src="{{ asset_uploads('module/our-work/' . $work->featured_img) }}" alt="{{ $work->featured_image_alt }}"></div>
							@endforeach
							
						</div>
					</div>
				</div>
			</div>
		</div>
{{-- TESTIMONIALS --}}
@if(count($get_all_testimonials) > 0)
			<section class="testimonials-section py-5">
			<div class="testimonials-box">
			<div class="container">
				
					<div class="main_title text-center mb-4 mb-lg-5" data-aos="fade-up" data-aos-duration="1200">
						<span class="subtitle">TESTIMONIALS</span>
						<h2>Trusted by <span>3,000</span> Clients <br>Read Honest Stories</h2>
					</div>

					<div class="testimonial-slider owl-carousel owl-theme" data-aos="fade-up" data-aos-delay="120" data-aos-duration="1200">
						@foreach ($get_all_testimonials as $testimonial)
						<div class="testimonial-item">
							<div class="testimonial-quote">
								<span class="quote-icon"><img src="{{ asset_storage('front/images/quote-icon.png') }}" alt=""></span>
								<div>{!! adjustUrl($testimonial->content) !!}</div>
							</div>
							<div class="testimonial-user">
								@if(!empty($testimonial->featured_img))
								 <img
												src="{{ asset_uploads('module/testimonials/' . $testimonial->featured_img) }}"
												title="{{ $testimonial->featured_img_title }}"
												alt="{{ $testimonial->featured_img_alt }}"> 
								@endif
								<h3>{{ $testimonial->additional_field_1 ?? 'Client' }}</h3>
								
							</div>
						</div>
@endforeach
					

					</div>
				</div>
			</div>
		</section>
@endif
	<section class="faq-estimate-section py-5">
			<div class="container">
				<div class="row g-4 g-lg-5 align-items-center">
					<div class="col-lg-7">
						<div class="main_title mb-4" data-aos="fade-up" data-aos-duration="1200">
							<span class="subtitle">FREQUENTLY ASKED QUESTIONS</span>
							<h2>Clear guidance for a smooth and stress free renovation</h2>
						</div>

						<div class="accordion faq-accordion" id="faqAccordion" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1200">
							@php $faq_count = 0; @endphp
								@foreach ($get_all_faqs as $faq)
									@php 
										$show_class = ($faq_count == 0) ? 'show' : ''; 
										$collapsed_class = ($faq_count == 0) ? '' : 'collapsed';
										$expanded = ($faq_count == 0) ? 'true' : 'false';
									@endphp
							<div class="accordion-item">
								<h2 class="accordion-header" id="faqHeading{{ $faq_count }}">
									<button class="accordion-button {{ $collapsed_class }}" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse{{ $faq_count }}" aria-expanded="{{ $expanded }}" aria-controls="faqCollapse{{ $faq_count }}">
										{{ $faq->heading }}
									</button>
								</h2>
								<div id="faqCollapse{{ $faq_count }}" class="accordion-collapse collapse {{ $show_class }}" aria-labelledby="faqHeading{{ $faq_count }}" data-bs-parent="#faqAccordion">
									<div class="accordion-body">
										{!! adjustUrl($faq->content) !!}
									</div>
								</div>
							</div>
@php $faq_count++; @endphp
								@endforeach
						


						</div>
					</div>

					<div class="col-lg-5" data-aos="fade-left" data-aos-duration="1200">
						<div class="estimate-form-box" id="estimateForm">
							
							<h3>Get a Free Estimate</h3>
							<p>Ready to Refresh Your Home with a Flawless Paint Job?</p>
							<form action="" method="POST" class="estimate-form" id="contactmainForm" autocomplete="off">
								@csrf
								<input type="text" class="form-control" name="name" pattern="[A-Za-z\s]+" title="Only alphabets and spaces are allowed"
                                    onkeypress="return /^[a-zA-Z\s]+$/.test(event.key)" placeholder="Full Name" id="name" autocomplete="off" required>
									<div id="name-error" class="error"></div>
								<input type="email" name="email" class="form-control" placeholder="Email Address" id="email" autocomplete="off" required>
								<div id="email-error" class="error"></div>
								<input type="tel" name="phone" class="form-control" placeholder="Phone" id="phone" autocomplete="off" required>
								<div id="phone-error" class="error"></div>
								<select name="service" class="form-select" id="service" required>
									<option value="" selected disabled>Select Service</option>
										 @if (count($get_all_services) > 0)
                                @foreach ($get_all_services as $services)
									<option value="{{ $services->title }}">{{ $services->title }}</option>
								  @endforeach
                            @endif
								</select>
								<div id="service-error" class="error"></div>

								<input type="text" name="address" class="form-control" placeholder="Address" id="address" autocomplete="off" required>
								<div id="address-error" class="error"></div>
								<textarea name="message" class="form-control" rows="4" placeholder="Message" id="comments" autocomplete="off"></textarea>
									<div class="col-12 col-lg-12 mb-2 form-group">
							<div class="g-recaptcha" data-sitekey="{{ $siteKey }}"></div>
							<div id="g-recaptcha-response-error" class="error"></div>
						</div>
								<button type="button" onclick="submitContactMainFormAjax();" class="btn estimate-btn">GET A FREE ESTIMATE <i class="fa-solid fa-arrow-right"></i></button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</section>
		</main>
 @endsection
@section('beforeBodyClose')
<script src="{{ asset_storage('lib/sweetalert2.js') }}"></script>
<script>
  // Clear error messages when user starts typing
    $(document).ready(function() {
        $('#contactmainForm input, #contactmainForm select, #contactmainForm textarea').on('input change', function() {
            var fieldName = $(this).attr('name');
            $('#' + fieldName + '-error').html('').hide().removeClass('formValidationErrors');
        });
    });
    function submitContactMainFormAjax() {
        // Clear all previous errors
        $('.error').html('').hide().removeClass('formValidationErrors');
        
        url = "{{ route('contact-us-save') }}";
        method = 'POST';
        header = '';
        let formData = new FormData($('#contactmainForm')[0]);
        
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: url,
            type: method,
            data: formData,
            headers: header,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(data) {
                console.log('Response:', data);
                if (data.status === true || data.status === 'true') {
                    $("#contactmainForm").trigger('reset');
                    Swal.fire({
                        icon: 'success',
                        title: 'Thank you!',
                        html: 'Your message has been sent successfully.',
                        timer: 3000,
                        timerProgressBar: true,
                        showConfirmButton: false
                    })
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Sorry!',
                        text: data.error || 'Something went wrong. Please try again.',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(data) {
                if (data.status === 422) {
                    var responseText = $.parseJSON(data.responseText);
                    $.each(responseText.errors, function(key, value) {
                        $('#' + key + '-error').html(value);
                        $('#' + key + '-error').addClass('formValidationErrors');
                        $('#' + key + '-error').show();
                        scrollToErrors('.formValidationErrors');
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'An error occurred. Please try again.',
                        confirmButtonText: 'OK'
                    });
                }
            }
        });
    }
</script>
<script>
    function formatPhoneNumber(value) {
        // Remove non-numeric characters
        value = value.replace(/\D/g, '');

        // Add space after every 3 digits
        if (value.length > 6) {
            value = value.substring(0, 3) + ' ' + value.substring(3, 6) + ' ' + value.substring(6, 10);
        } else if (value.length > 3) {
            value = value.substring(0, 3) + ' ' + value.substring(3);
        }

        return value;
    }

    document.addEventListener('DOMContentLoaded', function() {
        const phoneInput = document.getElementById('phone');

        phoneInput.addEventListener('input', function() {
            this.value = formatPhoneNumber(this.value);
        });
    });
</script>
@endsection