@extends('layouts.backend.master')
@section('content')

@section('breadcrumbs')

@endsection
<div class="container">
  <h3>@lang('My Courses')</h3>
  <hr/>
       <div class="row">

           @foreach($enrolledCourses as $enrolledCourse)
               <div class="col-xl-4 col-lg-6">
                   <div class="card">
                       <div class="card-body">
                           <div class="stat-widget-one">
                               <div class="stat-icon dib">
                                   <img src="{{ $enrolledCourse->course->image }}" alt="" height="60">
                               </div>
                               <div class="stat-content dib">
                                   <div class="stat-text">
                                       <a href="{{ route('courses.show', $enrolledCourse->course->slug) }}">
                                           {{ $enrolledCourse->course->name }}
                                       </a>
                                   </div>
                                   <div class="stat-digit">
                                       <i class="ti-user text-success border-success"></i>
                                       {{ $enrolledCourse->course->lessons_count }}
                                   </div>
                               </div>
                           </div>
                       </div>
                       <div class="card-footer">
                           @if ($enrolledCourse->status === 'pending payment')
                               <a href="{{route('make-payment.create',$enrolledCourse->course->slug)}}" class="btn btn-primary" >Pay</a>
                           @elseif ($enrolledCourse->status === 'paid')
                           <a href="{{ route('client-lessons.index', $enrolledCourse->course->slug) }}" class="btn btn-primary">Start Learning</a>
                           @endif
                       </div>
                   </div>
               </div>
           @endforeach
       </div>
   </div>

   <script>
       function makePayment(orderId) {
           // Add your logic for making payment here
           console.log('Making payment for Order ID: ' + orderId);
       }
   </script>

@endsection