@extends('layouts.admin')
@section('title', 'Pengasuh')
@section('content')
<section class="content">
    <h4>Data Pengasuh</h4>
    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        <p>{{ $message }}</p>
    </div>
    @endif
    <div class="card mt-4">
        <div class="card-header">
            <div class="d-flex flex-wrap justify-content-between">
                <span id="card_title">Data Pengasuh : 0</span>
                <div class="tools">
                    <button type="button" class="btn btn-success btn-sm" onclick="addFunc()" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tambah Data"><i class="fas fa-plus"></i></button>
                    <button class="btn btn-outline-primary btn-sm pull-right" onclick="refresh()" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Refresh Data"><i class="fas fa-sync"></i></button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <form class="mb-2" method="POST" onsubmit="refresh(); return false;" autocomplete="off">
                @csrf
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-6">
                        <div class="row g-2">
                            <div class="col-md-4">
                                <input type="search" name="search" id="search" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-3">
                                <button type="submit" onclick="refresh()" class="w-100 btn btn-outline-primary btn-sm">
                                    <i class="fas fa-search me-2"></i>Cari
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <table id="mytable" class="table table-hover table-bordered nowrap" width="100%" style="width:100%">
                <thead>
                    <th>Nama Pengasuh</th>
                    <th>Alamat</th>
                    <th>Jumlah Anak Asuh</th>
                    <th>Keterangan</th>
                    <th>Action</th>
                </thead>
            </table>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title" id="titleModal">Form Pengasuh</span>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="myForm" method="POST" action="javascript:void(0)" autocomplete="off">
                    <input type="hidden" name="pengasuh_id" id="pengasuh_id">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <label>Nama Pengasuh</label>
                                <input type="text" class="form-control" id="pengasuh_nama" name="pengasuh_nama">
                            </div>
                            <div class="col-12">
                                <label>Alamat Pengasuh</label>
                                <input type="text" class="form-control" id="pengasuh_alamat" name="pengasuh_alamat">
                            </div>
                            <div class="col-12">
                                <label>Jumlah Anak Asuh</label>
                                <input type="text" class="form-control" id="pengasuh_jumlah_anak_asuh" name="pengasuh_jumlah_anak_asuh">
                            </div>
                            <div class="col-12">
                                <label>Keterangan</label>
                                <input type="text" class="form-control" id="pengasuh_deskripsi" name="pengasuh_deskripsi">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-sm btn-primary btnSave">Simpan Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection
@section("javascript")
<script>
// prevent form submit
    const form = document.querySelector("form");
    form.addEventListener('submit', function (e) {
        e.preventDefault();
    });
