@extends('main-site.partials.app')

@section('title', __('Teacher'))

@section('content')
    <!-- Page Banner -->
    <div class="page-banner teacher-banner" style="background-image: url('{{ asset('main-site/assets/img/teacher-details-banner.jpg') }}');">
        <div class="container position-relative">
            <div class="d-flex align-items-md-end flex-wrap gap-45">
                <div class="teacher-unfollow">
                    <div class="teacher-img">
                        <img src="{{ $teacher->image_path }}" class="img-fluid">
                    </div>

                    @if(auth()->check() && auth()->user()->isFollowing($teacher))
                        <form action="{{ route('unfollow.teacher', $teacher->id) }}" method="POST" class="follow-toggle-form unfollow-form">
                            @csrf

                            <button type="submit" class="main-btn outline text-nowrap d-inline-flex align-items-center justify-content-center gap-2 w-100 mt-45">
                                {{ __("website_301.teacher.Unfollow") }}
                                <i class="icon-user-remove"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                            </button>
                        </form>
                    @else
                        <form action="{{ route('follow.teacher', $teacher->id) }}" method="POST" class="follow-toggle-form follow-form">
                            @csrf

                            <button type="submit" class="main-btn text-nowrap d-inline-flex align-items-center justify-content-center gap-2 w-100 mt-45">
                                {{ __("website_301.teacher.Follow") }}
                                <i class="icon-user-add"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                            </button>
                        </form>
                    @endif
                </div>
                <div class="teacher-details d-flex justify-content-between flex-wrap gap-2">
                    <div class="teacher-info">
                        <h2 class="fw-600 def-color">{{ $teacher->name }}<span class="opacity-70">({{ $teacher->followers->count() }}){{ __("website_301.teacher.Follower") }}</span></h2>
                        <span class="opacity-70 d-block def-color">{{ optional($teacher->teacherDetail)->subject }}</span>
                    </div>
                    <div class="teacher-contact">
                        @if(auth()->check() && auth()->user()->isFavorite($teacher))
                            <form action="{{ route('favorite.teacher', $teacher->id) }}" method="POST" class="favorite-toggle-form unfavorite-form">
                                @csrf

                                <button type="submit" class="main-btn outline-white small-text text-nowrap d-inline-flex align-items-center justify-content-center gap-2">
                                    {{ __("website_301.teacher.RemoveFavorite") }}
                                    <i class="icon-heart active"></i>
                                </button>
                            </form>

                        @else
                            <form action="{{ route('favorite.teacher', $teacher->id) }}" method="POST" class="favorite-toggle-form favorite-form">
                                @csrf

                                <button type="submit" class="main-btn outline-white small-text text-nowrap d-inline-flex align-items-center justify-content-center gap-2">
                                    {{ __("website_301.teacher.AddFavorite") }}

                                    <i class="icon-heart"></i>
                                </button>
                            </form>
                        @endif

                        <ul class="social-list d-flex gap-3 align-items-center justify-content-end">
                            <li>
                                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(route('teacher', $teacher->id)) }}&title={{ urlencode($teacher->name) }}" target="_blank">
                                    <i class="icon-linkedin"></i>
                                </a>
                            </li>

                            <li>
                                <a href="https://www.instagram.com/sharer/sharer.php?u={{ urlencode(route('teacher', $teacher->id)) }}" target="_blank">
                                    <i class="icon-instagram"></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/intent/tweet?url={{ urlencode(route('teacher', $teacher->id)) }}&text={{ urlencode($teacher->name) }}" target="_blank">
                                    <i class="icon-twitter"></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(route('teacher', $teacher->id)) }}" target="_blank">
                                    <i class="icon-facebook"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- teacher details -->
    <section class="teacher-details-section sec-padding pt-3">
        <div class="container">
            <div class="details-wrapper">
                <h3 class="fw-600 dark-color mb-4">
                    {{ __("website_301.teacher.Quote") }}
                </h3>
                <p class="dark-color mb-4">{!! $teacher->long_description !!}</p>

                <h3 class="fw-600 dark-color mb-4">{{ __("website_301.explanation.Courses") }}</h3>
                <div class="courses-section">
                    <div class="row">
                        {{-- @foreach($courses as $course)
                            <div class="col-xl-6 col-lg-6">
                                <div class="course-card card">
                                    <div class="card-img position-relative">
                                        <img src="{{ $course->image_path }}" class="img-fluid">
                                        <span class="card-label text-white">تفاعلي</span>
                                        <span class="course-name position-absolute top-50 start-50 translate-middle">{{ $course->title }}</span>
                                    </div>
                                    <div class="card-body">
                                        <a href="{{ route('course', $course->id) }}">
                                            <h5 class="card-title mb-3">{{ $course->short_description }}</h5>
                                        </a>
                                        <div class="course-info d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center gap-1">
                                                <img src="{{ $teacher->image_path }}" width="40" height="40" alt="">
                                                <span>{{ $teacher->name }}</span>
                                            </div>
                                            <div>
                                                <i class="icon-hourglass-end"><span class="path1"></span><span class="path2"></span></i>
                                                <span class="duration">مدة الدورة {{ $course->hours }} ساعات</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer d-flex">
                                        <button class="add-to-cart">
                                            اضف الي السلة
                                            <i class="icon-cart1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                                        </button>
                                        <button class="price"> JOD {{ $course->price }}</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach --}}

                        @forelse($courses as $course)
                    @include('main-site.partials.course', ['course', $course,'col'=>"col-xl-6 col-lg-6"])

                @empty
                    <!-- empty-msg -->
                    @include('main-site.partials.empty_data',[
                        'message'=>__("website_301.course.NoCourses")
                    ])
                @endforelse
                    </div>
                    <div class="pagination justify-content-center mt-5">
                        {{ $courses->appends(Request::except(['_token']))->links('main-site.partials.custom-pagination') }}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    @include('inc.toggles')
@endsection