@extends('layouts.app')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <!-- Page Content -->
        <!-- Hero -->
        <div class="bg-image" style="background-image: url('{{asset(\Illuminate\Support\Facades\Storage::url('profile_image/'.\App\Setting::first()->profile_image))}}');">
            <div class="bg-black-25">
                <div class="content content-full">
                    <div class="py-5 text-center">
                        <a class="img-link" href="{{route('website.users.show',$user->id)}}">
                            <img class="img-avatar img-avatar96 img-avatar-thumb" src="{{asset($user->image)}}" alt="">
                        </a>
                        <h1 class="font-w700 my-2 text-white">{{auth()->user() != null ? auth()->user()->name : $user->name}}</h1>
{{--                        <h2 class="h4 font-w700 text-white-75">--}}
{{--                            Front End Developer <a class="text-primary-lighter" href="javascript:void(0)">@FDevAhmed</a>--}}
{{--                        </h2>--}}
                        @if(auth()->check())
                        <a type="button" class="btn btn-hero-primary" href="{{route('website.users.edit',auth()->id())}}">
                            <i class="fa fa-fw fa-pencil-alt mr-1"></i> {{trans('web.edit')}}
                        </a>




                            <a type="button" class="btn btn-hero-primary" href="{{ route('logout') }}"
                               onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                {{trans('web.logout')}}
                            </a>

                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                        @endif
                        <!-- <button type="button" class="btn btn-hero-dark">
                            <i class="fa fa-fw fa-envelope mr-1"></i> Message
                        </button> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- END Hero -->
        <div class="content">

            <!-- Block Tabs Animated Slide Right -->
            <div class="block block-rounded">
                <ul class="nav nav-tabs nav-tabs-block" data-toggle="tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="#btabs-animated-slideright-home">{{trans('web.stages')}}</a>
{{--                        <a class="nav-link active" href="#btabs-animated-slideright-home">Grades</a>--}}
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#btabs-animated-slideright-profile">{{trans('web.file')}}</a>
                    </li>

                </ul>
                <div class="block-content tab-content overflow-hidden">
                    <div class="tab-pane fade fade-right show active" id="btabs-animated-slideright-home" role="tabpanel">
                        <div class="row gutters-tiny push">
                            @foreach($user->stages as $stage)
                                <div class="col-md-4 animated fadeIn" role='button' >
                                    <a href="{{route('website.classes.index',$stage->id)}}?teacher_id={{$user->id}}">
                                        <div class="options-container fx-item-zoom-in fx-overlay-slide-top">
                                            <img class="img-fluid options-item" src="{{asset($stage->image)}}" alt="{{$stage->name}}">
                                            <div class="options-overlay bg-black-75">
                                                <div class="options-overlay-content">
                                                    <h2 class=" text-white mb-2"><span class="text-primary">{{$stage->name}}</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
{{--                            <div class="col-6 col-md-4 col-xl-2">--}}
{{--                                <a class="block block-link-pop bg-gd-lake text-center" href="javascript:void(0)">--}}
{{--                                    <div class="block-content block-content-full aspect-ratio-1-1 d-flex justify-content-center align-items-center">--}}
{{--                                        <div>--}}
{{--                                            <div class="font-w600 mt-2 text-uppercase text-white">Primary Grade</div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                            <div class="col-6 col-md-4 col-xl-2">--}}
{{--                                <a class="block block-link-pop bg-xmodern text-center" href="javascript:void(0)">--}}
{{--                                    <div class="block-content block-content-full aspect-ratio-1-1 d-flex justify-content-center align-items-center">--}}
{{--                                        <div>--}}
{{--                                            <div class="font-w600 mt-2 text-uppercase text-white">Secondary Grade</div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </a>--}}
{{--                            </div>--}}

                        </div>
                    </div>
                    <div class="tab-pane fade fade-right" id="btabs-animated-slideright-profile" role="tabpanel">
                        <div class="row items-push">
                            @if(auth()->check())

                            <div class="col-12 d-flex justify-content-end">
                                <button type="button" class="btn btn-hero-lg btn-square btn-hero-primary mr-1 mb-3" onclick="showHideUploader()">
                                    <i class="fa fa-fw fa-plus mr-1"></i> {{trans('web.add_files')}}
                                </button>
                            </div>
                            @endif
                            <div class="col-12">
                                <form runat="server"  onsubmit="ShowLoading()" class="form form-horizontal row" id="add_files_form" method="POST" action="{{route('website.subject_data.store')}}" style="display: none" enctype="multipart/form-data">
                                    @csrf
                                    <div class="col-lg-12 col-xl-5">
                                        <div class="form-group">
                                            <select required class="js-select2 form-control form-control-alt" id="example-select2-multiple1" name="subject_id" style="width: 100%;" data-placeholder="Choose Subject">
                                                <option selected disabled value="">{{trans('web.subject')}}</option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                                @foreach($user->subjects as $subject)
                                                    <option value="{{$subject->id}}">{{$subject->name.' ('.$subject->stageClass->name.' - '.$subject->stageClass->stage->name.')'}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <select required class="js-select2 form-control form-control-alt" id="choose_type" name="type" style="width: 100%;" data-placeholder="Choose Subject">
                                                <option selected disabled value="">{{trans('web.file_type')}}</option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                                    <option value="media">{{trans('web.media_t')}}</option>
                                                    <option value="file">{{trans('web.files')}}</option>
                                                    <option value="presentation">{{trans('web.presentation')}}</option>
                                                    <option value="preparation">{{trans('web.preparation')}}</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="dm-profile-edit-username">{{trans('web.file_name')}}</label>
                                            <input required type="text" class="form-control" id="dm-profile-edit-name" name="name">
                                        </div>
                                        <div class="form-group" id="file_ds" style="display:none">
                                            <label for="dm-profile-edit-username">{{trans('web.choose_file')}}</label>
                                            <input type="file" class="form-control" id="dm-profile-edit-username" name="file">
                                        </div>

                                        <div class="form-group" id="link" style="display:none">
                                            <label for="dm-profile-edit-username">{{trans('web.link')}}</label>
                                            <input type="url" class="form-control" id="dm-profile-edit-username" name="link">
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-hero-lg btn-square btn-hero-primary mr-1 mb-3">
                                        <i class="fa fa-fw fa-plus mr-1"></i> {{trans('web.submit')}}
                                    </button>
                                </form>
                            </div>
                            @foreach($user->files as $file)

                                @if($file->type != 'media')
                            <div class="col-sm-6 col-md-4 col-xl-3 d-flex align-items-center" style="    margin-left: 50px;
">
                                <!-- Example File -->
                                <div class="options-container fx-overlay-zoom-out w-100">
                                    <!-- Example File Block -->
                                    <div class="options-item block block-rounded bg-body mb-0">
                                        <div class="block-content text-center">
                                            <p class="mb-2 overflow-hidden">
                                                <i class="fa fa-fw fa-4x fa-file-alt text-black"></i>
                                            </p>
                                            <p class="font-w600 mb-0">
                                                {{$file->name}} - {{$file->ext}}
                                            </p>
                                            @if($file->size)
                                            <p class="font-size-sm text-muted">
                                                {{$file->size}}KB
                                            </p>
                                            @endif
                                            <div class="block-content block-content-full d-flex align-items-center py-0 mb-2">
                                                <img class="img-avatar img-avatar48" src="{{asset($file->user->image)}}" alt="{{$file->user->name}}">
                                                <div class="ml-3 text-right">
                                                    <p class="font-w600 font-size-sm mb-0">{{$file->user->name}}</p>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between mb-2">
                                                <div class="d-flex">
                                                    <div class="mr-2"> <i class="far fa fa-eye" style="font-size: 13px;"></i> <span class="text-muted" style="font-size: 13px;">{{\App\SubjectDataReaction::where([['type','view'],['subject_data_id',$file->id]])->count()}}</span></div>
                                                    <div><i class="far fa fa-download" style="font-size: 13px;"></i> <span class="text-muted" style="font-size: 13px;">{{\App\SubjectDataReaction::where([['type','download'],['subject_data_id',$file->id]])->count()}}</span></div>
                                                </div>
                                                <div class="d-flex">
                                                    <div class="mr-2"> <i class="far fa fa-thumbs-up" style="font-size: 13px;"></i> <span id="like-{{$file->id}}" class="text-muted" style="font-size: 13px;">{{\App\SubjectDataReaction::where([['type','like'],['subject_data_id',$file->id]])->count()}}</span></div>
                                                    <div><i class="far fa fa-thumbs-down" style="font-size: 13px;"></i> <span id="dislike-{{$file->id}}" class="text-muted" style="font-size: 13px;">{{\App\SubjectDataReaction::where([['type','dislike'],['subject_data_id',$file->id]])->count()}}</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- END Example File Block -->

                                    <!-- Example File Hover Options -->
                                    <div class="options-overlay rounded-lg bg-white-50">
                                        <div class="options-overlay-content">
                                            <div class="mb-3">
                                                <a class="btn btn-hero-light" href="{{route('website.subject_data.show',$file->id)}}">
                                                    <i class="fa fa-eye text-primary mr-1"></i> {{trans('web.view')}}
                                                </a>
                                            </div>
                                            <div class="d-flex justify-content-center">
                                                <a download href="{{$file->link}}" type="button" class="btn btn-hero-primary px-3 py-2 mr-1 mb-3">
{{--                                                <a download href="{{route('website.subject_data.download',$file->id)}}" type="button" class="btn btn-hero-primary px-3 py-2 mr-1 mb-3">--}}
                                                    <i class="fa fa-fw fa-download"></i>
                                                </a>
{{--                                                <button type="button" class="btn btn-hero-danger px-3 py-2 mr-1 mb-3">--}}
{{--                                                    <i class="fa fa-fw fa-trash-alt"></i>--}}
{{--                                                </button>--}}
                                            </div>
                                            <div class="d-flex justify-content-center">
                                                <a href="javascript:void(0)" onclick="likeBtn('{{$file->id}}')" class="btn btn-hero-primary mr-1 mb-3 px-3 py-2">
{{--                                                <a href="{{route('website.subject_data.like',$file->id)}}" class="btn btn-hero-primary mr-1 mb-3 px-3 py-2">--}}
                                                    <i class="fa fa-fw fa-thumbs-up mr-1"></i> <span class="font-size-sm">Like</span>
                                                </a>
                                                <a href="javascript:void(0)" onclick="disLikeBtn('{{$file->id}}')" class="btn btn-hero-danger mr-1 mb-3 px-3 py-2">
{{--                                                <a href="{{route('website.subject_data.dislike',$file->id)}}" class="btn btn-hero-danger mr-1 mb-3 px-3 py-2">--}}
                                                    <i class="fa fa-fw fa-thumbs-down mr-1"></i> <span class="font-size-sm">Dislike</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- END Example File Hover Options -->
                                </div>
                                <!-- END Example File -->
                            </div>
                                    @else
                                        <div class="col-sm-6 col-md-4 col-xl-3 d-flex align-items-center" role="button" style="    margin-left: 50px;
">
                                            <iframe  src="{{$file->link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                        </div>


                                    @endif
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
            <!-- END Block Tabs Animated Slide Right -->
        </div>
        <!-- END Page Content -->
    </main>
    <!-- END Main Container -->
@endsection

@push('js')

    <script>
           $('body').on('change','#choose_type',function (){
                var val = $(this).val();
                    if(val == 'media'){
                        $('#link').show();
                        $('#file_ds').hide();
                    }else{
                        // alert(val);
                        $('#file_ds').show();
                        $('#link').hide();
                    }

                })

    </script>
    <script type="text/javascript">
        function ShowLoading(e) {
            var div = document.createElement('div');
            var img = document.createElement('img');
            img.src = '{{asset('img/loading.svg')}}';
            div.innerHTML = "Loading...<br />";
            div.style.cssText = 'position: fixed; top: 20%; left: 40%; z-index: 5000; width: 422px; text-align: center';
            div.appendChild(img);
            document.body.appendChild(div);
            return true;
            // These 2 lines cancel form submission, so only use if needed.
            // window.event.cancelBubble = true;
            // e.stopPropagation();
        }
        // ShowLoading()

    </script>
    <script>
        function likeBtn(id){
            //get company_services
            $.ajax({
                url: '{{url('subject_data/like')}}'+'/'+id,
                {{--url: '{{route('website.subject_data.like')}}'+id,--}}
                type: 'GET',
                // data: {
                //     'id': $('#class_id').val(),
                // },
                dataType: 'json',
                success: function (response) {
                    var data = response.data;
                    console.log(data);
                    console.log(id);
                    if (data){
                        $('#like-'+id).text(data);
                        // $('#subject_container').empty();
                        // $('#subject_container').append(data);
                    }else {

                    }

                },
                error: function () {

                }

            });
        }
        function disLikeBtn(id){
            //get company_services
            $.ajax({
                url: '{{url('subject_data/dislike')}}'+'/'+id,
                {{--url: '{{route('website.subject_data.like')}}'+id,--}}
                type: 'GET',
                // data: {
                //     'id': $('#class_id').val(),
                // },
                dataType: 'json',
                success: function (response) {
                    var data = response.data;
                    console.log(data);
                    console.log(id);
                    if (data){
                        $('#dislike-'+id).text(data);
                        // $('#subject_container').empty();
                        // $('#subject_container').append(data);
                    }else {

                    }

                },
                error: function () {

                }

            });
        }
    </script>

    @endpush