@extends('layouts.main')

@section('title','Settings Pembayaran')
@section('header','Settings Pembayaran')

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

@section('content')

<div class="indexWrapper">
    <div class="card">
        <div class="card-header with-border">
            <div class="row">
                @if(\Auth::user()->level_user == 1)
                <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 $jpend)
                            <option value="{{$jpend->id}}">{{$jpend->group_jenis_sekolah}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                @endif
                <div class="col-md-2">
                    <div class="form-group">
                        <label class="form-control-label">Item Pembayaran</label>
                        <select name="id_item_pembayaran" class="form-control form-control-sm" required autofocus>
                            <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-2">
                    <div class="form-group">
                        <label class="form-control-label">Tahun Ajaran</label>
                        <select name="id_tahun_ajaran" class="form-control form-control-sm" required autofocus>
                            <option selected value="">All</option>
                            @foreach($tahun_ajaran as $ta)
                            <option value="{{$ta->id}}">{{$ta->tahun_ajaran}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label class="form-control-label">Jalur Pendaftaran</label>
                        <select name="id_jalur_pendaftaran" class="form-control form-control-sm" required autofocus>
                            <option selected value="">All</option>
                            @foreach($jalur_pendaftaran as $ta)
                            <option value="{{$ta->id}}">{{$ta->jalur_pendaftaran}}</option>
                            @endforeach
                        </select>
                    </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">
                    @if(\Auth::user()->level_user == 1)
                    <div class="form-group">
                        <label class="form-control-label">&nbsp;</label>
                        <button class="form-control form-control-sm btn btn-md btn-create-settings-pembayaran btn-default">CREATE</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>
</div>

@if(\Auth::user()->level_user == 1)
<div class="createWrapper d-none">
    <div class="card">
        <div class="card-header with-border">
            <div class="row">
                <div class="col-md-8"></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-reset-create-settings-pembayaran btn-danger">RESET</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-index-settings-pembayaran btn-default">BACK</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form action="#" class="form-create-data" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="card card-primary">
        <div class="card-body">
            <div class="form-group">
                <label class="form-control-label">Item Pembayaran</label> <small class="text-danger">*</small>
                <select name="id_item_pembayaran" class="form-control form-control-sm" required autofocus>
                    <option value="" selected disabled>Item Pembayaran</option>
                    @foreach($item_pembayaran as $a)
                    <option value="{{$a->id}}">{{$a->item_pembayaran}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group d-none ukuran_seragam_wrapper">
                <label class="form-control-label">Ukuran Seragam</label> <small class="text-danger">*</small>
                <select name="id_ukuran_seragam" class="form-control form-control-sm">
                    <option value="" selected disabled>Ukuran Seragam</option>
                    @foreach($ukuran_seragam as $us)
                    <option value="{{$us->id}}" data-tambahan_biaya="{{$us->tambahan_biaya}}">{{$us->ukuran_seragam}} (Tambahan biaya : Rp. {{number_format($us->tambahan_biaya,0,".",".")}},00 / pcs)</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label class="form-control-label">Tahun Ajaran</label> <small class="text-danger">*</small>
                <select name="id_tahun_ajaran" class="form-control form-control-sm" required autofocus>
                    <option value="" selected disabled>Tahun Ajaran</option>
                    @foreach($tahun_ajaran as $a)
                    <option value="{{$a->id}}">{{$a->tahun_ajaran}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label class="form-control-label">Jalur Pendaftaran</label> <small class="text-danger">*</small>
                <select name="id_jalur_pendaftaran" class="form-control form-control-sm" required autofocus>
                    <option value="" selected disabled>Jalur Pendaftaran</option>
                    @foreach($jalur_pendaftaran as $a)
                    <option value="{{$a->id}}">{{$a->jalur_pendaftaran}}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-control-label">Group Jenis Sekolah</label> <small class="text-danger">*</small>
                <select name="id_group_jenis_sekolah" class="form-control form-control-sm id_group_jenis_sekolah_create" required autofocus>
                    <option value="" selected disabled>Group Jenis Sekolah</option>
                    @foreach($group_jenis_sekolah as $a)
                    <option value="{{$a->id}}">{{$a->group_jenis_sekolah}}</option>
                    @endforeach
                </select>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered" id="table-jenis-sekolah-create">
                    <thead>
                        <tr>
                            <th class="nowrap" width="30%">Jenis Sekolah</th>
                            <th class="nowrap" width="15%">Kelas</th>
                            <th width="20%">Biaya (Rp) / QTY</th>
                            <th class="nowrap" width="12%">Total Biaya (Rp)</th>
                            <th class="nowrap" width="13%">Min Bayar (Rp)</th>
                            <th class="nowrap" width="15%">Waktu</th>
                            <th width="5%">#</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-jenis-sekolah-create"></tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-success btn-sm float-right btn-submit-create">Submit</button>
        </div>
    </div>
    </form>
</div>
@endif

@endsection
@push('custom-scripts')
<script>
    var param = {
        filter: "",
        tampil_di_list: "ALL"
    }
    $(document).ready(function(e){
        loadThis(param)
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
            id_group_jenis_sekolah: "",
            id_item_pembayaran: "",
            id_tahun_ajaran: "",
            id_jalur_pendaftaran: "",
            id_ukuran_seragam: "",
        };
        $('select[name=filter]').val('');
        $('select[name=id_group_jenis_sekolah]').val('');
        $('select[name=id_item_pembayaran]').val('').trigger('change');
        $('select[name=id_tahun_ajaran]').val('');
        $('select[name=id_jalur_pendaftaran]').val('');
        $('select[name=id_ukuran_seragam]').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', '.indexWrapper select[name=id_group_jenis_sekolah]', function(e){
        e.preventDefault();
        param.id_group_jenis_sekolah = $(this).val();
        loadThis(param);
    });
    $(document).on('change', '.indexWrapper select[name=id_item_pembayaran]', function(e){
        e.preventDefault();
        param.id_item_pembayaran = $(this).val();
        loadThis(param);
    });
    $(document).on('change', '.indexWrapper select[name=id_jalur_pendaftaran]', function(e){
        e.preventDefault();
        param.id_jalur_pendaftaran = $(this).val();
        loadThis(param);
    });
    $(document).on('change', '.indexWrapper select[name=id_tahun_ajaran]', function(e){
        e.preventDefault();
        param.id_tahun_ajaran = $(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/settings/settings_pembayaran/getData";
        th = '<th>ID</th>' +
             '<th>ITEM</th>' +
             '<th>GROUP</th>' +
             '<th class="nowrap">JENIS SEKOLAH</th>' +
             '<th class="nowrap">TAHUN AJARAN</th>' +
             '<th>KELAS</th>' +
             '<th>JALUR</th>' +
             '<th>BIAYA (QTY)</th>' +
             '<th>TOTAL BIAYA</th>' +
             '<th>MIN BAYAR</th>' +
             '<th>WAKTU</th>' +
             '<th class="nowrap">STATUS AKTIF</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "id", 'className':'nowrap'},
                    { "data": "id_item_pembayaran", 'className':'nowrap'},
                    { "data": "id_group_jenis_sekolah", 'className':'nowrap'},
                    { "data": "id_jenis_sekolah", 'className':'nowrap'},
                    { "data": "id_tahun_ajaran", 'className':'nowrap'},
                    { "data": "kelas_mulai"},
                    { "data": "id_jalur_pendaftaran"},
                    { "data": "biaya", 'className':'text-center nowrap'},
                    { "data": "total_biaya", 'className':'text-center nowrap'},
                    { "data": "min_bayar", 'className':'text-center nowrap'},
                    { "data": "waktu_pembayaran", 'className':'text-center'},
                    { "data": "status_aktif", 'className':'text-center'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 1,
                    "data": "id_item_pembayaran",
                    "render" : function (data, type, row) {
                        if(!row.item_pembayaran) return '-';
                        var ukuran_seragam = '';
                        if(row.ukuran_seragam) ukuran_seragam = ' ' + row.ukuran_seragam.ukuran_seragam;
                        return row.item_pembayaran.item_pembayaran + ukuran_seragam;
                    }
                },
                {
                    "targets" : 2,
                    "data": "id_group_jenis_sekolah",
                    "render" : function (data, type, row) {
                        if(!row.group_jenis_sekolah) return '-';
                        return row.group_jenis_sekolah.group_jenis_sekolah;
                    }
                },
                {
                    "targets" : 3,
                    "data": "id_jenis_sekolah",
                    "render" : function (data, type, row) {
                        if(!row.jenis_sekolah) return '-';
                        return row.jenis_sekolah.jenis_sekolah;
                    }
                },
                {
                    "targets" : 4,
                    "data": "id_tahun_ajaran",
                    "render" : function (data, type, row) {
                        if(!row.tahun_ajaran) return '-';
                        return row.tahun_ajaran.tahun_ajaran;
                    }
                },
                {
                    "targets" : 5,
                    "data": "kelas_mulai",
                    "render" : function (data, type, row) {
                        if(!row.kelas_sampai) return row.kelas_mulai;
                        if(!row.kelas_mulai) return row.kelas_sampai;
                        return row.kelas_mulai + ' - ' + row.kelas_sampai;
                    }
                },
                {
                    "targets" : 6,
                    "data": "id_jalur_pendaftaran",
                    "render" : function (data, type, row) {
                        if(!row.jalur_pendaftaran) return '-';
                        return row.jalur_pendaftaran.jalur_pendaftaran;
                    }
                },
                {
                    "targets" : 7,
                    "data": "biaya",
                    "render" : function (data, type, row) {
                        if(!row.biaya) return '-';
                        return convertToRupiah(row.biaya) + ' ('+row.qty+')';
                    }
                },
                {
                    "targets" : 8,
                    "data": "total_biaya",
                    "render" : function (data, type, row) {
                        if(!row.total_biaya) return '-';
                        return convertToRupiah(row.total_biaya);
                    }
                },
                {
                    "targets" : 9,
                    "data": "min_bayar",
                    "render" : function (data, type, row) {
                        if(!row.min_bayar) return '-';
                        return convertToRupiah(row.min_bayar);
                    }
                },
                {
                    "targets" : 12,
                    "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-edit" 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, 'dataTableRow', 2, 0);
    }
    
    $(document).on('click', '.btn-index-settings-pembayaran', function(){
        goTo('INDEX');
    });
    $(document).on('click', '.btn-reset-create-settings-pembayaran', function(){
        goTo('CREATE');
    });
    $(document).on('click', '.btn-create-settings-pembayaran', function(){
        goTo('CREATE');
    });
    
    function goTo(to, data = {}){
        if(to === "CREATE"){
            $('.indexWrapper').addClass('d-none');
            $('.createWrapper').removeClass('d-none');
            $("#tbody-jenis-sekolah-create").empty();
            $('.form-create-data').find('select[name=id_group_jenis_sekolah]').val('');
            $('.form-create-data').find('select[name=id_item_pembayaran]').val('');
            $('.form-create-data').find('select[name=id_ukuran_seragam]').val('');
            $('.form-create-data').find('select[name=id_tahun_ajaran]').val('');
            $('.form-create-data').find('select[name=id_jalur_pendaftaran]').val('');
            
            $('.form-create-data').find('select[name=id_group_jenis_sekolah]').removeAttr('disabled');
            $('.form-create-data').find('select[name=id_item_pembayaran]').removeAttr('disabled');
            $('.form-create-data').find('select[name=id_tahun_ajaran]').removeAttr('disabled');
            $('.form-create-data').find('select[name=id_jalur_pendaftaran]').removeAttr('disabled');
            
            if(!$('.ukuran_seragam_wrapper').hasClass('d-none')) $('.ukuran_seragam_wrapper').addClass('d-none')
        }else if(to === "EDIT"){
            $('.indexWrapper').addClass('d-none');
            $('.createWrapper').removeClass('d-none');
            $("#tbody-jenis-sekolah-create").empty();
            $('.form-create-data').find('select[name=id_group_jenis_sekolah]').val(data.id_group_jenis_sekolah);
            $('.form-create-data').find('select[name=id_item_pembayaran]').val(data.id_item_pembayaran);
            $('.form-create-data').find('select[name=id_ukuran_seragam]').val(data.id_ukuran_seragam);
            $('.form-create-data').find('select[name=id_tahun_ajaran]').val(data.id_tahun_ajaran);
            $('.form-create-data').find('select[name=id_jalur_pendaftaran]').val(data.id_jalur_pendaftaran);
            
            $('.form-create-data').find('select[name=id_group_jenis_sekolah]').attr('disabled', 'disabled');
            $('.form-create-data').find('select[name=id_item_pembayaran]').attr('disabled', 'disabled');
            $('.form-create-data').find('select[name=id_ukuran_seragam]').attr('disabled', 'disabled');
            $('.form-create-data').find('select[name=id_tahun_ajaran]').attr('disabled', 'disabled');
            $('.form-create-data').find('select[name=id_jalur_pendaftaran]').attr('disabled', 'disabled');
            
            if(data.id_item_pembayaran == 1) {
                $('.ukuran_seragam_wrapper').removeClass('d-none')
            }else{
                if(!$('.ukuran_seragam_wrapper').hasClass('d-none')) $('.ukuran_seragam_wrapper').addClass('d-none')
            }
            
            getJenisSekolah($('.form-create-data').find('select[name=id_jalur_pendaftaran]'));
        }else{
            $('.indexWrapper').removeClass('d-none');
            $('.createWrapper').addClass('d-none');
            loadThis(param);
        }
    }
</script>

@if($create)
<script>
    $(document).ready(function(e){
        
        $(document).on('change', '.id_group_jenis_sekolah_create', function(){
            getJenisSekolah($(this));
        });
        $(document).on('change', '.form-create-data select[name=id_item_pembayaran]', function(){
            if($(this).val() == 1){
                $('.ukuran_seragam_wrapper').removeClass('d-none')
            }else{
                $('.form-create-data select[name=id_ukuran_seragam]').val('');
                if(!$('.ukuran_seragam_wrapper').hasClass('d-none')) $('.ukuran_seragam_wrapper').addClass('d-none')
            }
            getJenisSekolah($(this));
        });
        $(document).on('change', '.form-create-data select[name=id_ukuran_seragam]', function(){
            getJenisSekolah($(this));
        });
        $(document).on('change', '.form-create-data select[name=id_tahun_ajaran]', function(){
            getJenisSekolah($(this));
        });
        $(document).on('change', '.form-create-data select[name=id_jalur_pendaftaran]', function(){
            getJenisSekolah($(this));
        });
        
        $(document).on('input change', '.inp_biaya', function(){
            setTotalBiaya($(this));
        });
        $(document).on('input change', '.inp_qty', function(){
            setTotalBiaya($(this));
        });
        
        
        $(document).on('submit', '.form-create-data', function(e){
            e.preventDefault();
            var ini = $('.form-create-data'), input_token = $('input[name=_token]');
            if(!input_token.val()) input_token.val("{{csrf_token()}}");
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_item_pembayaran: ini.find('select[name=id_item_pembayaran]').val(),
                id_ukuran_seragam: ini.find('select[name=id_ukuran_seragam]').val(),
                id_group_jenis_sekolah: ini.find('select[name=id_group_jenis_sekolah]').val(),
                id_tahun_ajaran: ini.find('select[name=id_tahun_ajaran]').val(),
                id_jalur_pendaftaran: ini.find('select[name=id_jalur_pendaftaran]').val(),
            };
            
            var messages = [];
            
            if(!post_data.id_item_pembayaran){
                messages.push("Item Pembayaran Tidak boleh kosong!")
            }else{
                if(post_data.id_item_pembayaran == 1){
                    if(!post_data.id_ukuran_seragam) messages.push("Ukuran Seragam Tidak boleh kosong!")
                }
                
            }
            if(!post_data.id_group_jenis_sekolah) messages.push("Group Jenis Sekolah Tidak boleh kosong!")
            if(!post_data.id_tahun_ajaran) messages.push("Tahun Ajaran Tidak boleh kosong!")
            if(!post_data.id_jalur_pendaftaran) messages.push("Jalur Pendaftaran Tidak boleh kosong!")
            
            var id_settings_pembayaran = ini.find('input[name^=id_settings_pembayaran]').map(function(idx, elem) { return $(elem).val(); }).get();
            var id_jenis_sekolah = ini.find('input[name^=id_jenis_sekolah]').map(function(idx, elem) { return $(elem).val(); }).get();
            var kelas_mulai = ini.find('input[name^=kelas_mulai]').map(function(idx, elem) { return $(elem).val(); }).get();
            var kelas_sampai = ini.find('input[name^=kelas_sampai]').map(function(idx, elem) { return $(elem).val(); }).get();
            var biaya = ini.find('input[name^=biaya]').map(function(idx, elem) { return $(elem).val(); }).get();
            var qty = ini.find('input[name^=qty]').map(function(idx, elem) { return $(elem).val(); }).get();
            var total_biaya = ini.find('input[name^=total_biaya]').map(function(idx, elem) { return $(elem).val(); }).get();
            var min_bayar = ini.find('input[name^=min_bayar]').map(function(idx, elem) { return $(elem).val(); }).get();
            var waktu_pembayaran = ini.find('select[name^=waktu_pembayaran]').map(function(idx, elem) { return $(elem).val(); }).get();
            
            post_data.id_settings_pembayaran = id_settings_pembayaran;
            post_data.id_jenis_sekolah = id_jenis_sekolah;
            post_data.kelas_mulai = kelas_mulai;
            post_data.kelas_sampai = kelas_sampai;
            post_data.biaya = biaya;
            post_data.qty = qty;
            post_data.total_biaya = total_biaya;
            post_data.min_bayar = min_bayar;
            post_data.waktu_pembayaran = waktu_pembayaran;
            
            if(!id_settings_pembayaran) messages.push("Oppss! Something went wrong please reload and try again later!.")
            if(!id_jenis_sekolah) messages.push("Jenis Sekolah pada group ini tidak tersedia!")
            if(!kelas_mulai) messages.push("Kelas Mulai Tidak boleh kosong!")
            if(!kelas_sampai) messages.push("Kelas Sampai Tidak boleh kosong!")
            if(!biaya) messages.push("Biaya Tidak boleh kosong!")
            if(!qty) messages.push("QTY Tidak boleh kosong!")
            if(!total_biaya) messages.push("Total Biaya Tidak boleh kosong!")
            if(!total_biaya) messages.push("Min Bayar Tidak boleh kosong!")
            if(!waktu_pembayaran) messages.push("Waktu Pembayaran boleh kosong!")
            
            if(id_jenis_sekolah.length > id_settings_pembayaran.length) messages.push("Oppss! Something went wrong please reload and try again later!..")
            if(id_jenis_sekolah.length > kelas_mulai.length) messages.push("Kelas Mulai Tidak boleh kosong!")
            if(id_jenis_sekolah.length > kelas_sampai.length) messages.push("Kelas Sampai Tidak boleh kosong!")
            if(id_jenis_sekolah.length > biaya.length) messages.push("Biaya Tidak boleh kosong!")
            if(id_jenis_sekolah.length > qty.length) messages.push("QTY Tidak boleh kosong!")
            if(id_jenis_sekolah.length > total_biaya.length) messages.push("Total Biaya Tidak boleh kosong!")
            if(id_jenis_sekolah.length > min_bayar.length) messages.push("Min Bayar Tidak boleh kosong!")
            if(id_jenis_sekolah.length > waktu_pembayaran.length) messages.push("Waktu Pembayaran boleh kosong!")
            
            $.each(id_settings_pembayaran, function(index, val){ if(!val) messages.push("Oppss! Something went wrong please reload and try again later!..."); });
            $.each(id_jenis_sekolah, function(index, val){ if(!val) messages.push("Oppss! Something went wrong please reload and try again later!"); });
            $.each(kelas_mulai, function(index, val){ if(!val) messages.push("Kelas Mulai Tidak boleh kosong!"); });
            $.each(kelas_sampai, function(index, val){ if(!val) messages.push("Kelas Sampai Tidak boleh kosong!"); });
            $.each(biaya, function(index, val){ if(!val) messages.push("Biaya Tidak boleh kosong!"); });
            $.each(qty, function(index, val){ if(!val) messages.push("QTY Tidak boleh kosong!"); });
            $.each(total_biaya, function(index, val){ if(!val) messages.push("Total Biaya Tidak boleh kosong!"); });
            $.each(min_bayar, function(index, val){ if(!val) messages.push("Min Bayar Tidak boleh kosong!"); });
            $.each(waktu_pembayaran, function(index, val){ if(!val) messages.push("Waktu Pembayaran Tidak boleh kosong!"); });
            
            $.each(messages, function(index, value){
                toast('bg-danger', 'Required', '', value);
            });
            
            if(!messages.length){
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                
                $.ajax({
                    url: '/web_api/settings/settings_pembayaran/create',
                    type: "post",
                    data: post_data
                }).done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        successAlert(message)
                        goTo('INDEX')
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                }).fail(ajax_fail);
            }
        });
    });
    function setTotalBiaya(ini){
        var parent = ini.parents('.row-jenis-sekolah-create'), 
            inp_biaya = parent.find('.inp_biaya'), inp_qty = parent.find('.inp_qty'),
            inp_total_biaya = parent.find('.inp_total_biaya');
    
       total_biaya = parseInt(inp_biaya.val()) * parseInt(inp_qty.val());
       inp_total_biaya.val(total_biaya);
    }
    function getJenisSekolah(ini){
        var get_data = {
            id_group_jenis_sekolah: ini.parents('.form-create-data').find('select[name=id_group_jenis_sekolah]').val(),
            id_item_pembayaran: ini.parents('.form-create-data').find('select[name=id_item_pembayaran]').val(),
            id_tahun_ajaran: ini.parents('.form-create-data').find('select[name=id_tahun_ajaran]').val(),
            id_jalur_pendaftaran: ini.parents('.form-create-data').find('select[name=id_jalur_pendaftaran]').val(),
        }
        var go = true;
        if(get_data.id_item_pembayaran == 1){
            get_data.id_ukuran_seragam = ini.parents('.form-create-data').find('select[name=id_ukuran_seragam]').val();
            if(!get_data.id_ukuran_seragam) go = false;
        }
        if(!get_data.id_group_jenis_sekolah) go = false;
        if(!get_data.id_item_pembayaran) go = false;
        if(!get_data.id_tahun_ajaran) go = false;
        if(!get_data.id_jalur_pendaftaran) go = false;
        
        if(go){
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            $.ajax({
                url: '/web_api/getJenisSekolahByGroup',
                type: "get",
                data: get_data
            }).done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                
                var data = result.data;
                $("#tbody-jenis-sekolah-create").empty();
                if(data){
                    has_created = false
                    $.each(data, function(i, v){
                        if(v.biaya) has_created = true;
                        addJenisSekolahRow(v)
                    });
                    if(has_created){
                        $('.form-create-data').find('select[name=id_group_jenis_sekolah]').attr('disabled', 'disabled');
                        $('.form-create-data').find('select[name=id_item_pembayaran]').attr('disabled', 'disabled');
                        $('.form-create-data').find('select[name=id_ukuran_seragam]').attr('disabled', 'disabled');
                        $('.form-create-data').find('select[name=id_tahun_ajaran]').attr('disabled', 'disabled');
                        $('.form-create-data').find('select[name=id_jalur_pendaftaran]').attr('disabled', 'disabled');
                    }
                    // var d = {
                    //     id_group_jenis_sekolah: data[0].id_group_jenis_sekolah,
                    //     id_item_pembayaran: data[0].id_item_pembayaran,
                    //     id_tahun_ajaran: data[0].id_tahun_ajaran,
                    //     id_jalur_pendaftaran: data[0].id_jalur_pendaftaran
                    // }
                    // goTo('EDIT', d);
                }else{
                    failedAlert("Tidak ada jenis sekolah pada group ini!");
                }
                
            }).fail(ajax_fail);
        }
    }
    
    function addJenisSekolahRow(v){
        var table = document.getElementById("table-jenis-sekolah-create").getElementsByTagName('tbody')[0];;
        var num = $('.row-jenis-sekolah-create').length;
        var row = table.insertRow(num);
        var js = row.insertCell(0);
        var k = row.insertCell(1);
        var bq = row.insertCell(2);
        var tb = row.insertCell(3);
        var mb = row.insertCell(4);
        var wp = row.insertCell(5);
        var action = row.insertCell(6);
        
        var kmv = '', ksv = 0, bv = '', wpv = '', mbv = 0;
        wp_sel_b = '';
        wp_sel_t = '';
        wp_sel_s = '';
        if(v){
            kmv = v.kelas_mulai;
            ksv = v.kelas_sampai;
            bv = v.biaya;
            wpv = v.waktu_pembayaran;
            mbv = v.min_bayar;
            if(wpv == "TAHUNAN") wp_sel_t = 'selected';
            if(wpv == "BULANAN") wp_sel_b = 'selected';
            if(wpv == "SEKALI") wp_sel_s = 'selected';
        }
        
        if(!bv){
            if($('.form-create-data select[name=id_item_pembayaran]').val() == 1) bv = $('.form-create-data select[name=id_ukuran_seragam]').find(':selected').data('tambahan_biaya');
        }
        if(!v.total_biaya) v.total_biaya = bv;
        row.classList.add('row-jenis-sekolah-create');
        row.dataset.v = JSON.stringify(v);
        
        js.classList.add('nowrap');
        js.innerHTML = '<input name="id_jenis_sekolah[]" hidden value="'+v.id_jenis_sekolah+'"><input name="id_settings_pembayaran[]" hidden value="'+v.id_settings_pembayaran+'">'+v.nama_jenis_sekolah;
                       
        k.innerHTML = '<div class="row">'+
                        '<div class="col-md-6"><input type="number" name="kelas_mulai[]" class="form-control form-control-sm" min="0" required autofocus placeholder="Mulai" value="'+kmv+'"></div>' +
                        '<div class="col-md-6"><input type="number" name="kelas_sampai[]" class="form-control form-control-sm" min="0" required autofocus placeholder="Sampai" value="'+ksv+'"></div>' +
                      '</div>';
        bq.innerHTML = '<div class="row">'+
                        '<div class="col-md-8"><input type="number" name="biaya[]" class="form-control form-control-sm inp_biaya" min="0" required autofocus placeholder="Biaya" value="'+bv+'"></div>' +
                        '<div class="col-md-4"><input type="number" name="qty[]" class="form-control form-control-sm inp_qty" min="1" required autofocus placeholder="QTY" value="'+v.qty+'"></div>' +
                      '</div>';
        tb.innerHTML = '<input type="number" name="total_biaya[]" class="form-control form-control-sm inp_total_biaya" readonly placeholder="TOTAL" value="'+v.total_biaya+'">';
        mb.innerHTML = '<input type="number" name="min_bayar[]" class="form-control form-control-sm inp_min_bayar" placeholder="Min Bayar" value="'+v.min_bayar+'">';
        wp.innerHTML = '<select name="waktu_pembayaran[]" class="form-control form-control-sm" required autofocus>' +
                            '<option '+wp_sel_b+'>BULANAN</option>' +
                            '<option '+wp_sel_t+'>TAHUNAN</option>' +
                            '<option '+wp_sel_s+'>SEKALI</option>' +
                        '</select>';
                          
        btn_status_aktif = '';
        btn_class = 'btn-success';
        btn_text = 'AKTIF';
        if(v.status_aktif === "AKTIF"){
            btn_class = 'btn-warning';
            btn_text = 'NONAKTIF';
        }
        if(v.biaya) btn_status_aktif = '<a href="#" class="dropdown-item btn-status-aktif" data-id="'+v.id+'">'+btn_text+'KAN</a>';
        action.innerHTML = '<div class="btn-group">' +
                             '<button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false"> # </button>' +
                              '<div class="dropdown-menu" role="menu" style="">' +
                                '<a href="#" class="dropdown-item btn-duplicate-this">COPY</a>' +
                                btn_status_aktif +
                              '</div>' +
                            '</div>';
    }
    $(document).on('click', '.btn-duplicate-this', function(e){
        e.preventDefault();
        var ini = $(this), row = ini.parents('.row-jenis-sekolah-create'), v = row.data('v');
        v.kelas_mulai = '';
        v.kelas_sampai = '';
        v.biaya = '';
        v.qty = 1;
        v.total_biaya = '';
        addJenisSekolahRow(v);
    });
</script>
@endif

@if($update)
<script>
    $(document).ready(function(e){
        $(document).on('click', '.btn-edit', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: "/web_api/settings/settings_pembayaran/getData",
                type: "get",
                data: {
                    status_aktif: "ALL",
                    id: id,
                }
            }).done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    data = result.data[0];
                    goTo('EDIT', data);
                } else {
                    failedAlert('Not Found');
                }
            }).fail(ajax_fail);
        });
        $(document).on('click', '.btn-status-aktif', function(e){
            e.preventDefault();
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/settings/settings_pembayaran/status_aktif/'+id,
                type: "get",
                data: {}
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    loadThis(param)
                    successAlert(message);
                    if(result.data.status_aktif === "AKTIF"){
                        ini.removeClass('btn-success')
                        ini.addClass('btn-warning')
                        ini.html('NONAKTIFKAN')
                    }else{
                        ini.removeClass('btn-warning')
                        ini.addClass('btn-success')
                        ini.html('AKTIFKAN')
                    }
                } else {
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        });
    });
</script>
@endif

@endpush