@extends("Layouts.layout")
@section("title")
Obtenir un devis - CSP
@endsection
@section("contant")

<div class="no-bottom no-top" id="content">

    <div id="top"></div>

    <section class="jarallax">
        <img src="{{ asset('assets/images/background/1.webp') }}" class="jarallax-img" alt="">
        <div class="container relative z-2 mt-2">
            <div class="spacer-single xs-hide"></div>
            <div class="row g-4 justify-content-center align-items-center">

                <div class="col-lg-6">
                    <div class="relative">
                        <!-- Message de succès -->
                        <div id="success_message_col" class='success-custom text-light p-40 h-100'
                            style="display: none;">
                            <h3>Merci pour votre demande</h3>
                            <p>Nous avons bien reçu votre demande de devis et allons la traiter dans les plus brefs
                                délais. Notre équipe prendra contact avec vous très prochainement.</p>
                            <a class="btn-main" href="{{ route('quote.index') }}">Faire une nouvelle demande</a>
                        </div>

                        <!-- Formulaire -->
                        <form id="booking_form" class="relative z1000 bg-light rounded-1 p-40">
                            @csrf

                            <div class="row g-3">
                                <div class="col-lg-12">
                                    <h2 class="mb-3"><i class="fa fa-envelope-o id-color me-2"></i>Obtenir un devis</h2>
                                    <p> Vous recherchez des panneaux photovoltaïques fiables et performants ?
                                        Faites confiance à notre expertise en fabrication solaire. Contactez-nous
                                        dès aujourd'hui pour bénéficier des solutions adaptées à vos besoins.</p>
                                    <div class="relative">
                                        <select name="service" id="service" class="form-control" required>
                                            <option disabled selected value="">Selectionnez le service</option>
                                            <option value="Modules">Modules</option>
                                            <option value="Components">Composants éléctriques</option>
                                            <option value="Digital Products">Produits digitaux</option>
                                        </select>
                                        <i class="absolute top-0 end-0 id-color pt-3 pe-3 icofont-simple-down"></i>
                                    </div>
                                </div>

                                <!-- <div class="col-lg-6">
                                    <input type="date" name="date" id="date" class="form-control" required>
                                </div>

                                <div class="col-lg-6">
                                    <div class="relative">
                                        <select name="time" id="time" class="form-control" required>
                                            <option disabled selected value="">Select Time</option>
                                            <option value="19:00">08:00</option>
                                            <option value="20:00">09:00</option>
                                            <option value="10:00">10:00</option>
                                            <option value="11:00">11:00</option>
                                            <option value="12:00">12:00</option>
                                            <option value="13:00">13:00</option>
                                            <option value="14:00">14:00</option>
                                            <option value="15:00">15:00</option>
                                            <option value="16:00">16:00</option>
                                            <option value="17:00">17:00</option>                                            
                                        </select>
                                        <i class="absolute top-0 end-0 id-color pt-3 pe-3 icofont-simple-down"></i>
                                    </div>
                                </div> -->

                                <div class="col-lg-4">
                                    <input type="text" name="name" id="name" placeholder="Name" class="form-control"
                                        required>
                                </div>

                                <div class="col-lg-4">
                                    <input type="email" name="email" id="email" placeholder="Email" class="form-control"
                                        required>
                                </div>

                                <div class="col-lg-4">
                                    <input type="text" name="phone" id="phone" placeholder="Phone" class="form-control"
                                        required>
                                </div>

                                <div class="col-lg-12">
                                    <input type="text" name="address" id="address" placeholder="Address"
                                        class="form-control" required>
                                </div>

                                <div class="col-lg-12">
                                    <textarea name="message" id="message" class="form-control"
                                        placeholder="Message (Optional)"></textarea>
                                </div>

                                <div class="col-lg-12">
                                    <div id='submit'>
                                        <button type='submit' id='send_message' class="btn-main">
                                            <span id="btn-text">Envoyer la demande</span>
                                            <span id="btn-loader" style="display: none;">
                                                <i class="fa fa-spinner fa-spin"></i> Envoi en cours...
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Message d'erreur -->
                            <div id="error_message" class='alert alert-danger mt-3' style="display: none;"></div>

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

        <div class="sw-overlay"></div>
    </section>

</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function () {

        $('#booking_form').on('submit', function (e) {
            e.preventDefault();

            // Récupérer les données du formulaire
            let formData = {
                _token: '{{ csrf_token() }}',
                name: $('#name').val(),
                email: $('#email').val(),
                phone: $('#phone').val(),
                service: $('#service').val(),
                address: $('#address').val(),
                date: $('#date').val(),
                time: $('#time').val(),
                message: $('#message').val()
            };

            // Cacher les messages précédents
            $('#error_message').hide();

            // Afficher le loader
            $('#btn-text').hide();
            $('#btn-loader').show();
            $('#send_message').prop('disabled', true);

            // Envoyer la requête AJAX
            $.ajax({
                url: '{{ route("quote.store") }}',
                type: 'POST',
                data: formData,
                success: function (response) {
                    if (response.success) {
                        // Cacher le formulaire
                        $('#booking_form').fadeOut();

                        // Afficher le message de succès
                        $('#success_message_col').fadeIn();

                        // Reset le formulaire
                        $('#booking_form')[0].reset();
                    }
                },
                error: function (xhr) {
                    // Afficher les erreurs
                    let errors = xhr.responseJSON.errors;
                    let errorMessage = '';

                    if (errors) {
                        $.each(errors, function (key, value) {
                            errorMessage += value[0] + '<br>';
                        });
                    } else {
                        errorMessage = xhr.responseJSON.message || 'An error occurred. Please try again.';
                    }

                    $('#error_message').html(errorMessage).fadeIn();

                    // Réactiver le bouton
                    $('#btn-text').show();
                    $('#btn-loader').hide();
                    $('#send_message').prop('disabled', false);
                }
            });
        });

    });
</script>
<style>
    .success-custom {
        border: 1px solid #93d6fd;
        background: #93d6fd29;
    }
</style>

@endsection