@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">
                                      <div class="timeline left">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3>2017</h3>
                                            <p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="timeline right">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3>2016</h3>
                                            <p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="timeline left">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3>2015</h3>
                                            <p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="timeline right">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3>2012</h3>
                                            <p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="timeline left">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3>2011</h3>
                                            <p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="timeline right">
                                        <div class="card">
                                          <div class="card-body p-4">
                                            <h3>2007</h3>
                                            <p class="mb-0">Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </section>
                        </div>
                        
                    </div>
                </div>
                
            </div>
        </form>
    </div>
</div>
@endsection
@section('page-js')
<script type="text/javascript">
    $(document).ready(function() {
      $('input[type="checkbox"], input[type="radio"], input[type="text"], textarea').attr('disabled', true);
    });

   $('.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