<div>
    <main class="main">
        
        <section class="product-tabs section-padding position-relative wow fadeIn animated">
            <div class="container">
                <div class="tab-header">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="nav-tab-one" data-bs-toggle="tab"
                                data-bs-target="#tab-one" type="button" role="tab" aria-controls="tab-one"
                                aria-selected="true"><?php echo e(__('messages.daily')); ?></button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="nav-tab-two" data-bs-toggle="tab" data-bs-target="#tab-two"
                                type="button" role="tab" aria-controls="tab-two"
                                aria-selected="false"><?php echo e(__('messages.private')); ?></button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="nav-tab-three" data-bs-toggle="tab"
                                data-bs-target="#tab-three" type="button" role="tab" aria-controls="tab-three"
                                aria-selected="false"><?php echo e(__('messages.taxi')); ?></button>
                        </li>
                    </ul>

                </div>
                <!--End nav-tabs-->
                <div class="tab-content wow fadeIn animated" id="myTabContent">
                    <div class="tab-pane fade show active" id="tab-one" role="tabpanel" aria-labelledby="tab-one">
                        <div class="row product-grid-4" id="content-daily">

                        </div>
                        <!--End product-grid-4-->
                    </div>
                    <!--En tab one (Featured)-->
                    <div class="tab-pane fade" id="tab-two" role="tabpanel" aria-labelledby="tab-two">
                        <div class="row product-grid-4" id="content-private">
                           
                        </div>
                        <!--End product-grid-4-->
                    </div>
                    <!--En tab two (Popular)-->
                    <div class="tab-pane fade" id="tab-three" role="tabpanel" aria-labelledby="tab-three">
                        <div class="row product-grid-4" id="content-taxi">
                            
                        </div>
                        <!--End product-grid-4-->
                    </div>
                    <!--En tab three (New added)-->
                </div>
                <!--End tab-content-->
            </div>
        </section>                
    </main>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {

        function loadForm(formType, contenedor) {
            // Realiza una llamada AJAX para cargar el contenido del formulario específico
            $.ajax({
                url: '/load-form', // Ruta a tu controlador para cargar el formulario
                method: 'GET',
                data: { type: formType, contenedor: contenedor },
                success: function(response) {
                    $("#content-daily").html('');
                    $("#content-private").html('');
                    $("#content-taxi").html('');
                    $('#'+contenedor).html(response); // Coloca el contenido en el contenedor
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        // Manejar el clic en la pestaña "Daily"
        $('#nav-tab-one').on('click', function(e) {
            e.stopPropagation();
            loadForm('daily', 'content-daily'); // Llama a la función para cargar el formulario "daily"
        });

        // Manejar el clic en la pestaña "Private"
        $('#nav-tab-two').on('click', function(e) {
            e.stopPropagation();
            loadForm('private', 'content-private'); // Llama a la función para cargar el formulario "private"
        });

        // Manejar el clic en la pestaña "Tax"
        $('#nav-tab-three').on('click', function(e) {
            e.stopPropagation();
            loadForm('taxi', 'content-taxi'); // Llama a la función para cargar el formulario "tax"
        });

        loadForm('daily', 'content-daily');
        
    });
</script><?php /**PATH /home/tropical/public_html/tarifario/resources/views/livewire/home-component.blade.php ENDPATH**/ ?>