@extends('layouts.main')

@section('title','Tagihan Siswa')
@section('header','Tagihan Siswa')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Tagihan Siswa</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">From</label>
                    <input type="date" name="date_from" class="form-control form-control-sm" placeholder="From">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">To</label>
                    <input type="date" name="date_to" class="form-control form-control-sm" placeholder="To">
                </div>
            </div>
            
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Filter</label>
                    <select class="form-control form-control-sm" name="filter">
                        <option selected value="None">None</option>
                        <option value="">All</option>
                        <option>Today</option>
                        <option>This Month</option>
                        <option>This Year</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Group Jenis Sekolah</label>
                    <select name="id_group_jenis_sekolah" class="form-control form-control-sm" required autofocus>
                        <option selected value="">All</option>
                        @foreach($group_jenis_sekolah as $pend)
                        <option value="{{$pend->id}}">{{ $pend->group_jenis_sekolah }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            <div class="col-md-2">
            @if($create)
                <div class="form-group">
                    <label class="form-control-label">Generate</label>
                    <button  class="form-control form-control-sm btn-success" data-toggle="modal" data-target="#generate_tagihan_siswa">Generate Tagihan Siswa</button>
                </div>
            @endif
            </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>
    </div>
</div>

<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">Status Siswa</label>
                    <select class="form-control form-control-sm" name="status_siswa">
                        <option selected value="">All</option>
                        <option>AKTIF</option>
                        <option>PINDAH</option>
                        <option>LULUS</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Jenis Pendaftaran</label>
                    <select name="id_jenis_pendaftaran" class="form-control form-control-sm" required autofocus>
                        <option selected value="">All</option>
                        @foreach($jenis_pendaftaran as $jpend)
                        <option value="{{$jpend->id}}">{{$jpend->jenis_pendaftaran}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            @if($user->level_user == 1)
            <div class="col-md-4">
                <div class="form-group">
                    <label class="form-control-label">Pendaftaran</label>
                    <select name="id_pendaftaran" class="form-control form-control-sm" required autofocus>
                        <option selected value="">All</option>
                        @foreach($pendaftaran as $pend)
                        <option value="{{$pend->id}}">({{$pend->status_pendaftaran}}) {{$pend->jenis_sekolah->jenis_sekolah}} - Tahun Ajaran {{$pend->tahun_ajaran->tahun_ajaran}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            
            @else
                @if($user->jenis_sekolah)
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-control-label">Pendaftaran</label>
                        <select name="id_pendaftaran" class="form-control form-control-sm" required autofocus>
                        <option selected value="">All</option>
                        @foreach($pendaftaran as $pend)
                            @if($pend->jenis_sekolah->id_group_jenis_sekolah == $user->jenis_sekolah->id_group_jenis_sekolah)
                                <option value="{{$pend->id}}">({{$pend->status_pendaftaran}}) {{$pend->jenis_sekolah->jenis_sekolah}} - Tahun Ajaran {{$pend->tahun_ajaran->tahun_ajaran}}</option>
                            @else
                                @continue
                            @endif
                        @endforeach
                        </select>
                        <!--<input class="form-control form-control-sm" readonly value="{{$user->jenis_sekolah->jenis_sekolah}}">-->
                    </div>
                </div>
                @endif
            @endif
            
            
            
            <!--<div class="col-md-2">-->
            <!--    <div class="form-group">-->
            <!--        <label class="form-control-label">Status Pembayaran</label>-->
            <!--        <select name="status_pembayaran" class="form-control form-control-sm" required autofocus>-->
            <!--            <option selected value="">All</option>-->
            <!--            <option>BELUM</option>-->
            <!--            <option>MENUNGGU</option>-->
            <!--            <option>SUDAH</option>-->
            <!--            <option>DITOLAK</option>-->
            <!--        </select>-->
            <!--    </div>-->
            <!--</div>-->
            
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">Export</label>
                    <button  class="form-control form-control-sm btn-success" data-toggle="modal" data-target="#exportData">Export</button>
                </div>
            </div>
            <div class="col-md-2">
                @if($create)
                <div class="form-group">
                    <label class="form-control-label">Import</label>
                    <button  class="form-control form-control-sm btn-success" data-toggle="modal" data-target="#import_tagihan_siswa">Import Tagihan Siswa</button>
                </div>
                @endif
            </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($create)
<div class="modal fade" id="generate_tagihan_siswa" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-generate-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Generate</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">
                    @if($user->level_user == 1)
                    <div class="form-group">
                        <label class="form-control-label">Pendaftaran</label>
                        <select name="id_pendaftaran_generate" class="form-control form-control-sm" required autofocus>
                            <option selected disabled value="">PENDAFTARAN</option>
                            @foreach($pendaftaran as $pend)
                            <option value="{{$pend->id}}">({{$pend->status_pendaftaran}}) {{$pend->jenis_sekolah->jenis_sekolah}} - Tahun Ajaran {{$pend->tahun_ajaran->tahun_ajaran}}</option>
                            @endforeach
                        </select>
                    </div>
                    @else
                        @if($user->jenis_sekolah)
                        <div class="form-group">
                            <label class="form-control-label">Pendaftaran</label>
                            <input class="form-control form-control-sm" readonly value="{{$user->jenis_sekolah->jenis_sekolah}}">
                        </div>
                        @endif
                    @endif
                    <div class="form-group">
                        <label class="form-control-label">Siswa</label>
                        <select name="id_siswa" class="form-control form-control-sm select2_siswa">
                            <option selected disabled value="">Siswa</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Tipe Tagihan</label>
                        <select class="form-control form-control-sm" name="waktu_pembayaran" required autofocus>
                            <option value="BULANAN">BULANAN</option>
                            <option value="TAHUNAN">TAHUNAN</option>
                            <option value="SEKALI">SEKALI</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Bulan Tagihan</label>
                        <input type="month" class="form-control form-control-sm" name="bulan_tagihan" placeholder="Bulan Tagihan (YYYY-MM) EG:2022-01" required autofocus>
                    </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">Generate</button>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="import_tagihan_siswa" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="/import/tagihan_siswa" 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/tagihan_siswa" 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

<div class="modal fade" tabindex="-1" id="mdlSendWa" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-send-wa" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Whatsapp</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">Nama Lengkap</label> <small class="text-danger">*</small>
                        <input type="text" name="nama_lengkap" class="form-control form-control-sm" readonly placeholder="Nama Lengkap">
                        <input name="id_user" hidden>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Email</label> <small class="text-danger">*</small>
                        <input type="text" name="email" class="form-control form-control-sm" readonly placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Total Tagihan</label> <small class="text-danger">*</small>
                        <input type="text" name="total_tagihan" class="form-control form-control-sm" readonly placeholder="Total Tagihan">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Nomor</label>
                        <div class="form-check wa_aktif_ortu">
                            <input class="form-check-input" type="radio" name="nomor_wa" checked data-penerima="No. WhatsApp Aktif Orangtua">
                            <label class="form-check-label"></label>
                        </div>
                        <div class="form-check hp_ayah">
                            <input class="form-check-input" type="radio" name="nomor_wa" data-penerima="No. Hp Ayah">
                            <label class="form-check-label"></label>
                        </div>
                        <div class="form-check hp_ibu">
                            <input class="form-check-input" type="radio" name="nomor_wa" data-penerima="No. Hp Ibu">
                            <label class="form-check-label"></label>
                        </div>
                        <div class="form-check wa_ayah">
                            <input class="form-check-input" type="radio" name="nomor_wa" data-penerima="No. WhatsApp Ayah">
                            <label class="form-check-label"></label>
                        </div>
                        <div class="form-check wa_ibu">
                            <input class="form-check-input" type="radio" name="nomor_wa" data-penerima="No. WhatsApp Ibu">
                            <label class="form-check-label"></label>
                        </div>
                        <div class="form-check wa_wali">
                            <input class="form-check-input" type="radio" name="nomor_wa" data-penerima="No. WhatsApp Wali">
                            <label class="form-check-label"></label>
                        </div>
                    </div>
                   
                    <div class="form-group">
                        <label class="form-control-label">Wa Message</label> <small class="text-danger">*</small>
                        <textarea name="wa_msg" class="form-control form-control-sm" placeholder="Wa Message" required autofocus></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="mdlSendWaFooter"></div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="mdlSendEmail" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-send-email" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Email</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">Nama Lengkap</label> <small class="text-danger">*</small>
                        <input type="text" name="nama_lengkap" class="form-control form-control-sm" readonly placeholder="Nama Lengkap">
                        <input name="id_user" hidden>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Total Tagihan</label> <small class="text-danger">*</small>
                        <input type="text" name="total_tagihan" class="form-control form-control-sm" readonly placeholder="Total Tagihan">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Email</label>
                        <div class="form-check user_email">
                            <input class="form-check-input" type="radio" name="alamat_email" checked data-penerima="User email">
                            <label class="form-check-label"></label>
                        </div>
                        <div class="form-check email_orang_tua">
                            <input class="form-check-input" type="radio" name="alamat_email" data-penerima="User Orangtua">
                            <label class="form-check-label"></label>
                        </div>
                    </div>
                   
                    <div class="form-group">
                        <label class="form-control-label">Email Message</label> <small class="text-danger">*</small>
                        <textarea name="email_msg" class="form-control form-control-sm" id="email_msg" placeholder="Email Message" required autofocus></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="mdlSendEmailFooter"></div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="exportData" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-export-data" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Export</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="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">DATA</label>
                                <select name="export_type" class="form-control form-control-sm">
                                    <option>TAGIHAN SISWA</option>
                                    <option>DANA ORTU ASUH</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Jenis Sekolah</label>
                                <select name="export_id_jenis_sekolah" class="form-control form-control-sm">
                                    <option selected value="">All</option>
                                    @foreach($jenis_sekolah as $js)
                                    <option value="{{$js->id}}">{{$js->jenis_sekolah}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Tahun Ajaran</label>
                                <select name="export_tahun_ajaran" class="form-control form-control-sm">
                                    <option selected value="">All</option>
                                    @foreach($tahun_ajaran as $ta)
                                    <option value="{{$ta->tahun_ajaran}}">{{$ta->tahun_ajaran}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Item Pembayaran</label>
                                <select name="export_id_item_pembayaran" class="form-control form-control-sm">
                                    <option selected value="">All</option>
                                    @foreach($item_pembayaran as $ta)
                                    <option value="{{$ta->id}}">{{$ta->item_pembayaran}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Bulan Tagihan</label>
                                <input type="month" name="export_bulan_tagihan" class="form-control form-control-sm" placeholder="Bulan Tagihan">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Status Tagihan</label>
                                <select class="form-control form-control-sm" name="export_status_tagihan">
                                    <option selected value="">All</option>
                                    <option>BELUM</option>
                                    <option>SEBAGIAN</option>
                                    <option>SUDAH</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Limit</label>
                                <input type="number" name="export_length" class="form-control form-control-sm" required autofocus min="1" placeholder="Limit" value="10">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Save As</label>
                                <input type="text" name="export_save_as" class="form-control form-control-sm" required autofocus placeholder="Save as" value="Export Log Tagihan Siswa">
                            </div>
                        </div>
                    </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">Export</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push('custom-scripts')
<script>
    
    function setSelectSiswa(url = '/get_siswa'){
        $('.select2_siswa').select2({
            placeholder: 'Siswa',
            ajax: {
                url: url,
                dataType: "json",
                delay: 250,
                processResults: function (data) {
                    data = data.data;
                    return {
                        results: $.map(data, function (item) {
                            id = item.id;
                            item_text = item.nama_lengkap + ' | EMAIL: ' + item.email;
                            return {
                                text: item_text,
                                id: id
                            };
                        })
                    };
                },
                cache: false
            }
        });
    }
    
    $(document).on('change', 'select[name=id_pendaftaran_generate]', function(e){
        setSelectSiswa(url = '/get_siswa?id_pendaftaran='+$(this).val());
    })
    
    $('.select2').select2();
    $('#email_msg').summernote({
        toolbar: [
            [ 'style', [ 'style' ] ],
            [ 'font', [ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear'] ],
            [ 'fontname', [ 'fontname' ] ],
            [ 'fontsize', [ 'fontsize' ] ],
            [ 'color', [ 'color' ] ],
            [ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],
            // [ 'table', [ 'table' ] ],
            // [ 'insert', [ 'link', 'picture'] ],
            [ 'view', [ 'undo', 'redo', 'fullscreen', 'codeview', 'help' ] ]
        ],
        callbacks: {
            onImageUpload: function(files, editor, welEditable) {
                for(var i = files.length - 1; i >= 0; i--) {
                    summerNoteSendFile(files[i], this, '/web_api/summernote/upload');
                }
            }
        }
    });
    $('select[name=id_pendaftaran_generate]').select2();
    $('select[name=id_pendaftaran]').select2();
    var param = {
        filter: "None",
        status_aktif: "ALL",
        status_siswa: "ALL"
    }
    $(document).ready(function(e){
        if (param.filter === "None") {
        $('.el-waiting-message').text('Filter None, please select a Filter to show Data.');
        } else {
            loadThis(param);
        }
        setSelectSiswa();
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
            status_aktif: "ALL",
            status_siswa: "ALL"
        };
        $('select[name=id_jenis_pendaftaran]').val('');
        $('select[name=id_pendaftaran]').val('').trigger('change');
        $('select[name=status_pembayaran]').val('');
        $('select[name=filter]').val('');
        $('select[name=status_siswa]').val('ALL');
        $('input[name=date_to]').val('');
        $('input[name=date_from]').val('');
        $('select[name=id_group_jenis_sekolah]').val('');
        loadThis(param);
    });
    $(document).on('change', 'select[name=filter]', function(e){
        e.preventDefault();
        param.filter = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=status_siswa]', function(e){
        e.preventDefault();
        param.status_siswa = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=id_jenis_pendaftaran]', function(e){
        e.preventDefault();
        param.id_jenis_pendaftaran = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=id_group_jenis_sekolah]', function(e){
        e.preventDefault();
        param.id_group_jenis_sekolah = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=id_pendaftaran]', function(e){
        e.preventDefault();
        param.id_pendaftaran = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=status_pembayaran]', function(e){
        e.preventDefault();
        param.status_pembayaran = $(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);
    });
    
    function loadThis(params){
        url = "/web_api/log_tagihan_siswa/getSiswa";
        th = '<th width="5%">NAMA LENGKAP</th>' +
             '<th width="5%">EMAIL</th>' +
             '<th width="5%">PENDAFTARAN</th>' +
             '<th width="5%">TOTAL TAGIHAN</th>' +
             '<th width="5%">SISA TAGIHAN</th>' +
             '<th width="5%">STATUS SISWA</th>' +
             '<th width="5%">ORTU SISWA</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "nama_lengkap", 'className':'text-center nowrap'},
                    { "data": "email", 'className':'text-center nowrap'},
                    { "data": "id_pendaftaran", 'className':'text-center nowrap'},
                    { "data": "total_tagihan", 'className':'text-center nowrap'},
                    { "data": "sisa_tagihan", 'className':'text-center nowrap'},
                    { "data": "status_siswa", 'className':'text-center'},
                    { "data": "data_ortu", 'className':'text-center'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 2,
                    "data": "id_pendaftaran",
                    "render" : function (data, type, row) {
                        return row.text_pendaftaran;
                    }
                },
                {
                    "targets" : 3,
                    "data": "total_tagihan",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.total_tagihan);
                    }
                },
                {
                    "targets" : 4,
                    "data": "sisa_tagihan",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        return convertToRupiah(row.sisa_tagihan);
                    }
                },
                {
                    "targets" : 7,
                    "data": "id",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        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="/log_tagihan_siswa/detail/'+row.id_user+'" class="dropdown-item"><i class="fa fa-info text-info mr-3 ml-1"></i> DETAIL</a>' +
                                    '<a href="/log_tagihan_siswa/report/'+row.id_user+'" class="dropdown-item"><i class="fa fa-info text-info mr-3 ml-1"></i> REPORT</a>' +
                                    '<div class="dropdown-divider"></div>' +
                                    '<a href="#" data-id="'+row.id_user+'" class="dropdown-item btn-send-wa"><i class="fa fa-comments text-success mr-3 ml-1"></i> Whatsapp</a>' +
                                    '<a href="#" data-id="'+row.id_user+'" class="dropdown-item btn-send-email"><i class="fa fa-envelope text-success mr-3 ml-1"></i> Email</a>' +
                                '</div>' +
                               '</div>';
                        return btn;
                    }
                },
            ];   
        
        order = [[0, 'desc']];
        sDom = ''; 
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons, 'dataTableRow', 1, 0);
    }
    
    
    $(document).on('click', '.btn-send-wa', function(e){
        e.preventDefault();
        var ini = $(this), id = ini.data('id');
        
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        $.ajax({
            url: "/web_api/log_tagihan_siswa/getSiswa",
            type: "get",
            data: {
                id: id,
                filter: "",
                status_aktif: "ALL",
                status_siswa: "ALL"
            }
        })
        .done(function (result) {
            hideLoading(e_modal_wait);
            if (result.data[0]) {
                data = result.data[0];
                var form = $('.form-send-wa');
                form.find('input[name=id_user]').val(data.id_user);
                form.find('input[name=nama_lengkap]').val(data.nama_lengkap);
                form.find('input[name=email]').val(data.email);
                form.find('input[name=total_tagihan]').val(convertToRupiah(data.total_tagihan));
                var wa_msg = form.find('textarea'), msg = setMsg(data);
                wa_msg.val(msg);
                
                setRadioNoWa(data)
                
                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-success btn-sm">Send Wa</button>';
                $('#mdlSendWaFooter').html(footer)
                $('#mdlSendWa').modal('show');
            } else {
                failedAlert('Not Found');
            }
        }).fail(ajax_fail);
    });
    $(document).on('click', '.btn-send-email', function(e){
        e.preventDefault();
        var ini = $(this), id = ini.data('id');
        
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        $.ajax({
            url: "/web_api/log_tagihan_siswa/getSiswa",
            type: "get",
            data: {
                id: id,
                filter: "",
                status_aktif: "ALL",
                status_siswa: "ALL"
            }
        })
        .done(function (result) {
            hideLoading(e_modal_wait);
            if (result.data[0]) {
                data = result.data[0];
                var form = $('.form-send-email');
                form.find('input[name=id_user]').val(data.id_user);
                form.find('input[name=nama_lengkap]').val(data.nama_lengkap);
                form.find('input[name=total_tagihan]').val(convertToRupiah(data.total_tagihan));
                
                $('#email_msg').summernote('code', setEmailMsg(data));
                
                setRadioEmail(data)
                
                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-success btn-sm">Send Email</button>';
                $('#mdlSendEmailFooter').html(footer)
                $('#mdlSendEmail').modal('show');
            } else {
                failedAlert('Not Found');
            }
        }).fail(ajax_fail);
    });
    
    function setRadioNoWa(siswa){
        var wa_aktif_ortu = $('.wa_aktif_ortu'), hp_ayah = $('.hp_ayah'), hp_ibu = $('.hp_ibu'),
            wa_ayah = $('.wa_ayah'), wa_ibu = $('.wa_ibu'), wa_wali = $('.wa_wali');
        
        wa_aktif_ortu.find('input[name=nomor_wa]').val(siswa.no_whatsapp_aktif_orang_tua);
        wa_aktif_ortu.find('input[name=nomor_wa]').attr('disabled', false);
        if(!siswa.no_whatsapp_aktif_orang_tua) wa_aktif_ortu.find('input[name=nomor_wa]').attr('disabled', true);
        
        hp_ayah.find('input[name=nomor_wa]').val(siswa.hp_ayah);
        hp_ayah.find('input[name=nomor_wa]').attr('disabled', false);
        if(!siswa.hp_ayah) hp_ayah.find('input[name=nomor_wa]').attr('disabled', true);
        
        hp_ibu.find('input[name=nomor_wa]').val(siswa.hp_ibu);
        hp_ibu.find('input[name=nomor_wa]').attr('disabled', false);
        if(!siswa.hp_ibu) hp_ibu.find('input[name=nomor_wa]').attr('disabled', true);
        
        wa_ayah.find('input[name=nomor_wa]').val(siswa.no_wa_ayah);
        wa_ayah.find('input[name=nomor_wa]').attr('disabled', false);
        if(!siswa.no_wa_ayah) wa_ayah.find('input[name=nomor_wa]').attr('disabled', true);
        
        wa_ibu.find('input[name=nomor_wa]').val(siswa.no_wa_ibu);
        wa_ibu.find('input[name=nomor_wa]').attr('disabled', false);
        if(!siswa.no_wa_ibu) wa_ibu.find('input[name=nomor_wa]').attr('disabled', true);
        
        wa_wali.find('input[name=nomor_wa]').val(siswa.no_wa_wali);
        wa_wali.find('input[name=nomor_wa]').attr('disabled', false);
        if(!siswa.no_wa_wali) wa_wali.find('input[name=nomor_wa]').attr('disabled', true);
        
        if(!siswa.no_whatsapp_aktif_orang_tua) siswa.no_whatsapp_aktif_orang_tua = '-';
        if(!siswa.hp_ayah) siswa.hp_ayah = '-';
        if(!siswa.hp_ibu) siswa.hp_ibu = '-';
        if(!siswa.no_wa_ayah) siswa.no_wa_ayah = '-';
        if(!siswa.no_wa_ibu) siswa.no_wa_ibu = '-';
        if(!siswa.no_wa_wali) siswa.no_wa_wali = '-';
        
        wa_aktif_ortu.find('.form-check-label').html('No. WhatsApp Aktif Orangtua ('+ siswa.no_whatsapp_aktif_orang_tua +')');
        hp_ayah.find('.form-check-label').html('No. Hp Ayah ('+ siswa.hp_ayah +')');
        hp_ibu.find('.form-check-label').html('No. Hp Ibu ('+ siswa.hp_ibu +')');
        wa_ayah.find('.form-check-label').html('No. WhatsApp Ayah ('+ siswa.no_wa_ayah +')');
        wa_ibu.find('.form-check-label').html('No. WhatsApp Ibu ('+ siswa.no_wa_ibu +')');
        wa_wali.find('.form-check-label').html('No. WhatsApp Wali ('+ siswa.no_wa_wali +')');
        
    }
    function setRadioEmail(data){
        data.user_email = data.email;
                
        $('.user_email').find('input[name=alamat_email]').val(data.user_email);
        $('.email_orang_tua').find('input[name=alamat_email]').val(data.email_orang_tua);
        
        $('.user_email').find('input[name=alamat_email]').attr('disabled', false);
        if(!data.user_email) $('.user_email').find('input[name=alamat_email]').attr('disabled', true);
        $('.email_orang_tua').find('input[name=alamat_email]').attr('disabled', false);
        if(!data.email_orang_tua) $('.email_orang_tua').find('input[name=alamat_email]').attr('disabled', true);
        
        if(!data.user_email) data.user_email = '-';
        if(!data.email_orang_tua) data.email_orang_tua = '-';
        
        $('.user_email').find('.form-check-label').html('Email ('+ data.user_email +')');
        $('.email_orang_tua').find('.form-check-label').html('Email Orangtua ('+ data.email_orang_tua +')');
    }
    
    $(document).on('submit', '.form-send-wa', function(e){
        e.preventDefault();
        var ini = $(this);
        
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        $.ajax({
            url: '/web_api/log_tagihan_siswa/sendWa',
            type: "get",
            data: {
                is_ajax: true,
                id_user: ini.find('input[name=id_user]').val(),
                nomor_wa: ini.find('input[name=nomor_wa]:checked').val(),
                penerima: ini.find('input[name=nomor_wa]:checked').data('penerima'),
                wa_msg: ini.find('textarea[name=wa_msg]').val(),
            }
        })
        .done(function (result) {
            var message = result.message;
            hideLoading(e_modal_wait);
            if (result.status) {
                successAlert(message);
                $('#mdlSendWa').modal('hide');
            } else {
                failedAlert(message);
            }
        })
        .fail(ajax_fail);
    });
    $(document).on('submit', '.form-send-email', function(e){
        e.preventDefault();
        var ini = $(this);
        
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        $.ajax({
            url: '/web_api/log_tagihan_siswa/sendEmail',
            type: "get",
            data: {
                is_ajax: true,
                id_user: ini.find('input[name=id_user]').val(),
                email: ini.find('input[name=alamat_email]:checked').val(),
                penerima: ini.find('input[name=alamat_email]:checked').data('penerima'),
                email_msg: ini.find('textarea[name=email_msg]').val(),
            }
        })
        .done(function (result) {
            var message = result.message;
            hideLoading(e_modal_wait);
            if (result.status) {
                successAlert(message);
                $('#mdlSendEmail').modal('hide');
            } else {
                failedAlert(message);
            }
        })
        .fail(ajax_fail);
    });
    
    function setMsg(data){
        var nama_lengkap, no_pendaftaran, nama_sekolah, total_tagihan, 
            bank = 'Bank BSI dengan nomer rekening 1112225411 dan kode bank 451', 
            no_wa = '081363092360',
            company_name = 'Yayasan Dar el-Iman';
        var msg = 'Assalaamu’alaikum Warahmatullaahi Wabarakaatuh, \n' +
                   'Abu dan Ummu ananda '+data.nama_lengkap+' dengan nomer pendaftaran '+data.no_pendaftaran+' Sekolah '+data.text_pendaftaran+' Dar el-Iman yang kami hormati.' +
                   '\n\nKami mengucapkan terima kasih banyak Jazaakumullaahu Khairan atas respon baik  Abu dan Ummu. ' +
                   'Kami ingin mengingatkan Abu dan Ummu untuk segera melakukan pelunasan biaya Daftar Ulang sebesar '+convertToRupiah(data.total_tagihan)+' , ' +
                   'agar status kelulusannya tidak dinyatakan mengundurkan diri dan haknya dinyatakan gugur sebagai peserta didik baru.' +
                   '\n\nPembayaran tagihan dapat dilakukan melalui Link ATM Aja, ATM, M-banking, ' +
                   'Internet Banking dan lainnya  dengan transfer ke '+bank+'.' +
                   '\n\nAbaikan informasi ini jika Abu dan Ummu telah melakukan pembayaran tagihan Daftar Ulang.' +
                   '\nJazaakumullahu khairan.' +
                   '\n\nJika Abu dan Ummu menemukan kendala, Abu dan Ummu bisa menghubungi admin via chat WhatsApp '+no_wa+' ' +
                   'atau bisa langsung datang ke kantor '+company_name+',  Setiap hari Senin s/d Jum’at pada pukul 13.30 - 15.30' +
                   'Kecuali hari libur kerja yayasan.' +
                   '\n\nWassalaamu`alaikum Warahmatullaahi Wabarakaatuh';
    
        return msg;
    }
    function setEmailMsg(data){
        var nama_lengkap, no_pendaftaran, nama_sekolah, total_tagihan, 
            bank = 'Bank BSI dengan nomer rekening 1112225411 dan kode bank 451', 
            no_wa = '081363092360',
            company_name = 'Yayasan Dar el-Iman';
        var msg = 'Assalaamu’alaikum Warahmatullaahi Wabarakaatuh, <br>' +
                   'Abu dan Ummu ananda '+data.nama_lengkap+' dengan nomer pendaftaran '+data.no_pendaftaran+' Sekolah '+data.text_pendaftaran+' Dar el-Iman yang kami hormati.' +
                   '<br><br>Kami mengucapkan terima kasih banyak Jazaakumullaahu Khairan atas respon baik  Abu dan Ummu. ' +
                   'Kami ingin mengingatkan Abu dan Ummu untuk segera melakukan pelunasan biaya Daftar Ulang sebesar '+convertToRupiah(data.total_tagihan)+' , ' +
                   'agar status kelulusannya tidak dinyatakan mengundurkan diri dan haknya dinyatakan gugur sebagai peserta didik baru.' +
                   '<br><br>Pembayaran tagihan dapat dilakukan melalui Link ATM Aja, ATM, M-banking, ' +
                   'Internet Banking dan lainnya  dengan transfer ke '+bank+'.' +
                   '<br><br>Abaikan informasi ini jika Abu dan Ummu telah melakukan pembayaran tagihan Daftar Ulang.' +
                   '<br>Jazaakumullahu khairan.' +
                   '<br><br>Jika Abu dan Ummu menemukan kendala, Abu dan Ummu bisa menghubungi admin via chat WhatsApp '+no_wa+' ' +
                   'atau bisa langsung datang ke kantor '+company_name+',  Setiap hari Senin s/d Jum’at pada pukul 13.30 - 15.30' +
                   'Kecuali hari libur kerja yayasan.' +
                   '<br><br>Wassalaamu`alaikum Warahmatullaahi Wabarakaatuh';
    
        return msg;
    }
    
    $(document).on('change', 'select[name=export_type]', function(e){
        var ini = $(this);
        if(ini.val() == "DANA ORTU ASUH"){
            ini.parents('.form-export-data').find('input[name=export_save_as]').val('Export Dana Ortu Asuh')
        }else{
            ini.parents('.form-export-data').find('input[name=export_save_as]').val('Export Log Tagihan Siswa')
        }
    });
    $(document).on('submit', '.form-export-data', function(e){
        e.preventDefault();
        var ini = $(this);
        var data = {
            is_ajax: true,
            id_jenis_sekolah: ini.find('select[name="export_id_jenis_sekolah"]').val(),
            tahun_ajaran: ini.find('select[name="export_tahun_ajaran"]').val(),
            id_item_pembayaran: ini.find('select[name="export_id_item_pembayaran"]').val(),
            bulan_tagihan: ini.find('input[name="export_bulan_tagihan"]').val(),
            status_tagihan: ini.find('select[name="export_status_tagihan"]').val(),
            export_length: ini.find('input[name=export_length]').val(),
            save_as: ini.find('input[name=export_save_as]').val(),
        };
        
        id_pendaftaran = ini.find('select[name=export_id_pendaftaran]').val();
        if(!id_pendaftaran) id_pendaftaran = '';
        
        url = '/excel/export/log_tagihan_siswa';
        if(ini.find('select[name=export_type]').val() == "DANA ORTU ASUH") url = '/excel/export/dana_ortu_asuh';
        
        url += '?id_pendaftaran='+id_pendaftaran+'&id_jenis_sekolah='+data.id_jenis_sekolah+'&tahun_ajaran='+data.tahun_ajaran+'&id_item_pembayaran='+data.id_item_pembayaran+'&bulan_tagihan='+data.bulan_tagihan+'&status_tagihan='+data.status_tagihan+'&length='+data.export_length+'&save_as='+data.save_as;
        document.location.href=url;
        
        $('#exportData').modal('hide');
    });
</script>
@if($create)
<script>
    $(document).on('submit', '.form-generate-data', function(e){
        e.preventDefault();
        var ini = $(this);
        var data = {
            is_ajax: true,
            id_siswa: ini.find('select[name=id_siswa]').val(),
            id_pendaftaran: ini.find('select[name=id_pendaftaran_generate]').val(),
            waktu_pembayaran: ini.find('select[name=waktu_pembayaran]').val(),
            bulan_tagihan: ini.find('input[name=bulan_tagihan]').val(),
        };
        
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        $.ajax({
            url: '/web_api/log_tagihan_siswa/generate_tagihan_siswa',
            type: "get",
            data: data
        })
        .done(function (result) {
            var message = result.message;
            hideLoading(e_modal_wait);
            if (result.status) {
                // loadThis(param)
                $('select[name=id_pendaftaran]').val(ini.find('select[name=id_pendaftaran_generate]').val()).trigger('change');
                successAlert(message);
                $('#generate_tagihan_siswa').modal('hide');
            } else {
                failedAlert(message);
            }
        })
        .fail(ajax_fail);
    });
</script>
@endif

@endpush