{{-- @extends('front.practitioner.import.template.import') --}}
@extends('front.patient.inner-layout.app')
@section('page_tab_title' ,"My Courses")
@section('content')

<style>
	body {
		height: 95vh;
	}
    
	.display-inline-block {
	display: inline-block;
	}
    

	.clientd-wrapper .page-title {
		z-index: 0 !important;
	}

    .notestresultstoshow {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 216px);
    }
    .dataempty-box .innerroundbox-padd {
        padding: 90px 40px 0px !important;
    }
    .appointment-empty-box {
        max-width: 638px;
        padding-bottom: 20px;
    }
    
    .img-calenderbox {
        margin-bottom: 0;
    }
	.invoice-page-menu a.btn.setting-btn svg {
    width: 20px;
	}
	.invoice-page-menu a.btn.setting-btn {
		padding: 0 !important;
		max-width: none;
		width: auto;
		min-width: auto;
		height: 36px;
		width: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.invoice-page-menu a.btn:hover svg path {
		fill: #fff;
	}
	.invoice-page-menu a.btn.delete-btn {
		display: flex;
		padding: 5px 0 !important;
		justify-content: center;
        font-weight: 700;
	}
	.invoice-page-menu a.btn.delete-btn svg {
        width: 18px;
        height: auto;
        margin-right: 4px;
	}

	
	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
		margin: 0 !important;
		margin-left: 10px !important;
		min-height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 120px;
	}
      
    .tabs-my-client-list .tab-menu ul li {
		min-width: 190px;
		min-height: 41px;
		
		background-color: #b3b3b3;
		display: inline-block;
		text-align: center;
		border-radius: 10px 10px 0px 0px;
	}
	.tabs-my-client-list .tab-menu ul li.active{
		background-color: #68afb5;
	}
	.tabs-my-client-list .tab-menu ul li a{
		font-size: 15px;
		letter-spacing: 0px;
		line-height: 44px;
		color: #ffffff;
		font-family: "Europa";
		text-align: center;
	}
	.tabs-my-client-list .tab-menu ul {
		margin: 0 0 30px;
		padding: 0;
		/* margin-left: 15px; */
	}
    
	@media (min-width:768px) and (max-width:991px) {
		.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.search-box-btns {
			padding-left: 0;
		}
		.search-box-outer form {
    		width: 250px;
		}
	}
	@media (min-width:992px) and (max-width:1199px) {
		.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		
	}
	@media (min-width: 1200px) and (max-width: 1365px) {
		.page-content {
		    padding: 15px 20px 15px 290px;
	    }
	}

	@media (max-width:767px) {
	
        a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
            margin-left: 5px !important;
            padding: 3px 8px !important;
        }
        
        .notes-menu {
            padding-left: 0;
            padding-right: 0;
        }
        .search-box-outer form {
            width: 280px;
        }
        .myclient-recall-main .client-call-menu .left-menu {
            flex-wrap: nowrap;
        }
        .setting-wrapper .page-title {
            font-size: 20px;
        }
        .invoice-page-menu a.btn.delete-btn {
            padding: 8px 10px !important;
        }
        
	}

	.invoice-page-menu a.btn.delete-btn {
		padding: 8px 30px !important;
        line-height: 17px;
	}


	.client-call-menu .right-menu {
		margin-top: 5px;
	}
    .invoice-page-menu .navbar-brand {
        margin: 0;
    }
    .action-message {
        padding: 8px 0;
    }

    .client-call-menu .left-menu .back-menu {
        margin-right: 10px;
    }
    .client-call-menu .left-menu {
        display: flex;
        align-items: center;
    }
    
</style>

