@extends('layout.main')
@section('content')
    @push('css')
        <style>
            /* Style for select dropdowns */
            .custom-col-6 {
                width: 50%;
                /* Atur lebar kolom sesuai dengan preferensi Anda */
                float: left;
                /* Mengatur elemen untuk mengapung ke kiri */
            }

            .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;
                width: 100%;
                /* Set the width to 100% to expand horizontally */
                height: auto;
                /* Set height to auto to allow the card's content to determine its height */
                display: block;
                /* Show the card */
                transition: height 0.3s ease-in-out;
                /* Add a smooth transition effect */
            }


            .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 Kader Pemberdayaan Masyarakat Desa</h2>
                    <p>Fill all form field to go to next step</p>
                    <form id="msform" action="">
                        <!-- 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 KPMD</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">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Nama Lengkap</label>
                                        <input type="text" class="form-control" name="nama">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Pangkat/Golongan</label>
                                        <input type="text" class="form-control" name="percentage">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Jabatan</label>
                                        <input type="text" class="form-control" name="jabatan">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Instansi</label>
                                        <input type="text" class="form-control" name="instansi">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Kabupaten</label>
                                        <input type="text" class="form-control" name="kabupaten">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="fieldlabels">No. HP</label>
                                        <input type="text" class="form-control" name="NoHP">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="fieldlabels">Pesan</label>
                                        <textarea type="text" class="form-control" name="pesan"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <label class="fieldlabels">Alamat</label>
                                        <textarea type="text" class="form-control" name="alamat"></textarea>
                                    </div>
                                </div>
                            </div>
                            <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 KPMD</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%">
                                                <option selected>Pendidikan</option>
                                                <option value="1">SMP</option>
                                                <option value="2">SMA</option>
                                                <option value="3">Sarjana</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label class="fieldlabels">Potensi SDA</label>
                                            <select class="form-select" aria-label="Potensi SDA" style="width:100%">
                                                <option selected>Potensi SDA</option>
                                                <option value="1">Pertanian</option>
                                                <option value="2">Peternakan</option>
                                                <option value="3">Perikanan</option>
                                                <option value="4">Perkebunan</option>
                                                <option value="5">Kehutanan</option>
                                            </select>
                                        </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">
                                        <div class="form-group">
                                            <label class="fieldlabels">Potensi Kelembagaan</label>
                                            <select class="form-select" aria-label="Potensi Kelembagaan"
                                                style="width:100%">
                                                <option selected>Potensi Kelembagaan</option>
                                                <option value="1">Kelembagaan Adat</option>
                                                <option value="2">Kelembagaan Sosial</option>
                                            </select>
                                        </div>
                                        <label>Kampung Binaan</label>
                                        <input type="text" class="form-control" name="kampung-binaan">
                                        <label>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> SUMATERA BARAT </strong></h5>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Nama Lengkap</div>
                                    <div class="col">: Tsalsabila Jilhan Haura</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">NIP</div>
                                    <div class="col">: 241242313123131</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Pangkat / Golongan</div>
                                    <div class="col">: lektor/VB</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jabatan</div>
                                    <div class="col">: Rektor</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Instansi</div>
                                    <div class="col">: Politeknik Negeri Padang</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Alamat</div>
                                    <div class="col">: Balai Baru</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Pesan</div>
                                    <div class="col">: jdanajvnadjlvnadjvnadjlv</div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-4">Nama Distrik</div>
                                    <div class="col">: klaskj</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jumlah Kampung</div>
                                    <div class="col">: 23</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jumlah Penduduk</div>
                                    <div class="col">: 20</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">: Sarjana</div>
                                </div>
                                {{-- <div class="row">
                                    <div class="col-4 custom-col-4">
                                        Potensi SDA<br>
                                        &emsp;1.&emsp; Pertanian<br>
                                        &emsp;2.&emsp; Perternakan<br>
                                        &emsp;3.&emsp; Perikanan<br>
                                        &emsp;4.&emsp; Perkebunan
                                    </div>
                                    <div class="col-4">
                                        <div class="col">: hewani</div>
                                        <div class="col">: hewani</div>
                                    </div>
                                </div> --}}
                                <div class="row">
                                    <div class="col-4">Potensi SDA</div>
                                    <div class="col">: Perhutanan</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Potensi Kelembagaan</div>
                                    <div class="col">: Kelembagaan Sosial</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Potensi Aset</div>
                                    <div class="col">: baik</div>
                                </div>

                                <div class="row">
                                    <div class="col-4 custom-col-4">
                                        Potensi Kelembagaan<br>
                                        &emsp;1.&emsp; Kelembagaan Adat<br>
                                        &emsp;2.&emsp; Kelembagaan Sosial
                                    </div>
                                    <div class="col-4">
                                        <div class="col">: hewani</div>
                                        <div class="col">: hewani</div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-4">Jenis Usaha BUMDes</div>
                                    <div class="col">: hewani</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">: 13 KM</div>
                                        <div class="col">: 7 KM</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Kampung Binaan</div>
                                    <div class="col">: tole iskandar</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Jenis Pelatihan Yang sudah pernah diikuti</div>
                                    <div class="col">: none</div>
                                </div>
                                <div class="row">
                                    <div class="col-4">Sharing Information</div>
                                    <div class="col">
                                        : afajfjahvadjvnadlvahvajvahkjvhvjhadvhadvgadkgvvavadg
                                    </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>
            $(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() {
                    current_fs = $(this).parent();
                    next_fs = $(this).parent().next();
                    //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