@extends('layout.main')
@section('content')
    <br><br>
    @push('css')
        <style>
            @media print {
                body {
                    visibility: hidden;
                }

                #section-to-print {
                    visibility: visible;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }

            .form-select {
                padding: 8px 15px;
                border: 1px solid #ccc;
                border-radius: 7px;
                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 #009C98;
                outline: none;
            }

            * {
                margin: 0;
                padding: 0
            }

            html {
                height: 100%
            }

            p {
                color: grey
            }

            #heading {
                text-transform: uppercase;
                color: #009C98;
                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 {
                padding: 8px 15px 8px 15px;
                border: 1px solid #ccc;
                border-radius: 7px;
                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 textarea {
                padding: 15px 15px 0px 15px;
                border: 1px solid #ccc;
                border-radius: 7px;
                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 #009C98;
                outline-width: 0
            }

            #msform .action-button {
                width: 100px;
                background: #009C98;
                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: #009C98
            }

            #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: #009C98;
                margin-bottom: 15px;
                font-weight: normal;
                text-align: left
            }

            .purple-text {
                color: #009C98;
                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: #009C98
            }

            #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: #009C98
            }

            .progress {
                height: 20px
            }

            .progress-bar {
                background-color: #009C98
            }

            .fit-image {
                width: 100%;
                object-fit: cover
            }


            .FormInput {
                position: relative;
                margin-bottom: 1rem;
            }

            .FormInput input,
            .FormInput textarea,
            .FormInput select {
                width: 17rem;
                height: 3.6rem;
                padding: 0 .8rem;
                font-size: 16px;
                outline: none;
            }

            .FormInput label {
                position: absolute;
                top: 28%;
                left: .5rem;
                transform: translateY(-25%);
                font-size: 16px;
                color: #919191;
                padding: 0 5px;
                pointer-events: none;
                padding: 0 1rem 0 0.8rem;
                transition: .5s;
            }

            .FormInput input:focus~label,
            .FormInput input:valid~label {
                top: 0;
                background-color: #fff;
                border-radius: 1rem;
            }

            .FormInput textarea:focus~label,
            .FormInput textarea:valid~label {
                top: 0;
                background-color: #fff;
                border-radius: 1rem;
            }

            .FormInput select:focus~label,
            .FormInput select:valid~label {
                top: 0;
                background-color: #fff;
                border-radius: 1rem;
            }

            .is-invalid {
                border-color: #dc3545 !important;
                padding-right: calc(1.5em + .75rem);
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right calc(.375em + .1875rem) center;
                background-size: calc(.75em + .375rem) calc(.75em + .375rem);
            }
        </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">
                                        <div class="FormInput">
                                            <input type="text" class="@error('nip') is-invalid @enderror" name="nip"
                                                required>
                                            @error('nip')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                            <label for="">NIP</label>
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <div class="FormInput">
                                            <input type="text" class="@error('nama_lengkap') is-invalid @enderror"
                                                name="nama_lengkap" required>
                                            @error('nama_lengkap')
                                                <div class="invalid-feedback">
                                                    {{ $message }}</div>
                                            @enderror
                                            <label for="">Nama Lengkap</label>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="FormInput">
                                            <input type="text" class="@error('pangkat') is-invalid @enderror"
                                                name="pangkat" required>
                                            @error('pangkat')
                                                <div class="invalid-feedback">
                                                    {{ $message }}</div>
                                            @enderror
                                            <label for="">Pangkat/Golongan</label>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <div class="FormInput">
                                            <input type="text" class="@error('jabatan') is-invalid @enderror"
                                                name="jabatan" required>
                                            @error('jabatan')
                                                <div class="invalid-feedback">
                                                    {{ $message }}</div>
                                            @enderror
                                            <label for="">Jabatan</label>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="FormInput">
                                            <input type="text" class="@error('instansi') is-invalid @enderror"
                                                name="instansi" required>
                                            @error('instansi')
                                                <div class="invalid-feedback">
                                                    {{ $message }}</div>
                                            @enderror
                                            <label for="">Instansi</label>
                                            <span class="invalid-feedback">Please fill out this
                                                field.</span>
                                        </div>

                                    </div>

                                    <div class="col-md-6">
                                        <div class="FormInput">
                                            <input type="text" class="@error('kabupaten') is-invalid @enderror"
                                                name="kabupaten" required>
                                            @error('kabupaten')
                                                <div class="invalid-feedback">
                                                    {{ $message }}</div>
                                            @enderror
                                            <label for="">Kabupaten</label>
                                            <span class="invalid-feedback">Please fill out this
                                                field.</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="FormInput">
                                            <input type="text" class="@error('phone_number') is-invalid @enderror"
                                                name="phone_number" required>
                                            @error('phone_number')
                                                <div class="invalid-feedback">
                                                    {{ $message }}</div>
                                            @enderror
                                            <label for="">No. HP</label>
                                            <span class="invalid-feedback">Please fill out this
                                                field.</span>
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <div class="FormInput">
                                            <textarea type="text" class="@error('pesan') is-invalid @enderror" name="pesan" required></textarea>
                                            @error('pesan')
                                                <div class="invalid-feedback">
                                                    {{ $message }}</div>
                                            @enderror
                                            <label for="">Pesan</label>
                                            <span class="invalid-feedback">Please fill out this
                                                field.</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="FormInput">
                                            <textarea type="text" class="@error('alamat') is-invalid @enderror" name="alamat" required></textarea>
                                            @error('alamat')
                                                <div class="invalid-feedback">
                                                    {{ $message }}</div>
                                            @enderror
                                            <label for="">Alamat</label>
                                            <span class="invalid-feedback">Please fill out
                                                this field.</span>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <button type="button" name="next" class="next action-button"
                                value="Next">Next</button>

                        </fieldset>
                        <fieldset>
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-7">
                                        <h2 class="fs-title">Data Distrik</h2>
                                    </div>
                                    <div class="FormInput">
                                        <input type="text" class="@error('nama_distrik') is-invalid @enderror"
                                            name="nama_distrik" required>
                                        @error('nama_distrik')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <label for="" style="margin-left: 15px;">Nama Distrik</label>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                    </div>
                                    <div class="FormInput">
                                        <input type="text" class="@error('jumlah_kampung') is-invalid @enderror"
                                            name="jumlah_kampung" required>
                                        @error('jumlah_kampung')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <label for="" style="margin-left: 15px;">Jumlah Kampung</label>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                    </div>
                                    <div class="FormInput">
                                        <input type="text" class="@error('jumlah_penduduk') is-invalid @enderror"
                                            name="jumlah_penduduk" required>
                                        @error('jumlah_penduduk')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <label for="" style="margin-left: 15px;">Jumlah Penduduk</label>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                    </div>
                                </div>
                            </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>
                                            <div class="FormInput">
                                                <select class="form-select @error('pendidikan') is-invalid @enderror"
                                                    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>
                                                @error('pendidikan')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                        </div>
                                        <div class="form-group">
                                            <label class="fieldlabels">Potensi SDA</label>
                                            <div class="FormInput">
                                                <input type="text" class="@error('pertanian') is-invalid @enderror"
                                                    name="pertanian" required>
                                                @error('pertanian')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <label for="">Pertanian</label>
                                            </div>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                            <div class="FormInput">
                                                <input type="text" class="@error('peternakan') is-invalid @enderror"
                                                    name="peternakan" style="margin-bottom: 25px" required>
                                                @error('peternakan')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <label for="">Peternakan</label>
                                            </div>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                            <div class="FormInput">
                                                <input type="text" class="@error('perikanan') is-invalid @enderror"
                                                    name="perikanan" style="margin-bottom: 25px" required>
                                                @error('perikanan')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <label for="">Perikanan</label>
                                            </div>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                            <div class="FormInput">
                                                <input type="text" class="@error('perkebunan') is-invalid @enderror"
                                                    name="perkebunan" style="margin-bottom: 25px" required>
                                                @error('perkebunan')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <label for="">Perkebunan</label>
                                            </div>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                            <div class="FormInput">
                                                <input type="text" class="@error('kehutanan') is-invalid @enderror"
                                                    name="kehutanan" style="margin-bottom: 25px" required>
                                                @error('kehutanan')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <label for="">Kehutanan</label>
                                            </div>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                            <div class="FormInput">
                                                <input type="text" class="@error('lain_lain') is-invalid @enderror"
                                                    name="lain_lain" style="margin-bottom: 25px" required>
                                                @error('lain_lain')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <label for="">Lain-lain</label>
                                            </div>
                                            <span class="invalid-feedback">Please fill out this field.</span>
                                        </div>
                                        <div class="FormInput">
                                            <input type="text" class="@error('jenis_pelatihan') is-invalid @enderror"
                                                name="jenis_pelatihan" required>
                                            @error('jenis_pelatihan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <label for="">Jenis Pelatihan Yang Pernah Diikuti</label>
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Kelembagaan</label>
                                        <div class="FormInput">
                                            <input type="text" class="@error('kelembagaan_adat') is-invalid @enderror"
                                                name="kelembagaan_adat" style="margin-bottom: 25px" required>
                                            @error('kelembagaan_adat')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <label for="">Kelembagaan Adat</label>
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                        <div class="FormInput">
                                            <input type="text"
                                                class="@error('kelembagaan_sosial') is-invalid @enderror"
                                                name="kelembagaan_sosial" style="margin-bottom: 25px" required>
                                            @error('kelembagaan_sosial')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <label for="">Kelembagaan Sosial</label>
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                        <div class="FormInput">
                                            <input type="text" class="@error('no_sk_caltrans') is-invalid @enderror"
                                                name="no_sk_caltrans" required>
                                            @error('no_sk_caltrans')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <label for="">Nomor SK Calon Transmigrasi dari Ditjen
                                                PKP2Trans</label>
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                        <label class="fieldlabels">Tanggal SK Calon Transmigrasi dari Ditjen
                                            PKP2Trans</label>
                                        <div class="FormInput">
                                            <input type="date" class="@error('tgl_sk_caltrans') is-invalid @enderror"
                                                name="tgl_sk_caltrans" required>
                                            @error('tgl_sk_caltrans')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            {{-- <label for="">Tanggal SK Calon Transmigrasi dari Ditjen
                                                PKP2Trans</label> --}}
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                        <div class="FormInput">
                                            <input type="text"
                                                class="@error('penandatangan_sk_caltrans') is-invalid @enderror"
                                                name="penandatangan_sk_caltrans" required>
                                            @error('penandatangan_sk_caltrans')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <label for="">Penandatangan SK Calon Transmigrasi</label>
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                        <label class="fieldlabels">Moda Transportasi</label>
                                        <div class="FormInput">
                                            <input type="text"
                                                class="@error('jarak_tempuh_bandara') is-invalid @enderror"
                                                name="jarak_tempuh_bandara" style="margin-bottom: 25px" required>
                                            @error('jarak_tempuh_bandara')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <label for="">Jarak tempuh dari Bandara ke Distrik</label>
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                        <div class="FormInput">
                                            <input type="text"
                                                class="@error('jarak_tempuh_kampung') is-invalid @enderror"
                                                name="jarak_tempuh_kampung" style="margin-bottom: 25px" required>
                                            @error('jarak_tempuh_kampung')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <label for="">Jarak tempuh Distrik ke kampung</label>
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                        <div class="FormInput">
                                            <input type="text" class="@error('kampung_binaan') is-invalid @enderror"
                                                name="kampung_binaan" required>
                                            @error('kampung_binaan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <label for="">Kampung Binaan</label>
                                        </div>
                                        <span class="invalid-feedback">Please fill out this field.</span>
                                    </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" id="section-to-print">
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h2 class="fs-title">Data CALTRANS</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>
                                <a href="#" class="print action-button" id="printbutton">Print</a>
                            </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

            function printDiv(divName) {
                var printContents = document.getElementById(divName).innerHTML;
                var originalContents = document.body.innerHTML;

                document.body.innerHTML = printContents;

                window.print();

                document.body.innerHTML = originalContents;

            }
            $(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 + "km");
                                $('#saved-jarak-tempuh-kampung').text(response.data
                                    .jarak_tempuh_kampung + "km");
                                $('#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);

                                let id = response.data.data_id
                                $("#printbutton").attr("href", "/print-pages-caltrans/caltrans/" +
                                    id)
                                //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 --}}

    @push('js')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            var coba

            function printDiv(divName) {
                var printContents = document.getElementById(divName).innerHTML;
                var originalContents = document.body.innerHTML;
                document.body.innerHTML = printContents;
                window.print();
                document.body.innerHTML = originalContents;
            }
            $(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() {
                    $("#showerrors").hide();
                    current_fs = $(this).parent();
                    next_fs = $(this).parent().next();
                    var requiredFields = current_fs.find(
                        'input[required], select[required], textarea[required]');
                    var allFieldsFilled = true;
                    requiredFields.each(function() {
                        coba = this;
                        if ($(this).val() === "") {
                            allFieldsFilled = false;
                            $(this).addClass("is-invalid");
                            $(this.parentElement.parentElement).find(".invalid-feedback").text(
                                "Please fill out this field.").show()
                            // $(this).next('.invalid-feedback').text("Please fill out this field.")
                            //   .show();
                        } else {
                            $(this).removeClass("is-invalid");
                            $(this.parentElement.parentElement).find(".invalid-feedback").hide()
                            // $(this).next('.invalid-feedback').hide();
                        }
                    });
                    var nipInput = current_fs.find('input[name="nip"]');
                    if (nipInput.val() !== "" && nipInput.val() != undefined) {
                        // Check if NIP is a valid integer
                        if (!Number.isInteger(Number(nipInput.val()))) {
                            nipInput.addClass("is-invalid");
                            nipInput.parent().find(".invalid-feedback").text("NIP harus diisi dengan angka!").show();
                            console.log("masuk booleas")
                            allFieldsFilled = false;
                        } else {
                            nipInput.removeClass("is-invalid");
                            nipInput.parent().find(".invalid-feedback").hide();
                        }
                    }
                    var phoneNumberInput = current_fs.find('input[name="phone_number"]');
                    if (phoneNumberInput.val() !== "" && nipInput.val() != undefined) {
                        var phoneNumberRegex = /^\d{10,}$/; // Example regex for a 10-digit phone number
                        if (!phoneNumberRegex.test(phoneNumberInput.val())) {
                            phoneNumberInput.addClass("is-invalid");
                            phoneNumberInput.parent().find(".invalid-feedback").text("Format no. HP salah!")
                                .show();
                            allFieldsFilled = false;
                        } else {
                            phoneNumberInput.removeClass("is-invalid");
                            phoneNumberInput.parent().find(".invalid-feedback").hide();
                        }
                    }
                    if (allFieldsFilled) {
                        // All required fields are filled, proceed to the next step
                        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 + "km");
                                    $('#saved-jarak-tempuh-kampung').text(response.data
                                        .jarak_tempuh_kampung + "km");
                                    $('#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);

                                    let id = response.data.data_id
                                    $("#printbutton").attr("href",
                                        "/print-pages-caltrans/caltrans/" +
                                        id)
                                    //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 fieldset appear animation
                                    opacity = 1 - now;
                                    current_fs.css({
                                        'display': 'none',
                                        'position': 'relative'
                                    });
                                    next_fs.css({
                                        'opacity': opacity
                                    });
                                },
                                duration: 500
                            });
                            setProgressBar(++current);
                        }
                    } else {
                        $('html, body').animate({
                            scrollTop: requiredFields.filter(function() {
                                return $(this).val() === "";
                            }).first().offset().top
                        }, 500);
                    }
                });
                $(".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