@extends('template.index')
@section('title', 'Data Kisoner Online SI PeSSUT KOTA SAMARINDA')
@section('prodeskel', 'active')
@section('konten')


<section id="home" class="slider-area bg-shape" style="background-image:url({{asset('asset/img/shape/002.png')}}); height: 100vh ;">
    <div class="slider-active" id="fullscreen">
        <div class="single-slider">
                
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-12 col-lg-12 pt-90" >
                        <div class="widget-title" data-animation="bounceInLeft">
                                
                            <h5>Data Posyandu Lansia</h5>
                            <a href="{{ Helper::backButton() }}" style="cursor:pointer;text-decoration:underline;" class="btn-link">Kembali</a>
                        </div>
                        <div class="limiter" data-animation="fadeInDownBig" data-delay="0.7s">
                            <div class="container-table100">
                                <div class="wrap-table100">
                                    <div class="table100 ver2 m-b-50">
                                        <div class="main-scroll">
                                            <table data-vertable="ver2">
                                                <tbody>
                                                    <tr class="row100">
                                                        <td class="column100 column0" data-column="column0">
                                                        {!! Form::open(
                                                            ['route' => ['admin.posyandu.lansia.store'], 
                                                             'role'  => 'form',
                                                             'class' => 'form-horizontal',
                                                             'id'    => 'msform',
                                                             'name'  => 'prodeskel',
                                                             'method'=> 'post']) !!}
                                                        
                                                        <div>
                                                           
                                                            <fieldset >
                                                                @include('posyandu.formulir.fields')
                                                                {{-- <input type="button" name="previous" class="previous btn btn-warning btn-sm" value="Previous" /> --}}
                                                                <input type="button" name="next" class="next btn btn-primary btn-sm" value="Next" />
                                                            </fieldset>
                                                    
                                                            @include('posyandu.formulir.formulir')
                                                      
                                                            <fieldset style="display: none;">
                                                                
                                                                
                                                               
                                                                <input type="checkbox" id="cek_data" required>
                                                                
                                                                <label class="form-check-label" for="cek_data">Apakah data anda sudah benar dan valid ?</label>
                                                                <br>
                                                                <br>
                                                                {!! Form::submit('Simpan', ['class' => 'btn btn-success mr-1']) !!}
                                                                <br>
                                                                <br>
                                                                <br>
                                                                <br>
                                                                <input type="button" name="previous" class="previous btn btn-primary btn-sm" value="Previous" />
                                                                {{-- <input type="button" name="next" class="next action-button btn btn-primary btn-sm" value="Next" /> --}}
                                                            </fieldset>
                                                        </div>
                                                        
                                                        {!! Form::close() !!}
                                                        </td>
                                                        
                                                    </tr>
                                                    

                                                </tbody>
                                                <tfoot>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <footer class="second-footer" style="position: fixed;">
                <div class="copyright-text text-center">
                    <p>&copy; 2017 Dinas Komunikasi dan Informatika Pemerintah Kota Samarinda.</p>
                </div>
            </footer>
        </div>
    </div>
</section>



    <div class="cd-transition-layer"> 
        <div class="bg-layer" style="background: url({{asset('asset/img/ink/green.png')}}) no-repeat 0 0;"></div>
    </div><!-- Ink Transition -->

@endsection

@push('scripts')
    
    <script>
        $(document).ready(function(){
            var current_fs, next_fs, previous_fs; //fieldsets
            var left, opacity, scale; //fieldset properties which we will animate
            var animating = false; //flag to prevent quick multi-click glitches
            var form = $("#msform");
            var steps = form.find('fieldset');
            let curIndex = 0;
            steps.each(function(i, obj) {
                $(obj).hide();
            });
            $(steps[0]).show();

            $(document).on('click','.next',function(){
                
                if(animating) return false;
                
                animating = true;
                current_fs = $(steps[curIndex]);
                curIndex ++;
                next_fs = $(steps[curIndex]);
                
                //show the next fieldset
                next_fs.show(); 
                //hide the current fieldset with style
                current_fs.animate({opacity: 0}, {
                    step: function(now, mx) {
                        scale = 1 - (1 - now) * 0.2;
                        left = (now * 50)+"%";
                        opacity = 1 - now;
                        // current_fs.css({
                        //     'transform': 'scale('+scale+')',
                        //     'position': 'absolute'
                        // });
                        next_fs.css({'left': left, 'opacity': opacity});
                    }, 
                    duration: 800, 
                    complete: function(){
                        current_fs.hide();
                        animating = false;
                    }, 
                    easing: 'easeInOutBack'
                });
            });


            $(document).on('click','.previous',function(){
                if(animating) return false;
                animating = true;
                current_fs = $(steps[curIndex]);
                curIndex --;
                previous_fs = $(steps[curIndex]);
                
                previous_fs.show(); 

                current_fs.animate({opacity: 0}, {
                    step: function(now, mx) {
                        scale = 0.8 + (1 - now) * 0.2;
                        left = ((1-now) * 50)+"%";
                        opacity = 1 - now;
                        //current_fs.css({'left': left});
                        previous_fs.css({'opacity': opacity});
                    }, 
                    duration: 800, 
                    complete: function(){
                        current_fs.hide();
                        animating = false;
                    }, 
                    easing: 'easeInOutBack'
                });
            });

            

        });
    </script>
@endpush