@extends('layouts.app')

@section('title')
@endsection


@push('prepend-style')
@endpush
@push('addon-style')
@endpush

@section('content')

<!--app-content open-->
<div class="main-content app-content mt-0">
    <div class="side-app">

        <!-- CONTAINER -->
        <div class="main-container container-fluid">

         <br>

            <!-- ROW-1 OPEN -->
            <div class="row">
                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="text-center chat-image mb-5">
                                <img src="{{ asset('assets/images/email.svg') }}" alt="Meeting Pic" height="170" />
                                <div class="main-chat-msg-name">
                                    <a href="{{ route('peserta', $seminar->slug) }}">
                                        <h5 class="mb-1 text-dark fw-semibold">{{ $seminar->nama_seminar }}</h5>
                                    </a>
                                    <p class="text-muted mt-0 mb-0 pt-0 fs-13">{{ $seminar->kota->name }}</p>
                                </div>
                            </div>
                            <ul class="list-group no-margin">
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-watch"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">{{ $seminar->tanggal }}</a>
                                </li>
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-map-pin"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">{{ $seminar->alamat }}</a>
                                </li>
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-aperture"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">{{ $seminar->keterangan }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-xl-8">

                     <!-- ROW-1 -->
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xl-12">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xl-4">
                                        <div class="card overflow-hidden">
                                            <div class="card-body">
                                                <div class="d-flex">
                                                    <div class="mt-2">
                                                        <h6 class="">Total</h6>
                                                        <h2 class="mb-0 number-font">{{ $total }}</h2>
                                                    </div>
                                                    <div class="ms-auto">
                                                        <div class="chart-wrapper mt-1">
                                                            <canvas id="saleschart"
                                                                class="h-8 w-9 chart-dropshadow"></canvas>
                                                        </div>
                                                    </div>
                                                </div>
                                                <i class="fa fa-users text-primary"></i>
                                                    Peserta
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xl-4">
                                        <div class="card overflow-hidden">
                                            <div class="card-body">
                                                <div class="d-flex">
                                                    <div class="mt-2">
                                                        <h6 class="">Datang</h6>
                                                        <h2 class="mb-0 number-font">{{ $datang }}</h2>
                                                    </div>
                                                    <div class="ms-auto">
                                                        <div class="chart-wrapper mt-1">
                                                            <canvas id="leadschart"
                                                                class="h-8 w-9 chart-dropshadow"></canvas>
                                                        </div>
                                                    </div>
                                                </div>
                                                    <i class="fa fa-user text-pink"></i>
                                                    Peserta
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xl-4">
                                        <div class="card overflow-hidden">
                                            <div class="card-body">
                                                <div class="d-flex">
                                                    <div class="mt-2">
                                                        <h6 class="">Belum Datang</h6>
                                                        <h2 class="mb-0 number-font">{{ $belum }}</h2>
                                                    </div>
                                                    <div class="ms-auto">
                                                        <div class="chart-wrapper mt-1">
                                                            <canvas id="profitchart"
                                                                class="h-8 w-9 chart-dropshadow"></canvas>
                                                        </div>
                                                    </div>
                                                </div>
                                               <i class="fa fa-user-times text-danger"></i>
                                                    Peserta
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- ROW-1 END -->

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Kehadiran Peserta</h3>
                        </div>

                        <div class="card-body">
                            <form class="form" method="post" action="{{ route('add-kehadiran', $seminar->slug) }}">
                                @csrf
                                <div class="row">
                                    <center>
                                    <div class="col-md-12 col-12">

                                        <div class="col-md-6 mb-1">
                                            <h3 class="mb-0">{{ $today}}</h3>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <span class="btn btn-dark" id='ct5'></span>
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <input type="text" class="form-control text-center" id="kehadiran" name="kehadiran" value="{{ old('kehadiran') }}" placeholder="Masukkan ID Peserta" required autofocus/>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary me-1">Klik untuk Kehadiran Peserta</button>
                                    </div>
                                </center>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ROW-1 CLOSED -->

        </div>
        <!--CONTAINER CLOSED -->

    </div>
</div>
<!--app-content closed-->
@endsection



@push('addon-script')

 <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>

<script>
    $('#modalHapus').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget) // Button that triggered the modal
    var seminar = button.data('seminar')
    var id = button.data('id')

    var modal = $(this)
    modal.find('.modal-body #seminar').val(seminar)
    modal.find('.modal-body #id').val(id)

    })
</script>

<script>

    function display_ct5() {
    var x = new Date()

    var
    x1 = x.getHours( )+ ":" +  x.getMinutes() + ":" +  x.getSeconds() ;
    document.getElementById('ct5').innerHTML = x1;
    document.getElementById('ct5').style.fontSize='30px';
    display_c5();
     }
     function display_c5(){
    var refresh=1000; // Refresh rate in milli seconds
    mytime=setTimeout('display_ct5()',refresh)
    }
    display_c5()
</script>

<script>
    window.onload = function() {
        document.getElementById("kehadiran").focus();
    }
</script>

<script>
    var pc = document.getElementById('kehadiran');
    pc.onblur = function () {
    ajaxrequest_provideProductListOnHit(
        'protected/snippet/snippet_provideProductListOnHit.php',
        'ajaxOnProductHit'
    );
    }
    pc.focus();
</script>

@endpush