@extends('layouts.layout')

@section('body_class', 'nav-md')

@section('css')
<link rel="stylesheet" href="{{ asset('/css/dashboard.css') }}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<style type="text/css">
    .h-50 {
        height: 50px;
    }
</style>
@endsection

@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">

                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div class="x_panel">
                            <div class="row x_title">
                                <div class="col-md-8 h-30">
                                    <h5>KTP Validation</h5>
                                </div>
                            </div>
                            <div class="x_content"> 
                                <label class="messageError" style="color: red; display: none;"></label>
                                <input value="" class="form-control ktp-number" placeholder="Masukkan Nomor KTP" style="margin-bottom: 10px"><!--3173051311860008-->    
                                <button class="btn btn-primary validate" id="validateBtn" type="button" style="float: right">Validasi</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" id="isTemporary" style="display: none">                
                    <div class="col-xs-12">
                        <div class="x_panel" style="background: #F1F4F6">   
                            <div class="row x_title">
                                <div class="col-md-8 h-30">
                                    <h5>Data Ditemukan</h5>
                                </div>
                            </div>                    
                            <div class="x_content">
                                <div class="isLoading" style="position: absolute; margin: 0 50%; background: #ffffff; padding: 0 10px; display: none">
                                    <h3>
                                        <i class="fa fa-spinner fa-pulse"></i>
                                    </h3>
                                </div>
                                <div style="overflow: auto; white-space: nowrap;">
                                    <table class="table table-condensed table-bordered">
                                        <thead>
                                            <tr>                
                                                <!-- <th class="text-center">Photo</th>                    -->
                                                <th class="text-center">Name</th>                                       
                                                <th class="text-center">Father</th>
                                                <th class="text-center">Mother</th>
                                                <th class="text-center">Blood Type</th>
                                                <th class="text-center">DOB</th> 
                                                <th class="text-center">POB</th>
                                                <th class="text-center">Job</th>
                                                <th class="text-center">KK</th>
                                                <th class="text-center">NIK</th>
                                                <th class="text-center">Address</th> 
                                                <th class="text-center">RT</th>
                                                <th class="text-center">RW</th>
                                                <th class="text-center">Kelurahan</th>
                                                <th class="text-center">Kecamatan</th>
                                                <th class="text-center">Kabupaten</th>
                                                <th class="text-center">Propinsi</th>
                                                <th class="text-center">Marital</th>
                                                <th class="text-center">Religion</th>
                                                <th class="text-center">Sex</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <!-- <td><img id="photo" alt="photo_ktp" height="60"></td> -->
                                                <td id="name" class="text-center"></td>
                                                <td id="father" class="text-center"></td>
                                                <td id="mother" class="text-center"></td>
                                                <td id="bloodeType" class="text-center"></td>
                                                <td id="dob" class="text-center"></td>
                                                <td id="pob" class="text-center"></td>
                                                <td id="job" class="text-center"></td>
                                                <td id="kk" class="text-center"></td>
                                                <td id="nik" class="text-center"></td>
                                                <td id="address" class="text-center"></td>
                                                <td id="rt" class="text-center"></td>
                                                <td id="rw" class="text-center"></td>
                                                <td id="kelurahan" class="text-center"></td>
                                                <td id="kecamatan" class="text-center"></td>
                                                <td id="kabupaten" class="text-center"></td>
                                                <td id="propinsi" class="text-center"></td>
                                                <td id="marital" class="text-center"></td>
                                                <td id="religion" class="text-center"></td>
                                                <td id="sex" class="text-center"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <!-- <button class="btn btn-primary store" id="storeBtn" type="button" style="float: right; margin-top: 10px">Insert</button> -->
                                <button class="btn btn-danger closeTemporary" type="button" style="float: right; margin-top: 10px">Close</button>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">                
                    <div class="col-xs-12">
                        <div class="x_panel">   
                            <div class="row x_title">
                                <div class="col-md-8 h-30">
                                    <h5>Data KTP</h5>
                                </div>
                            </div>                    
                            <div class="x_content">
                                <div style="overflow: auto; white-space: nowrap;">
                                    <table class="table table-condensed table-bordered">
                                        <thead>
                                            <tr>              
                                                <th class="text-center">No.</th>  
                                                <th class="text-center">Photo</th>                   
                                                <th class="text-center">Name</th>                                       
                                                <th class="text-center">Father</th>
                                                <th class="text-center">Mother</th>
                                                <th class="text-center">Blood Type</th>
                                                <th class="text-center">DOB</th> 
                                                <th class="text-center">POB</th>
                                                <th class="text-center">Job</th>
                                                <th class="text-center">KK</th>
                                                <th class="text-center">NIK</th>
                                                <th class="text-center">Address</th> 
                                                <th class="text-center">RT</th>
                                                <th class="text-center">RW</th>
                                                <th class="text-center">Kelurahan</th>
                                                <th class="text-center">Kecamatan</th>
                                                <th class="text-center">Kabupaten</th>
                                                <th class="text-center">Propinsi</th>
                                                <th class="text-center">Marital</th>
                                                <th class="text-center">Religion</th>
                                                <th class="text-center">Sex</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($datas as $key => $data)
                                                <tr>
                                                    <td>{{ ($key + 1) + ($rpp * (empty($_GET['page']) ? 0 : $_GET['page']-1)) }}.</td>
                                                    <td class="text-center"><img src="https://lakuemasdev.oss-ap-southeast-5.aliyuncs.com/ktp_validation/{{$data->photo}}" alt="photo_ktp" height="60"></td>
                                                    <td class="text-center">{{ $data->name }}</td>
                                                    <td class="text-center">{{ $data->ayah }}</td>
                                                    <td class="text-center">{{ $data->ibu }}</td>
                                                    <td class="text-center">{{ $data->blood_type }}</td>
                                                    <td class="text-center">{{ $data->dob }}</td>
                                                    <td class="text-center">{{ $data->pob }}</td>
                                                    <td class="text-center">{{ $data->job }}</td>
                                                    <td class="text-center">{{ $data->kartu_kk }}</td>
                                                    <td class="text-center">{{ $data->nik }}</td>
                                                    <td class="text-center">{{ $data->address }}</td>
                                                    <td class="text-center">{{ $data->rt }}</td>
                                                    <td class="text-center">{{ $data->rw }}</td>
                                                    <td class="text-center">{{ $data->kelurahan }}</td>
                                                    <td class="text-center">{{ $data->kecamatan }}</td>
                                                    <td class="text-center">{{ $data->kabupaten }}</td>
                                                    <td class="text-center">{{ $data->propinsi }}</td>
                                                    <td class="text-center">{{ $data->marital }}</td>
                                                    <td class="text-center">{{ $data->religion }}</td>
                                                    <td class="text-center">{{ $data->sex }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
					<tfoot>
					<tr>
						<td align="center" colspan="19">{{ $datas->links() }}</td>
					</tr>
					</tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $( document ).ready(function() {

        $('.validate').click(function() {
            var ktp = $('.ktp-number').val();
            document.getElementById("validateBtn").disabled = true;

            if (ktp == '') {
                $('.messageError').show();
                $('.messageError').html('Nomor KTP tidak boleh kosong!');
                setTimeout(function(){ $('.messageError').hide(); }, 10000);
                document.getElementById("validateBtn").disabled = false;
            } else {
                var data = {
                    'nik': ktp
                }
                $.ajax({
                    url: 'ktp-validation/validation',
                    method: "POST",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data : data,
                    success: function(response) {
                        console.log(response);
                        document.getElementById("validateBtn").disabled = false;

                        if (response.message == 'available') {
                            $('#isTemporary').show();

                            var datas = response.data;
                            // $("#photo").attr("src", 'https://lakuemasdev.oss-ap-southeast-5.aliyuncs.com/ktp_validation/'.datas.photo);
                            $('#name').html(datas.name);
                            $('#father').html(datas.ayah);
                            $('#mother').html(datas.ibu);
                            $('#bloodType').html(datas.blood_type);
                            $('#dob').html(datas.dob);
                            $('#pob').html(datas.pob);
                            $('#job').html(datas.job);
                            $('#kk').html(datas.kartu_kk);
                            $('#nik').html(datas.nik);
                            $('#address').html(datas.address);
                            $('#rt').html(datas.rt);
                            $('#rw').html(datas.rw);
                            $('#kelurahan').html(datas.kelurahan);
                            $('#kecamatan').html(datas.kecamatan);
                            $('#kabupaten').html(datas.kabupaten);
                            $('#propinsi').html(datas.propinsi);
                            $('#marital').html(datas.marital);
                            $('#religion').html(datas.religion);
                            $('#sex').html(datas.sex);

                        } else if (response.message == 'failed') {
                            $('.messageError').show();
                            $('.messageError').html('Nomor KTP tidak valid!');
                            setTimeout(function(){ $('.messageError').hide(); }, 10000);
                        } else {
                            if (JSON.parse(response).message == 'Tidak Ada Data') {
                                $('.messageError').show();
                                $('.messageError').html('Nomor KTP tidak valid!');
                                setTimeout(function(){ $('.messageError').hide(); }, 10000);
                            } else {
                                $('#isTemporary').show();

                                var datas = JSON.parse(response).data;
                                // $("#photo").attr("src", 'https://lakuemasdev.oss-ap-southeast-5.aliyuncs.com/ktp_validation/'.datas.Photo);
                                $('#name').html(datas.Name);
                                $('#father').html(datas.Ayah);
                                $('#mother').html(datas.Ibu);
                                $('#bloodType').html(datas.BloodType);
                                $('#dob').html(datas.DOB);
                                $('#pob').html(datas.POB);
                                $('#job').html(datas.Job);
                                $('#kk').html(datas.Kartukk);
                                $('#nik').html(datas.NIK);
                                $('#address').html(datas.Address);
                                $('#rt').html(datas.RT);
                                $('#rw').html(datas.RW);
                                $('#kelurahan').html(datas.Kelurahan);
                                $('#kecamatan').html(datas.Kecamatan);
                                $('#kabupaten').html(datas.Kabupaten);
                                $('#propinsi').html(datas.Propinsi);
                                $('#marital').html(datas.Marital);
                                $('#religion').html(datas.Religion);
                                $('#sex').html(datas.Sex);
                            }
                        }
                    },
                    error: function() {
                        $('.messageError').show();
                        $('.messageError').html('Gagal mendapatkan data KTP!');
                        document.getElementById("validateBtn").disabled = false;
                        setTimeout(function(){ $('.messageError').hide(); }, 10000);
                    },
                });
            }
        });

        $('.store').click(function() {
            $('.isLoading').show();
            document.getElementById("storeBtn").disabled = true;

            if ($('#name').html() == '') {
                $('.isLoading').hide();
                document.getElementById("storeBtn").disabled = false;
                alert('Data tidak boleh kosong!');
            } else {
                var data = {
                    'name': $('#name').html(),
                    'father': $('#father').html(),
                    'mother': $('#mother').html(),
                    'bloodType': $('#bloodType').html(),
                    'dob': $('#dob').html(),
                    'pob': $('#pob').html(),
                    'job': $('#job').html(),
                    'kk': $('#kk').html(),
                    'nik': $('#nik').html(),
                    'address': $('#address').html(),
                    'rt': $('#rt').html(),
                    'rw': $('#rw').html(),
                    'kelurahan': $('#kelurahan').html(),
                    'kecamatan': $('#kecamatan').html(),
                    'kabupaten': $('#kabupaten').html(),
                    'propinsi': $('#propinsi').html(),
                    'marital': $('#marital').html(),
                    'religion': $('#religion').html(),
                    'sex': $('#sex').html(),
                }
                // console.log(data);
                $.ajax({
                    url: 'ktp-validation/store',
                    method: "POST",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data : data,
                    success: function(response) {
                        
                        $('.isLoading').hide();
                        document.getElementById("storeBtn").disabled = false;

                        // console.log(response);
                        if (response.message == 'available') {
                            alert('Data KTP sudah ada!');
                        } else {
                            $('#isTemporary').hide();
                            setTimeout(function(){ location.reload(); }, 1500);
                        }
                    },
                    error: function() {
                        alert("Failed");
                    },
                });
            }
        });

        $('.closeTemporary').click(function() {
            $('#isTemporary').hide();
            location.reload();
        })
    
    });
</script>
@endsection