@extends('layout.main')
@section('content')
    @push('css')
        <style>
            .form-select {
                padding: 8px 15px;
                border: 1px solid #ccc;
                border-radius: 0;
                width: 100%;
                background-color: #ECEFF1;
                font-family: montserrat;
                color: #2C3E50;
                font-size: 16px;
                letter-spacing: 1px;
                -webkit-appearance: none;
                /* Remove default arrow on Chrome */
                -moz-appearance: none;
                /* Remove default arrow on Firefox */
                appearance: none;
                /* Remove default arrow on other browsers */
                background-image: url("your-arrow-icon.png");
                /* Add your custom arrow icon */
                background-position: right center;
                background-repeat: no-repeat;
            }

            .form-select:focus {
                border: 1px solid #673AB7;
                outline: none;
            }

            * {
                margin: 0;
                padding: 0
            }

            html {
                height: 100%
            }

            p {
                color: grey
            }

            #heading {
                text-transform: uppercase;
                color: #673AB7;
                font-weight: normal
            }

            #msform {
                text-align: center;
                position: relative;
                margin-top: 20px
            }

            #msform fieldset {
                background: white;
                border: 0 none;
                border-radius: 0.5rem;
                box-sizing: border-box;
                width: 100%;
                margin: 0;
                padding-bottom: 20px;
                position: relative
            }

            .form-card {
                text-align: left
            }

            #msform fieldset:not(:first-of-type) {
                display: none
            }

            #msform input,
            #msform textarea {
                padding: 8px 15px 8px 15px;
                border: 1px solid #ccc;
                border-radius: 0px;
                margin-bottom: 25px;
                margin-top: 2px;
                width: 100%;
                box-sizing: border-box;
                font-family: montserrat;
                color: #2C3E50;
                background-color: #ECEFF1;
                font-size: 16px;
                letter-spacing: 1px
            }

            #msform input:focus,
            #msform textarea:focus {
                -moz-box-shadow: none !important;
                -webkit-box-shadow: none !important;
                box-shadow: none !important;
                border: 1px solid #673AB7;
                outline-width: 0
            }

            #msform .action-button {
                width: 100px;
                background: #673AB7;
                font-weight: bold;
                color: white;
                border: 0 none;
                border-radius: 0px;
                cursor: pointer;
                padding: 10px 5px;
                margin: 10px 0px 10px 5px;
                float: right
            }

            #msform .action-button:hover,
            #msform .action-button:focus {
                background-color: #311B92
            }

            #msform .action-button-previous {
                width: 100px;
                background: #616161;
                font-weight: bold;
                color: white;
                border: 0 none;
                border-radius: 0px;
                cursor: pointer;
                padding: 10px 5px;
                margin: 10px 5px 10px 0px;
                float: right
            }

            #msform .action-button-previous:hover,
            #msform .action-button-previous:focus {
                background-color: #000000
            }

            .card {
                z-index: 0;
                border: none;
                position: relative
            }

            .fs-title {
                font-size: 25px;
                color: #673AB7;
                margin-bottom: 15px;
                font-weight: normal;
                text-align: left
            }

            .purple-text {
                color: #673AB7;
                font-weight: normal
            }

            .steps {
                font-size: 25px;
                color: gray;
                margin-bottom: 10px;
                font-weight: normal;
                text-align: right
            }

            .fieldlabels {
                color: gray;
                text-align: left
            }

            #progressbar {
                margin-bottom: 30px;
                overflow: hidden;
                color: lightgrey
            }

            #progressbar .active {
                color: #673AB7
            }

            #progressbar li {
                list-style-type: none;
                font-size: 15px;
                width: 25%;
                float: left;
                position: relative;
                font-weight: 400
            }

            #progressbar #account:before {
                font-family: FontAwesome;
                content: "\f13e"
            }

            #progressbar #personal:before {
                font-family: FontAwesome;
                content: "\f007"
            }

            #progressbar #payment:before {
                font-family: FontAwesome;
                content: "\f030"
            }

            #progressbar #confirm:before {
                font-family: FontAwesome;
                content: "\f00c"
            }

            #progressbar li:before {
                width: 50px;
                height: 50px;
                line-height: 45px;
                display: block;
                font-size: 20px;
                color: #ffffff;
                background: lightgray;
                border-radius: 50%;
                margin: 0 auto 10px auto;
                padding: 2px
            }

            #progressbar li:after {
                content: '';
                width: 100%;
                height: 2px;
                background: lightgray;
                position: absolute;
                left: 0;
                top: 25px;
                z-index: -1
            }

            #progressbar li.active:before,
            #progressbar li.active:after {
                background: #673AB7
            }

            .progress {
                height: 20px
            }

            .progress-bar {
                background-color: #673AB7
            }

            .fit-image {
                width: 100%;
                object-fit: cover
            }
        </style>
    @endpush
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-11 col-sm-9 col-md-7 col-lg-9  text-center p-0 mt-3 mb-2">
                <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
                    <h2 id="heading">Form Pelatihan Calon Transmigrasi</h2>
                    <p>Fill all form field to go to next step</p>
                    <form id="msform" action="/caltrans" method="POST">
                        @csrf
                        <!-- progressbar -->
                        <ul id="progressbar">
                            <li class="active" id="account"><strong>Data Pribadi</strong></li>
                            <li id="personal"><strong>Data Distrik</strong></li>
                            <li id="payment"><strong>Data CalTrans</strong></li>
                            <li id="confirm"><strong>Finish</strong></li>
                        </ul>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div> <br> <!-- fieldsets -->
                        <fieldset>
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-12">
                                        <h2 class="fs-title">Data Pribadi</h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="fieldlabels">NIP</label>
                                        <input type="text" class="form-control" name="nip">
                                        @error('nip')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Nama Lengkap</label>
                                        <input type="text" class="form-control" name="nama_lengkap">
                                        @error('nama_lengkap')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Pangkat/Golongan</label>
                                        <input type="text" class="form-control" name="pangkat">
                                        @error('pangkat')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Jabatan</label>
                                        <input type="text" class="form-control" name="jabatan">
                                        @error('jabatan')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Instansi</label>
                                        <input type="text" class="form-control" name="instansi">
                                        @error('instansi')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Kabupaten</label>
                                        <input type="text" class="form-control" name="kabupaten">
                                        @error('kabupaten')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="fieldlabels">No. HP</label>
                                        <input type="text" class="form-control" name="phone_number">
                                        @error('phone_number')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Pesan</label>
                                        <textarea type="text" class="form-control" name="pesan"></textarea>
                                        @error('pesan')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <label class="fieldlabels">Alamat</label>
                                        <textarea type="text" class="form-control" name="alamat"></textarea>
                                        @error('alamat')
                                            <p class="text text-danger">
                                                {{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="text-right">
                                <button class="btn btn-success">Next</button>
                            </div> --}}
                            <button type="button" name="next" class="next action-button" value="Next">Next</button>
                            {{-- <input type="button" name="next" class="next action-button" value="Next" /> --}}
                        </fieldset>
                        <fieldset>
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-7">
                                        <h2 class="fs-title">Data CalTrans</h2>
                                    </div>

                                </div> <label class="fieldlabels">Nama CalTrans</label>
                                <input type="text" class="form-control" name="nama_distrik"> <label
                                    class="fieldlabels">Jumlah
                                    Kampung</label>
                                <input type="text" class="form-control" name="jumlah_kampung"> <label
                                    class="fieldlabels">Jumlah
                                    Penduduk</label>
                                <input type="text" class="form-control" name="jumlah_penduduk">
                            </div> <input type="button" name="next" class="next action-button" value="Next" />
                            <input type="button" name="previous" class="previous action-button-previous"
                                value="Previous" />
                        </fieldset>
                        <fieldset>
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h2 class="fs-title">Data CalTrans</h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="alert alert-danger" role="alert" id="showerrors"
                                            style="display: none">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fieldlabels">Pendidikan</label>
                                            <select class="form-select" aria-label="Pendidikan" style="width:100%"
                                                name="pendidikan">
                                                <option selected>Pendidikan</option>
                                                <option value="1">SMP</option>
                                                <option value="2">SMA</option>
                                                <option value="3">Sarjana</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            {{-- <label class="fieldlabels">Potensi SDA</label>
                                            <select class="form-select" aria-label="Potensi SDA" style="width:100%">
                                                <option selected>Potensi SDA</option>
                                                <option value="1">Pertanian</option>
                                                <option value="2">Peternakan</option>
                                                <option value="3">Perikanan</option>
                                                <option value="4">Perkebunan</option>
                                                <option value="5">Kehutanan</option>
                                            </select> --}}
                                            <label class="fieldlabels">Potensi SDA</label>
                                            <input type="text" class="form-control" name="pertanian"
                                                placeholder="Pertanian" style="margin-bottom: 25px">
                                            <input type="text" class="form-control" name="peternakan"
                                                placeholder="Peternakan" style="margin-bottom: 25px">
                                            <input type="text" class="form-control" name="perikanan"
                                                placeholder="Perikanan" style="margin-bottom: 25px">
                                            <input type="text" class="form-control" name="perkebunan"
                                                placeholder="Perkenunan" style="margin-bottom: 25px">
                                            <input type="text" class="form-control" name="kehutanan"
                                                placeholder="Kehutanan" style="margin-bottom: 25px">
                                            <input type="text" class="form-control" name="lain_lain"
                                                placeholder="lain_lain" style="margin-bottom: 25px">
                                        </div>

                                        <label class="fieldlabels">Jenis Pelatihan Yang Pernah Diikuti</label>
                                        <input type="text" class="form-control" name="jenis_pelatihan">
                                        <label class="fieldlabels">Kampung Binaan</label>
                                        <input type="text" class="form-control" name="kampung_binaan">

                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Kelembagaan</label>
                                        <input type="text" class="form-control" name="kelembagaan_adat"
                                            placeholder="Kelembagaan Adat" style="margin-bottom: 25px">
                                        <input type="text" class="form-control" name="kelembagaan_sosial"
                                            placeholder="Kelembagaan Sosial" style="margin-bottom: 25px">
                                        <label class="fieldlabels">Nomor SK Calon Transmigrasi dari Ditjen
                                            PKP2Trans</label>
                                        <input type="text" class="form-control" name="no_sk_caltrans">
                                        <label class="fieldlabels">Tanggal SK Calon Transmigrasi dari Ditjen
                                            PKP2Trans</label>
                                        <input type="date" class="form-control" name="tgl_sk_caltrans">
                                        <label class="fieldlabels">Penandatangan SK Calon Transmigrasi</label>
                                        <input type="text" class="form-control" name="penandatangan_sk_caltrans">
                                        <label class="fieldlabels">Moda Transportasi</label>
                                        <input type="text" class="form-control" name="jarak_tempuh_bandara"
                                            placeholder="Jarak tempuh dari Bandara ke Distrik" style="margin-bottom:45px">
                                        <input type="text" class="form-control" name="jarak_tempuh_kampung"
                                            placeholder="Jarak tempuh Distrik ke Kampung">
                                    </div>
                                    <div class="col-md-12">
                                        <label class="fieldlabels">Sharing Information</label>
                                        <textarea type="text" class="form-control" name="sharing_information"></textarea>
                                    </div>
                                </div>
                            </div>
                            <input type="button" name="next" class="next action-button" value="Submit" />
                            <input type="button" name="previous" class="previous action-button-previous"
                                value="Previous" />
                        </fieldset>
                        <fieldset class="custom-fieldset">
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h2 class="fs-title">Data BUMDES</h2>
                                        <h5><strong> <span id="saved-kabupaten"></span> </strong></h5>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Nama Lengkap</div>
                                    <div class="col">: <span id="saved-nama-lengkap"></span></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">NIP</div>
                                    <div class="col">: <span id="saved-nip"></span></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Pangkat / Golongan</div>
                                    <div class="col">: <span id="saved-pangkat"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jabatan</div>
                                    <div class="col">: <span id="saved-jabatan"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Instansi</div>
                                    <div class="col">: <span id="saved-instansi"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Alamat</div>
                                    <div class="col">: <span id="saved-alamat"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Pesan</div>
                                    <div class="col">: <span id="saved-pesan"></div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-4">Nama Distrik</div>
                                    <div class="col">: <span id="saved-nama-distrik"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jumlah Kampung</div>
                                    <div class="col">: <span id="saved-jumlah-kampung"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jumlah Penduduk</div>
                                    <div class="col">: <span id="saved-jumlah-penduduk"></div>
                                </div>
                                {{-- <div class="row">
                                    <div class="col-4">Nama kampung</div>
                                    <div class="col">: Cinere</div>
                                </div> --}}
                                <hr>
                                <div class="row">
                                    <div class="col-4">Potensi SDM (Pendidikan)</div>
                                    <div class="col">: <span id="saved-pendidikan"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4 custom-col-4">
                                        Potensi SDA<br>
                                        &emsp;1.&emsp;pertanian <br>
                                        &emsp;2.&emsp;peternakan<br>
                                        &emsp;3.&emsp;perikanan <br>
                                        &emsp;4.&emsp;perkebunan <br>
                                        &emsp;5.&emsp;kehutanan<br>
                                        &emsp;6.&emsp;lain_lain

                                    </div>
                                    <div class="col-4">
                                        <div class="col">: <span id="saved-pertanian"></div>
                                        <div class="col">: <span id="saved-peternakan"></div>
                                        <div class="col">: <span id="saved-perikanan"></div>
                                        <div class="col">: <span id="saved-perkebunan"></div>
                                        <div class="col">: <span id="saved-kehutanan"></div>
                                        <div class="col">: <span id="saved-lain-lain"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4 custom-col-4">
                                        Potensi Kelembagan<br>
                                        &emsp;1.&emsp;kelembagaan Adat <br>
                                        &emsp;2.&emsp;kelembagaan Sosial<br>

                                    </div>
                                    <div class="col-4">
                                        <div class="col">: <span id="saved-kelembagaan-adat"></div>
                                        <div class="col">: <span id="saved-kelembagaan-sosial"></div>
                                    </div>
                                </div>
                                {{-- <div class="row">
                                    <div class="col-4">Potensi Aset</div>
                                    <div class="col">: <span id="saved-potensi-aset"></div>
                                </div> --}}

                                <div class="row">
                                    <div class="col-4">Nomor SK Calon Transmigrasi dari Ditjen PKP2Trans</div>
                                    <div class="col">: <span id="saved-no-sk-caltrans"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Tanggal SK Calon Transmigrasi dari Ditjen PKP2Trans</div>
                                    <div class="col">: <span id="saved-tgl-sk-caltrans"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Penandatangan SK Calon Transmigrasi</div>
                                    <div class="col">: <span id="saved-penandatangan-sk-caltrans"></div>
                                </div>

                                <div class="row">
                                    <div class="col-4 custom-col-6">
                                        Moda Transportasi<br>
                                        &emsp;1.&emsp;Jarak tempuh dari Bandara ke Distrik<br>
                                        &emsp;2.&emsp;Jarak tempuh Distrik ke Kampung

                                    </div>
                                    <div class="col-4">
                                        <div class="col">: <span id="saved-jarak-tempuh-bandara"></div>
                                        <div class="col">: <span id="saved-jarak-tempuh-kampung"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Kampung Binaan</div>
                                    <div class="col">: <span id="saved-kampung-binaan"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jenis Pelatihan Yang sudah pernah diikuti</div>
                                    <div class="col">: <span id="saved-jenis-pelatihan"></div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Sharing Information</div>
                                    <div class="col">
                                        : <span id="saved-sharing-information">
                                    </div>
                                </div>
                                <input type="button" name="print" class="print action-button" value="Print" />
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @push('js')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            var coba
            $(document).ready(function() {
                var current_fs, next_fs, previous_fs; //fieldsets
                var opacity;
                var current = 1;
                var steps = $("fieldset").length;
                setProgressBar(current);
                $(".next").click(function() {
                    coba = this
                    current_fs = $(this).parent();
                    next_fs = $(this).parent().next();
                    // let node_button = next_fs.find(".next").attr("value")
                    if ($(this).attr("value") === "Submit") {
                        let data = {
                            nip: $('input[name="nip"]').val(),
                            nama_lengkap: $('input[name="nama_lengkap"]').val(),
                            pangkat: $('input[name="pangkat"]').val(),
                            jabatan: $('input[name="jabatan"]').val(),
                            instansi: $('input[name="instansi"]').val(),
                            kabupaten: $('input[name="kabupaten"]').val(),
                            phone_number: $('input[name="phone_number"]').val(),
                            pesan: $('textarea[name="pesan"]').val(),
                            alamat: $('textarea[name="alamat"]').val(),
                            nama_distrik: $('input[name="nama_distrik"]').val(),
                            jumlah_kampung: $('input[name="jumlah_kampung"]').val(),
                            jumlah_penduduk: $('input[name="jumlah_penduduk"]').val(),
                            pendidikan: $('select[name="pendidikan"]').val(),
                            pertanian: $('input[name="pertanian"]').val(),
                            peternakan: $('input[name="peternakan"]').val(),
                            perikanan: $('input[name="perikanan"]').val(),
                            perkebunan: $('input[name="perkebunan"]').val(),
                            kehutanan: $('input[name="kehutanan"]').val(),
                            lain_lain: $('input[name="lain_lain"]').val(),
                            kelembagaan_adat: $('input[name="kelembagaan_adat"]').val(),
                            kelembagaan_sosial: $('input[name="kelembagaan_sosial"]').val(),
                            no_sk_caltrans: $('input[name="no_sk_caltrans"]').val(),
                            tgl_sk_caltrans: $('input[name="tgl_sk_caltrans"]').val(),
                            penandatangan_sk_caltrans: $('input[name="penandatangan_sk_caltrans"]').val(),
                            jarak_tempuh_bandara: $('input[name="jarak_tempuh_bandara"]').val(),
                            jarak_tempuh_kampung: $('input[name="jarak_tempuh_kampung"]').val(),
                            kampung_binaan: $('input[name="kampung_binaan"]').val(),
                            jenis_pelatihan: $('input[name="jenis_pelatihan"]').val(),
                            sharing_information: $('textarea[name="sharing_information"]').val(),

                        }
                        $.ajax({
                            type: "POST",
                            url: "{{ URL::to('/') }}/save-caltrans-data-caltrans",
                            data: data,
                            success: function(response) {
                                console.log(response)
                                $('#saved-kabupaten').text(response.data.kabupaten);
                                $('#saved-nama-lengkap').text(response.data.nama_lengkap);
                                $('#saved-nip').text(response.data.nip);
                                $('#saved-pangkat').text(response.data.pangkat);
                                $('#saved-jabatan').text(response.data.jabatan);
                                $('#saved-instansi').text(response.data.instansi);
                                $('#saved-alamat').text(response.data.alamat);
                                $('#saved-pesan').text(response.data.pesan);
                                $('#saved-nama-distrik').text(response.data.nama_distrik);
                                $('#saved-jumlah-kampung').text(response.data
                                    .jumlah_kampung);
                                $('#saved-jumlah-penduduk').text(response.data
                                    .jumlah_penduduk);
                                $('#saved-pendidikan').text(response.data.pendidikan);
                                $('#saved-pertanian').text(response.data.pertanian);
                                $('#saved-peternakan').text(response.data.peternakan);
                                $('#saved-perikanan').text(response.data.perikanan);
                                $('#saved-perkebunan').text(response.data.perkebunan);
                                $('#saved-kehutanan').text(response.data.kehutanan);
                                $('#saved-lain-lain').text(response.data.lain_lain);
                                $('#saved-potensi-aset').text(response.data.potensi_aset);
                                $('#saved-kelembagaan-adat').text(response.data
                                    .kelembagaan_adat);
                                $('#saved-kelembagaan-sosial').text(response.data
                                    .kelembagaan_sosial);
                                $('#saved-no-sk-caltrans').text(response.data
                                    .no_sk_caltrans);
                                $('#saved-tgl-sk-caltrans').text(response.data
                                    .tgl_sk_caltrans);
                                $('#saved-penandatangan-sk-caltrans').text(response.data
                                    .penandatangan_sk_caltrans);
                                $('#saved-jarak-tempuh-bandara').text(response.data
                                    .jarak_tempuh_bandara);
                                $('#saved-jarak-tempuh-kampung').text(response.data
                                    .jarak_tempuh_kampung);
                                $('#saved-kampung-binaan').text(response.data
                                    .kampung_binaan);
                                $('#saved-jenis-pelatihan').text(response.data
                                    .jenis_pelatihan);
                                $('#saved-sharing-information').text(response.data
                                    .sharing_information);

                                // Tampilkan pesan sukses jika diperlukan
                                alert(response.message);
                                //Add Class Active
                                $("#progressbar li").eq($("fieldset").index(next_fs)).addClass(
                                    "active");
                                //show the next fieldset
                                next_fs.show();
                                //hide the current fieldset with style
                                current_fs.animate({
                                    opacity: 0
                                }, {
                                    step: function(now) {
                                        // for making fielset appear animation
                                        opacity = 1 - now;
                                        current_fs.css({
                                            'display': 'none',
                                            'position': 'relative'
                                        });
                                        next_fs.css({
                                            'opacity': opacity
                                        });
                                    },
                                    duration: 500
                                });
                                setProgressBar(++current);
                            },
                            dataType: "JSON",
                            error: function(response) {
                                let res = response.responseJSON
                                const entries = Object.entries(res.input_data_gagal);
                                let html = ""
                                entries.forEach(([key, value]) => {
                                    html += `<li>${value}</li>`
                                });
                                $("#showerrors").html(html)
                                $("#showerrors").show()
                                window.location.href = "#showerrors"
                                return false
                            }
                        });
                    } else {
                        //Add Class Active
                        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
                        //show the next fieldset
                        next_fs.show();
                        //hide the current fieldset with style
                        current_fs.animate({
                            opacity: 0
                        }, {
                            step: function(now) {
                                // for making fielset appear animation
                                opacity = 1 - now;
                                current_fs.css({
                                    'display': 'none',
                                    'position': 'relative'
                                });
                                next_fs.css({
                                    'opacity': opacity
                                });
                            },
                            duration: 500
                        });
                        setProgressBar(++current);
                    }

                });
                $(".previous").click(function() {
                    current_fs = $(this).parent();
                    previous_fs = $(this).parent().prev();
                    $("#showerrors").hide()
                    //Remove class active
                    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
                    //show the previous fieldset
                    previous_fs.show();
                    //hide the current fieldset with style
                    current_fs.animate({
                        opacity: 0
                    }, {
                        step: function(now) {
                            // for making fielset appear animation
                            opacity = 1 - now;
                            current_fs.css({
                                'display': 'none',
                                'position': 'relative'
                            });
                            previous_fs.css({
                                'opacity': opacity
                            });
                        },
                        duration: 500
                    });
                    setProgressBar(--current);
                });

                function setProgressBar(curStep) {
                    var percent = parseFloat(100 / steps) * curStep;
                    percent = percent.toFixed();
                    $(".progress-bar")
                        .css("width", percent + "%")
                }
                $(".submit").click(function() {
                    return false;
                })
            });
        </script>
    @endpush
@endsection