@extends('user_dashboard.layouts.app')
@section('content')
    <div class="rbt-dashboard-area mb--50 mt--30">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>

                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="section-title">
                                    <h4 class="rbt-title-style-3">Welcome {{ Auth::guard('web')->user()->name }}
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
                                            <path
                                                d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                                            <path
                                                d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z" />
                                        </svg>
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="row  mt--50">
                            <div class="col-lg-12">
                                <div class="rbt-course-grid-column">
                                    @foreach ($courses as $course)
                                        <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
                                            <div class="rbt-cat-box rbt-cat-box-1 variation-2 text-center">
                                                <div class="inner">
                                                    <div class="thumbnail">
                                                        <a href="{{ route('user.course.detail', encrypt($course->id)) }}">
                                                            <img src="{{ asset('frontend/images/topics/' . $course->image) }}"
                                                                onerror="this.onerror=null;this.src='{{ asset('frontend/images/default-image.jpg') }}';">
                                                        </a>
                                                    </div>
                                                    <div class="icons">
                                                        <a class="rbt-btn rounded-player-2 sm-size position-to-top"
                                                            href="{{ route('user.course.detail', encrypt($course->id)) }}">
                                                            <span class="play-icon"></span>
                                                        </a>
                                                    </div>
                                                    <div class="content">
                                                        <h5 class="title">
                                                            <a
                                                                href="{{ route('user.course.detail', encrypt($course->id)) }}">{{ $course->name }}</a>
                                                        </h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection