@extends('layout.index')
@section('title','Muftaax | Contact Us')
@section('custom-style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">
.hidden {
    display: none;
}

@endsection
@section('content')
	
	<header class="app-header">

		<!-- Start::main-header-container -->
		<div class="main-header-container container-fluid">

			<!-- Start::header-content-left -->
			<div class="header-content-left">

				<!-- Start::header-element -->
				<div class="header-element">
					<img src="{{asset('assets/images/logo-color-new.png')}}" alt="logo" class="desktop-logo">
				</div>
				<!-- End::header-element -->

			</div>

		</div>
		<!-- End::main-header-container -->

	</header>

	<div class="main-content-inner mt-10">
		<div class="container">
			
			
			<section class="section" id="contact">
                <div class="container text-center">
                    <p class="fs-12 fw-medium text-success mb-1"><span class="landing-section-heading">CONTACT US</span></p>
                    <h3 class="fw-medium mb-2">Have any questions ? We would love to hear from you.</h3>
                    <div class="row justify-content-center">
                        <div class="col-xl-9">
                            <p class="text-muted fs-15 mb-5 fw-normal">You can contact us anytime regarding any queries,dont hesitate to clear your doubts before trying our product.</p>
                        </div>
                    </div>
                    <div class="row text-start justify-content-center">
                        
                        <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12">
                            <div class="card custom-card  overflow-hidden section-bg border overflow-hidden shadow-none">
                                <div class="card-body">
                                    
    <form  id="contactForm" method="POST" enctype="multipart/form-data">
        @csrf
                                    <div class="row gy-3 mt-2 px-3">
                                        <div class="col-xl-6">
                                            <div class="row gy-3">
                                                <div class="col-xl-12">
                                                    <label for="contact-address-name" class="form-label ">Full Name :</label>
                                                    <input type="text" class="form-control " id="contact-address-name" placeholder="Enter Name" name="name">
                                                    <span class="text-danger text-sm text-red-500 block text-left" id="nameError"></span>
                                                </div>
                                                <div class="col-xl-12">
                                                    <label for="contact-address-phone" class="form-label ">Email Address :</label>
                                                    <input type="text" class="form-control " id="contact-address-phone" placeholder="Enter Email Address" name="email">
                                                    <span class="text-danger text-sm text-red-500 block text-left" id="emailError"></span>
                                                </div>
                                                <div class="col-xl-12">
                                                    <label for="contact-address-address" class="form-label ">Subject :</label>
                                                    <textarea class="form-control " id="contact-address-address" rows="1" name="subject"></textarea>
                                                    <span class="text-danger text-sm text-red-500 block text-left" id="subjectError"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <label for="contact-address-message" class="form-label ">Message :</label>
                                            <textarea class="form-control " id="contact-address-message" rows="8" name="message"></textarea>
                                            <span class="text-danger text-sm text-red-500 block text-left" id="messageError"></span>
                                        </div>
                                        <div class="col-xl-12">
                                            <div class="d-flex  mt-4 ">
                                                <div class="">
                                                    <div class="btn-list">
                                                        <button class="btn btn-icon btn-primary-light btn-wave">
                                                            <i class="ri-facebook-line fw-bold"></i>
                                                        </button>
                                                        <button class="btn btn-icon btn-primary-light btn-wave">
                                                            <i class="ri-twitter-line fw-bold"></i>
                                                        </button>
                                                        <button class="btn btn-icon btn-primary-light btn-wave">
                                                            <i class="ri-instagram-line fw-bold"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="ms-auto">
                                                    <button class="btn btn-primary  btn-wave" type="submit">Send Message</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div></form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
		</div>
		
		<footer class=" mt-auto py-3 p-0 mb-3 text-center">
				<div class="container">
					<span class="text-muted"> Copyright © <span id="year">2025</span> <a href="javascript:void(0);" class="text-dark fw-medium">Muftaax</a>.
						All
						rights
						reserved
					</span>
				</div>
			</footer>
	</div>

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Notyf -->
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>

<script>
    $("#contactForm").on('submit', function(event) {
        event.preventDefault();

        // Disable the submit button and change its text
        var submitButton = $('#contactForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'POST',
            url: "{{ route('front.contact-us.store') }}",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                let notyf = new Notyf({
                    duration: 3000,
                    position: { x: 'right', y: 'top' },
                    ripple: true,
                    dismissible: true
                });

                if (data.success) {
                    notyf.success(data.message);
                    $('#contactForm')[0].reset();
                }
                if (data.error) {
                    notyf.error(data.message);
                    $('#contactForm')[0].reset();
                }

                submitButton.prop('disabled', false).text('Send Message');
            },
            error: function(data) {
                $('.text-danger').addClass('hidden'); // Hide all error messages

                var errors = data.responseJSON;
                if (!$.isEmptyObject(errors)) {
                    $.each(errors.errors, function(key, value) {
                        $('#' + key + 'Error').removeClass("hidden").text(value);
                    });
                }

                submitButton.prop('disabled', false).text('Send Message');
            }
        });
    });

   // Clear error messages on input change
$('#contactForm input, #contactForm textarea, #contactForm select').on('input change', function() {
    const errorElementId = '#' + $(this).attr('name') + 'Error';
    console.log('Clearing error for:', errorElementId); // Debugging log
    $(errorElementId).addClass('hidden').text(''); // Add hidden class and clear the text
});

</script>
@endsection
@section('custom-script')

@endsection