@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-breadcrumb">
                        <ul class="breadcrumb-title">
                            <li class="breadcrumb-item">
                                <a href="{{ url('') }}"> <i class="feather icon-home"></i> </a>
                            </li>
                            <li class="breadcrumb-item">Panel / Panel Score</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                    <div class="page-header-title">
                        <div class="d-inline">
                            <h4>Panel Score</h4>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- Page-header end -->

        <!-- Page-body start -->
        <div class="page-body">
            <div class="row">
            </div>
            <div class="row">
                <div class="col-sm-12">

                    <!-- Zero config.table start -->
                    <div class="card">

                        <div class="card-block">
                            <div class="dt-responsive table-responsive">
                                <div class="row">
                                    @foreach ($selectionPanels as $card)
                                        <div class="col-md-4">
                                            <div class="card mb-4">
                                                <div class="card-header"><b>Intevriewer Name : </b>{{get_isd_user($card->user_id)}}</div>
                                                <div class="card-body"><b>Score 1: </b>{{$card->score1}}</div>
                                                <div class="card-body"><b>Score 2: </b>{{$card->score2}}</div>
                                                <div class="card-body"><b>Score 3: </b>{{$card->score3}}</div>
                                                <div class="card-body"><b>Score 4: </b>{{$card->score4}}</div>
                                                <div class="card-body"><b>Score 5: </b>{{$card->score5}}</div>
                                                <div class="card-body"><b>Average Score: </b>{{$card->average_score}}</div>
                                                <div class="card-body"><b>Remark: </b>{{$card->remark}}</div>
                                                <div class="card-body"><b>Status: </b>{{$card->status == 1 ? 'Yes' : 'No'}}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>  

                </div>
            </div>
        </div>

        <!-- Page-body end -->
    </div>

    <script src="{{ asset('bower_components\datatables.net\js\jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('bower_components\datatables.net-buttons\js\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('bower_components\datatables.net-bs4\js\dataTables.bootstrap4.min.js') }}"></script>
@endsection
<!-- data-table js -->