@extends('mix::layouts.master')
@section('title', __('Courses'))
@section('content')
@includeIf('include.back-header', ['route' => url()->previous()])

<div class="wallet-page relative mix-padding-10">
    @if (!__o_feature('feature.academy'))
    <div class="not-plan items-start">
        <div class="no-record z-50">
            <div class="rounded-3xl block p-5">
            <div class="text-center flex justify-center flex-col items-center">
    
                {!! ori('Delivery', 'package-box-door', 'w-16 h-16') !!}
                <div class="text-xl font-bold mt-5">{{ __('Upgrade your plan') }}</div>
                <div class="w-3/4 mt-3">
                <div class="text-sm text-gray-400">{{ __('Your plan does not support this feature. Upgrade to access.') }}</div>
        
                <a href="{{ route('user-mix-upgrade-index') }}" class="mt-5 koon-btn-dark">{{ __('Upgrade') }}</a>
                </div>
            </div>
            </div>
        </div>
        <div class="opacity-reduce opacity-90 z-40"></div>
    </div>
    @endif
    
    <div class="dashhead flex-col sm:flex-row">
        <div class="flex">
            <div class="-icon">
                {!! ori('School, Learning', 'laptop-book') !!}
            </div>

            <div class="-content">
                <div class="--title">{{ __('Course') }}</div>
                <div class="--sub">{{ __('Make your page awesome') }}</div>
            </div>
        </div>

        <div class="sm:ml-auto mt-3 sm:mt-0 flex items-center gap-3">
                
            @if (SandyTeam::can_create())
                <a class="sandy-expandable-btn bg-black cursor-pointer rounded-full py-0.5" href="{{ route('sandy-blocks-course-mix-new-course') }}">
                    <span class="flex items-center justify-between">
                        {!! orion('add-circle-1', 'w-5 h-5 stroke-current text-white') !!}
                        <span class="text-white">{{ __('New Course') }}</span>
                    </span>
                </a>
            @endif

            @if (SandyTeam::permission('can_edit'))
            <a class="bg-g-gray rounded-full h-10 w-10 flex items-center justify-center" href="{{ route('sandy-blocks-course-mix-settings') }}">
                {!! orion('cogwheel-1', 'w-5 h-5') !!}
            </a>
            @endif
        </div>
    </div>
    
    <div class="dashboard-fancy-card-v1 bg-white rounded-xl grid grid-cols-2 mt-5 md:px-5">
        <div class="dashboard-fancy-card-v1-single active">
            <div class="details-item w-full">
                <div class="details-head">
                    <div class="details-preview">
                        {!! ori('money', 'coint-growth') !!}
                    </div>
                    <div class="details-text caption-sm text-xs md:text-base truncate">{{ __('Earned') }}</div>
                    <span class="bg-g-gray w-0 h-8 flex items-center justify-center rounded-full ml-auto opacity-0"></span>
                </div>
                <div class="details-counter text-2xl md:text-4xl truncate font-bold ml-6">{!! str_replace('Free', '0', \Bio::price(ao($analytics, 'totalEarnings'), $user->id)) !!}</div>
                <div class="details-indicator ml-6">
                    <div class="details-progress w-half" bg-style="#EAD31F"></div>
                </div>
            </div>
        </div>
        <div class="dashboard-fancy-card-v1-single">
            <div class="details-item w-full border-0">
                <div class="details-head">
                    <div class="details-preview">
                        {!! ori('School, Learning', 'person-graduate') !!}
                    </div>
                    <div class="details-text caption-sm text-xs md:text-base truncate">{{ __('Students') }}</div>
                    
                    <span class="bg-g-gray w-0 h-8 flex items-center justify-center rounded-full ml-auto opacity-0"></span>
                </div>
                <div class="details-counter text-2xl md:text-4xl truncate font-bold ml-6">2</div>
                <div class="details-indicator ml-6">
                    <div class="details-progress w-half" bg-style="#207BE5"></div>
                </div>
            </div>
        </div>

        <div class="dashboard-fancy-card-v1-single">
            <div class="pt-0 details-item w-full">
                <div class="details-head">
                    <div class="details-preview">
                        {!! ori('School, Learning', 'Blackboard') !!}
                    </div>
                    <div class="details-text caption-sm text-xs md:text-base truncate">{{ __('Courses') }}</div>
                    <span class="bg-g-gray w-0 h-8 flex items-center justify-center rounded-full ml-auto opacity-0"></span>
                </div>
                <div class="details-counter text-2xl md:text-4xl truncate font-bold ml-6">
                    2
                </div>
                <div class="details-indicator ml-6">
                    <div class="details-progress w-half" bg-style="#2FEA1F"></div>
                </div>
            </div>
        </div>

        <div class="dashboard-fancy-card-v1-single">
            <div class="pt-0 details-item w-full">
                <div class="details-head">
                    <div class="details-preview">
                        {!! ori('custom', 'course-cert-1') !!}
                    </div>
                    <div class="details-text caption-sm text-xs md:text-base truncate">{{ __('Total Exams') }}</div>
                    <a class="bg-g-gray w-8 h-8 flex items-center justify-center rounded-full ml-auto" href="{{ route('sandy-blocks-course-mix-settings-exam') }}">
                        {!! orion('eye-1', 'w-4 h-4') !!}
                    </a>
                </div>
                <div class="details-counter text-2xl md:text-4xl truncate font-bold ml-6">
                    2
                </div>
                <div class="details-indicator ml-6">
                    <div class="details-progress w-half" bg-style="#EA8C1F"></div>
                </div>
            </div>
        </div>

    </div>
    
    <div class="dashboard-fancy-card-v1 border border-gray-100 border-solid rounded-xl grid grid-cols-2 hidden">
        <div class="dashboard-fancy-card-v1-single active">
            <div class="details-item w-full">
                <div class="details-head">
                    <div class="details-preview">
                        <i class="sio office-093-money-sack sligh-thick text-black text-lg"></i>
                    </div>
                    <div class="details-text caption-sm">{{ __('Earned') }}</div>
                </div>
                <div class="details-counter text-2xl md:text-4xl truncate font-bold">{!! \Bio::price(ao($analytics, 'totalEarnings'), $user->id) !!}</div>
                <div class="details-indicator">
                    <div class="details-progress bg-red w-half"></div>
                </div>
            </div>
        </div>
        <div class="dashboard-fancy-card-v1-single">
            <div class="details-item w-full border-0">
                <div class="details-head">
                    <div class="details-preview">
                        <i class="sio media-icon-065-video-camera sligh-thick text-black text-lg"></i>
                        
                    </div>
                    <div class="details-text caption-sm">{{ __('Courses') }}</div>
                </div>
                <div class="details-counter text-2xl md:text-4xl truncate font-bold">{{ nr($courses->count(), true) }}</div>
                <div class="details-indicator">
                    <div class="details-progress bg-sea w-half"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="quick-actions grid grid-cols-2 gap-4 mt-5 hidden">
        <a class="quick-action" href="{{ route('sandy-blocks-course-mix-sales') }}">

            <div class="quick-action-inner">{{ __('Orders') }}<span class="arrow-go">→</span>
            </div>
            
            {!! svg_i('pie-chart-1') !!}
        </a>

        <a class="quick-action" href="{{ route('sandy-blocks-course-mix-settings') }}">

            <div class="quick-action-inner">{{ __('Settings') }}<span class="arrow-go">→</span>
            </div>
            {!! svg_i('cogwheel-1') !!}
        </a>

        @if (SandyTeam::permission('can_create'))
        <a class="quick-action col-span-2" href="{{ route('sandy-blocks-course-mix-new-course') }}">

            <div class="quick-action-inner">{{ __('Create Course') }}<span class="arrow-go">→</span>
            </div>
            {!! svg_i('add-1') !!}
        </a>
        @endif
    </div>
        

    @if (!$courses->isEmpty())
    <div class="sandy-tabs">
        <div class="mb-5 flex bg-white px-5 py-3 rounded-xl mt-5">
            <div class="text-lg font-bold mr-auto pl-5 items-center flex">{{ __('Courses') }}</div>


            <div class="ml-auto flex items-center gap-2">
                <a class="cursor-pointer sandy-expandable-btn bg-g-gray rounded-full w-8 h-8 flex items-center justify-center sandy-tabs-link active">
                    {!! ori('interface-essential', 'grid-layout.17', 'w-4 h-4') !!}
                </a>
                <a class="cursor-pointer sandy-expandable-btn bg-g-gray rounded-full w-8 h-8 flex items-center justify-center sandy-tabs-link">
                    {!! ori('interface-essential', 'grid-layout.5', 'w-4 h-4') !!}
                </a>
            </div>
        </div>

        <form class="w-full flex items-centers mb-5 gap-4">
            <div class="search-filter w-full">
                <input class="-search-input" type="text" name="query" value="{{ request()->get('query') }}" placeholder="{{ __('Search') }}">

                <button class="-filter-btn">
                    {!! orion('search-1', 'w-5 h-5') !!}
                </button>
            </div>
        </form>


    <div class="sandy-tabs-body">
        <div class="sandy-tabs-item">
            
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 sortable" data-delay="150" data-route="{{ route('sandy-blocks-shop-mix-sort') }}" data-handle=".handler">
        @if (SandyTeam::permission('can_create'))
        <a class="short-product-card is-upload pointer-events-auto hidden" app-sandy-prevent href="{{ route('sandy-blocks-shop-mix-new-product') }}">
            <i class="plus-icon la la-plus"></i>
        </a>
        @endif
        @foreach ($courses as $item)

        <div class="koon-card-g sortable-item" data-id="{{ $item->id }}">
            
            <div class="-thumbnail p-0 rounded-xl">
                @php
                    $banner = $item->banner;
                    if(is_array($banner)) $banner = '';
                @endphp
                <img src="{{ gs('media/courses/banner', $banner) }}" alt="">
                <div class="-overlay-cog flex flex-col gap-1">
                    @if (SandyTeam::permission('cd'))
                    <form action="{{ route('sandy-blocks-course-mix-delete', $item->id) }}" method="post">
                        @csrf
                        <button data-delete="{{ __('Are you sure you want to delete this course?') }}" class="bg-white w-8 h-8 flex items-center justify-center rounded-full cursor-pointer">
                            {!! ori('interface-essential', 'trash-delete-remove', 'w-4 h-4 text-red-400') !!}
                        </button>
                    </form>
                    @endif
                    @if (SandyTeam::permission('can_edit'))
                    <a class="bg-white w-8 h-8 flex items-center justify-center rounded-full cursor-pointer" href="{{ route('sandy-blocks-course-mix-edit-course', $item->id) }}" app-sandy-prevent="">
                        {!! ori('interface-essential', 'pen-edit.5', 'w-4 h-4') !!}
                    </a>
                    @endif
                    @if (SandyTeam::permission('can_edit'))
                    <a class="bg-white w-8 h-8 flex items-center justify-center rounded-full cursor-pointer handler">
                        {!! ori('interface-essential', 'arrows-resize', 'w-4 h-4') !!}
                    </a>
                    @endif
                </div>
            </div>

            <div class="-content">
                
                <div class="-card-line flex-col">
                    <div class="--title mb-1 truncate"></div>
                    <div class="--price-wrap mb-2">
                        <span class="--price">