@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Students</title>
<style>
    .edit:hover {
        color: #fff !important;
        background-color: blue !important;
        border-color: #696cff !important;
        border-radius: 5px !important;
    }

    .delete:hover {
        color: #fff !important;
        background-color: #E3242B !important;
        border-color: #E3242B !important;
        border-radius: 5px !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }

    .card_flexBox {
        display: flex;
        gap: 20px;
        padding: 0 30px 0 0;
        flex-wrap: wrap;
        margin: 0 0 40px;
    }
    .card_flexBox .cardBox {
        flex: 0 0 calc(25% - 15px);
        max-width: calc(25% - 15px);
    }
    .card_flexBox {
        margin-top: 40px !important;
    }
    /* .card_flexBox .cardBox {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    } */
    .cardBox img.card-img-top {
        height: 240px;
        width: 100%;
        object-fit: cover;
    }
    table#services thead {
        display: none;
    }
    table.dataTable tbody tr{
        border-color: transparent;
    }
</style>
<link rel="stylesheet" href="assets/css/toggle.css">
<link rel="stylesheet" href="{{asset('assets/css/card_inside_data_table.css')}}">

@section('main-content')
<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y row">
        <div class="col-6">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Records /</span> Course List</h4>
        </div>

        <!-- Basic Bootstrap Table -->
        <div class="card">
            <div class="table cardTable dataTable text-nowrap dtbl_dropdown">
                <table class="table" id="services">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>Column 1</th>
                            <th>Column 2</th>
                            <th>Column 3</th>
                            <th>Column 4</th>
                        </tr>
                    </thead>
                    <tbody class="table-border-bottom-0">
                        @if(count($course_list) != 0 && !empty($course_list))
                            @for ($i =0 ; $i < count($course_list); $i+=4)
                                <tr id="row_{{$course_list[$i]->id}}">
                                    <td style="display: none;">{{$i}}</td>
                                    @for ( $j=$i ;  $j<$i+4 ; $j++)
                                        @if ($j<count($course_list))
                                            <td>    
                                                <div class="card w-30 cardBox">
                                                    <img class="card-img-top" src="../assets/img/elements/2.jpg" alt="Card image cap">
                                                    <div class="card-body">
                                                    <h4 class="card-title">{{strtoupper($course_list[$j]->coursename)}}</h4>
                                                    <ul class="card-text">
                                                        <li>Standard: {{$course_list[$j]->class_name}}</li>
                                                        <li>Start Date: {{dateformatter($course_list[$j]->start_date)}}</li>
                                                        <li>End Date: {{dateformatter($course_list[$j]->end_date)}}</li>
                                                    </ul>
                                                    <a href="/timeline/{{$course_list[$j]->id}}" class="btn btn-outline-primary" target="_blank">Explore !!!</a>
                                                    </div>
                                                </div>
                                            </td>
                                        @else
                                            <td></td>       
                                        @endif
                                    @endfor
                                </tr>
                            @endfor
                        @else
                            <tr>
                                <td><span>{{ 'No record found' }}</span></td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div> 
    </div>
    <!-- / Content -->
</div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>