@extends('Templates/templateAdmin')

@section('Main-content')

   

@endsection

@section('scriptsTemplateAdmin')
    <script>
        $(document).ready(function() {
            var steps = ['.res-step-one', '.res-step-two', '.res-step-three', '.res-step-four'];
            var i = 1;
            $(".res-step-form .res-btn-orange").click(function() {
                var getClass = $(this).attr('data-class');
                $(".res-steps").removeClass('active');
                $(steps[i]).addClass('active');
                i++;
                if (getClass != ".res-form-four") {
                    $(getClass).animate({
                        left: '-150%'
                    }, 500, function() {
                        $(getClass).css('left', '150%');
                    });
                    $(getClass).next().animate({
                        left: '0%'
                    }, 500, function() {
                        $(this).css('display', 'block');
                    });
                }
            });

            /* step back */
            $(".res-step-form .res-btn-gray").click(function() {
                var getClass = $(this).attr('data-class');
                $(".res-steps").removeClass('active');
                i--;
                $(steps[i - 1]).addClass('active');
                $(getClass).prev().css('left', '-150%')
                $(getClass).animate({
                    left: '150%'
                }, 500);
                $(getClass).prev().animate({
                    left: '0%'
                }, 500)
            });

            /* click from top bar steps */
            $('.res-step-one').click(function() {
                if (!$(this).hasClass('active')) {
                    $(".res-steps").removeClass('active');
                    i = 0;
                    $(steps[i]).addClass('active');
                    i++;
                    $('.res-form-one').css('left', '-150%');
                    $('.res-form-two, .res-form-three, .res-form-four').animate({
                        left: '150%'
                    }, 500);
                    $('.res-form-one').animate({
                        left: '0%'
                    }, 500);
                }
            });

            $('.res-step-two').click(function() {
                if (!$(this).hasClass('active')) {
                    $(".res-steps").removeClass('active');
                    i = 1;
                    $(steps[i]).addClass('active');
                    i++;
                    $('.res-form-two').css('left', '-150%');
                    $('.res-form-one, .res-form-three, .res-form-four').animate({
                        left: '150%'
                    }, 500);
                    $('.res-form-two').animate({
                        left: '0%'
                    }, 500);
                }
            });

            $('.res-step-three').click(function() {
                if (!$(this).hasClass('active')) {
                    $(".res-steps").removeClass('active');
                    i = 2;
                    $(steps[i]).addClass('active');
                    i++;
                    $('.res-form-three').css('left', '-150%');
                    $('.res-form-one, .res-form-two, .res-form-four').animate({
                        left: '150%'
                    }, 500);
                    $('.res-form-three').animate({
                        left: '0%'
                    }, 500);
                }
            });

            $('.res-step-four').click(function() {
                if (!$(this).hasClass('active')) {
                    $(".res-steps").removeClass('active');
                    i = 3;
                    $(steps[i]).addClass('active');
                    i++;
                    $('.res-form-four').css('left', '-150%');
                    $('.res-form-one, .res-form-two, .res-form-three').animate({
                        left: '150%'
                    }, 500);
                    $('.res-form-four').animate({
                        left: '0%'
                    }, 500);
                }
            });
        });
    </script>
@endsection