@extends('layouts.client')
@section('title', 'Courses')
@section('content')
@push('styles')
<style>
  .course-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .course-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
  }
  .course-card .overlay-text {
    position: absolute;
    bottom: 65px;
    left: 15px;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 2;
  }
  .course-card .course-footer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .course-card .course-footer div {
    flex: 1;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  .course-card .btn-green {
    background-color: #1b4079;
    color: #fff;
    cursor: pointer;
  }
  .btn-green button{
    border: 0;
    background: transparent;
    color: white;
  }
  .btn-green a{
    text-decoration: none;
    color: white;
  }
  .course-card .btn-white {
    background-color: #fff;
    color: #999;
    border: 1px solid #ccc;
  }
  .nav-link{
    color: #1b4079;
  }

  @media (max-width: 768px) {
  .mobile-padding{
    padding: 0 !important;
    margin-top: 10px !important;
  }
  #courseTabs{
    font-size: 13px;
  }
  .course-card .course-footer div{
    padding: 5px;
    font-size: 12px;
  }
  }
</style>
@endpush
<h2>Courses</h2>

<div class="container-fluid mt-5 mobile-padding">
  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif
<ul class="nav nav-tabs" id="courseTabs" role="tablist">
<li class="nav-item" role="presentation">
  <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab">All Courses</button>
</li>
<li class="nav-item" role="presentation">
  <button class="nav-link" id="active-tab" data-bs-toggle="tab" data-bs-target="#active" type="button" role="tab">Activated</button>
</li>
<li class="nav-item" role="presentation">
  <button class="nav-link" id="expired-tab" data-bs-toggle="tab" data-bs-target="#expired" type="button" role="tab">Expired</button>
</li>
<li class="nav-item" role="presentation">
  <button class="nav-link" id="freeze-tab" data-bs-toggle="tab" data-bs-target="#freeze" type="button" role="tab">Frozen</button>
</li>
</ul>
<div class="tab-content pt-3">
    <!-- All Tab -->
    <div class="tab-pane fade show active" id="all" role="tabpanel">
        <div class="row g-4">
            @forelse($allCourses as $course)
                <x-course-card :course="$course" />
            @empty
                <p class="text-center">No courses enrolled.</p>
            @endforelse
        </div>
    </div>

    <!-- Active Tab -->
    <div class="tab-pane fade" id="active" role="tabpanel">
        <div class="row g-4">
            @forelse($activeCourses as $course)
                <x-course-card :course="$course" :link="true" />
            @empty
                <p class="text-center">No active courses.</p>
            @endforelse
        </div>
    </div>

    <!-- Expired Tab -->
    <div class="tab-pane fade" id="expired" role="tabpanel">
        <div class="row g-4">
            @forelse($expiredCourses as $course)
                <x-course-card :course="$course" />
            @empty
                <p class="text-center">No expired courses.</p>
            @endforelse
        </div>
    </div>

    <!-- Freeze Tab -->
    <div class="tab-pane fade" id="freeze" role="tabpanel">
        <div class="row g-4">
            @forelse($frozenCourses as $course)
                <x-course-card :course="$course" />
            @empty
                <p class="text-center">No frozen courses.</p>
            @endforelse
        </div>
    </div>
</div>

</div>

    @endsection