@extends('layouts.app') <!-- Extending the master layout -->
@section('content') <!-- Defining the content section -->
<div class="page-container">
    <div class="row">
        <div class="col-12">
            <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column">
                <div class="flex-grow-1">
                    <h4 class="fs-18 text-uppercase fw-bold m-0">{{ __('messages.dashboard') }}</h4>
                </div>
            </div><!-- end card header -->
        </div>
    </div> <!-- end row-->
    <div class="row">
        <div class="col">
            <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1 text-center">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">{{ __('messages.total_orders') }}</h5>
                            <div class="d-flex align-items-center justify-content-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-primary rounded-circle fs-22">
                                        <iconify-icon icon="solar:case-round-minimalistic-bold-duotone"></iconify-icon>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold"> {{$transactionCount}}</h3>
                            </div>
                        </div>
                    </div>
                </div><!-- end col -->

                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Avg. Sales Earnings">{{ __('messages.avg_sales_earnings') }}</h5>
                            <div class="d-flex align-items-center justify-content-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-primary rounded-circle fs-22">
                                        <iconify-icon icon="solar:wallet-money-bold-duotone"></iconify-icon>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">{{$totalAmount}} <small class="text-muted">AED</small></h3>
                            </div>
                        </div>
                    </div>
                </div><!-- end col -->

                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Visits">{{ __('messages.number_of_visits') }}</h5>
                            <div class="d-flex align-items-center justify-content-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-primary rounded-circle fs-22">
                                        <iconify-icon icon="solar:eye-bold-duotone"></iconify-icon>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">{{$visitorCount}}</h3>
                            </div>
                        </div>
                    </div>
                </div><!-- end col -->
            </div><!-- end row -->

            <div class="row">
                <div class="col-xxl-6">
                    <div class="card">
                        <div class="d-flex card-header justify-content-between align-items-center">
                            <h4 class="header-title">{{ __('messages.course_listing') }}</h4>
                            <a href="{{route('course.create')}}" class="btn btn-sm btn-secondary">{{ __('messages.add_course') }} <i class="ti ti-plus ms-1"></i></a>
                        </div>
                        <div class="card-body p-0">
                            <div class="bg-success bg-opacity-10 py-1 text-center">
                                <p class="m-0"><b>{{ count($courses) }}</b> {{ __('messages.active_courses') }}</p>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-custom table-centered table-sm table-nowrap table-hover mb-0">
                                    <tbody>
                                     @if($courses->isEmpty())
                                        <tr>
                                            <td colspan="5" class="text-center">{{ __('messages.no_courses_found') }}</td>     
                                        <tr>
                                        @else
                                        @foreach($courses as $course)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-md flex-shrink-0 me-2">
                                                        <span class="avatar-title bg-danger-subtle rounded-circle">
                                                            <img src="{{ asset('storage/'.$course->image_url) }}" alt="" height="22">
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <span class="text-muted fs-12">Course Name</span> <br />
                                                        <h5 class="fs-14 mt-1">{{$course->title}}</h5>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="text-muted fs-12">Price</span>
                                                <h5 class="fs-14 mt-1 fw-normal">{{$course->price}}</h5>
                                            </td>
                                            <td>
                                                <span class="text-muted fs-12">Duration</span> <br />
                                                <h5 class="fs-14 mt-1 fw-normal">{{$course->duration_days}}</h5>
                                            </td>
                                            <td>
                                                <span class="text-muted fs-12">Difficulty Level</span>
                                                <h5 class="fs-14 mt-1 fw-normal">{{$course->difficulty_level}}</h5>
                                            </td>
                                           
                                         
                                        </tr>
                                        @endforeach
                                        @endif
                                       
                                    </tbody>
                                </table>
                            </div> <!-- end table-responsive-->
                        </div> <!-- end card-body-->
                       
                    </div> <!-- end card-->
                </div> <!-- end col-->

                <div class="col-xxl-6">
                    <div class="card">
                        <div class="card-header d-flex flex-wrap align-items-center gap-2 border-bottom border-dashed">
                            <h4 class="header-title me-auto">{{ __('messages.top_selling_courses') }}</h4>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-custom align-middle table-nowrap table-hover mb-0">
                                <tbody>
    @if($topSellingCourses->isEmpty())
        <tr>
            <td colspan="5" class="text-center">
                {{ __('messages.no_top_selling_courses_found') }}
            </td>  
        </tr>
    @else
        @foreach($topSellingCourses as $topcourse)
            <tr>
                <td>
                    <div class="avatar-lg">
                        <img src="{{ asset('storage/'.$topcourse->image_url) }}" alt="Product" class="img-fluid rounded-2">
                    </div>
                </td>
                <td class="ps-0">
                    <h5 class="fs-14 my-1">
                        <a href="{{ route('courses.details', $topcourse->id) }}" class="link-reset">{{ $topcourse->title }}</a>
                    </h5>
                </td>
                <td>
                    <h5 class="fs-14 my-1">{{ $topcourse->price }} AED</h5>
                    <span class="text-muted fs-12">Price</span>
                </td>

                <td>
                    <h5 class="fs-14 my-1">{{ $topcourse->total_count }}</h5>
                    <span class="text-muted fs-12">Total Sold</span>
                </td>
              
                <td class="text-end">
                    <h5 class="fs-14 my-1">{{ number_format($topcourse->total_amount, 2) }} AED</h5>
                    <span class="text-muted fs-12">Total Sales</span>
                </td>
            </tr>
        @endforeach
    @endif
</tbody>

                                </table>
                            </div> <!-- end table-responsive-->
                        </div> <!-- end card-body-->
                        
                    </div> <!-- end card-->
                </div> <!-- end col-->
            </div> <!-- end row-->
        </div> <!-- end col-->
    </div> <!-- end row-->
</div>
@endsection