@extends('theme.master')
@section('title', '我的追蹤')
@section('content')

@include('admin.message') 

<!-- about-home start -->
<section id="wishlist-home" class="wishlist-home-main-block">
    <div class="container">
        <h1 class="wishlist-home-heading text-white">{{ __('frontstaticword.MyCollect') }}</h1>
    </div>
</section> 
<!-- about-home end -->
<section class="my_collects">
    <div class="container">
        <div class="row">
            <div id="mycategories" class="col-12 col-lg-4 show-title">
                <div class="collectsTitle pb-4 pt-5">{{ __('frontstaticword.SubCotegory') }}</div>
                <ul class="mt-5 px-3 items">
                    @foreach( $all_categories as $category )
                        <li class="mb-2">
                            <div class="enroll each_category" data-item-id="{{ $category->id }}" data-item-type="category">
                                <div class="categorylink"><a href="{{ route('category.page',['id' => $category->id, 'category' => $category->title]) }}">{{ $category->title }}</a></div>
                                {{-- <p>{{ $category->title }}</p> --}}
                                <i class="fa fa-bell-o"></i>
                            </div>
                        </li>
                    @endforeach
                </ul>
                @isset($all_categories[5])
                <div id="arrowBox" class="pt-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                        <g id="icon_more" transform="translate(-950 -917)" opacity="0.71">
                            <path id="Icon_material-expand-more" data-name="Icon material-expand-more" d="M26.65,12.885,19,20.3l-7.65-7.417L9,15.168l10,9.717,10-9.717Z" transform="translate(941 904.115)" fill="#fff"/>
                            <path id="Icon_material-expand-more-2" data-name="Icon material-expand-more" d="M26.65,12.885,19,20.3l-7.65-7.417L9,15.168l10,9.717,10-9.717Z" transform="translate(941 916.115)" fill="#fff"/>
                        </g>
                    </svg>
                </div>
                @endisset
            </div>
            <div id="mybundlecategory" class="col-12 col-lg-4 show-title">
                <div class="collectsTitle pb-4 pt-5">訓練計畫分類</div>
                <ul class="mt-5 px-3 items">
                    @foreach( $all_bundleCategory as $category )
                        <li class="mb-2">
                            <div class="enroll each_category" data-item-id="{{ $category->id }}" data-item-type="bundleCategory">
                                <div class="categorylink"><a href="{{ route('trainingProgram',['cat_id' => $category->id]) }}">{{ $category->name }}</a></div>
                                {{-- <p>{{ $category->title }}</p> --}}
                                <i class="fa fa-bell-o"></i>
                            </div>
                        </li>
                    @endforeach
                </ul>
                @isset($all_bundleCategory[5])
                <div id="arrowBox" class="pt-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                        <g id="icon_more" transform="translate(-950 -917)" opacity="0.71">
                            <path id="Icon_material-expand-more" data-name="Icon material-expand-more" d="M26.65,12.885,19,20.3l-7.65-7.417L9,15.168l10,9.717,10-9.717Z" transform="translate(941 904.115)" fill="#fff"/>
                            <path id="Icon_material-expand-more-2" data-name="Icon material-expand-more" d="M26.65,12.885,19,20.3l-7.65-7.417L9,15.168l10,9.717,10-9.717Z" transform="translate(941 916.115)" fill="#fff"/>
                        </g>
                    </svg>
                </div>
                @endisset
            </div>
            <div id="myinstructor" class="col-12 col-lg-4 show-title">
                <div class="collectsTitle pb-4 pt-5">{{ __('frontstaticword.Instructor') }}</div>
                <ul class="mt-5 px-3 items">
                    @foreach( $all_instructors as $instructor )
                        <li class="mt-3">
                            <div class="enroll each_instructor" data-item-id="{{ $instructor->id }}" data-item-type="instructor">
                                <div class="card-head d-flex">
                                    @if ($instructor->user_img)
                                        <img src="{{ gc_asset('images/user_img/'. $instructor->user_img) }}" alt="">
                                    @else
                                        <img src="{{ $instructor->jht_introuctor_img ? $instructor->jht_introuctor_img : gc_asset('images/default/user.jpg') }}" alt="">
                                    @endif
                                    <div class="collect-instructor">
                                        {{-- <p>{{ $instructor->fname }}</p> --}}
                                        <a href="{{ route('instructor.profile', ['id' => $instructor->id] ) }}">{{ $instructor->fname }}</a>
                                        <div class="tags d-flex">
                                            {{-- <div class="tag mr-2"> <a href="{{ route('category.page',['id' => $category->id, 'category' => $category->title]) }}">{{ $category->title }}</a></div>
                                            <div class="tag">肌力</div> --}}
                                            @foreach ($instructor->tag as $category)
                                                <a href="{{ route('category.page',['id' => $category->id, 'category' => $category->title ]) }}" class="tag">{{$category->title}}</a> 
                                            @endforeach
                                        </div>
                                    </div>
                                    <i class="fa fa-bell-o"></i>
                                </div>
                            </div>
                            <div class="article">{!! $instructor->detail !!}</div>
                        </li>
                    @endforeach
                </ul>
                @isset($all_instructors[3])
                <div id="arrowBox" class="pt-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                        <g id="icon_more" transform="translate(-950 -917)" opacity="0.71">
                            <path id="Icon_material-expand-more" data-name="Icon material-expand-more" d="M26.65,12.885,19,20.3l-7.65-7.417L9,15.168l10,9.717,10-9.717Z" transform="translate(941 904.115)" fill="#fff"/>
                            <path id="Icon_material-expand-more-2" data-name="Icon material-expand-more" d="M26.65,12.885,19,20.3l-7.65-7.417L9,15.168l10,9.717,10-9.717Z" transform="translate(941 916.115)" fill="#fff"/>
                        </g>
                    </svg>
                </div>
                @endisset
            </div>
            @if($plusStatus)
            <div id="mypluschannel" class="col-12 col-lg-4 show-title">
                <div class="collectsTitle pb-4 pt-5">{{ __('frontstaticword.Plus') }}</div>
                <ul class="mt-5 px-3 items">
                    @if( $my_pluschannels )
                        <ul>
                            @foreach( $my_pluschannels as $order )
                                @php
                                    if( ! isset( $order->plus_channel ) ){
                                        continue; //GC_minos:如果頻道不存在的話跳過
                                    }
                                @endphp
                                @foreach( $order->plus_channel->get_child() as $plus_channel )
                                    <li class="mt-2">
                                        <div class="enroll each_pluschannel" data-item-id="{{ $plus_channel->id }}" data-item-type="channel">
                                            <p>{{ $plus_channel->name }}</p>
                                            <i class="fa fa-bell-o"></i>
                                        </div>
                                    </li>
                                @endforeach
                            @endforeach
                        </ul>
                    @endif
                </ul>
                @isset($my_pluschannels[5])
                <div id="arrowBox" class="pt-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                        <g id="icon_more" transform="translate(-950 -917)" opacity="0.71">
                            <path id="Icon_material-expand-more" data-name="Icon material-expand-more" d="M26.65,12.885,19,20.3l-7.65-7.417L9,15.168l10,9.717,10-9.717Z" transform="translate(941 904.115)" fill="#fff"/>
                            <path id="Icon_material-expand-more-2" data-name="Icon material-expand-more" d="M26.65,12.885,19,20.3l-7.65-7.417L9,15.168l10,9.717,10-9.717Z" transform="translate(941 916.115)" fill="#fff"/>
                        </g>
                    </svg>
                </div>
                @endisset
            </div>
            @endif
            {{-- <div id="wishlist_tabs" class="col">
                <ul class="main nav nav-pills mb-3" role="tablist">
                    <li><a href="#mycategories">{{ __('frontstaticword.SubCotegory') }} </a></li>
                    <li><a href="#myinstructor">{{ __('frontstaticword.Instructor') }} </a></li>
                    @if( $my_pluschannels )
                        <li><a href="#mypluschannel">{{ __('frontstaticword.Plus') }} </a></li>
                    @endif
                </ul>
                <div id="mycategories" class="tab_content">
                    <ul>
                        @foreach( $all_categories as $category )
                            <li>
                                <div class="enroll each_category" data-item-id="{{ $category->id }}" data-item-type="category">
                                    <p>{{ $category->title }}</p>
                                    <i class="fa fa-bell-o"></i>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div id="myinstructor" class="tab_content">
                    <ul>
                        @foreach( $all_instructors as $instructor )
                            <li>
                                <div class="enroll each_instructor" data-item-id="{{ $instructor->id }}" data-item-type="instructor">
                                    <p>{{ $instructor->fname }}</p>
                                    <i class="fa fa-bell-o"></i>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
                @if( $my_pluschannels )
                    <div id="mypluschannel" class="tab_content">
                        <ul>
                            @foreach( $my_pluschannels as $order )
                                @php
                                    if( ! isset( $order->plus_channel ) ){
                                        continue; //GC_minos:如果頻道不存在的話跳過
                                    }
                                @endphp
                                @foreach( $order->plus_channel->get_child() as $plus_channel )
                                    <li>
                                        <div class="enroll each_pluschannel" data-item-id="{{ $plus_channel->id }}" data-item-type="channel">
                                            <p>{{ $plus_channel->name }}</p>
                                            <i class="fa fa-bell-o"></i>
                                        </div>
                                    </li>
                                @endforeach
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div> --}}
        </div>
    </div>
