@extends('layouts.main')

@section('title','Peserta Ujian')
@section('header','Peserta Ujian')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Peserta Ujian</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>
            
            <!--<div class="col-md-2"></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-export-excel btn-success">Export</button>
                </div>
            </div>
            
            <div class="col-md-2">
                <div class="form-group">
                    <label class="form-control-label">&nbsp;</label>
                    <button class="form-control form-control-sm btn btn-md btn-refresh btn-info">REFRESH</button>
                </div>
            </div>
        </div>
    </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">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-4">
                    <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>
                </div>
                @endif
            @endif
            <div class="col-md-2"></div>
            <div class="col-md-2"></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 class="modal fade" tabindex="-1" id="statusUjianData" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="#" class="form-update-status-ujian" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Status Ujian</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">
                    </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">Nomor HP Ayah</label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text form-control-sm">+62</span>
                            </div>
                            <input type="text" name="hp_ayah" class="form-control form-control-sm" readonly placeholder="Hp Ayah">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Nomor HP Ibu</label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text form-control-sm">+62</span>
                            </div>
                            <input type="text" name="hp_ibu" class="form-control form-control-sm" readonly placeholder="Hp Ibu">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Status Ujian</label> <small class="text-danger">*</small>
                        <select name="id_status_ujian" class="form-control form-control-sm" required autofocus>
                            <option value="" selected disabled>Status Ujian</option>
                            @foreach($status_ujian as $s)
                            <option value="{{$s->id}}" data-wa_msg_template="{{$s->wa_msg_template}}">{{$s->status_ujian}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Wa Message</label> <small class="text-danger">(Sended when Status != BELUM)</small>
                        <textarea name="wa_msg" class="form-control form-control-sm" placeholder="Wa Message" placeholder="Message">{{$default_wa_status_ujian}}</textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Batas Pembayaran Ulang (Hari)</label> <small class="text-danger">*</small>
                        <input type="number" name="batas_pembayaran_ulang_hari" class="form-control form-control-sm" required autofocus placeholder="Batas Pembayaran Ulang (Hari)" value="{{$batas_pembayaran_daftar_ulang}}">
                        <input name="id_user" hidden>
                        <input name="text_pendaftaran" hidden>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="statusUjianFooter"></div>
            </form>
        </div>
    </div>
</div>

@endsection
@push('custom-scripts')
<script>
    var param = {
        filter: "None",
        status_aktif: "ALL",
        status_pembayaran:"SUDAH"
    }
    $(document).ready(function(e){
        if (param.filter === "None") {
        $('.el-waiting-message').text('Filter None, please select a Filter to show Data.');
        } else {
            loadThis(param);
        }
    });
    $(document).on('click', '.btn-export-excel', function(e){
        e.preventDefault();
        location.href = '/excel/export/peserta-ujian?date_from='+ $('input[name=date_from]').val() +
                        '&date_to='+ $('input[name=date_to]').val() +
                        '&filter='+ $('select[name=filter]').val();
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
            status_aktif: "ALL",
            status_pembayaran:"SUDAH"
        };
        $('select[name=id_jenis_pendaftaran]').val('');
        $('select[name=id_pendaftaran]').val('');
        $('select[name=status_pembayaran]').val('');
        $('select[name=filter]').val('');
        $('input[name=date_to]').val('');
        $('input[name=date_from]').val('');
        loadThis(param);
    });
    $(document).on('change', 'select[name=filter]', function(e){
        e.preventDefault();
        param.filter = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'select[name=id_jenis_pendaftaran]', function(e){
        e.preventDefault();
        param.id_jenis_pendaftaran = $(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/pendaftaran/getData";
        th = '<th>NAMA LENGKAP</th>' +
             '<th>EMAIL</th>' +
             '<th>TEMPAT LAHIR</th>' +
             '<th>TANGGAL LAHIR</th>' +
             '<th>JENIS KELAMIN</th>' +
             '<th>JENIS PENDAFTARAN</th>' +
             '<th>PENDAFTARAN</th>' +
             '<th width="5%">TGL DAFTAR</th>' +
             '<th width="5%">STATUS UJIAN</th>' +
             '<th width="5%">STATUS PEMBAYARAN ULANG</th>' +
             '<th width="5%">BATAS PEMBAYARAN ULANG</th>' +
             '<th width="5%">ACTION</th>';
        columns = [
                    { "data": "nama_lengkap", 'className':'text-center nowrap'},
                    { "data": "email", 'className':'text-center nowrap'},
                    { "data": "tempat_lahir", 'className':'text-center nowrap'},
                    { "data": "tanggal_lahir", 'className':'text-center nowrap'},
                    { "data": "jenis_kelamin", 'className':'text-center nowrap'},
                    { "data": "id_jenis_pendaftaran", 'className':'text-center'},
                    { "data": "id_pendaftaran", 'className':'text-center nowrap'},
                    { "data": "created_at", 'className':'text-center'},
                    { "data": "id_status_ujian", 'className':'text-center'},
                    { "data": "status_pembayaran_daftar_ulang", 'className':'text-center'},
                    { "data": "batas_pembayaran_daftar_ulang", 'className':'text-center'},
                    { "data": "id", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 5,
                    "data": "id_jenis_pendaftaran",
                    "render" : function (data, type, row) {
                        if(!row.jenis_pendaftaran) return '-';
                        return row.jenis_pendaftaran.jenis_pendaftaran;
                    }
                },
                {
                    "targets" : 6,
                    "data": "id_pendaftaran",
                    "render" : function (data, type, row) {
                        return row.text_pendaftaran;
                    }
                },
                {
                    "targets" : 7,
                    "data": "created_at",
                    "render" : function (data, type, row) {
                        return row.created_date;
                    }
                },
                {
                    "targets" : 8,
                    "data": "id_status_ujian",
                    "render" : function (data, type, row) {
                        return row.status_ujian_txt;
                    }
                },
                {
                    "targets" : 10,
                    "data": "batas_pembayaran_daftar_ulang",
                    "render" : function (data, type, row) {
                        if(!row.batas_pembayaran_daftar_ulang) return '-';
                        return row.batas_pembayaran_daftar_ulang;
                    }
                },
                {
                    "targets" : 11,
                    "data": "id",
                    "render" : function (data, type, row) {
                        var btn_edit = '';
                        if({{$update}}){
                            btn_edit = '<a href="/pendaftar/edit/'+row.id_user+'" class="dropdown-item"><i class="fa fa-edit text-warning mr-3 ml-1"></i> EDIT</a>';
                        }
                        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="/pendaftar/detail/'+row.id_user+'" class="dropdown-item"><i class="fa fa-info text-info mr-3 ml-1"></i> DETAIL</a>' +
                                    '<a href="#" data-id="'+row.id_user+'" class="dropdown-item btn-status-ujian"><i class="fa fa-check text-success mr-3 ml-1"></i> STATUS UJIAN</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-status-ujian', function(e){
        e.preventDefault();
        var ini = $(this), id = ini.data('id');
        
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        $.ajax({
            url: "/web_api/pendaftaran/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-status-ujian');
                form.find('select[name=id_status_ujian]').val(data.id_status_ujian);
                form.find('input[name=nama_lengkap]').val(data.nama_lengkap);
                form.find('input[name=email]').val(data.email);
                form.find('input[name=hp_ayah]').val(data.hp_ayah);
                form.find('input[name=hp_ibu]').val(data.hp_ibu);
                form.find('input[name=id_user]').val(data.id_user);
                form.find('input[name=text_pendaftaran]').val(data.text_pendaftaran);
                var wa_msg = form.find('textarea[name=wa_msg]'),
                    msg = setWaMsg(data.nama_lengkap, data.text_pendaftaran, "LULUS", data.wa_msg_template);
                wa_msg.val(msg);
                
                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>';
                $('#statusUjianFooter').html(footer)
                $('#statusUjianData').modal('show');
            } else {
                failedAlert('Not Found');
            }
        }).fail(ajax_fail);
    });
    
    $(document).on('change', '.form-update-status-ujian select[name=id_status_ujian]', function(){
        var ini = $(this), status_ujian = $('.form-update-status-ujian select[name=id_status_ujian] option:selected'), nama_lengkap = $('.form-update-status-ujian').find('input[name=nama_lengkap]').val(),
            text_pendaftaran = $('.form-update-status-ujian').find('input[name=text_pendaftaran]').val();
    
        var msg = setWaMsg(nama_lengkap, text_pendaftaran, status_ujian.text(), status_ujian.data('wa_msg_template'));
        $('.form-update-status-ujian').find('textarea[name=wa_msg]').val(msg);
    });
    
    function setWaMsg(nama_lengkap, text_pendaftaran, status_ujian, wa_msg_template){
        def = 'Selamat *'+nama_lengkap+'* Anda dinyatakan '+status_ujian+' Ujian ' + text_pendaftaran + '.*'+
                          ' Jadwal daftar ulang dilakukan 1 Desember 2021 - 10 Desember 2021' +
                          '\n\nUntuk melihat informasi terkait daftar ulang, Abu dan Ummu bisa login kembali kedalam portal atau klik link berikut '+
                          'https://home.ppdbdei.online/login kemudian klik menu PPDB (garis tiga pada pojok kiri atas) dan cari menu Daftar Ulang.' +
                          '\n\nCatatan :\n Petunjuk daftar ulang bisa diunduh pada menu *Petunjuk*.'+
                          '\n\n*Apabila Abu dan Ummu tidak melakukan pembayaran daftar ulang selama waktu yang telah ditentukan, maka status kelulusannya dianggap gugur/mengundurkan diri.*';
        // return def;
        msg = wa_msg_template;
        if(msg){
            msg = msg.replace(/NAMA_LENGKAP/g, nama_lengkap);
            msg = msg.replace(/TEXT_PENDAFTARAN/g, text_pendaftaran);
        }else{
            msg = def;
        }
        return msg;
    }
    
    $(document).on('submit', '.form-update-status-ujian', function(e){
        e.preventDefault();
        var ini = $(this),  input_token = $('input[name=_token]'),
            id_user = ini.find('input[name=id_user]').val(),
            url = '/web_api/pendaftaran/updateStatusUjian/'+id_user;
        var post_data = {
            is_ajax: true,
            _token: input_token.val(),
            id_status_ujian: ini.find('select[name=id_status_ujian]').val(),
            batas_pembayaran_ulang_hari: ini.find('input[name=batas_pembayaran_ulang_hari]').val(),
            wa_msg: ini.find('textarea[name=wa_msg]').val(),
        };
        
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
    
        function postData(datas){
            $.ajax({
                url: url,
                type: "post",
                data: datas
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    $('#statusUjianData').modal('hide');
                    loadThis(param)
                    successAlert(message);
                } else {
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        
        postData(post_data);
        
    });
</script>


@endpush