@extends('layouts.welcome')

@section('content')

<section class="p-4 mt-4">
    <div class="row">
        <div class="col-md-4 mt-3">
            <div class="card" style="height: 100%;">
                <form action="#" class="form-track-peserta" method="GET" enctype="multipart/form-data">
                @csrf
                <div class="card-header">
                    <h3 class="card-title">Track Peserta Ujian</h3>
                </div>
                <div class="card-body">
                    <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" required autofocus placeholder="Nama Lengkap">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">Email</label> <small class="text-danger">*</small>
                        <input type="email" name="email" class="form-control form-control-sm" required autofocus placeholder="Email">
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-success btn-sm float-right">Track Peserta</button>
                    </div>
                </div>
                </form>
            </div>
        </div>
        <div class="col-md-8 mt-3">
            <div class="card" style="height: 100%;">
                <div class="card-body">
                    <div class="peserta_ujian_wrapper p-2">
                        <div class="h4 text-center">Input nama lengkap dan email sesuai dengan data yang didaftarakan untuk melacak peserta ujian</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('custom-scripts')
    <script>
        function setTrackedPesertaUjian(data){
            var jenis_sekolah = '';
            if(data.pendaftaran) jenis_sekolah = data.pendaftaran.jenis_sekolah.jenis_sekolah;
            
            var ht = '<div class="card">' +
                        '<div class="card-body row p-4">' +
                            '<div class="col-md-4">' +
                                '<img src="/images/foto_siswa/'+data.foto+'" width="100%" style="max-height: 250px;">' +
                            '</div>' +
                            '<div class="col-md-8">' +
                                '<table>' +
                                    '<tbody>' +
                                        '<tr>' +
                                            '<td>No Ujian</td>' +
                                            '<td>:</td>' +
                                            '<td><b> '+data.no_ujian+' </b></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td style="vertical-align: top;">Nama Lengkap</td>' +
                                            '<td style="vertical-align: top;">:</td>' +
                                            '<td style="vertical-align: top;"><b> '+data.nama_lengkap+' </b></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td>Email</td>' +
                                            '<td>:</td>' +
                                            '<td><b> '+data.email+' </b></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td style="vertical-align: top;">TTL</td>' +
                                            '<td style="vertical-align: top;">:</td>' +
                                            '<td style="vertical-align: top;"><b> '+data.tempat_lahir+', '+data.tanggal_lahir+' </b></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td style="vertical-align: top;">Pilihan Sekolah</td>' +
                                            '<td style="vertical-align: top;">:</td>' +
                                            '<td style="vertical-align: top;"><b> '+jenis_sekolah+' </b></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td style="vertical-align: top;">Tanggal & Lokasi Ujian</td>' +
                                            '<td style="vertical-align: top;">:</td>' +
                                            '<td style="vertical-align: top;"><b> '+data.tanggal_lokasi_ujian+' </b></td>' +
                                        '</tr>' +
                                    '</tbody>' +
                                '</table>' +
                            '</div>' +
                        '</div>' +
                    '</div>';
        
            return ht;
        }
        $(document).on('submit', '.form-track-peserta', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                url = '/web_api/track_peserta_ujian/track';
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                nama_lengkap: ini.find('input[name=nama_lengkap]').val(),
                email: ini.find('input[name=email]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            $.ajax({
                url: url,
                type: "get",
                data: post_data
            }).done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if(result.status) {
                    var datas = result.data;
                    var tracked = '';
                    if(datas.length){
                        $.each(datas, function(i, data){
                            tracked += setTrackedPesertaUjian(data);
                        });
                    }else{
                        tracked = '<div class="h4 text-center">Peserta dengan nama: <b>'+result.nama_lengkap+'</b> dan email: <b>'+result.email+'</b> tidak ditemukan.</div>';
                    }
                    $('.peserta_ujian_wrapper').html(tracked);
                }else{
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            }).fail(ajax_fail);
            
        });
    </script>
@endpush