@extends('layouts.main')

@section('title','Tunggakan Tahun Lalu')
@section('header','Tunggakan Tahun Lalu')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Tunggakan Tahun Lalu</li>
@endsection

@section('content')

<div class="card">
    <div class="card-header with-border">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">&nbsp;</label>
                    <button class="form-control form-control-sm btn btn-md btn-export-tunggakan-tahun-lalu btn-info">Export</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header with-border">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">&nbsp;</label>
                    <button  class="form-control form-control-sm btn-success" data-toggle="modal" data-target="#import_tunggakan_tahun_lalu">Import Data</button>
                </div>
            </div>
            <!--<div class="col-md-2">-->
            <!--    <div class="form-group">-->
            <!--        <label class="form-control-label">&nbsp;</label>-->
            <!--        <button  class="form-control form-control-sm btn-success export-data">Export Data</button>-->
            <!--    </div>-->
            <!--</div>-->
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">&nbsp;</label>
                    <button class="form-control form-control-sm btn btn-md btn-refresh btn-info">REFRESH</button>
                </div>
            </div>
            <div class="col-md-2">
                <label class="form-control-label">&nbsp;</label>
                <button  class="form-control form-control-sm btn-default btn-create" data-toggle="modal" data-target="#createData">
                    <i class="fa fa-plus"></i>&nbsp;&nbsp; Create
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card card-primary">
    <div class="card-body">
        <div class="dataTableRow" id="dataTableRow">
            <label class="el-waiting-message">Loading your data. It may take some time..</label>
        </div>
    </div>
</div>

@if($update)
<div class="modal fade" id="detailData" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-update-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Tunggakan Tahun Lalu</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="form-group">
                        <label class="form-control-label">Siswa</label>
                        <select name="id_user" class="form-control form-control-sm select2_siswa">
                            <option selected disabled value="">Siswa</option>
                        </select>
                    </div>
                    <div class="detail-selected-siswa">
                        
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Judul</label> <small class="text-danger">*</small>
                        <input type="text" name="judul" class="form-control form-control-sm" required autofocus placeholder="Judul">
                        <input name="id" hidden>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Jumlah Tunggakan</label> <small class="text-danger">*</small>
                        <input type="number" name="jumlah_tunggakan" class="form-control form-control-sm" required autofocus placeholder="Jumlah Tunggakan">
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="detailFooter"></div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="import_tunggakan_tahun_lalu" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="/import/import_tunggakan_tahun_lalu" class="form-import-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Import</h5>
                <div class="card-tools">
				    <a href="/template/import_tunggakan_tahun_lalu" class="btn btn-sm btn-success pull-right"> 
                        <i class="fa fa-file-excel-o nav-icon"></i>
                        &nbsp; Template
                    </a> 
				</div>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <label>Excel File</label>
					<div class="form-group">
						<input type="file" name="import_file" required="required" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" class="form-control">
					</div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                <button type="submit" class="btn btn-success btn-sm">Import</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endif

@if($create)
<div class="modal fade" id="createData" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-create-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Tunggakan Tahun Lalu</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="form-group">
                        <label class="form-control-label">Siswa</label>
                        <select name="id_user" class="form-control form-control-sm select2_siswa">
                            <option selected disabled value="">Siswa</option>
                        </select>
                    </div>
                    <div class="detail-selected-siswa">
                        
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Judul</label> <small class="text-danger">*</small>
                        <input type="text" name="judul" class="form-control form-control-sm" required autofocus placeholder="Judul">
                        <input name="id" hidden>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Jumlah Tunggakan</label> <small class="text-danger">*</small>
                        <input type="number" name="jumlah_tunggakan" class="form-control form-control-sm" required autofocus placeholder="Jumlah Tunggakan">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                <button type="submit" class="btn btn-success btn-sm">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endif

