@extends('layouts.master')

@section('title', 'Riwayat Penilaian')

@section('breadcrumb')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">Sinkronisasi Pelaporan ESR</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active"> Hasil Penilaian</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid" id="rowTabel" >
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-1">
                            <div class="col-sm-4">
                            <div class="form-group">
                                <label>Periode</label> 
                                <select name="periode_id" id="periode_id" class="form-control"   style="width: 100%;" onchange="getDatas()">
                                @foreach ($periode as $per)
                                @if ($per->id == $periodeAktif->id)
                                <option value="{{$per->id}}" selected>{!!Carbon\Carbon::parse($per->tgl_awal)->format('d-m-Y').' '.'<b> S/d </b>'.' '.Carbon\Carbon::parse($per->tgl_akhir)->format('d-m-Y')!!}</option>
                                @else
                                <option value="{{$per->id}}">{!!Carbon\Carbon::parse($per->tgl_awal)->format('d-m-Y').' '.'<b> S/d </b>'.' '.Carbon\Carbon::parse($per->tgl_akhir)->format('d-m-Y')!!}</option>
                                @endif
                                        
                                    @endforeach
                                </select>
                            </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <table id="table" class="table table-bordered table-hover dataTable dtr-inline" role="grid"
                                    style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th width="5%"></th>
                                            <th width="10%">No</th>
                                            <th style="display: none;">id</th>
                                            <th>Komponen ESR</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
<script>
     var table;
     var trDetil;
     $(document).ready(function() {
        getDatas();
    });

       function getDatas() {
            var periode_id = $('#periode_id').val();
            table= $('#table').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                destroy: true,
                ajax: {
                    url: '{{ route('sinkronesr.datapenilaian') }}',
                    type: 'POST',
                    data: {periode_id:periode_id,_token: "{{ csrf_token() }}"},
                },
                columns: [
                    {
                className: 'details-control',
                orderable: false,
                data: null,
                defaultContent: ''
                , searchable: false},
                    {
                        data: null,
                        name: 'no',
                        searchable: false,
                        orderable: false,
                    },
                    {
                        data: 'id',
                        name: 'id',
                        visible: false,
                    },
                    {
                        data: 'dokumen',
                        name: 'dokumen',
                    },
                ],
                order: [
                    [1, 'asc']
                ],
                oLanguage: {
                    sProcessing: "Memuat Data.."
                },
                fnCreatedRow: function(row, data, index) {
                    $('td', row).eq(1).html(index + 1);
                },
            });
        }

        $(document).on('click', 'td.details-control', function(){ 
        trDetil=$(this).closest('tr');
        var periode_id = $('#periode_id').val();
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
            tr.removeClass( 'details' );
        } else {
        $.ajax({
            url: '{{ route('sinkronesr.datapenilaianDetil') }}',
          type:'POST',
          dataType: 'html',
          cache: false,
          data:{id_dokumen:row.data().id,periode_id:periode_id,_token: "{{ csrf_token() }}"},
		    success: function(html){
                // console.log(row.data().id_kelompok_tani);
                row.child(html).show();
                tr.addClass('shown');
                tr.addClass( 'details' );

                    }
		   });  
        }
    });

    $(document).on('click', '#Sinkron', function(){ 
            var bukti_id = $(this).attr("bukti_id");
            var dokumen_esr_id =  $(this).attr("dokumen_esr_id");
            var pelaporan_id =  $(this).attr("pelaporan_id");
            var nama = $(this).closest('tr').find('.nama').text()
            swalWithBootstrapButtons.fire({
                title: 'Anda yakin mengirim dokumen' + ' ' + nama + ' ' + 'ke esr.kemenpan.go.id?',
                icon: 'warning',
                showCancelButton: true,
                cancelButtonText: 'Batal',
                confirmButtonText: 'Kirim',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    // $.LoadingOverlay("show",{size:10});
                    $.ajax({
                        url:"{{ route('sinkronesr.sinkronesr') }}",
                        type: 'POST',
                        dataType:'json',
                        cache: false,
                        data: {
                            bukti_id: bukti_id,
                            dokumen_esr_id: dokumen_esr_id,
                            pelaporan_id:pelaporan_id,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(data) {
                            // $.LoadingOverlay("hide");
                            var row = table.row(trDetil);
                            row.child.hide();
                            trDetil.removeClass('shown');
                            trDetil.removeClass( 'details' );
                            trDetil.find('td.details-control').trigger("click");
                            if(data.status==1){
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Informasi',
                                    text: 'Berhasil Mengirim Data'
                                });
                            }else{
                                // Swal.fire({
                                //     icon: 'error',
                                //     title: 'Gagal Menyimpan Data',
                                //     text: 'Koneksi Terputus..'
                                // });
                            }
                        }, error: function(request, status, error) {
                            // $.LoadingOverlay("hide");
                            //     Swal.fire({
                            //         icon: 'error',
                            //         title: 'Gagal Menyimpan Data',
                            //         text: 'Koneksi Terputus..'
                            //     });
                        }
                    });
                }
            })

    });
</script>

@endsection