@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
@endsection
@section('content')
<div class="subheader">
    <h1 class="subheader-title">
        {{$title}}
    </h1>
</div>
<div class="row">
    <div class="col-lg-12 mb-2 d-none" id="filter">
        <div class="card">
            <div class="card-body">
                <h5 class="mb-4"><i class="fal fa-filter"></i>&nbsp;Filter</h5>
                <div class="row">
                    <div class="col-md-12 mb-2">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select class="form-control select2">
                                        <option value="">-- PILIH TINGKAT --</option>
                                        <option value="1">SD</option>
                                        <option value="2">SMP</option>
                                        <option value="3">SMA</option>
                                        <option value="4">SMK</option>
                                        <option value="5">MI</option>
                                        <option value="6">MTs</option>
                                        <option value="7">MA</option>
                                        <option value="8">SD LB</option>
                                        <option value="9">SMP LB</option>
                                        <option value="10">SMA LM</option>
                                        <option value="11">SLB Khusus</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select class="form-control select2">
                                        <option value="">-- PILIH STATUS --</option>
                                        <option value="Negeri">Negeri</option>
                                        <option value="Swasta">Swasta</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select class="form-control select2">
                                        <option value="">-- PILIH LEVEL --</option>
                                        <option value="1"> LEVEL 1</option>
                                        <option value="2"> LEVEL 2</option>
                                        <option value="3"> LEVEL 3</option>
                                        <option value="4"> LEVEL 4</option>
                                        <option value="5"> LEVEL 5</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select class="form-control select2">
                                        <option value="">-- PILIH JENIS USULAN --</option>
                                        <option value="1">Kab/Kota</option>
                                        <option value="2">Provinsi</option>
                                        <option value="3">Nasional</option>
                                        <option value="4">Mandiri</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select name="provinsi" class="form-control select2" id="provinsi">
                                        <option value="0">- PILIH PROVINSI -</option>
                                        @foreach($provinsi as $datProv)
                                        <option value="{{encode_id($datProv->MsProvinsiId)}}">{{$datProv->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select name="kabupaten" class="form-control select2" id="kabupaten">
                                        <option value="0">- PILIH KABUPATEN/KOTA -</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <select name="kecamatan" class="form-control select2" id="kecamatan" required>
                                        <option value="0">- PILIH KECAMATAN -</option>
                                    </select>
                                </div>
                            </div>  
                            <div class="col-md-3">
                                <div class="form-group">
                                    <button class="btn btn-success btn-block"><i class="fal fa-search"></i>&nbsp;Cari Data</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div id="panel-4" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div id="toolbar">
                        <a class="btn btn-secondary btn-filter btn-sm text-white"><i class="fal fa-filter text-white"></i>&nbsp;Filter</a>
                    </div>
                    <table class="table w-100" 
                    data-search="true"
                    data-toggle="table"
                    data-pagination="true"
                    data-toolbar="#toolbar"
                    data-show-refresh="false"
                    data-url="{{route($route.'.grid')}}"
                    data-sort-name="ids"
                    data-sort-order="desc"
                    data-page-size="10"
                    data-id-field="id"
                    id="grid-data">
                      <thead class="text-white">
                        <tr class="bg-primary-light text-primary">
                          <th data-field="action">#</th>
                          <th data-field="no">No</th>
                          <th data-field="tahun">Tahun</th>
                          <th data-field="jenis_usulan">Usulan CSA</th>
                          <th data-field="npsn">NPSN</th>
                          <th data-field="nama">Nama Sekolah</th>
                          <th data-field="wilayah">Wilayah</th>
                          <th data-field="usulan" width="60%">File</th>
                          <th data-field="labelDok">Status</th>
                        </tr>
                      </thead>
                      <tbody></tbody>
                  </table>
                    <!-- datatable end -->
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <form action="#" method="POST" enctype="multipart/form-data" id="form" style="width: 100%;">
            {{csrf_field()}}
            <input type="hidden" name="secure_id" class="secure_id" value="">
            <div class="modal-content">
                <div class="modal-header">
                    <h5><b>{{$title}}</b></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert bg-primary-light text-primary mb-2">
                        <p class="mb-0"><i>Silahkan Upload Kembali File, Untuk Update Data</i></p>
                    </div>
                    <div class="bodyModal"></div>
                </div>
                @if(session('group_alias') == 'sekolah')
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btnSave">Simpan</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                </div>
                @endif
            </div>
        </form>
    </div>
</div>
@endsection
@section('page-js')
<script src="{{asset('assets/js/datagrid/datatables/datatables.bundle.js')}}"></script>
<script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
<script type="text/javascript">
    $('.btn-filter').on('click',function(){
        $('#filter').toggleClass('d-none');
    });
    $("#grid-data").on("click", ".toggle-row", function() {
        let btn = $(this);
        let row = btn.closest("tr");
        let icon = btn.find("i");
        let jenis_usulan = $(this).attr('data-jenisusulan');
        let link = $(this).attr('data-link');

        if (row.next().hasClass("extra-row")) {
            row.next().remove(); // Hapus jika sudah ada
            icon.removeClass("btn-secondary").addClass("btn-secondary");
        } else {
            let newRow = `
                <tr class="extra-row">
                    <td colspan="8">
                        ${jenis_usulan} <br>`
                        if(link != ''){

                       newRow += `<a class="btn btn-primary btn-xs" href="${link}" target="_blank"><i class="fal fa-link"></i>&nbsp;Link Lampiran</a>`;
                        }
                    newRow += `</td>
                </tr>
            `;
            row.after(newRow);
            icon.removeClass("btn-secondary").addClass("btn-secondary");
        }
    });

    $("#grid-data").on("click", ".tolak", function() {
        var base_url = $(this).attr('data-href');
        var id = $(this).attr('data-id');
        swal({
             title: "Tolak Dokumen!",
             text: "Apa anda yakin ingin tolak Dokumen ini ?",
             type: "warning",
             showCancelButton: true,
             confirmButtonColor: "#BF3131",
             confirmButtonText: "Tolak Sekarang",
             cancelButtonText: "Batal",
             closeOnConfirm: true,
             closeOnCancel: true
         },
         function(isConfirm) {
            if(isConfirm){
              
              request = $.ajax({
                  url: base_url,
                  type: "GET",
              });

              // Callback handler that will be called on success
              request.done(function(response, textStatus, jqXHR){
                  console.log(response);
                  toastr.success("Berhasil Login", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
                  window.location.href = '{{url("/usulan/adiwiyata/administrasi")}}';
                  history.pushState(null, null, location.href);
                  window.onpopstate = function () {
                      history.go(1);
                  };
              });

              // Callback handler that will be called on failure
              request.fail(function (jqXHR, textStatus, errorThrown){
                  toastr.error(
                      "Gagal "+textStatus, errorThrown
                  );
              });
            }
         }); 
        return false;
    });
    $("#grid-data").on("click", ".verifikasi", function() {
        var base_url = $(this).attr('data-href');
        var id = $(this).attr('data-id');
        swal({
             title: "Verifikasi Dokumen!",
             text: "Apa anda yakin ingin verifikasi Dokumen ini ?",
             type: "warning",
             showCancelButton: true,
             confirmButtonColor: "#3F7D58",
             confirmButtonText: "Approve Sekarang",
             cancelButtonText: "Batal",
             closeOnConfirm: true,
             closeOnCancel: true
         },
         function(isConfirm) {
            if(isConfirm){
              
              request = $.ajax({
                  url: base_url,
                  type: "GET",
              });

              // Callback handler that will be called on success
              request.done(function(response, textStatus, jqXHR){
                  console.log(response);
                  toastr.success("Berhasil Login", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
                  window.location.href = '{{url("/usulan/adiwiyata/administrasi")}}';
                  history.pushState(null, null, location.href);
                  window.onpopstate = function () {
                      history.go(1);
                  };
              });

              // Callback handler that will be called on failure
              request.fail(function (jqXHR, textStatus, errorThrown){
                  toastr.error(
                      "Gagal "+textStatus, errorThrown
                  );
              });
            }
         }); 
        return false;
    });
    $('#grid-data').on('click',".btnModal", function(e) {
        $('.jenisusulan').html($(this).attr('data-jenisusulan'));
        $('.secure_id').val($(this).attr('data-secureid'));
        var assetURL = '{{asset("uploads")}}';
        var link = $(this).attr('data-link');
        var level = $(this).attr('data-level');
        var filetim = $(this).attr('data-filetim');
        var fileusulan = $(this).attr('data-fileusulan');
        var div = '';
        div += '<table class="table deleted table-nobordered wrap">';
            if(level == 0){
                div += '<tr>';
                    div += '<td width="20%">';
                        div += '<div>SK Tim Adiwiyata</div>';
                    div += '</td>';
                    div += '<td>';
                        div += '<input type="file" accept=".pdf" class="form-control is-required" name="sk_tim_adiwiyata">';
                        if(filetim != ''){
                            div += '<br><a href="'+assetURL+'/'+filetim+'" class="btn btn-sm btn-warning"><i class="fal fa-download  "></i> File SK Tim Adiwiyata</a> <br>';    
                        }
                        div += '<small class="text-danger">Format : .pdf, Maksimal File : 2MB</small>';
                    div += '</td>';
                div += '</tr>';
                div += '<tr>';
                    div += '<td width="20%">';
                        div += '<div>Surat Usulan</div>';
                    div += '</td>';
                    div += '<td>';
                        div += '<input type="file" accept=".pdf" class="form-control is-required" name="surat_usulan">';
                         if(fileusulan != ''){
                            div += '<br><a href="'+assetURL+'/'+fileusulan+'" class="btn btn-sm btn-warning"><i class="fal fa-download   "></i> File Usulan</a> <br>';    
                        }
                        div += '<small class="text-danger">Format : .pdf, Maksimal File : 2MB</small>';
                    div += '</td>';
                div += '</tr>';
            }else{
                div += '<tr>';
                    div += '<td width="50%">';
                        div += '<div>'+$(this).attr('data-jenisusulan')+'</div>';
                    div += '</td>';
                    div += '<td>';
                        div += '<input type="file" accept=".pdf" class="form-control is-required" name="file">';
                        div += '<small class="text-danger">Format : .pdf, Maksimal File : 2MB</small>';
                    div += '</td>';
                div += '</tr>';
            }
            div += '</table>';

            $('.bodyModal').html(div);


        if(link != ''){
            $('.link').show();
            $('.link').attr('href',link);
        }else{
            $('.link').hide();
            $('.link').attr('href','');
        }
    });
    $('#btnSave').on('click',function(e){
        e.preventDefault();
        let form = $('#form')[0];
        let formData = new FormData(form); 
        let isValid = true; // Flag validasi

        // Validasi manual field required
        $('.is-required').each(function () {
            let value = $(this).val()?.trim();
            if (!value) {
                isValid = false;
                $(this).addClass("is-invalid");
            } else {
                $(this).removeClass("is-invalid");
            }
        });

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

        $.ajax({
            url: "{{route($route.'.store')}}", // Ganti dengan URL API-mu
            type: 'POST', // Bisa juga 'POST' kalau perlu
            data: formData,
            processData: false, // Penting untuk FormData
            contentType: false, // Penting untuk FormData
            dataType: 'json', // Format respons JSON
            beforeSend: function () {
                $('#loading-spinner').show(); // Menampilkan spinner
            },
            success: function (response) {
                if(response.status == true){
                    toastr.success("Berhasil menyimpan data", 'Success!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
                }else{
                    toastr.warning(response.message, {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
                }
                location.reload();
            },
            error: function (xhr, status, error) {
                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
            }
        });
    });
    $('select').on("select2:selecting", function(e) {
              var selectorOrigin = this.id;
              var id = e.params.args.data.id;
              
              
              if(selectorOrigin=='provinsi'){
                $('#loading-spinner').show();
                clear('kabupaten');
                selector = 'kabupaten';
                url_to = 'kabupaten';
                getSelect(id, selector, url_to);
              }

              if(selectorOrigin=='kabupaten'){
                $('#loading-spinner').show();
                clear('kecamatan');
                selector = 'kecamatan';
                url_to = 'kecamatan';
                getSelect(id, selector, url_to);
              }
              if(selectorOrigin=='kecamatan'){
                $('#loading-spinner').show();
                clear('sekolah');
                selector = 'sekolah';
                url_to = 'sekolah';
                getSelect(id, selector, url_to);
              }
            });

            function clear(elementId) {
              $('#' + elementId).empty();
              $('#' + elementId).select2();
            }

            function getSelect(id, selectTo, urlTo, selected = "") {
                id = id;
                var base_url = "{{url('/')}}";
                //alert(id);
                destino = "#" + selectTo;
                valor = $('#' + id).find(":selected").val();

                $.ajax({
                        method: "POST",
                        url: base_url + "/get/" + urlTo,
                        data: {
                        _token: '{{csrf_token()}}',
                            id: id
                        }
                    }).done(function(msg) {
                      obj = msg.data;

                      if (obj.length > 0) {
                        //Clear the current options
                        $(destino).empty();
                        
                        if(selectTo=='kabupaten'){
                          $(destino).append('<option value="">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");


                          
                          $.each(obj, function(index) {
                            value = obj[index].id;
                            text = obj[index].name;
                            $(destino).append('<option value=' + value + '>' + text + '</option>');
                          });
                          console.log(selected)
                          if (selected) {
                            $(destino).val(selected).trigger('change');
                            selected = "";
                          }
                        }

                        if(selectTo=='kecamatan'){
                          $(destino).append('<option value="">-PILIH KECAMATAN-</option>').select2("val", "0");
                          
                          $.each(obj, function(index) {
                            value = obj[index].id;
                            text = obj[index].name;
                            $(destino).append('<option value=' + value + '>' + text + '</option>');
                          });
                          console.log(selected)
                          if (selected) {
                            $(destino).val(selected).trigger('change');
                            selected = "";
                          }
                        }

                        
                      } else {

                        if(selectTo=='provinsi'){
                          $(destino).empty().append('<option value="0">-PILIH PROVINSI-</option>').select2("val", "0");
                        }
                        if(selectTo=='kabupaten'){
                          $(destino).empty().append('<option value="0">-PILIH KABUPATEN/KOTA-</option>').select2("val", "0");
                        }
                        if(selectTo=='kecamatan'){
                          $(destino).empty().append('<option value="0">-PILIH KECAMATAN-</option>').select2("val", "0");
                        }
                        
                      }
                      $('#loading-spinner').hide();
                    });
                  return false;
            }
</script>
@endsection