@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Courses</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%;
    }
    .cardBox img.card-img-top {
        height: 240px;
        width: 100%;
        object-fit: cover;
    }
    table#services thead {
        display: none;
    }
    table.dataTable tbody tr{
        border-color: transparent;
    }
    table.dataTable thead .sorting_asc {
        background-image: none !important;
    }
    table.dataTable thead .sorting{
        background-image: none !important;
    }
</style>
<link rel="stylesheet" href="{{asset('assets/css/card_inside_data_table.css')}}">

@section('main-content')
<div class="{{Session::has('success')?'':'d-none'}} hide_msg_class" style="position: absolute; top:15%; margin-left:1%;">
    <div id="alert">
        @if(Session::has('success'))
        <div class="alert {{Session::get('success')=="Course deleted successfully."?"alert-danger":"alert-success"}}" role="alert">
            {{Session::get('success')}}
        </div>
        @endif
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>
</div>

<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> Courses</h4>
        </div>
        <div class="col-6">
            <div class="text-end upgrade-btn">
                <a href="{{ route('courses.create') }}" class="btn btn-primary text-white">Add New Course</a>
            </div>
        </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>
                                                    </p>
                                                    <a href="/course-details/{{$course_list[$j]->id}}" class="btn btn-primary" target="_blank">Explore !!!</a>
                                                    </div>
                                                </div>
                                            </td>
                                        @else
                                            <td></td>       
                                        @endif
                                    @endfor
                                </tr>
                            @endfor
                        @else
                            <tr>
                                <td></td>
                                <td>Currently no course is available. </td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- / Content -->
</div>
@endsection