<div class="">
    

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper my-income-main myclient-recall-main">
    <div class="client-call-menu">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="left-menu">
                {{-- <a href="#" class="back-menu"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-fluid" style="width: 40px"></a>
                <a class="navbar-brand p-0 " href="{{ route('patient.dashboard') }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a> --}}
                 {{-- <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> courses</h1> --}}
                 <h1 class="page-title eagle-font font-400 mr-3"><span class="arca-font">My</span> courses</h1>
            </div>
          </div>
          @include('front.patient.inner-layout.header')
       </div>
    </div>
   <div class="brdr-bttm mb-0"></div>
   
   <div class="online-course-main p-0">
       <div class="course-list-main">
            <div class="course-list">

                <div class="row ">
                    @if(isset($courseData))
                        @if( count($courseData) > 0 )
                            @foreach($courseData as $course)
                                @if(isset($course->course_name))
                                    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                                        <div class="course-block">
                                            <div class="c-img">
                                                @php
                                                    $total = $course->total_lessons ?? 0;
                                                    $completed = $course->completed_lessons ?? 0;
                                                    $progressPercent = ($total > 0) ? round(($completed / $total) * 100) : 0;
                                                    $image = $course->image ?? null;
                                                    $hasThumbnail = !empty($image) && File::exists(storage_path('app/public/course_images/' . $image));
                                                    $isLocked = $course->grant_lock_status == 1;

                                                    $expiryDate = $course->course_expiry_date;
                                                    $today = $course->todayDate;
                                                    $isExpired = $expiryDate && $expiryDate != '0000-00-00' && $expiryDate < $today;

                                                    $coursePreviewUrl = 'javascript:void(0)';
                                                    if (!$isExpired && !$isLocked && $course->first_lesson_id) {
                                                        $coursePreviewUrl = route('patient.course.preview', [
                                                            'course_id' => base64_encode($course->id),
                                                            'lesson_id' => base64_encode($course->first_lesson_id)
                                                        ]);
                                                    }
                                                @endphp
                                                {{-- <a href="{{ route('patient.course.preview', ['course_id' => base64_encode($course->id), 'lesson_id' => base64_encode($course->first_lesson_id)]) }}">
                                                    <img src="{{ $hasThumbnail ? asset('storage/course_images/' . $image) : '' }}" alt="course" class="img-fluid">
                                                </a> --}}
                                                {{-- <a 
                                                    href="{{ $isLocked ? 'javascript:void(0)' : route('patient.course.preview', ['course_id' => base64_encode($course->id), 'lesson_id' => base64_encode($course->first_lesson_id)]) }}"
                                                    class="c-link {{ $isLocked ? 'locked-course-link' : '' }}" >
                                                    <img src="{{ $hasThumbnail ? asset('storage/course_images/' . $image) : '' }}" alt="course" class="img-fluid">
                                                    
                                                </a> --}}

                                                <a 
                                                    href="{{  $coursePreviewUrl }}"
                                                    class="c-link 
                                                        {{ $isExpired ? 'expired-course-link' : '' }} 
                                                        {{ (!$isExpired && $isLocked) ? 'locked-course-link' : '' }}"
                                                    data-expiry="{{ $isExpired ? \Carbon\Carbon::parse($expiryDate)->format('d/m/Y') : '' }}">
                                                    <img src="{{ $hasThumbnail ? asset('storage/course_images/' . $image) : '' }}" alt="course" class="img-fluid">
                                                </a>


                                            </div>
                                            <div class="c-detail">
                                                {{-- <a class="c-link" href="{{ route('patient.course.preview', ['course_id' => base64_encode($course->id), 'lesson_id' => base64_encode($course->first_lesson_id)]) }}">
                                                    {{ $course->course_name ?? '' }}
                                                </a> --}}
                                                {{-- <a 
                                                    href="{{ $isLocked ? 'javascript:void(0)' : route('patient.course.preview', ['course_id' => base64_encode($course->id), 'lesson_id' => base64_encode($course->first_lesson_id)]) }}"
                                                    class="c-link {{ $isLocked ? 'locked-course-link' : '' }}">
                                                    {{ $course->course_name ?? '' }}
                                                </a> --}}

                                                <a 
                                                    href="{{  $coursePreviewUrl }}"
                                                    class="c-link 
                                                        {{ $isExpired ? 'expired-course-link' : '' }} 
                                                        {{ (!$isExpired && $isLocked) ? 'locked-course-link' : '' }}"
                                                    data-expiry="{{ $isExpired ? \Carbon\Carbon::parse($expiryDate)->format('d/m/Y') : '' }}">
                                                    {{ $course->course_name ?? '' }}
                                                </a>

                                                <h6>{{ $course->businessProfile->name ?? '' }}</h6>
                                                {{-- <p>Expiry: {{ $course->course_expiry_date ? \Carbon\Carbon::parse($course->course_expiry_date)->format('d/m/Y') : '' }}</p> --}}
                                                Expiry: 
                                                {{ 
                                                    empty($course->course_expiry_date) || $course->course_expiry_date == '0000-00-00' 
                                                        ? 'Ongoing' 
                                                        : \Carbon\Carbon::parse($course->course_expiry_date)->format('d/m/Y') 
                                                }}

                                                <!-- New markup -->
                                                <div class="progress-main custom-progress">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" style="width: {{ $progressPercent }}%;" aria-valuenow="{{ $progressPercent }}" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <p>{{ $progressPercent }}%</p>
                                                </div>

                                                @if(!$course->first_lesson_id)
                                                    <p class="text-muted small mt-2">
                                                        Lessons not yet added by practitioner
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach 
                        @else  
                            <div class="col-lg-12 m-auto justify-content-center">
                                <div class="dataempty-box datanodisplay notestresultstoshow w-100">
                                    <div class="appointment-empty-box px-0 pt-0">
                                        <div class="innerroundbox-padd">
                                        <div class="img-calenderbox">
                                            <img src="{{asset('assets/images/online_courses.svg')}}" alt="" class="img-fluid mCS_img_loaded">
                                        </div>
                                        <h3 class="sub-title ml-0 mb-4">Courses dashboard</h3>
                                        <p class="text-navy">It looks like you haven’t purchased any courses. Once you do, they will show here.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
            </div>
        
        
    
        </div>
   </div>
</div>



@endsection

@section('js')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js" integrity="sha512-eviLb3jW7+OaVLz5N3B5F0hpluwkLb8wTXHOTy0CyNaZM5IlShxX1nEbODak/C0k9UdsrWjqIBKOFY0ELCCArw==" crossorigin="anonymous"></script>
<script type="text/javascript">

   $(document).on('click', '.locked-course-link', function (e) {
        e.preventDefault();

        Swal.fire({
            icon: 'warning',
            title: 'Access restricted',
            text: 'It looks like you don’t currently have access to this course. Please check that your payment details are up to date, or reach out to your service provider for support.',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'Ok'
        });
    });

    $(document).on('click', '.expired-course-link', function (e) {
        e.preventDefault();

        const expiryDate = $(this).data('expiry') || 'a past date';

        Swal.fire({
            icon: 'warning',
            title: 'Course expired',
            text: `It looks like access to this course ended on ${expiryDate}. Please reach out to the course creator, if you believe this is an error.`,
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'Ok'
        });
    });

        


        

    
</script>

@endsection