@extends('layouts.main')
@section('title', 'Pilih SPP')
@section('header', 'Pilih SPP')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active">Pilih SPP</li>
@endsection

@section('content')

    @include('layouts.index.filters', [
        'date_range' => 0,
        'filter' => 0,
        'filter_default' => 'ALL',
        'exports' => 0,
        'create' => $create,
    ])

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

    @if ($update)
        <div class="modal fade" tabindex="-1" 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">Pilih Spp</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 for="form-control-label">Group Jenis Sekolah</label> <small
                                        class="text-danger">*</small>
                                    <input type="text" class="form-control" name="id_group_jenis_sekolah" readonly>
                                    <input type="text" class="form-control" name="id" hidden>
                                </div>
                                <div class="form-group">
                                    <label for="form-control-label">Nominal Pilih SPP 1</label> <small
                                        class="text-danger">*</small>
                                    <input type="text" class="form-control" name="spp1" required>
                                </div>
                                <div class="form-group">
                                    <label for="form-control-label">Nominal Pilih SPP 2</label>
                                    <input type="text" class="form-control" name="spp2">
                                </div>
                                <div class="form-group">
                                    <label for="form-control-label">Nominal Pilih SPP 3</label>
                                    <input type="text" class="form-control" name="spp3">
                                </div>
                                <div class="form-group">
                                    <label for="form-control-label">Nominal Pilih SPP 4</label>
                                    <input type="text" class="form-control" name="spp4">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer" id="detailFooter"></div>
                    </form>
                </div>
            </div>

        </div>
    @endif
    @if ($create)
        <div class="modal fade" tabindex="-1" 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">Pegawai</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 for="form-control-label">Group Jenis Sekolah</label> <small
                                        class="text-danger">*</small>

                                        <select name="id_group_jenis_sekolah" class="form-control form-control-sm" required autofocus>
                                            @foreach($group_jenis_sekolah as $gjs)
                                            <option value="{{$gjs->id}}">{{$gjs->group_jenis_sekolah}}</option>
                                            @endforeach
                                        </select>
                                </div>
                                <div class="form-group">
                                    <label for="form-control-label">Nominal Pilih SPP 1</label> <small
                                        class="text-danger">*</small>
                                    <input type="text" class="form-control" name="spp1" required>
                                </div>
                                <div class="form-group">
                                    <label for="form-control-label">Nominal Pilih SPP 2</label> 
                                    <input type="text" class="form-control" name="spp2" >
                                </div>
                                <div class="form-group">
                                    <label for="form-control-label">Nominal Pilih SPP 3</label> 
                                    <input type="text" class="form-control" name="spp3" >
                                </div>
                                <div class="form-group">
                                    <label for="form-control-label">Nominal Pilih SPP 4</label> 
                                    <input type="text" class="form-control" name="spp4" >
                                </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>
        var param = {
            filter: "",
        }
        $(document).ready(function(e) {
            loadThis(param)
        })

        function loadThis(params) {
            url = "/web_api/pilih_spp/getData";
            th = '<th width=40%>GROUP JENIS SEKOLAH</th>' +
                '<th width=15%>SPP 1</th>' +
                '<th width=15%>SPP 2</th>' +
                '<th width=15%>SPP 3</th>' +
                '<th width=15%>SPP 4</th>' +
                '<th>ACTION</th>';
            columns = [
                {
                    "data": "id_group_jenis_sekolah",
                    'className': 'text-center'
                },
                {
                    "data": "spp1"
                },
                {
                    "data": "spp2"
                },
                {
                    "data": "spp3"
                },
                {
                    "data": "spp4"
                },
                {
                    "data": "id",
                    'className': 'text-center'
                },
            ]
            col_def = [
                {
                "targets" : 0,
                "data": "id_group_jenis_sekolah",
                "render" : function (data, type, row) {
                    console.log(row);
                        if(!row.group_jenis_sekolah) return '-';
    
                        return row.group_jenis_sekolah.group_jenis_sekolah;
                    }
            },
            {
                "targets": 5,
                "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>' +
                            '<a href="#" class="dropdown-item btn-delete-pilih-spp" data-id="' + row.id +
                            '"><i class="fa fa-trash text-danger mr-3 ml-1"></i> HAPUS</a>' +
                            '</div>' +
                            '</div>';
                    }
                    return btn;
                }
            }];
            order = [
                [0, 'desc']
            ];
            sDom = '';
            buttons = [];

            loadTable(url, params, th, col_def, columns, order, sDom, buttons);
        }
    </script>
    @if ($create)
        <script>
            $(document).ready(function(e) {
                $(document).on('submit', '.form-create-data', function(e) {
                    console.log('test upload');
                    e.preventDefault();
                    var ini = $(this),
                        input_token = $('input[name=_token]'),
                        url = '/web_api/pilih_spp/create';
                    var post_data = {
                        is_ajax: true,
                        _token: input_token.val(),
                        id_group_jenis_sekolah: ini.find('select[name=id_group_jenis_sekolah]').val(),
                        spp1: ini.find('input[name=spp1]').val(),
                        spp2: ini.find('input[name=spp2]').val(),
                        spp3: ini.find('input[name=spp3]').val(),
                        spp4: ini.find('input[name=spp4]').val(),


                    };

                    var e_modal_wait = $("#modalWait");
                    showLoading(e_modal_wait);
                    postData(post_data);

                    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('input[name=id_group_jenis_sekolah]').val(''),
                                        ini.find('input[name=spp1]').val(''),
                                        ini.find('input[name=spp2]').val(''),
                                        ini.find('input[name=spp3]').val(''),
                                        ini.find('input[name=spp4]').val(''),
                                        loadThis(param)
                                    successAlert(message);
                                } else {
                                    failedAlert(message);
                                }
                                input_token.val(result.newtoken);
                            })
                            .fail(ajax_fail);
                    }

                })
            })
        </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/pilih_spp/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('input[name=id_group_jenis_sekolah]').val(data
                                    .group_jenis_sekolah.group_jenis_sekolah);
                                form.find('input[name=spp1]').val(data.spp1);
                                form.find('input[name=spp2]').val(data.spp2);
                                form.find('input[name=spp3]').val(data.spp3);
                                form.find('input[name=spp4]').val(data.spp4);

                                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/pilih_spp/update/' + id;
                    var post_data = {
                        is_ajax: true,
                        _token: input_token.val(),
                        id_group_jenis_sekolah: ini.find('input[name=id_group_jenis_sekolah]').val(),
                        spp1: ini.find('input[name=spp1]').val(),
                        spp2: ini.find('input[name=spp2]').val(),
                        spp3: ini.find('input[name=spp3]').val(),
                        spp4: ini.find('input[name=spp4]').val(),
                    };

                    var e_modal_wait = $("#modalWait");
                    showLoading(e_modal_wait);
                    postData(post_data);

                    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);
                    }

                });

                $(document).on('click', '.btn-delete-pilih-spp', function(e) {
                    e.preventDefault();
                    var ini = $(this),
                        id = ini.data('id');
                    var e_modal_wait = $("#modalWait");
                    showLoading(e_modal_wait);

                    $.ajax({
                            url: '/web_api/pilih_spp/delete/' + id,
                            type: "get",
                            data: {}
                        })
                        .done(function(result) {
                            var message = result.message;
                            hideLoading(e_modal_wait);
                            if (result.status) {
                                loadThis(param)
                                successAlert(message);
                            } else {
                                failedAlert(message);
                            }
                        })
                        .fail(ajax_fail);
                });
            });
        </script>
    @endif

@endpush