</section>
@php
    $item = App\Wishlist::where('user_id', Auth::User()->id)->get();
@endphp

@endsection

@section( 'custom-script' )
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
    jQuery(document).ready(function($){
        // $('#wishlist_tabs').tabs();

        $.ajaxSetup({
            url:'{{ URL::to('/') }}/process/follow',
            dataType:'json',
            type:'GET',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).on('click','.enroll',function(){
            enroll = $(this);
            data = {
                id:$(this).data('item-id'),
                type:$(this).data('item-type')
            };
            $.ajax({
                data:data,
                success:function(resp){
                    if(resp.original.status==1){
                        if(resp.original.switch=='off'){
                            enroll.find('i').removeClass('fa-bell').addClass('fa-bell-o');
                        }else{
                            enroll.find('i').removeClass('fa-bell-o').addClass('fa-bell');
                        }
                    }
                }
            });
        });
    });
document.addEventListener("DOMContentLoaded", function(){
    var arrows = [...document.querySelectorAll('#arrowBox')]
    arrows.forEach(arrow => {
        arrow.addEventListener('click', function () {
            if (document.body.clientWidth > 1024) {
                arrows.forEach(arrow =>{
                    arrow.previousSibling.previousSibling.style.height = 'max-content'
                    arrow.previousSibling.previousSibling.style.marginBottom = '24px'
                    arrow.style.display = 'none'
                })
            }else{
                console.log(this.previousSibling.previousSibling);
                this.previousSibling.previousSibling.style.height = 'max-content'
                this.previousSibling.previousSibling.style.marginBottom = '24px'
                this.style.display = 'none'
            }
        })
    });
    
});
</script>
@endsection