@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
    <style>
        /* CSS for responsive iframe */
        /* ========================= */

        /* outer wrapper: set max-width & max-height; max-height greater than padding-bottom % will be ineffective and height will = padding-bottom % of max-width */
        #Iframe-Master-CC-and-Rs {
            max-width: 512px;
            max-height: 100%;
            overflow: hidden;
        }

        /* inner wrapper: make responsive */
        .responsive-wrapper {
            position: relative;
            height: 0;    /* gets height from padding-bottom */

            /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS:
              -webkit-overflow-scrolling: touch; overflow: auto; */

        }

        .responsive-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            margin: 0;
            padding: 0;
            border: none;
        }

        /* padding-bottom = h/w as % -- sets aspect ratio */
        /* YouTube video aspect ratio */
        .responsive-wrapper-wxh-572x612 {
            padding-bottom: 107%;
        }

        /* general styles */
        /* ============== */
        .set-border {
            border: 5px inset #4f4f4f;
        }
        .set-box-shadow {
            -webkit-box-shadow: 4px 4px 14px #4f4f4f;
            -moz-box-shadow: 4px 4px 14px #4f4f4f;
            box-shadow: 4px 4px 14px #4f4f4f;
        }
        .set-padding {
            padding: 40px;
        }
        .set-margin {
            margin: 30px;
        }
        .center-block-horiz {
            margin-left: auto !important;
            margin-right: auto !important;
        }
    </style>
