@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>
                    <div class="card-body">
                        @if (session()->has('pesan'))
                            <div class="alert alert-success" role="alert">
                                {{ session('pesan') }} </div>
                        @endif
                    </div>
                    <form id="msform" action="/data-distrik-kpmd" method="POST">
                        @csrf
                        <fieldset>
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-7">
                                        <h2 class="fs-title">Data Distrik</h2>
                                    </div>
                                </div>
                                <div>
                                    <label class="fieldlabels">Nama Distrik</label>
                                    <input type="text" class="form-control" name="nama_distrik">
                                    @error('nama_distrik')
                                        <p class="text text-danger">
                                            {{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="fieldlabels">Jumlah
                                        Kampung</label>
                                    <input type="text" class="form-control" name="jumlah_kampung">
                                    @error('jumlah_kampung')
                                        <p class="text text-danger">
                                            {{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="fieldlabels">Jumlah
                                        Penduduk</label>
                                    <input type="text" class="form-control" name="jumlah_penduduk">
                                    @error('jumlah_penduduk')
                                        <p class="text text-danger">
                                            {{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="text-right">
                                <button class="btn btn-success">Next</button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection