@extends('bn.dashboard.layout')

@section('dashboard-content')

<div class="db-breadcrumb d-flex flex-wrap justify-content-between align-items-center mb-4">

    <div>
        <h3 class="fw-bold mb-1">
           কোর্সসমূহ
        </h3>

        <p class="text-muted mb-0">
            আপনার এনরোল করা কোর্সগুলো সহজে ট্র্যাক করুন এবং শেখা শুরু করুন।
        </p>
    </div>

    @if(!empty($statusCounts))
        <div class="d-flex flex-wrap gap-3 mt-3 mt-md-0">

            <div class="stats-pill success">
                <span>{{ $statusCounts['paid'] ?? 0 }}</span>
                <small>Paid</small>
            </div>

            <div class="stats-pill primary">
                <span>{{ $statusCounts['free'] ?? 0 }}</span>
                <small>Free</small>
            </div>

            <div class="stats-pill warning">
                <span>{{ $statusCounts['pending'] ?? 0 }}</span>
                <small>Pending</small>
            </div>

            <div class="stats-pill dark">
                <span>{{ $itemCount ?? 0 }}</span>
                <small>Total</small>
            </div>

        </div>
    @endif

</div>

@if(!empty($mappingProblem) && ($itemCount ?? 0) === 0)

    <div class="alert alert-warning radius-xl">
        Couldn’t match your dashboard login to a WordPress user.

        Make sure your Laravel user has a
        <code>wp_user_id</code>
        set or matching email exists in
        <code>wp_users.user_email</code>.
    </div>

@endif

<div class="row">

    <div class="col-lg-12">

        @forelse ($courses as $c)

            @php

                $hasSale = !is_null($c->sale_price)
                    && !is_null($c->regular_price)
                    && (float)$c->sale_price < (float)$c->regular_price;

                $regular = is_null($c->regular_price)
                    ? null
                    : (float)$c->regular_price;

                $sale = is_null($c->sale_price)
                    ? null
                    : (float)$c->sale_price;

                $price = (float)($c->discount_price ?? $sale ?? $regular ?? 0);

                $status = strtolower($c->payment_status ?? 'unknown');

                $badgeClass = match($status) {
                    'paid'    => 'success',
                    'free'    => 'primary',
                    'pending' => 'warning',
                    default   => 'dark'
                };

                $pct = is_null($c->progress_percent)
                    ? 0
                    : max(0, min(100, (int)$c->progress_percent));

                $courseUrl = !empty($c->post_name)
                    ? url('/course/'.$c->post_name)
                    : url('/?post_type=courses&p='.$c->course_id);

                $cover = $c->image_url
                    ?: asset('assets/images/no-image.png');

            @endphp

            <div class="modern-course-card horizontal-card mb-4">

                {{-- LEFT IMAGE --}}
                <div class="course-thumb">

                    <img src="{{ $cover }}"
                         alt="Course Image"
                         loading="lazy">

                    <div class="course-overlay">

                        <span class="badge badge-{{ $badgeClass }}">
                            {{ ucfirst($status) }}
                        </span>

                    </div>

                </div>

                {{-- RIGHT CONTENT --}}
                <div class="course-content">

                    {{-- TOP --}}
                    <div>

                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-3">

                            <div>

                                <h4 class="course-title mb-2">

                                    
                                        {{ $c->post_title ?? 'Untitled Course' }}
                                   

                                </h4>


                            </div>

                        </div>

                        {{-- PROGRESS --}}
                        <div class="progress-wrapper mb-4">

                            <div class="d-flex justify-content-between mb-2">

                                <small class="text-muted">
                                    Course Progress
                                </small>

                                <small class="fw-bold">
                                    {{ $pct }}%
                                </small>

                            </div>

                            <div class="custom-progress">

                                <div class="custom-progress-bar"
                                     style="width: {{ $pct }}%;">
                                </div>

                            </div>

                        </div>

                    </div>

                    {{-- BOTTOM --}}
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">

                        <div class="course-meta">

                            <small class="text-muted d-block mb-1">

                                Ordered:
                                {{ \Carbon\Carbon::parse($c->created_at_gmt)
                                    ->timezone(config('app.timezone','UTC'))
                                    ->format('M d, Y') }}

                            </small>

                            <small class="text-muted">

                                 @if($hasSale)

                                    <del>
                                        ৳ {{ number_format($regular, 2) }}
                                    </del>

                                    <h5>
                                        ৳ {{ number_format($sale, 2) }}
                                    </h5>

                                @else

                                    <h5>
                                        ৳ {{ number_format($price, 2) }}
                                    </h5>

                                @endif

                            </small>

                        </div>

                       @php
                            $status = strtolower($c->payment_status ?? '');
                        @endphp
                        
                        @if($status === 'paid')
                            <a href="{{ route('bn.dashboard.course.player', ['post_name' => $c->post_name]) }}"
                               class="btn btn-success radius-xl px-4">
                                Continue Reading
                            </a>
                        @else
                            <a href="{{ url('bn/courses/' . $c->post_name) }}"
                               class="btn btn-primary radius-xl px-4">
                                Complete Enrollment
                            </a>
                        @endif

                    </div>

                </div>

            </div>

        @empty

            <div class="empty-course-box text-center">

                <img src="{{ asset('assets/images/no-data.svg') }}"
                     alt="No Course"
                     class="mb-4"
                     style="max-width:220px;">

                <h4 class="mb-2">
                    No Courses Found
                </h4>

                <p class="text-muted mb-4">
                    You haven’t enrolled in any courses yet.
                </p>

                <a href="{{ url('/courses') }}"
                   class="btn btn-primary radius-xl px-4">

                    Browse Courses

                </a>

            </div>

        @endforelse

        {{-- PAGINATION --}}
        @if($courses->count())

            <div class="mt-4">
                {{ $courses->withQueryString()->onEachSide(0)->links('pagination::simple-bootstrap-4') }}
            </div>

        @endif

    </div>

</div>

{{-- STYLES --}}
<style>
/* PAGINATION */

.pagination{
    display:flex;
    justify-content:center;
    gap:14px;
}

.pagination .page-item{
    list-style:none;
}

.pagination .page-link{
    border:none;
    border-radius:14px !important;
    padding:12px 24px;
    font-weight:600;
    background:#fff;
    color:#222;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
    transition:.25s ease;
}

.pagination .page-link:hover{
    background:#28a745;
    color:#fff;
    transform:translateY(-2px);
}

.pagination .page-item.disabled .page-link{
    opacity:.5;
    cursor:not-allowed;
    background:#f5f5f5;
    color:#999;
    box-shadow:none;
}

/* REMOVE SVG ICONS */

.pagination svg{
    display:none !important;
}
.stats-pill{
    min-width:90px;
    padding:14px 18px;
    border-radius:18px;
    text-align:center;
    background:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.stats-pill span{
    display:block;
    font-size:24px;
    font-weight:700;
    line-height:1;
}

.stats-pill small{
    color:#777;
    font-size:12px;
}

.stats-pill.success span{
    color:#28a745;
}

.stats-pill.primary span{
    color:#0d6efd;
}

.stats-pill.warning span{
    color:#ff9800;
}

.stats-pill.dark span{
    color:#222;
}

/* CARD */

.modern-course-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    border:1px solid #f3f3f3;
    transition:.3s ease;
}

.modern-course-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.10);
}

.horizontal-card{
    display:flex;
    align-items:stretch;
}

/* IMAGE */

.course-thumb{
    width:auto;
    min-width:280px;
    max-width:380px;
    position:relative;
    overflow:hidden;
    background:#f8f8f8;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
}

.course-thumb img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:320px;
    object-fit:contain;
    border-radius:12px;
}
/* BADGE */

.course-overlay{
    position:absolute;
    top:18px;
    left:18px;
}

.badge{
    padding:10px 16px;
    border-radius:50px;
    font-size:12px;
    font-weight:600;
}

.badge-success{
    background:#e7f8ee;
    color:#28a745;
}

.badge-primary{
    background:#e9f2ff;
    color:#0d6efd;
}

.badge-warning{
    background:#fff4de;
    color:#ff9800;
}

.badge-dark{
    background:#efefef;
    color:#333;
}

/* CONTENT */

.course-content{
    flex:1;
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.course-title{
    font-size:24px;
    font-weight:700;
    line-height:1.4;
}

.course-title a{
    color:#111;
    text-decoration:none;
    transition:.2s;
}

.course-title a:hover{
    color:#28a745;
}

.course-author{
    color:#777;
    font-size:14px;
}

/* PRICE */

.course-price h5{
    margin:0;
    font-size:28px;
    color:#28a745;
    font-weight:700;
}

.course-price del{
    color:#999;
    display:block;
    margin-bottom:4px;
    font-size:14px;
}

/* PROGRESS */

.custom-progress{
    height:10px;
    background:#eee;
    border-radius:50px;
    overflow:hidden;
}

.custom-progress-bar{
    height:100%;
    border-radius:50px;
    background:linear-gradient(90deg,#28a745,#43d477);
}

/* EMPTY */

.empty-course-box{
    background:#fff;
    border-radius:24px;
    padding:70px 30px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}


/* MOBILE */

@media(max-width:991px){

    .horizontal-card{
        flex-direction:column;
    }

    .course-thumb{
        width:100%;
        min-width:100%;
        height:220px;
    }

    .course-content{
        padding:22px;
    }

    .course-title{
        font-size:20px;
    }

    .course-price h5{
        font-size:24px;
    }

}

</style>

@endsection