@extends('layouts.app')
@section('title')
    {{ __('messages_301.User profile') }}
@endsection
@section('style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/typeahead-js/typeahead.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/app-academy.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-profile.css') }}" />

    <style>
        .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
            width: 100% !important;
        }


        .shadow-img {
            box-shadow: 0 4px 8px rgb(0, 0, 0);
            /* Adjust the offset, blur, and color as needed */
            border-radius: 5px;
            /* Adjust the radius to match the rounded corners if needed */
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_301.Users') => null,
                __('messages_301.Doctors') => route('admin.users.doctors.index'),
                __('messages_301.User profile') => route( 'admin.users.doctors.show',$data->id),
                __('messages_301.Courses') => 'active',
            ],
        ])
    


        <div class="container-xxl flex-grow-1 container-p-y">

            @include('admin.users.includes.profile_info')
            <!-- User Profile Content -->
            <div class="container-xxl flex-grow-1 container-p-y">
                <div class="app-academy">

                    <div class="card mb-4">
                        <div class="card-header d-flex flex-wrap justify-content-between gap-3">
                            <div class="card-title mb-0 me-1">
                                <h5 class="mb-1">{{ __('messages_301.Courses') }}</h5>
                                <p class="text-muted mb-0">{{ count($courses) }}</p>
                            </div>

                        </div>
                        <div class="card-body">
                            <div class="row gy-4 mb-4">
                                @php
                                $i = 1;
                                $skipCount = $courses->perPage() * $courses->currentPage() - $courses->perPage();
                            @endphp
                            @include('inc.is_empty_data', [
                                'var_check_empty' => $courses,
                                'var_check_empty_rows' => 4,
                            ])
                                @if (count($courses))
                                    @foreach ($courses as $course)
                                        <div class="col-sm-6 col-lg-4">
                                            <div class="card p-2 h-100 shadow-none border">
                                                <div class="rounded-2 text-center mb-3">
                                                    <img class="img-fluid" src="{{ asset($course->image) }}"
                                                        alt="tutor image 1" />
                                                </div>
                                                <div class="card-body p-3 pt-2">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        @foreach ($course->topics as $topic)
                                                            <span class="badge bg-label-primary">{{ $topic->name }}</span>
                                                        @endforeach
                                                        <h6
                                                            class="d-flex align-items-center justify-content-center gap-1 mb-0">
                                                            {{ $course->avg_rate }}<span class="text-warning"><i
                                                                    class="ti ti-star-filled me-1 mt-n1"></i></span><span
                                                                class="text-muted">({{ count($course->subscribes) }})</span>
                                                        </h6>
                                                    </div>
                                                    <h5>{{ $course->name }}</h5>
                                                    <p class="mt-2">{!! $course->description !!}</p>
                                                    <p class="d-flex align-items-center"><i
                                                            class="fa fa-solid fa-film me-2 mt-n1"></i>{{ count($course->lessons) }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                    <div class="m-3">
                                        {{ $courses->appends(Request::except(['_token']))->links() }}
                                    </div>
                                @endif


                            </div>

                        </div>
                    </div>


                </div>
            </div>


        </div>
        <!-- Projects table -->

        <!--/ Projects table -->
    </div>
    <!--/ User Profile Content -->

@endsection

@section('script')
    <script src="{{ asset('assets/js/pages-account-settings-account.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/typeahead-js/typeahead.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/plyr/plyr.js') }}"></script>
    <script src="{{ asset('assets/js/pages-profile.js') }}"></script>
    <script src="{{ asset('assets/js/app-academy-course.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.nav-link').on('click', function(event) {
                // event.preventDefault(); // Prevent the default link behavior

                var page = $(this).data('page');

                var userId = {{ $data->id }}; // Assuming $data->id contains the user ID
                // var user_type = {!! json_encode($data->type->value) !!};
                // if(user_type == 'doctor')
                var newUrl = '/admin/users/doctors/' + userId + '?type=' + page;
                // else if(user_type == 'company')
                // var newUrl = '/admin/users/companies/' + userId + '?type=' + page;
                // else if(user_type == 'student')
                // var newUrl = '/admin/users/students/' + userId + '?type=' + page;
                // Navigate to the new URL
                window.location.href = newUrl;
            });
        });
    </script>
@endsection