@extends('student.layouts.app')
@push("styles")
<style>
    .card-img-top {
        height: 10vw;
        object-fit: cover;
    }
    .card {
        width: 100%;
    }
    @media only screen and (max-width: 767px) {
        .card-img-top {
            height: 25vw;
            object-fit: cover;
        }
    }
    @media only screen and (max-width: 575px) {
        .card-img-top {
            height: 45vw;
            object-fit: cover;
        }
    }
</style>
@endpush
@section('titlePage', 'Offline Class')
@section('content')
<div class="row mt-3">
    <div class="col">
        <div class="card-header">
            <h4 class="breadcrumb-item active font-weight-bold text-uppercase">Offline Class / <span class="text-secondary">Registrations</span></h4>
        </div>
        <div class="panel tabs-style5">
            <div class="panel-head">
                <ul class="nav nav-tabs d-sm-flex d-block">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#PAID" data-type="slab">PAID</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#FREE" data-type="block">FREE</a></li>
                </ul>
            </div>
            <div class="panel-body my-2">
                <div class="tab-content">
                    <div class="tab-pane fade in active show" id="PAID">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="text-primary font-weight-bold p-3 mb-0">
                                    PAID <span class="text-secondary">CLASSES</span>
                                </h4>
                                <div class="row">
                                    @foreach ($paid_classes as $data)
                                    <div class="col-md-4 mb-4 d-flex align-items-stretch">
                                        <div class="blog dt-card-bg card mb-4" style="width: 90%; height: auto; max-height: 400px;">
                                            <div class="card-body" style="padding: 15px;">
                                                <h5 class="mt-2" style="text-transform: capitalize;">
                                                    <a class="text-primary dt-p-w fs-5" href="">
                                                        {{$data->title}}
                                                    </a>
                                                </h5>
                                                <div class="pd-x-0 pd-sm-x-80">
                                                    <table class="table table-sm">
                                                        <tbody>
                                                            <tr>
                                                                <td><strong>Venue:</strong></td>
                                                                <td>{{$data->venue}}</td>
                                                            </tr>
                                                            <tr>
                                                                <td><strong>Class Start Date:</strong></td>
                                                                <td>{{$data->class_start_date}}</td>
                                                            </tr>
                                                            <tr>
                                                                <td><strong>Class End Date:</strong></td>
                                                                <td>{{$data->class_end_date}}</td>
                                                            </tr>

                                                            <tr>
                                                                <td><strong>Duration:</strong></td>
                                                                <td>{{$data->duration}} Hrs.</td>
                                                            </tr>

                                                            <tr>
                                                                <td><strong>Registration End:</strong></td>
                                                                <td>{{$data->registration_end_date}}</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="d-flex gap-2">
                                                    @if ($data->class_date < now())
                                                        <button class="btn btn-primary btn-sm" disabled>Class Concluded</button>
                                                    @elseif ($data->class_date > now())
                                                        <button class="btn btn-primary btn-sm">Upcoming</button>
                                                    @else
                                                        <button class="btn btn-primary btn-sm" disabled>Going On</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                {{-- Pagination --}}
                                <div class="row align-items-center">
                                    <div class="col-md-4 my-2">
                                        Showing {{$paid_classes->firstItem()}} to {{$paid_classes->lastItem()}} of {{$paid_classes->total()}} Entries
                                    </div>
                                    <div class="col-md-7 col-lg-7">
                                        <div class="pull-right">
                                            {!! $paid_classes->appends(request()->all())->links() !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="FREE">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="text-primary font-weight-bold p-3 mb-0">
                                    FREE <span class="text-secondary">CLASSES</span>
                                </h4>
                                <div class="row">
                                    @foreach ($free_classes as $data)
                                    <div class="col-md-4 mb-4 d-flex align-items-stretch">
                                        <div class="blog dt-card-bg card mb-4" style="width: 90%; height: auto; max-height: 400px;">
                                            <div class="card-body" style="padding: 15px;">
                                                <h5 class="mt-2" style="text-transform: capitalize;">
                                                    <a class="text-primary dt-p-w fs-5" href="">
                                                        {{$data->title}}
                                                    </a>
                                                </h5>
                                                <div class="pd-x-0 pd-sm-x-80">
                                                    <table class="table table-sm">
                                                        <tbody>
                                                            <tr>
                                                                <td><strong>Venue:</strong></td>
                                                                <td>{{$data->venue}}</td>
                                                            </tr>
                                                            <tr>
                                                                <td><strong>Class Start Date:</strong></td>
                                                                <td>{{$data->class_start_date}}</td>
                                                            </tr>
                                                            <tr>
                                                                <td><strong>Class End Date:</strong></td>
                                                                <td>{{$data->class_end_date}}</td>
                                                            </tr>
                                                            <tr>
                                                                <td><strong>Duration:</strong></td>
                                                                <td>{{$data->duration}} Hrs.</td>
                                                            </tr>

                                                            <tr>
                                                                <td><strong>Registration End:</strong></td>
                                                                <td>{{$data->registration_end_date}}</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="d-flex gap-2">
                                                    @if ($data->class_date < now())
                                                        <button class="btn btn-primary btn-sm" disabled>Class Concluded</button>
                                                    @elseif ($data->class_date > now())
                                                        <button class="btn btn-primary btn-sm">Upcoming</button>
                                                    @else
                                                        <button class="btn btn-primary btn-sm" disabled>Going On</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                {{-- Pagination --}}
                                <div class="row align-items-center">
                                    <div class="col-md-4 my-2">
                                        Showing {{$free_classes->firstItem()}} to {{$free_classes->lastItem()}} of {{$free_classes->total()}} Entries
                                    </div>
                                    <div class="col-md-7 col-lg-7">
                                        <div class="pull-right">
                                            {!! $free_classes->appends(request()->all())->links() !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- <div class="row">
    <div class="col-12">
        @include('common.alert')
        <div class="card">
            <div class="card-body">
                <div class="row">
                    @foreach ($classes as $data)
                    <div class="col-md-4 mb-4 d-flex align-items-stretch">
                        <div class="blog dt-card-bg card mb-4" style="width: 90%; height: auto; max-height: 400px;">
                            <div class="card-body" style="padding: 15px;">
                                <h5 class="mt-2" style="text-transform: capitalize;">
                                    <a class="text-primary dt-p-w fs-5" href="">
                                        {{$data->title}}
                                    </a>
                                </h5>
                                <div class="pd-x-0 pd-sm-x-80">
                                    <table class="table table-sm">
                                        <tbody>
                                            <tr>
                                                <td><strong>Venue:</strong></td>
                                                <td>{{$data->venue}}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Class Date:</strong></td>
                                                <td>{{$data->class_date}}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Start Time:</strong></td>
                                                <td>{{$data->start_time}}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Duration:</strong></td>
                                                <td>{{$data->duration}} Hrs.</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Registration Start:</strong></td>
                                                <td>{{$data->registration_start_date}}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Registration End:</strong></td>
                                                <td>{{$data->registration_end_date}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="d-flex gap-2">
                                    @if ($data->class_date < now())
                                        <button class="btn btn-primary btn-sm" disabled>Class Concluded</button>
                                    @elseif ($data->class_date > now())
                                        <button class="btn btn-primary btn-sm">Upcoming</button>
                                    @else
                                        <button class="btn btn-primary btn-sm" disabled>Going On</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div> --}}
@endsection