@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Batches</title>
{{-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> --}}

<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%;
    }

    .long-text-cell .content {
        display: flex;
        flex-wrap: wrap;
    }
    
</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')=="Batch 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> Batches</h4>
        </div>
        <div class="col-6">
            <div class="text-end upgrade-btn">
                <a href="{{ route('batches.create') }}" class="btn btn-primary text-white">Add New Batch</a>
            </div>
        </div>

        
        <div class="card">
            <div class="table dataTable text-nowrap dtbl_dropdown">
                <table class="table cardTable" 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($batches) != 0 && !empty($batches))
                            @for ($i =0 ; $i < count($batches); $i+=4)
                                <tr id="row_{{$batches[$i]->id}}">
                                    <td style="display: none;">{{$i}}</td>
                                    @for ( $j=$i ;  $j<$i+4; $j++)
                                        @if ($j<count($batches))
                                            <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($batches[$j]->name)}}</h4>
                                                    <h5>( {{$batches[$j]->teacher->first_name?ucwords($batches[$j]->teacher->first_name):'N/A'}} {{$batches[$j]->teacher->last_name?ucwords($batches[$j]->teacher->last_name):'N/A' }} )</h5>
                                                    <ul class="card-text">
                                                        <li>Mode: {{strtoupper($batches[$j]->mode)}}</li>
                                                        <li>Standard: {{$batches[$j]->class_name}}</li>
                                                        <li>Start Time: {{date("h:i a", strtotime($batches[$j]->start_time))}}</li>
                                                        <li>End Time: {{date("h:i a", strtotime($batches[$j]->end_time))}}</li>
                                                    </ul>
                                                    {{-- <a href="{{ route('batches.edit', ['batch' => $batches[$j]->uuid]) }}" class="btn btn-primary dropdown-item ">View More !!!</a> --}}
                                                    <a href="/batch-details/{{$batches[$j]->id}}" class="btn btn-primary" target="_blank">View More !!!</a>
                                                    
                                                    </div>
                                                </div>
                                            </td>
                                        @else
                                            <td></td>       
                                        @endif
                                    @endfor
                                </tr>
                            @endfor
                        @else
                            <tr>
                                <td></td>
                                <td>Currently no batch is available.</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- / Content -->
</div>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>

</script>