ispt4.0_laravel/resources/views/test2.blade.php

@extends('Templates/templateAdmin')

@section('Main-content')
    <div class="row justify-content-center">

        <!-- Multiplos FieldSet -->
        <div class="col-12" id="msform">

            <div class="row justify-content-center">
                <div class="card-body">
                    <!-- Progressbar -->
                    <ul id="progressbar" class="nav nav-pills  flex-sm-row">
                        <li class="active flex-sm-fill">Project details</li>
                        <li class="flex-sm-fill">Articulated</li>
                        <li class="flex-sm-fill">Workstation</li>
                    </ul>
                </div>
            </div>

            <!-- Card details project -->
            <fieldset>
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Project Details</h3>
                    </div>
                    <!-- ./Card-header -->

                    <div class="card-body">
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="float-right">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
                <!-- ./Card card-Primary  -->

                <input type="button" name="previous" class="btn btn-primary previous float-left" value="Previous" />
                <input type="button" name="next" class="btn btn-primary next float-right" value="Próximo" />

            </fieldset>

            <!-- ./Card details project -->


            <!-- Card Articulado -->
            <fieldset>
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Project Details</h3>
                    </div>
                    <!-- ./Card-header -->

                    <div class="card-body">
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="float-right">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
                <!-- ./Card card-Primary  -->

                <input type="button" name="previous" class="btn btn-primary previous float-left" value="Previous" />
                <input type="button" name="next" class="btn btn-primary next float-right" value="Próximo" />

            </fieldset>

            <fieldset>
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Project Details</h3>
                    </div>
                    <!-- ./Card-header -->

                    <div class="card-body">

                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="float-right">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
                <!-- ./Card card-Primary  -->

                <input type="button" name="previous" class="btn btn-primary previous float-left" value="Previous" />
                <input type="button" name="next" class="btn btn-primary next float-right" value="Próximo" />
            </fieldset>

        </div>
        <!-- Multiplos FieldSet -->
    </div>
@endsection

{{-- Script ProgressBar --}}
@section('scripts')
    <script>
        $(document).ready(function() {
            var activeFieldsetIndex =
            "{{ session('activeFieldsetIndex') }}"; // Obtenha o índice do fieldset ativo da sessão

            if (activeFieldsetIndex !== "") {
                // Se activeFieldsetIndex não estiver vazio, mostre o fieldset correspondente
                var fieldsets = $("fieldset");
                fieldsets.hide(); // Esconda todos os fieldsets
                $(fieldsets.get(activeFieldsetIndex)).show(); // Mostre o fieldset ativo
                $("#progressbar li").eq(activeFieldsetIndex).addClass(
                "active"); // Marque a progress bar correspondente como ativa
            }
        });

        
        //jQuery time
        var current_fs, next_fs, previous_fs; //fieldsets
        var left, opacity, scale; //fieldset properties which we will animate
        var animating; //flag to prevent quick multi-click glitches

        $(".next").click(function() {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            next_fs = $(this).parent().next();

            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

            current_fs.animate({
                opacity: 0
            }, 800, function() {
                current_fs.hide();
                next_fs.show();
                next_fs.css({
                    'opacity': 1
                });
                animating = false;
            });
        });

        $(".previous").click(function() {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            previous_fs = $(this).parent().prev();

            $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

            current_fs.animate({
                opacity: 0
            }, 800, function() {
                current_fs.hide();
                previous_fs.show();
                previous_fs.css({
                    'opacity': 1
                });
                animating = false;
            });
        });
    </script>
@endsection