@extends('layouts.admin')
@section('content')
@section('styles')
<style>
    .font-bold
    {
        font-weight: bold;
    }
    @font-face {font-family: "Edwardian Script ITC"; src: url("//db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.eot"); src: url("//db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.woff") format("woff"), url("//db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/84ae358e627d67d90bd613fcedc20c10.svg#Edwardian Script ITC") format("svg"); }
    .certificate {
        background-image: url('{{ asset('images/certificate.jpg')}}');
        background-size: contain;
        width: 100%;
        height: 600px;
        background-repeat: no-repeat;
        position: relative;
        background-position: center center;
    }
    #printable
    {
        width: 800px;
        height: auto;
        margin: 0 auto;
    }
    .certificate .body
    {
        top: 39%;
        left: 25%;
        width: 615px;
        text-align: center;
        font-size: 15px;
        line-height: 2.5rem;
        position: absolute;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
    .certificate .flex
    {
        display: flex;
        justify-content: space-between;
        line-height: 1.4rem;
        margin-top: 15px;
        font-size: 16px;
    }
    .certificate .body .name
    {
        font-family: 'Edwardian Script ITC', Arial, sans-serif;
        font-size: 32px;
        font-weight: 500;
    }
    .certificate .body .designation
    {
        font-size: 16px;
    }
    .certificate .body .reason
    {
        font-size: 17px;
    }
    .certificate .body .course
    {
        font-size: 20px;
    }
    .certificate .body .held
    {
        font-size: 15px;
    }
    .certificate-wrapper
    {
        display: none
    }
    .mt-4
    {
        margin-top:2rem !important;
    }

    th
    {
        font-size: 1.1rem;
    }

    #resultPage td
    {
        font-size: 1rem;
    }
    .btn{
        color: #fff !important;
    }

</style>
@endsection
<div class="card">
    <div class="card-header">
       Certificate
    </div>
    <div class="card-body">
        <form id="find-certificate" method="POST">
            @csrf
            <div class="row">
               
                <div class="col-md-4 form-group">
                    <label class="required" for="course_id">Course</label>
                    <select class="form-control select2" name="course_id" id="course_id" required>
                        <option value disabled {{ old('course_id', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                        @foreach($courses as $key => $course)
                            <option value="{{ $course->id }}">{{ $course->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 form-group">
                    <label class="required" for="trainee_id">Trainee</label>
                    <select name="trainee_id" class="form-control select2">
                        <option value="">------</option>
                    </select>
                </div>
                <div class="col-md-4 form-group">
                    <button class="btn btn-success mt-4" type="submit">
                        {{ trans('global.search') }}
                    </button>
                </div>
            </div>
     
        </form>
    </div>
    
</div>
<div class="card" style="display: none;" id="resultTable">
    <div class="card-header text-center font-bold">
            <h4>Final Result</h4>
    </div>
    <div class="card-body">
            
         <!-- TRAINEE RESULT TABLE START -->
         <div class="row mt-2">
                <div class="col-12">
                    <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Trainee Name</th>
                                        <th>Total Exam mark</th>
                                        <th>Trainee marks</th>
                                        <th>Percentage</th>
                                        <th>Payment Status</th>
                                        <th>Action</th>
                                        
                                    </tr>
                                </thead>
                                <tbody id="resultPage">
                
                                </tbody>
                            </table>
                        </div>
                        {{-- <div class="text-center">
                            <a href="" class="btn btn-success btn-lg cert_download"> Download Certificate</a>
                        </div> --}}
                </div>
            </div>
             <!-- TRAINEE RESULT TABLE End -->
    </div>
</div>

@endsection
@section('scripts')
@parent
<script src="{{asset('js/cert.js')}}"></script>
@endsection