@extends('layouts.app')
@section('title')
    {{ __('messages_301.Courses') }}
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_301.Courses') => route('doctor.courses.index'),
                __('messages_301.Show') => 'active',
            ],
        ])



        <div class="content-wrapper">
            <!-- Content -->

            <div class="container-xxl flex-grow-1 container-p-y">
                <div class="row">
                    <!-- User Sidebar -->
                    <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
                        <!-- User Card -->
                        <div class="card mb-4">
                            <div class="card-body">
                                <div class="user-avatar-section">
                                    <div class="d-flex align-items-center flex-column">
                                        <img class="img-fluid rounded mb-3 pt-1 mt-4"
                                            src="{{ isset($course->image) ? asset($course->image) : asset('default-images/user-image_.png') }}"
                                            height="100" width="100" alt="User avatar" />
                                        <div class="user-info text-center">
                                            <h4 class="mb-2">{{ $course->name }}</h4>
                                            <span class="badge bg-label-secondary mt-1">{{ $course->doctor->name }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-around flex-wrap mt-3 pt-3 pb-4 border-bottom">
                                    <div class="d-flex align-items-start me-4 mt-3 gap-2">
                                        <span class="badge bg-label-primary p-2 rounded"><i
                                                class="ti ti-users ti-sm"></i></span>
                                        <div>
                                            <p class="mb-0 fw-medium">{{ $students }}</p>
                                            <small>{{ __('messages_301.Students number') }}</small>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-start mt-3 gap-2">
                                        <span class="badge bg-label-primary p-2 rounded"><i
                                                class="ti ti-currency-dollar"></i></span>
                                        <div>
                                            <p class="mb-0 fw-medium">{{ $total }}</p>
                                            <small>{{ __('messages_301.Total amount paid') }}</small>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-4 small text-uppercase text-muted">{{ __('messages_301.Details') }}</p>
                                <div class="info-container">
                                    <ul class="list-unstyled">
                                        <li class="mb-2">
                                            <span class="fw-medium me-1">{{ __('messages_301.Media count') }}:</span>
                                            <span>{{ count($course->media) ?: '0' }}</span>
                                        </li>
                                        <li class="mb-2 pt-1">
                                            <span class="fw-medium me-1">{{ __('messages_301.Files count') }}:</span>
                                            <span>{{ count($course->files) ?: '0' }}</span>
                                        </li>
                                        <li class="mb-2 pt-1">
                                            <span class="fw-medium me-1">{{ __('messages_301.Online count') }}:</span>
                                            <span>{{ count($course->online) ?: '0' }}</span>
                                        </li>
                                        <li class="mb-2 pt-1">
                                            <span class="fw-medium me-1">{{ __('messages_301.Price') }}:</span>
                                            <span
                                                class="">{{ $course->price == 0 ? __('messages_301.Free') : $course->price }}</span>
                                        </li>
                                        <li class="mb-2 pt-1">
                                            <span class="fw-medium me-1">{{ __('messages_301.Old price') }}:</span>
                                            <span
                                                class="">{{ $course->old_price ?: __('messages_301.Old price not found') }}</span>
                                        </li>
                                    </ul>
                                    <div class="d-flex justify-content-center">


                                        <a class="btn btn-primary me-3"
                                            href="{{ route('doctor.courses.edit', $course->id) }}"></i>{{ __('messages.Edit') }}</a>

                                        <a data-url="{{ route('doctor.courses.destroy', $course->id) }}"
                                            data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                            data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="delete"
                                            data-message="{{ __('messages.Are you sure you want to delete? You cannot undo it') }}"
                                            class="btn btn-label-danger suspend-user btn-action" href="javascript:void(0);">
                                            {{ __('messages.Delete') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /User Card -->
                        <!-- Plan Card -->

                        <!-- /Plan Card -->
                    </div>
                    <!--/ User Sidebar -->

                    <!-- User Content -->
                    <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
                        <!-- User Pills -->
                        <ul class="nav nav-pills flex-column flex-md-row mb-4">
                            <li class="nav-item">
                                <button class="nav-link active" id="student"><i
                                        class="ti ti-user-check ti-xs me-1"></i>{{ __('messages_301.Students') }}</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" id="media"><i
                                        class="fa-solid fa-film"></i>{{ __('messages_301.Media') }}</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" id="files"><i
                                        class="ti ti-files"></i>{{ __('messages_301.Files') }}</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" id="online"><i
                                        class="ti ti-brand-zoom"></i>{{ __('messages_303.Online') }}</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" id="description"><i class="fa-solid fa-info"></i>
                                    {{ __('messages_301.Description') }}</button>
                            </li>
                        </ul>
                        <!--/ User Pills -->

                        <!-- Student table -->
                        <div class="card mb-4" id="student_card">
                            @include('doctor.courses.includes.student')
                        </div>
                        <!-- /Student table -->


                        <div class="card card-action mb-4" id="media_card" style="display:none;">
                            @include('doctor.courses.includes.media')
                        </div>

                        <div class="card card-action mb-4" id="files_card" style="display:none;">
                            @include('doctor.courses.includes.files')
                        </div>

                        <div class="card card-action mb-4" id="online_card" style="display:none;">
                            @include('doctor.courses.includes.online')
                        </div>

                        <div class="card card-action mb-4" id="description_card" style="display:none;">
                            <div class="card-body">
                                <div class="added-cards border p-3 rounded mb-3">

                                    <p class="mb-0">
                                        {!! $course->description !!}
                                    </p>

                                </div>
                            </div>
                        </div>



                    </div>
                    <!--/ User Content -->
                </div>


                <!-- /Modal -->
            </div>
            <!-- / Content -->



            <div class="content-backdrop fade"></div>
        </div>






    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            function showCard(selectedCard, selectedButton) {
                // Hide all cards
                $("#student_card, #media_card, #files_card, #description_card, #online_card").hide();
                // Show the selected card
                $(selectedCard).show();

                // Remove 'active' class from all buttons
                $(".nav-link").removeClass('active');
                // Add 'active' class to the clicked button
                $(selectedButton).addClass('active');
            }

            $("#student").click(function() {
                showCard("#student_card", this);
            });

            $("#media").click(function() {
                showCard("#media_card", this);
            });

            $("#description").click(function() {
                showCard("#description_card", this);
            });

            $("#files").click(function() {
                showCard("#files_card", this);
            });
            $("#online").click(function() {
                showCard("#online_card", this);
            });
        });
    </script>
@endsection