@extends('layouts.website_layout')

@section('content')
<main>
    @include('components.website.page-header')

    <!-- Main Content -->
    <div class="container py-5" id="main-content">
        <div class="row g-4">
            <!-- Main Content -->
            <div>
                <!-- Feedback Form Section -->
                <section id="overview">
                    <div class="card shadow border-0">
                        <div class="card-body">
                            <h5 class="mb-4">Send Us Your Feedback</h5>
                            <form id="feedbackForm">
                                @csrf
                                <div class="row">
                                    <div class="col-md-4 col-12 mb-3">
                                        <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="name" name="name" required>
                                    </div>

                                    <div class="col-md-4 col-12 mb-3">
                                        <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control" id="email" name="email" required>
                                    </div>

                                    <div class="col-md-4 col-12 mb-3">
                                        <label for="mobile_no" class="form-label">Mobile No</label>
                                        <input type="number" class="form-control" id="mobile_no" name="mobile_no" maxlength="10" minlength="10">
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="message" class="form-label">Message <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
                                </div>

                                <div class="mb-3">
                                    <div>
                                        <div class="captcha mb-2" id="captcha">
                                            <span>{!! captcha_img() !!}</span>
                                            <button type="button" class="btn btn-secondary btn-refresh"><i class="fa fa-sync"></i></button>
                                        </div>
                                    </div>
                                    <label class="form-label">Captcha</label>
                                    <input type="text" class="form-control" name="captcha" placeholder="" required>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-paper-plane"></i> {{ __('title.submit') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</main>
@endsection

@section('pages-scripts')
<script>
    $(document).ready(function() {
        $('#feedbackForm').validate({
            submitHandler: function(form) {
                $.ajax({
                    url: "{{ route('feedback.submit') }}",
                    method: "POST",
                    data: $(form).serialize(),
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Thank you!',
                            text: 'Your feedback has been submitted.',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        refreshCaptcha();
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorMessages = Object.values(errors).flat().join("<br>");
                            Swal.fire({
                                title: "Validation Error",
                                html: errorMessages,
                                icon: "error"
                            });
                        } else if (xhr.status === 400) {
                            Swal.fire({
                                title: "Error",
                                html: xhr.responseJSON.message ? xhr.responseJSON.message : "Something went wrong",
                                icon: "error"
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: "Something went wrong. Please try again.",
                                icon: "error"
                            });
                        }
                    }
                });
            }
        });

        // Refresh captcha on button click
        $('.btn-refresh').click(function() {
            refreshCaptcha();
        });

        function refreshCaptcha() {
            const formData = new FormData();
            formData.append('_token', "{{ csrf_token() }}");
            $.ajax({
                url: "{{ route('captcha.refresh') }}",
                type: "POST",
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('.site-loader').show();
                },
                complete: function() {
                    $('.site-loader').hide();
                },
                success: function(data) {
                    $('#captcha span').html(data.captcha);
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: "Failed to refresh captcha. Please try again."
                    });
                }
            });
        }
    });
</script>
@endsection