@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="logo">
            <img src="{{ asset('img/logo.png') }}" alt="ITCC" style="width:100%;">
        </div>
        <br>
        <h1><b>Verifikasi Sertifikat Keikutsertaan</b></h1>
        <br>
        <div class="form">
            <form action="{{ route('verifikasiKeikutsertaan.submit') }}" method="post" id="form-verifikasi-keikutsertaan">
                @csrf
                <div class="input-group mb-3">
                    <input type="text" name="kode" class="form-control" placeholder="Masukkan Kode Sertifikat (cth : MOS-001-000001-18)" aria-label="Masukkan Kode Sertifikat (cth : MOS-001-000001-18)" aria-describedby="button-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="submit" name="submit" id="button-addon2">Verifikasi</button>
                    </div>
                </div>
            </form>
        </div>
        <div style="margin : 0 auto; width : 100%;text-align : center; display : none;" id="loading-animation">
            <img src="{{ asset('img/loading-ring.gif') }}" style="width : 100px;" alt="Memuat">
        </div>
        <!-- Search form -->
            
        @if (Session::has('showResult'))
        <div class="result" id="result">
        {{ Session::forget('showResult') }}
        @else
        <div class="result" id="result" style="display:none;">
        @endif

            @if (isset($results))

                <h2 style="text-align : center;">Hasil Pencarian</h2>

                @if ($results !== null)
                    <table style="margin : 0 auto;">
                        <tr>
                            <td>Nomor Sertifikat</td>
                            <td>:</td>
                            <td>{{$results->no_sertifikat}}</td>
                        </tr>
                        <tr>
                            <td>Nama</td>
                            <td>:</td>
                            <td>{{$results->nama}}</td>
                        </tr>
                        <tr>
                            <td>Jenis Sertifikasi</td>
                            <td>:</td>
                            <td>{{$results->jenis_sertifikasi}}</td>
                        </tr>
                    </table>
                @else
                    <p>Hasil tidak ditemukan</p>
                @endif

            @endif
        </div>
    </div>
    <script>
        var result = document.getElementById('result');
        var form = document.getElementById('form-verifikasi-keikutsertaan');
        form.addEventListener('submit', function(event){
            event.preventDefault();
            $("#result").css('display', 'none');
            $("#loading-animation").css('display', 'block');
            var request = new XMLHttpRequest();
            var data = new FormData(form);
            request.open('POST', '/app/ajax/verifikasi-keikutsertaan');
            request.onload = function(){
                if(request.status >=200 && request.status <400)
                {
                    var response = request.responseText;
                    result.innerHTML = response;
                    
                    $("#result").css('display', 'block');
                }
                else{
                    alert('Terjadi Kesalahan dalam mengirim data.');
                }
                $("#loading-animation").css('display', 'none');
            }

            request.send(data);
        });
    </script>
@endsection