@extends('layout.main')
@section('content')
    @push('css')
        <style>
            /* Style for select dropdowns */
            .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 Desa Wisata</h2>
                    <p>Fill all form field to go to next step</p>
                    <form id="msform" action="/deswita" 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 DesWita</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 Distrik</h2>
                                    </div>

                                </div> <label class="fieldlabels">Nama Distrik</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 Desa Wisata</h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <!-- First column for left-aligned elements -->
                                    <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">Indikator Pembangunan Pariwisata 3AK: </label>
                                            <select class="form-select"
                                                aria-label="Indikator-Pembangunan-Pariwisata-3AK: " style="width:100%"
                                                name="indikator_pembangunan">
                                                <option selected>Indikator Pembangunan Pariwisata 3AK: </option>
                                                <option value="1"> Atraksi</option>
                                                <option value="2">Amenitas</option>
                                                <option value="3">Aksesibilitas</option>
                                                <option value="4">Kelembagaan</option>
                                            </select>
                                        </div> --}}
                                        <div class="form-group">
                                            <label class="fieldlabels">Indikator Pembangunan Pariwisata 3AK</label>
                                            <input type="text" class="form-control" name="atraksi"
                                                placeholder="Atraksi" style="margin-bottom: 25px">
                                            <input type="text" class="form-control" name="amenitas"
                                                placeholder="Amenitas" style="margin-bottom: 25px">
                                            <input type="text" class="form-control" name="aksesibilitas"
                                                placeholder="Aksesibilitas" style="margin-bottom: 25px">
                                            <input type="text" class="form-control" name="kelembagaan"
                                                placeholder="Kelembagaan" style="margin-bottom: 25px">
                                        </div>
                                        <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: 25px">
                                        <input type="text" class="form-control" name="jarak_tempuh_kampung"
                                            placeholder="Jarak tempuh Distrik ke Kampung">

                                    </div>
                                    <!-- Second column for right-aligned elements -->
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Jumlah POKDARWIS</label>
                                        <input type="text" class="form-control" name="jumlah_pokdarwis">
                                        <label class="fieldlabels">Kampung Binaan</label>
                                        <input type="text" class="form-control" name="kampung_binaan">
                                        <label class="fieldlabels">Jenis Pelatihan Yang Pernah Diikuti</label>
                                        <input type="text" class="form-control" name="jenis_pelatihan">
                                    </div>
                                    <div class="col-md-12">
                                        <label>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 KPMD</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"></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">
                                        Indikator Pembangunan Pariwisata 3AK:<br>
                                        &emsp;1.&emsp;Atraksi <br>
                                        &emsp;2.&emsp;Amenitas<br>
                                        &emsp;3.&emsp;Aksesibilitas <br>
                                        &emsp;4.&emsp;Kelembagaan
                                    </div>
                                    <div class="col-4">
                                        <div class="col">: <span id="saved-atraksi"></div>
                                        <div class="col">: <span id="saved-amenitas"></div>
                                        <div class="col">: <span id="saved-aksesibilitas"></div>
                                        <div class="col">: <span id="saved-kelembagaan"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jumlah POKDARWIS</div>
                                    <div class="col">:<span id="saved-jumlah-pokdarwis"></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(),
                            atraksi: $('input[name="atraksi"]').val(),
                            amenitas: $('input[name="amenitas"]').val(),
                            aksesibilitas: $('input[name="aksesibilitas"]').val(),
                            kelembagaan: $('input[name="kelembagaan"]').val(),
                            jumlah_pokdarwis: $('input[name="jumlah_pokdarwis"]').val(),
                            jenis_pelatihan: $('input[name="jenis_pelatihan"]').val(),
                            kampung_binaan: $('input[name="kampung_binaan"]').val(),
                            jarak_tempuh_bandara: $('input[name="jarak_tempuh_bandara"]').val(),
                            jarak_tempuh_kampung: $('input[name="jarak_tempuh_kampung"]').val(),
                            sharing_information: $('textarea[name="sharing_information"]').val(),

                        }
                        $.ajax({
                            type: "POST",
                            url: "{{ URL::to('/') }}/save-deswita-data-deswita",
                            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-atraksi').text(response.data.atraksi);
                                $('#saved-amenitas').text(response.data.amenitas);
                                $('#saved-aksesibilitas').text(response.data.aksesibilitas);
                                $('#saved-kelembagaan').text(response.data.kelembagaan);
                                $('#saved-jumlah-pokdarwis').text(response.data.jumlah_pokdarwis);
                                $('#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);
                                // console.log(response)
                            },
                            dataType: "JSON"
                        });
                    }
                    //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();
                    //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