</script>
<script type="text/javascript">
    var table;
    var isChange = false;
    $('#myForm').on('input',function() {
        setTimeout(function(){
            isChange = true;
            $(".btnSave").attr("disabled", false);
        }, 500);
    });
    window.onbeforeunload = function (event){
        if (isChange) {
            return '';
        }
    };
    document.onkeydown=function(e) {
        var event = window.event || e;
        if (event.keyCode == 116) {
            event.keyCode = 0;
            if (isChange) {
                return false;
            }else{
                return true;
            }
        }
    }
    $('.modal').on('hide.bs.modal', function (e) {
        isChange = false;
    });
    $('.modal').on('show.bs.modal', function (e) {
        $(".btnSave").attr("disabled", true);
        isChange = false;
    });
    $(document).ready( function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-Token': $('meta[name="_token"]').attr('content')
            }
        });
        table = $('#mytable').DataTable({
            "destroy": true,
            "autoWidth": true,
            "processing": true,
            "serverSide": true,
            "responsive": true,
            "deferRender": true,
            "info": true,
            "searching": false,
            "lengthChange": false,
            "language": {
                "info": "_TOTAL_ Data",
                "infoFiltered": "",
                "infoEmpty": '0 Data',
                "zeroRecords": "Tidak Ada Data",
                "emptyTable": "Tidak Ada Data",
                "lengthMenu":"_MENU_ Data",
                "search": "",
            },
            "scrollX": true,
            "lengthMenu": [
                [10,20,50],
                [10,20,50],
                ],
            "infoCallback": function( settings, start, end, max, total, pre ) {
                $("#card_title").html('Data Pengasuh : '+total)
                return "Total "+ total +" Data";
            },
            "ajax": {
                url: "{{ route('pengasuh_list_data') }}",
                type: "POST",
                headers: {
                    'X-CSRF-Token': $('meta[name="_token"]').attr('content')
                },
                data: function (d) {
                    d.search = $('input[type="search"]').val();
                    d.tipe = $('#filter_tipe').val();
                }
            },
            "columns": [
                { data: 'pengasuh_nama', name: 'pengasuh_nama' },
                { data: 'pengasuh_alamat', name: 'pengasuh_alamat', orderable: false },
                { data: 'pengasuh_jumlah_anak_asuh', name: 'pengasuh_jumlah_anak_asuh' },
                { data: 'pengasuh_deskripsi', name: 'pengasuh_deskripsi', orderable: false },
                { data: 'action', name: 'pengasuh_id'},
                ],
            "columnDefs":[
                { "width": "0%", "targets": 1 },
                { "width": "0%", "targets": 2 },
                { "width": "0%", "targets": 4 },
                ],
            "order": [[0, 'ASC']]
        });
        $('input[type="search"]').on('change', function(e){
            refresh();
        });

    });
    var isLogin = true;
    setInterval(function(){checkSession();}, 1000*60*2);/*2 menit*/
    function checkSession(){$.ajax({url : "{{ route('hassession') }}",type: "GET",dataType: "JSON",success: function(data){if(data){isLogin = true;}else{isLogin = false;}}});}
    function refresh() {
        if(isLogin){table.ajax.reload(null, false);}else{
            $.alert({
                title: 'Session habis', content: "Silahkan login terlebih dahulu!",
                buttons:{btnOk:{text:"OK", btnClass: 'btn-primary', keys: ['enter'], action:function (argument) {window.location.href = "{{url('login_admin')}}";}}}
            });
        }
    }
    function addFunc(){
        $("#myForm")[0].reset();
        $('#pengasuh_id').val('');
        $('#titleModal').html("Tambah Data");
        $(".btnSave").attr("disabled", true);
        $('#myModal').modal('show');
    }
    function editFunc(id){
        $("#myForm")[0].reset();
        $.ajax({
            type:"POST",
            url: "{{ route('pengasuh_edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(res){
                if(res.status){
                    $('#pengasuh_id').val(id);
                    $('#pengasuh_nama').val(res.data.pengasuh_nama);
                    $('#pengasuh_alamat').val(res.data.pengasuh_alamat);
                    $('#pengasuh_deskripsi').val(res.data.pengasuh_deskripsi);
                    $('#pengasuh_jumlah_anak_asuh').val(res.data.pengasuh_jumlah_anak_asuh);

                    $('#titleModal').html("Edit Data");
                    $(".btnSave").attr("disabled", true);
                    $('#myModal').modal('show');
                }else{
                    alertSukses('Notifikasi', res.message,'bg-danger');
                }
            }
        });
    }
    $("#myForm").on('submit', function(e){
        var formData = new FormData(this);
        $('.btnSave').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);
        $('.btnSave').attr('disabled', true);
        $(document).find("span.text-danger").remove();
        $.ajax({
            type:'POST', url: "{{ route('pengasuh_store') }}", data: formData, cache: false, contentType: false, processData: false,
            success: (data) => {
                if(data.status){
                    alertSukses('Notifikasi',''+data.message,'bg-success');
                    $("#myModal").modal('hide');
                    refresh();
                }else{
                    alertSukses('Notifikasi',''+data.message,'bg-danger');
                }
                $(".btnSave").html('Simpan Data');
                $(".btnSave").attr("disabled", false);
            },
            error: function(data){
                $(".btnSave").html('Simpan Data');
                $(".btnSave").attr("disabled", false);
                $.each(data.responseJSON.errors,function(field_name,error){
                    $(document).find('[name='+field_name+']').after('<span style="font-weight: light" class="text-danger">' +error+ '</span>');
                    $('[name='+field_name+']').focus();
                });
            }
        });
    });
    function deleteFunc(id){
        $.confirm({title:"Warning!",content:"Delete data?",type:"red",backgroundDismiss:!1,backgroundDismissAnimation:"glow",buttons:{btnBatal:{text:"Cancel",btnClass:"btn-light",keys:["esc"],action:function(){}},btnHapus:{text:"Delete",btnClass:"btn-danger",keys:["enter"],action:function(){$.ajax({url:"{{ route('pengasuh_delete') }}",type:"POST",data:{id:id},dataType:"json",success:function(t){t.status?(alertSukses("Notifikasi",""+t.message,"bg-success"),refresh()):alertSukses("Notifikasi",""+t.message,"bg-danger")},error:function(t,e,n){$.alert({title:"Warning!",content:"Error deleting data!"})}})}}}});
    }
</script>
@endsection