{{-- Extends layout --}}

@extends('layout.default')

{{-- Content --}}

@section('content')
<style>
    .small-checkbox {
        width: 20px;
        height: 20px;
    }
</style>

<div class="card card-custom mb-5">
    <div class="card-header flex-wrap border-0 pt-0 pb-0">
        <div class="card-title">All Participants</div>
    </div>
    <div class="card-body">
        <table class="table table-bordered table-hover" id="kt_datatable1">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>DOB</th>
                    <th>View Results</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($participants as $row)
                <tr>
                <td>{{ $row->id }}</td>
                    <td>{{ $row->name }}</td>
                    <td>{{ $row->dob }}</td>
                    <td><a href="{{ route('participantresults', ['id' => $row->id]) }}"><img src="{{ asset('media/svg/icons/General/Search.svg') }}" alt=""/></a></td>
                </tr>
                @endforeach
                
            </tbody>
        </table>
    </div>
</div>

@endsection

{{-- Styles Section --}}

@section('styles')

<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

{{-- Scripts Section --}}

@section('scripts')

{{-- vendors --}}

<script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>

@endsection