@extends('template.app') 
 
@section('navbarNav') 
    <div class="" id="navbarNav">
        <ul class="navbar-nav" id="leftNav">
            <li class="nav-item">
            <a class="nav-link" id="sidebar-toggle" href="#"><i data-feather="arrow-left"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url('dashboard') }}">Dashboard</a>
            </li>  
            <li class="nav-item">
                <a class="nav-link" href="{{ url('indikator/parent') }}">Parent Indikator</a>
            </li>
        </ul>
    </div>
@endsection

@section('content') 

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-lg-6 main-header"> 
                <!-- <h2><span>Data Master Parent Indikator </span></h2> -->
                
            </div> 
            <div class="col-lg-6 main-header" style="text-align: end;"> 
                <a href="javascript:void(0);" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addModal">Tambah Data  
                    <span class="btn-icon-end"><i class="fa fa-envelope"></i></span>
                </a> 
            </div>   
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="row"> 
            <div class="col-xl-12 xl-100 box-col-12">
                <div class="card stat-widget">
                    <div class="card-body">
                        <table id="datatable" class="table dt-responsive w-100">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th> 
                                    <th>Aksi</th>  
                                </tr>
                            </thead> 
                        </table>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>

    <!-- Modal Add -->
    <div class="modal fade" id="addModal" tabindex="-1">   
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <form class="form formAdd" method="post" enctype="multipart/form-data"> 
                    <div class="modal-body"> 
    
                        <div class="mb-3 row">
                            <label class="col-sm-3 col-form-label">Nama Parent</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control input-default " name="name" required>
                            </div>
                        </div>
                        
                        <input hidden type="text" name="status" value="1">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger light btn-sm" data-bs-dismiss="modal">Keluar</button>
                        <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Modal Edit -->
    <div class="modal fade" id="editModal" tabindex="-1">   
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <form class="form formEdit" method="post" enctype="multipart/form-data"> 
                    <div class="modal-body"> 
    
                        <input type="text" class="form-control input-default " name="id" hidden required>
                        <div class="mb-3 row">
                            <label class="col-sm-3 col-form-label">Nama Parent</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control input-default " name="name" required>
                            </div>
                        </div>

                        <input hidden type="text" name="status" value="1">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger light btn-sm" data-bs-dismiss="modal">Keluar</button>
                        <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>  
@endsection
@section('js')
    <script>
        var kolom = new Array();
        var detailDataTable; 
        $(document).ready(function() { 

            url = "{{url('api/parent-indikator')}}";
            kolom.push({
                data: 'DT_RowIndex',
                name: 'id'
            }, {
                data: 'name',
                name: 'name'
            }, {
                data: null,
                name: null
            });
            detailDataTable = $('#datatable').DataTable({
                responsive: true,
                // scrollX: true, 
                sDom: '<"dt-panelmenu clearfix"Bflr>t<"dt-panelfooter clearfix"ip>',
                buttons: ["excel", "pdf"],
                oLanguage: {
                    sSearch: 'Search:'
                },
                processing: true,
                serverSide: true,
                serverMethod: 'GET',
                ajax: {
                    url: url,
                    data: function(data) {
                        // console.log(data);
                        data.dataTable = true;  
                        // data.start = data.start ;
                        // data.length = data.length;
                        // data.page = data.draw;
                        // data.filter[] = 'id_jenis'; 
                        // data.filterValue[] = filter; 
                        // console.log(data);
                    },
                    beforeSend: function(xhr, settings) {

                    }, 
                }, 
                columns: kolom,
                order: [[ 0, 'desc' ]],
                createdRow: function ( row, data, index ){   
                    $('td', row).eq(2).html(`
                        <div class="d-flex">
                            <a href="javascript:void(0);" onClick="editBtn(${data.id})" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>
                            <a href="javascript:void(0);" onClick="destroy(${data.id})" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>
                        </div>	
                    `);
                },
                drawCallback: function(settings) {
                
                }
            });
        });

        $(".formAdd").submit(function(e) {
            $(".loader-wrapper").fadeIn(300);
            e.preventDefault(); 
            var formData = new FormData($('.formAdd')[0]); 
            $.ajax({
                url: "{{url('api/parent-indikator')}}",
                method: "POST",
                data: formData,
                dataType: 'JSON',
                contentType: false,
                processData: false,  
                success: function (data) {
                    $(".loader-wrapper").fadeOut(300);
                    if(data['status'] == "success"){ 
                        Swal.fire(
                        `Berhasil tambah data`, 
                        '',
                        'success'
                        ).then(function() { 
                            $('.formAdd').trigger("reset");
                            $('.formAdd')[0].reset();
                            $("#addModal").modal('hide');
                            detailDataTable.ajax.reload();
                        }); 
                    }else{
                        Swal.fire(
                        `Gagal tambah data`, 
                        '',
                        'error'
                        ).then(function() { 
                        });
                    } 
                }
            }); 
        });

        function editBtn(id){ 
            $.ajax({ 
                type : "GET", 
                url : `{{url('api/parent-indikator')}}`, 
                data : {  
                    "filter[]" : 'id', 
                    "filterValue[]" : id
                },   
                dataType: 'JSON',  
                success : function(res){
                    // console.log(res['data'][0]);
                    if(res['data'].length > 0){

                        $('#editModal').modal('show');
                        $("#editModal [name=id]").val(res['data'][0]['id']);  
                        $("#editModal [name=name]").val(res['data'][0]['name']);  
                        $("#editModal [name=status]").val(res['data'][0]['status']);   
                        
                    }
                }
            });
        }

        $(".formEdit").submit(function(e) {
            $(".loader-wrapper").fadeIn(300);
            e.preventDefault(); 
            var id = $("#editModal [name=id]").val();
            var formData = new FormData($('.formEdit')[0]);  
            $.ajax({
                url: `{{url('api/parent-indikator')}}/${id}`,
                method: "POST",
                data: formData,
                dataType: 'JSON',
                contentType: false,
                processData: false,  
                success: function (data) {
                    $(".loader-wrapper").fadeOut(300);
                    if(data['status'] == "success"){
                        Swal.fire(
                        `Berhasil ubah data`, 
                        '',
                        'success'
                        ).then(function() { 
                            $('.formEdit').trigger("reset");
                            $('.formEdit')[0].reset();
                            $('#editModal').modal('hide');
                            detailDataTable.ajax.reload();
                        }); 
                    }else{
                        Swal.fire(
                        `Gagal ubah data`, 
                        '',
                        'error'
                        ).then(function() { 
                        });
                    } 
                }
            }); 
        });

        function destroy(id){

            Swal.fire({ 
            title: 'Anda yakin ingin hapus ?', 
            text: "Anda tidak akan dapat memulihkan file !", 
            type: 'warning', 
            showCancelButton: true, 
            confirmButtonColor: '#DD6B55',   
            confirmButtonText: 'Yaa, hapus !!' 
            }).then((result) => {  
                if (result.value == true) {   
                    $.ajax({ 
                        type : "DELETE", 
                        url : `{{url('api/parent-indikator')}}/${id}`,
                        // data : {  
                        //     "id" : id,   
                        // },   
                        dataType: 'JSON',  
                        success : function(data){

                            if(data['status'] == 'error'){
                                Swal.fire(`Gagal hapus data`, "Terjadi kesalahan !!", "error"); 
                            }else{
                                Swal.fire(`Berhasil hapus data`, "", "success"); 
                                detailDataTable.ajax.reload();
                            }

                        }
                    });
                }else{
                        
                }
            }); 
            
        }
    </script>
@endsection