@extends('layouts.master')

@section('page-css')
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
<style type="text/css">
    /* The actual timeline (the vertical ruler) */
.main-timeline {
  position: relative;
}

/* The actual timeline (the vertical ruler) */
.main-timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #939597;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline {
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -13px;
  background-color: #939597;
  border: 5px solid #F5DF4D;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  padding: 0px 40px 20px 0px;
  left: 0;
}

/* Place the container to the right */
.right {
  padding: 0px 0px 20px 40px;
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -12px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline::after {
    left: 31px;
  }

  /* Full-width containers */
  .timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .timeline::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 18px;
  }

  .left::before {
    right: auto;
  }

  /* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}

    .listItem{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .listItem > li{
        display: inline-block;
        margin: 10px;
    }
    .listItem > li:hover{
        cursor: pointer;
    }
    .listItem > li .number{
        font-size: 14px;
        color: #fff;
        background: #0ba360 !important;
        padding: 10px;
        border-radius: 10%;
    }
    .level{
        float: right;
        color: #fff;
        text-align: center;
        width: 100px;
    }
    .nav-link{
        border-radius: 0px!important;
    }
    .pageNumber{ list-style:none; padding:0px; margin: 0px;}
    .pageNumber > li{ display: inline-block; padding: 12px; background: rgba(255, 255, 255, 0.5); margin: 5px 1px;}
    .pageNumber > li:hover{cursor: pointer;}
    .pageNumber > li.active {
        background-color: #007bff; /* Warna biru */
        color: white;
        font-weight: bold;
    }
</style>
@endsection
@section('content')
<div class="subheader">
    <h1 class="subheader-title">
        <i class='subheader-icon fal fa-edit'></i> {{$title}}
    </h1>
</div>
<div class="row">
    <div class="col-lg-12">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form method="POST" id="form">
        {{csrf_field()}}
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 p-3">
                            <table class="" border="0" style="width:100%">
                                <tr>
                                    <td rowspan="5" width="5" style="vertical-align: middle; padding-right: 10px;">
                                        <i class="fal fa-building fa-5x"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"><h5 class="text-success">NPSN: {{session('npsn')}}</h5></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><h4><b>{{session('name')}}</b></h4></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><span class="badge badge-primary">{{session('tingkat_sekolah')}}</span> <span class="badge badge-success">{{session('status_sekolah')}}</span></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><p>{{session('alamat_sekolah')}}</p></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-12">
                            <div class="alert alert-warning">
                                <p class="mb-0"><i class="fal fa-info-circle"></i>&nbsp;Anda Belum Melakukan Finalisasi Proses Data Kriteria</p>
                                <p class="mb-0"><i class="fal fa-info-circle"></i>&nbsp;Klik <b class="text-danger">Progress Usulan</b> untuk melakukan Finalisasi Proses Data Kriteria</p>
                            </div>
                        </div>
                        <div class="col-md-12 mb-4" style="background: rgba(23, 162, 184, 0.2) !important;">
                            <ul class="pageNumber">
                                <li class="back"><i class="fal fa-arrow-left"></i></li>
                                <li class="resume">Resume</li>
                                <li class="progress_usulan active">Progress Usulan</li>
                            </ul>
                        </div>
                        <div class="col-md-12 bodyInput">
                            <section style="background-color: #F0F2F5;">
                                  <div class="container py-5">
                                    <div class="main-timeline">
                                    @foreach($log as $logs)
                                      <div class="timeline left">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3><b>{{\Str::title(str_replace('_',' ',$logs->step))}}</b></h3>
                                            <p class="mb-0">Oleh : {{user($logs->created_by)->name}} <span class="badge badge-primary">{{group($logs->created_by)->name}}</span></p>
                                            <p class="mb-0">Tanggal : {{$logs->created_at}}</p>
                                          </div>
                                        </div>
                                      </div>
                                      @endforeach

                                    <div class="timeline left">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3><b>Status Usulan</b></h3>
                                            <?php
                                                if(($kuesioner->level+1) == 1){
                                                    $jenis_usulan = 'Kabupaten/Kota';
                                                }elseif(($kuesioner->level+1) == 2){
                                                    $jenis_usulan = 'Provinsi';
                                                }elseif(($kuesioner->level+1) == 3){
                                                    $jenis_usulan = 'Nasional';
                                                }elseif(($kuesioner->level+1) == 4){
                                                    $jenis_usulan = 'Mandiri';
                                                }
                                            ?>
                                            <p class="">
                                                Sekolah diusulan untuk menjadi CSA (Calon Sekolah Adiwiyata) <b>{{$jenis_usulan}}</b><br>
                                            </p>
                                            <span class="text-primary">Silahkan lengkapi data pada menu Usulan Adiwiyata. </span>
                                          </div>
                                        </div>
                                      </div>
                                     
                                      <div class="timeline right">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3><b>Kirim Kelengkapan Data</b></h3>
                                            <p>Kab/Kota akan melakukan validasi, jika data sekolah lengkap akan diproses. apabila data belum lengkap akan dikembalikan ke sekolah untuk melakukan perbaikan. </p>
                                            <p class="text-primary">Pastikan NPSN, Profile, Dok Adminstrasi, Sekolah Binaan (CSAM) dan Pemenuhan Kriteria sudah sesuai.</p>
                                            <ul>
                                                <li>Dokumen Administrasi <span class="badge badge-danger">Belum Lengkap</span></li>
                                                <li>Pemenuhan Kriteria /29 <span class="badge badge-danger">Belum Lengkap</span></li>
                                            </ul>
                                            <div class="custom-control custom-checkbox m-2">
                                                <input type="checkbox" class="custom-control-input is-required" id="true" value="1" name="true">
                                                <label class="custom-control-label" for="true">Dengan ini menyatakan bahwa kelengkapan data sudah benar.</label>
                                            </div>
                                            <button class="btn btn-success">Kirim Data</button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </section>
                        </div>
                        
                    </div>
                </div>
                
            </div>
        </form>
    </div>