@endsection
@section('content')
    <section class="profile-pg section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="side-r">
                        <div class="profile-info">
                            <img src="{{$user->photo ? asset($user->photo) : asset('assets/web/images/user.png')}}" alt="" class="profile-pic">
                            <h6>{{$user->name}}</h6>
                            <p>{{$user->email}}</p>
                        </div>
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active" id="v-pills-tab10-tab" data-toggle="pill" href="#v-pills-tab10" role="tab" aria-controls="v-pills-tab10" aria-selected="true"><img src="{{asset('assets/web/images/icons/profile/home.svg')}}" class="icon" alt=""> الصفحة الرئيسية</a>
                            <a class="nav-link" id="v-pills-tab11-tab" data-toggle="pill" href="#v-pills-tab11" role="tab" aria-controls="v-pills-tab11" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/bags.svg')}}" class="icon" alt=""> الحقائب التدريبية</a>
                            <a class="nav-link" id="v-pills-tab12-tab" data-toggle="pill" href="#v-pills-tab12" role="tab" aria-controls="v-pills-tab12" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/telegram.svg')}}" class="icon" alt=""> التلجرام </a>
                            <a class="nav-link" id="v-pills-tab14-tab" data-toggle="pill" href="#v-pills-tab14" role="tab" aria-controls="v-pills-tab14" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/quiz.svg')}}" class="icon" alt=""> الإختبارات والواجبات</a>
                            <a href="{{route('instructor.addTestQuestionForm')}}" class="nav-link"><img src="{{asset('assets/web/images/icons/profile/quiz.svg')}}" class="icon" alt="">إضافة أسئلة</a>
                            <a class="nav-link" id="v-pills-tab15-tab" data-toggle="pill" href="#v-pills-tab15" role="tab" aria-controls="v-pills-tab15" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/exam.svg')}}" class="icon" alt=""> الإختبارات المضافه </a>
                            <a class="nav-link" id="v-pills-tab16-tab" data-toggle="pill" href="#v-pills-tab16" role="tab" aria-controls="v-pills-tab16" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/exam.svg')}}" class="icon" alt=""> الواجبات المضافه </a>
                            <a class="nav-link" id="v-pills-tab4-tab" data-toggle="pill" href="#v-pills-tab4" role="tab" aria-controls="v-pills-tab4" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/course.svg')}}" class="icon" alt=""> دوراتي </a>


                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="tab-content" id="v-pills-tabContent">
                        {{-- Main tap --}}
                        <div class="tab-pane fade show active" id="v-pills-tab10" role="tabpanel" aria-labelledby="v-pills-tab10-tab">
                            <div class="course_view">
                                <section class="course_det tab-wrapper bg-gray">
                                    <div class="l_side">
                                        <h5 class="mb-5">محتوى الدورة </h5>
                                        @if(count($unitsWithLectures))
                                            @foreach($unitsWithLectures as $unitName => $lectures)
                                                <div class="items_white faq_card mt-3">
                                                    <div class="card_head  d-flex justify-content-between p-0">
                                                        <h6> <span class="icon"></span>{{$unitName}}</h6>
                                                    </div>
                                                    <div class="card_body mt-5">
                                                        @foreach($lectures as $lecture)
                                                            <div class=" faq_card">
                                                                <div class="card_head  d-flex justify-content-between">
                                                                    <h6> <span class="icon"></span>{{$lecture['lecture_name']}}</h6>
                                                                    <div class="btns">
                                                                        @if($lecture['lecture_date'])
                                                                            <span>{{date('d M Y', strtotime($lecture['lecture_date']))}}</span>
                                                                        @endif
                                                                        <a onclick="return false" href="#" class="butn {{$lecture['lecture_type'] == 'live' ? 'live' : 'bg-danger'}} text-white mr-2">{{__('lectures.'.$lecture['lecture_type'])}}</a>
                                                                    </div>
                                                                </div>
                                                                <div class="card_body">
                                                                    <div class="vidd">
                                                                        <span> <a href="{{route('lecture.show', $lecture['lecture_id'])}}"> <i class="fas fa-video"></i> محاضره </a> </span>
                                                                        <span> <i class="far fa-clock"></i> {{date('h:i', strtotime($lecture['lecture_time']))}} </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </section>
                            </div>
                        </div>
                        {{-- Training bags --}}
                        <div class="tab-pane fade" id="v-pills-tab11" role="tabpanel" aria-labelledby="v-pills-tab11-tab">
                            <div class="my_courses tab-wrapper">
                                <div class="row">
                                    @if(count($trainingBags))
                                        @foreach($trainingBags as $trainingBag)
                                            <div class="col-md-4">
                                                <a {{$trainingBag->file ? 'download' : ''}} target="_blank" href="{{$trainingBag->url ? $trainingBag->url : asset($trainingBag->file)}}" class="prod_item d-block training_bag_link">
                                                    <div class="img">
                                                        <img src="{{asset($trainingBag->image)}}" alt="">
                                                    </div>
                                                    <div class="info p-3">
                                                        <h3 class="mt-0 mb-2 main-color">{{$trainingBag->name}}</h3>
                                                        <small>{!! $trainingBag->description !!}</small>
                                                    </div>
                                                </a>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        {{-- Telegrams --}}
                        <div class="tab-pane fade" id="v-pills-tab12" role="tabpanel" aria-labelledby="v-pills-tab12-tab">
                            <div class="telegram_tab tab-wrapper">
                                <div class="row">
                                    @if(count($telegrams))
                                        @foreach($telegrams as $telegram)
                                            <div class="col-lg-4">
                                                <a target="_blank" href="https://t.me/{{$telegram->url}}" class="items mb-1">
                                                    <div class="cont">
                                                    <span class="icons">
                                                        <i class="fab fa-telegram-plane"></i>
                                                    </span>
                                                        <p> {{$telegram->group_members ? $telegram->group_members . 'عضو' : ''}}  </p>
                                                    </div>
                                                </a>
                                                <small class="butn color text-center w-100 d-block mb-3"><span>{{$telegram->name}}</span></small>
                                            </div>
                                        @endforeach
                                    @endif

                                </div>
                            </div>
                        </div>
                        {{-- Tests --}}
                        <div class="tab-pane fade test_container" id="v-pills-tab14" role="tabpanel" aria-labelledby="v-pills-tab14-tab">
                            <section class="quiz_add_content tab-wrapper">
                                <div class="container">
                                    <div class="row justify-content-center">
                                        <div class="col-lg-12">
                                            <div class="quiz_content">
                                                <div class="ques_add">
                                                    <form class="form add_test_form" action="{{route('instructor.addTest')}}" method="post">
                                                        @csrf()
                                                        <div class="row">
                                                            <div class="form-group col-md-12">
                                                                <label>{{ meta('test_type', getCurrentLocale()) ?? __('electronicTests.test_type') }} </label>
                                                                <select name="test_type" class="form-control custom-select">
                                                                    <option value="">{{ __('electronicTests.test_type') }}</option>
                                                                    <option value="course_test">{{__('electronicTests.course_test')}}</option>
                                                                    <option value="duty">{{__('electronicTests.duty')}}</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group course_container col-md-12">
                                                                <label>{{ meta('course_id', getCurrentLocale()) ?? __('electronicTests.course_id') }} </label>
                                                                <select name="course_id" class="form-control custom-select">
                                                                    <option selected value="{{$course->id}}">{{$course->name}}</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-lg-12 lecture_container d-none">
                                                                <label>{{ meta('lecture_id', getCurrentLocale()) ?? __('electronicTests.lecture_id') }} </label>
                                                                <select name="lecture_id" class="form-control custom-select">
                                                                    <option value="">{{ __('electronicTests.lecture_id') }}</option>
                                                                    @if(count($myLectures))
                                                                        @foreach($myLectures as $lecture)
                                                                            <option value="{{$lecture->id}}">{{$lecture->name}}</option>
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="select_lesson ">
                                                            <h5>تفاصيل الاختبار </h5>
                                                            <div class="form-group mt-3">
                                                                <p>اسم الأختبار </p>
                                                                <input type="text" name="name" class="input_ques" placeholder="أكتب هنا ... ">
                                                            </div>
                                                            <div class="form-group mt-3">
                                                                <p>مده الأختبار </p>
                                                                <input type="number" min="1" name="test_time" class="input_ques" placeholder="أكتب هنا ... ">
                                                            </div>
                                                            <!---------------- new ---------------->
                                                            <div class="form-group mt-3">
                                                                <p>رفع صوره الأختبار </p>
                                                                <div class="add_img apload_car_parts col-12 p-0 form-group">
                                                                    <div class="items_part">
                                                                        <div class="input-field">
                                                                            <div class="input-images">
                                                                            </div>
                                                                            <img src="{{ asset('assets/web/images/upload.png') }}" alt="" class="icon">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!--<div class="form-group up_group">-->
                                                            <!--    <p>رفع صوره الأختبار </p>-->
                                                            <!--    <input type="file" name="image" class="file">-->
                                                            <!--    <div class="input-group">-->
                                                            <!--        <span class="input-group-append">أضغط لرفع الصوره </span>-->
                                                            <!--        <input type="text" class="input_ques" disabled placeholder="Upload File" aria-label="Upload File" aria-describedby="basic-addon1">-->
                                                            <!--    </div>-->
                                                            <!--</div>-->
                                                            <div class="form-group mt-3">
                                                                <input type="submit" class="btn btn-primary btn-sm btn-block add_test_button" value="حفظ">
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                        {{-- Added Tests --}}
                        <div class="tab-pane fade" id="v-pills-tab15" role="tabpanel" aria-labelledby="v-pills-tab15-tab">
                            <section class="courses products-sec tab-wrapper">
                                <div class="container">
                                    <div class="content small_prod">
                                        <div class="row">
                                            @if(count($courseTests))
                                                @foreach($courseTests as $courseTest)
                                                    <div class="col-lg-4 deleted_test_container_{{$courseTest->id}}">
                                                        <a href="#">
                                                            <div class="prod_item">
                                                                <div class="img">
                                                                    <div class="btns">
                                                                        <button data-href="{{route('instructor.editTest', $courseTest->id)}}" class="btn redirect_to_test"><i class="far fa-edit"></i></button>
                                                                        <button data-href="{{route('instructor.showTest', $courseTest->id)}}" class="btn redirect_to_test"><i class="far fa-eye"></i></button>
                                                                        <button data-delete=".deleted_test_container_{{$courseTest->id}}" data-href="{{route('instructor.deleteTest', $courseTest->id)}}" class="btn bg-danger delete_test"><i class="fas fa-trash"></i></button>
                                                                    </div>
                                                                    <img src="{{$courseTest->image ? asset($courseTest->image) : asset('assets/web/images/prod/1.png')}}" alt=" ">
                                                                </div>
                                                                <div class="info ">
                                                                    <h3>{{$courseTest->name}}</h3>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                        {{-- Added Duties --}}
                        <div class="tab-pane fade" id="v-pills-tab16" role="tabpanel" aria-labelledby="v-pills-tab16-tab">
                            <section class="courses products-sec tab-wrapper">
                                <div class="container">
                                    <div class="content small_prod">
                                        <div class="row">
                                            @if(count($lecturesTests))
                                                @foreach($lecturesTests as $lecturesTest)
                                                    <div class="col-lg-4">
                                                        <a href="#">
                                                            <div class="prod_item">
                                                                <div class="img">
                                                                    <div class="btns">
                                                                        <button data-href="{{route('instructor.editTest', $lecturesTest->id)}}" class="btn redirect_to_test"><i class="far fa-edit"></i></button>
                                                                        <button data-href="{{route('instructor.showTest', $lecturesTest->id)}}" class="btn redirect_to_test"><i class="far fa-eye"></i></button>
                                                                        <button data-delete=".deleted_test_container" data-href="{{route('instructor.deleteTest', $lecturesTest->id)}}" class="btn bg-danger delete_test"><i class="fas fa-trash"></i></button>
                                                                    </div>
                                                                    <img src="{{$lecturesTest->image ? asset($lecturesTest->image) : asset('assets/web/images/prod/1.png')}}" alt=" ">
                                                                </div>
                                                                <div class="info ">
                                                                    <h3>{{$lecturesTest->name}}</h3>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            @endif

                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                        {{-- Courses --}}
                        <div class="tab-pane fade" id="v-pills-tab4" role="tabpanel" aria-labelledby="v-pills-tab4-tab">
                            <div class="my_courses tab-wrapper">
                                <div class="row">
                                    @if(count($courses))
                                        @foreach($courses as $course)
                                            <div class="col-md-4">
                                                <div class="prod_item">
                                                    <div class="img">
                                                        <img src="{{asset($course->image)}}" alt="">
                                                        <span class="sec">{{$course->category_name}}</span>
                                                    </div>
                                                    <div class="info">
                                                        <div class="author">
                                                            <div class="s_img">
                                                                <img src="{{asset($course->instructor_image)}}" alt="">
                                                            </div>
                                                            <div class="inf">
                                                                {{$course->instructor_name}}
                                                            </div>
                                                        </div>
                                                        <h3><a  href="{{route('instructor.courseProfile', $course->id)}}">{{$course->name}}</a></h3>
                                                        <div class="prc">
                                                            <div class="str">
                                                                <small>
                                                                    ( {{$course->evaluate_count}} تقييم )
                                                                </small>
                                                                <div class="stars">
                                                                    <i class="{{abs(round($course->evaluate_average)) >=1 ? 'fas' : 'far'}} fa-star"></i>
                                                                    <i class="{{abs(round($course->evaluate_average)) >=2 ? 'fas' : 'far'}} fa-star"></i>
                                                                    <i class="{{abs(round($course->evaluate_average)) >=3 ? 'fas' : 'far'}} fa-star"></i>
                                                                    <i class="{{abs(round($course->evaluate_average)) >=4 ? 'fas' : 'far'}} fa-star"></i>
                                                                    <i class="{{abs(round($course->evaluate_average)) >=5 ? 'fas' : 'far'}} fa-star"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @if($course->course_type == 'payed')
                                                            <ul class="prod_fot">
                                                                <li><i class="far fa-calendar"></i> يبدأ من <span>  {{date('d F', strtotime($course->start_date))}} </span> وينتهى <span>{{date('d F', strtotime($course->end_date))}}</span></li>
                                                                <li><i class="far fa-calendar"></i> أيام الأسبوع <span>
                                                                    @php
                                                                        /** @var TYPE_NAME $course */
                                                                        $allDays = explode(', ', $course->days);
                                                                    @endphp

                                                                        @foreach($allDays as $day)
                                                                            {{ucfirst(__('courses.'.$day))}}
                                                                        @endforeach
                                                                        {{--                                                                                                    ({{str_replace(',', ' ', $course->days)}}) --}}

                                                                </span> </li>
                                                            </ul>
                                                        @endif
                                                        @if(in_array($course->course_type, ['record_payed']))
                                                            <ul class="prod_fot">
                                                                <li><i class="far fa-calendar"></i><span>دورة مسجلة</span></li>
                                                                <li><i class="far fa-calendar"></i> ساعات الدورة<span>{{$course->hours}}</span> </li>
                                                            </ul>
                                                        @endif
                                                        @if(in_array($course->course_type, ['free']))
                                                            <ul class="prod_fot">
                                                                <li><i class="far fa-calendar"></i><span>دورة مجانية</span></li>
                                                                <li><i class="far fa-calendar"></i> ساعات الدورة<span>{{$course->hours}}</span> </li>
                                                            </ul>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>

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


    <div class="modal fade modal_pdf" id="modal_pdf" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">عرض ال pdf</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <object
                        data=""
                        type="application/pdf"
                        width="100%"
                        height="100%">
                        <iframe
                            src=""
                            frameborder="0" width="100%" height="500px"
                            style="border: none;">
                            <p>Your browser does not support PDFs.
                                <a href="">Download the PDF</a>.</p>
                        </iframe>
                    </object>
                </div>
            </div>
        </div>
    </div>

    <!-- start_exam_modal -->
    <div class="modal fade delete_done" id="delete_done1" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="delete_doneLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content ">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body text-center">
                    <div class="img">
                        <img src="{{asset('assets/web/images/icons/edit.svg')}}" alt="">
                    </div>
                    <h4>تم التعديل بنجاح</h4>
                </div>

            </div>
        </div>
    </div>
    <!-- start_exam_modal -->
    <div class="modal fade delete_done" id="delete_done2" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="delete_doneLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content ">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body text-center">
                    <div class="img">
                        <img src="{{asset('assets/web/images/icons/add.svg')}}" alt="">
                    </div>
                    <h4>تم الأضافه بنجاح</h4>
                </div>

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

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script src="{{asset('assets/web/js/courses.course_profile.js')}}"></script>

    <script>

        // ------------ upload image ------------
        $('.input-images').imageUploader({
            imagesInputName: 'image',
        });
    </script>
@endsection