@endsection
@push('custom-scripts')
<script>
    $('.select2_siswa').select2({
        placeholder: 'Siswa',
        ajax: {
            url: '/get_siswa',
            dataType: "json",
            delay: 250,
            processResults: function (data) {
                data = data.data;
                return {
                    results: $.map(data, function (item) {
                        id = item.id;
                        item_text = item.nama_lengkap + ' | No Pendaftaran: ' + item.no_pendaftaran;
                        return {
                            text: item_text,
                            id: id
                        };
                    })
                };
            },
            cache: false
        }
    });
    var param = {
        filter: "None",
        status_aktif: "ALL"
    }
    $(document).ready(function(e){
        if (param.filter === "None") {
        $('.el-waiting-message').text('Filter None, please click Refresh to show Data.');
        } else {
            loadThis(param);
        }
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
            status_aktif: "ALL"
        };
        $('select[name=filter]').val('');
        $('input[name=date_to]').val('');
        $('input[name=date_from]').val('');
        loadThis(param);
    });
    $(document).on('change', 'select[name=filter]', function(e){
        e.preventDefault();
        param.filter = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'input[name=date_to]', function(e){
        e.preventDefault();
        param.date_to = $(this).val();
        if(param.date_from) loadThis(param);
    });
    $(document).on('change', 'input[name=date_from]', function(e){
        e.preventDefault();
        param.date_from = $(this).val();
        if(param.date_to) loadThis(param);
    });
    $(document).on('click', '.btn-export-tunggakan-tahun-lalu', function(e){
        e.preventDefault();
        url = '/excel/export/tunggakan_tahun_lalu';
        
        document.location.href=url;
    });
    
    function loadThis(params){
        url = "/web_api/tunggakan_tahun_lalu/getData";
        th = '<th>Nama Lengkap</th>' +
             '<th>Email</th>' +
             '<th>Judul</th>' +
             '<th>Jumlah Tunggakan</th>' +
             '<th>Status Tunggakan</th>' +
             '<th>Dibayar</th>' +
             '<th>Sisa</th>' +
             '<th>Created By</th>' +
             '<th>Created At</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "nama_lengkap", 'className':'text-center'},
                    { "data": "email", 'className':'text-center'},
                    { "data": "judul", 'className':'text-center'},
                    { "data": "jumlah_tunggakan", 'className':'text-center'},
                    { "data": "status_tunggakan", 'className':'text-center'},
                    { "data": "dibayar", 'className':'text-center'},
                    { "data": "sisa_tunggakan", 'className':'text-center'},
                    { "data": "created_by", 'className':'text-center'},
                    { "data": "created_at", 'className':'text-center'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 3,
                    "data": "jumlah_tunggakan",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.jumlah_tunggakan);
                    }
                },
                {
                    "targets" : 5,
                    "data": "dibayar",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.dibayar);
                    }
                },
                {
                    "targets" : 6,
                    "data": "sisa_tunggakan",
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.sisa_tunggakan);
                    }
                },
                {
                    "targets" : 7,
                    "data": "created_by",
                    "render" : function (data, type, row) {
                        if(!row.created_by_user) return row.created_by;
                        return row.created_by_user.nama_lengkap;
                    }
                },
                {
                    "targets" : 8,
                    "data": "created_at",
                    "render" : function (data, type, row) {
                        return row.created_date;
                    }
                },
                {
                    "targets" : 9,
                    "data": "id",
                    "render" : function (data, type, row) {
                        var btn = '';
                        if({{$update}}){
                            btn = '<div class="btn-group">' +
                                        '<button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">' +
                                            'Action ' +
                                        '</button>' +
                                        '<div class="dropdown-menu" role="menu" style="">' +
                                            '<a href="#" class="dropdown-item btn-detail" data-id="'+row.id+'"><i class="fa fa-edit text-warning mr-3 ml-1"></i> EDIT</a>' +
                                        '</div>' +
                                       '</div>';
                        }
                        return btn;
                    }
                },
            ];   
        
        order = [[0, 'desc']];
        sDom = '';        
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons);
    }
    
    $(document).on('change', 'select[name="id_user"]', function(e){
        var ini = $(this), mdl = ini.parents('.modal-body'), wrp = mdl.find('.detail-selected-siswa');
        if(ini.val()){
            var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                
            $.ajax({
                url: '/get_siswa?id='+ini.val(),
                type: "get",
                data: {}
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    var data = result.data[0];
                    var ht = '<div class="form-group">' +
                                '<label class="form-control-label">Nama Lengkap</label>' +
                                '<input class="form-control form-control-sm" readonly placeholder="Nama Lengkap" value="'+data.nama_lengkap+'">' +
                             '</div>' +
                             '<div class="form-group">' +
                                '<label class="form-control-label">Email</label>' +
                                '<input class="form-control form-control-sm" readonly placeholder="Email" value="'+data.email+'">' +
                             '</div>' +
                             '<div class="form-group">' +
                                '<label class="form-control-label">No Pendaftaran</label>' +
                                '<input class="form-control form-control-sm" readonly placeholder="No Pendaftaran" value="'+data.no_pendaftaran+'">' +
                             '</div>';
                    
                    wrp.html(ht);
                } else {
                    failedAlert('Not Found');
                }
            })
            .fail(ajax_fail);
        }else{
            wrp.html('');
        }
    });
</script>

@if($create)
<script>
    $(document).ready(function(e){
        $(document).on('submit', '.form-create-data', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                url = '/web_api/tunggakan_tahun_lalu/create';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_user: ini.find('select[name=id_user]').val(),
                judul: ini.find('input[name=judul]').val(),
                jumlah_tunggakan: ini.find('input[name=jumlah_tunggakan]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(post_data){
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#createData').modal('hide');
                        ini.find('select[name=id_user]').val('').trigger('change');
                        ini.find('input[name=jumlah_tunggakan]').val('');
                        ini.find('input[name=judul]').val('');
                        loadThis(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            postData(post_data);
            
        });
    });
</script>
@endif

@if($update)
<script>
    $(document).ready(function(e){
        $(document).on('click', '.btn-detail', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/tunggakan_tahun_lalu/getData',
                type: "get",
                data: {
                    status_aktif: "ALL",
                    id: id,
                }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    data = result.data[0];
                    var form = $('.form-update-data');
                    form.find('input[name=id]').val(data.id);
                    // form.find('select[name=id_user]').val(data.id_user);
                    form.find('select[name=id_user]').append($("<option selected='selected'></option>").val(data.id_user).text(data.nama_lengkap + ' | No Pendaftaran: ' + data.no_pendaftaran)).trigger('change');
                    form.find('input[name=judul]').val(data.judul);
                    form.find('input[name=jumlah_tunggakan]').val(data.jumlah_tunggakan);
                    
                    var footer = '<a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>' +
                                 '<button type="submit" class="btn btn-warning btn-sm">Update</button>';
                    $('#detailFooter').html(footer)
                    $('#detailData').modal('show');
                } else {
                    failedAlert('Not Found');
                }
            })
            .fail(ajax_fail);
        });
        $(document).on('submit', '.form-update-data', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id = ini.find('input[name=id]').val(),
                url = '/web_api/tunggakan_tahun_lalu/update/'+id;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_user: ini.find('select[name=id_user]').val(),
                judul: ini.find('input[name=judul]').val(),
                jumlah_tunggakan: ini.find('input[name=jumlah_tunggakan]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(datas){
                $.ajax({
                    url: url,
                    type: "post",
                    data: datas
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#detailData').modal('hide');
                        loadThis(param)
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            postData(post_data);
            
        });
    });
</script>
@endif

@endpush