</div>
@endsection
@section('page-js')
<script type="text/javascript">

   $('.page').on('click',function(e){
        e.preventDefault();
        let number = $(this).data('number');
        let base_url = "{{url('/')}}";
        // Tambahkan kelas active dan hapus dari yang lain
        $('.page').removeClass('active');
        $(this).addClass('active');

        $.ajax({
            url: base_url+'/getForm', // Ganti dengan URL API-mu
            type: 'POST', // Bisa juga 'POST' kalau perlu
            data: { 
                _token:'{{csrf_token()}}',
                page: number 
            }, // Kirim number sebagai parameter
            dataType: 'json', // Format respons JSON
            beforeSend: function () {
                $('#loading-spinner').show(); // Menampilkan spinner
                $('.removeFormKriteria').remove();
            },
            success: function (response) {
                console.log('Response:', response);
                $('.changeForm').append(response.data);
                $('.changeTitle').html(response.title);

                $('.numberInput').on('input', function() {
                    this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
                });
            },
            error: function (xhr, status, error) {
                console.error('AJAX Error:', status, error);
                alert('Failed to fetch data!');
            },
            complete: function () {
                $('#loading-spinner').hide(); // Sembunyikan spinner setelah request selesai
            }
        });        
   });

   $('.back').on('click',function(e){
        window.location.href = "{{url('usulan/kriteria')}}";
   });

   $('.progress_usulan').on('click',function(e){
        window.location.href = "{{url('usulan/kriteria/progress/'.encode_id(session('sekolah_id')))}}";
   });

   $('#btnSave').on('click',function(e){
        e.preventDefault();
        let currentForm = $("#form").serializeArray();
        console.log(currentForm);

        let formData = {};
        let allData = {};
        let isValid = true; // Flag validasi

        currentForm.forEach(field => {
            let name = field.name.replace(/\[\]$/, ''); // Hapus "[]" di akhir nama input

            if (allData[name]) {
                if (!Array.isArray(allData[name])) {
                    allData[name] = [allData[name]];
                }
                allData[name].push(field.value);
            } else {
                allData[name] = field.value;
            }
        });

        $('.is-required').each(function () {
            let type = $(this).attr('type');
            let name = $(this).attr('name');
            let value = $(this).val()?.trim(); // Pastikan nilai di-trim untuk menghindari spasi kosong

            if (type === 'radio' || type === 'checkbox') {
                // Validasi radio: setidaknya satu opsi harus dipilih
                if ($(`input[name="${name}"]:checked`).length === 0) {
                    isValid = false;
                    $(`input[name="${name}"]`).closest('.custom-control-input').addClass("is-invalid");
                } else {
                    $(`input[name="${name}"]`).closest('.custom-control-input').removeClass("is-invalid");
                }
            } else {
                // Validasi input teks atau lainnya
                if (!value) {
                    isValid = false;
                    $(this).addClass("is-invalid");
                } else {
                    $(this).removeClass("is-invalid");
                }
            }
        });

        // Jika validasi gagal, hentikan submit
        if (!isValid) {
            toastr.error("Harap isi semua field yang wajib diisi", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
            // alert(".");
            return;
        }

        $.ajax({
            url: "{{route($route.'.store')}}", // Ganti dengan URL API-mu
            type: 'POST', // Bisa juga 'POST' kalau perlu
            data: { 
                _token:'{{csrf_token()}}',
                data: allData 
            }, // Kirim number sebagai parameter
            dataType: 'json', // Format respons JSON
            beforeSend: function () {
                $('#loading-spinner').show(); // Menampilkan spinner
            },
            success: function (response) {
                // console.log('Response:', response);
                toastr.success("Berhasil menyimpan data", 'Success!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});

                
                $('.page').closest('.active').addClass('bg-success');
                $('.page').closest('.active').addClass('text-white');
                $('.page').removeClass('active');
                // (checkPenilaian($hal) == true ? 'bg-success text-white' : '' )
            },
            error: function (xhr, status, error) {
                // console.error('AJAX Error:', status, error);
                // alert('Failed to fetch data!');
                toastr.error("Maaf Terjadi Kesalahan Menyimpan Data", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
            },
            complete: function () {
                $('#loading-spinner').hide(); // Sembunyikan spinner setelah request selesai
            }
        });

   });
</script>
@endsection