@extends('front/layouts/main')

@section('title'){{$moverProfile->mover->first_name}} {{$moverProfile->mover->last_name}} | {{ @trans('movement.empower_the_movement') }}@endsection
@section('description')@if(substr($moverProfile->bio_description, 0,  160) != ''){{ substr($moverProfile->bio_description, 0,  160) }}@else{{$moverProfile->mover->first_name}} {{$moverProfile->mover->last_name}}@endif @endsection
@section('img-url'){{profileimage($moverProfile->mover->profile_image, 'medium', $moverProfile->mover_user_id)}}@endsection

@section('twitter:image'){{profileimage($moverProfile->mover->profile_image, 'medium', $moverProfile->mover_user_id)}}@endsection

@section('content')
    <main class="mover-profile-tabs-page bg-white pt-0">
        <div class="section pb-0">
            <div class="container">
                <div class="d-flex flex-wrap flex-sm-nowrap align-items-md-center">
                    <img src="{{profileimage($moverProfile->mover->profile_image, 'medium', $moverProfile->mover_user_id)}}" alt="{{$moverProfile->mover->first_name. ' '.$moverProfile->mover->last_name}}" class="fit-img mr-sm-4 rounded-lg dp-img full-width-mobile" style="width: 300px; height: 300px;" />
                    <div class="profile-info mt-4 mt-sm-0">
                        <a href="javascript:void(0)" class="xxl-font-size bold mb-2 d-inline-block">{{$moverProfile->mover->first_name}} {{$moverProfile->mover->last_name}}</a>
                        <p class="mb-2">{{$moverProfile->bio_description}}</p>
                        <div class="d-flex align-items-center mt-3 flex-wrap">
                            @if($owner == 1) 
                            <a href="{{route('front.mover.profile')}}" class="btn btn-transparent my-1 mr-3">{{ @trans('movement.edit_profile') }}</a>
                            @else
                            @if($moverProfile->is_speaker == 1)
                            <a href="#speakerInqModal" data-toggle="modal" data-target="#speakerInqModal" class="btn btn-transparent my-1 mr-3">{{ @trans('movement.send_speaker_inquiry') }}</a>
                            @endif
                            <a href="javascript:void(0)" class="btn btn-transparent my-1 mr-3 {{$followtext}} follow_activity" id="{{$moverProfile->mover_user_id}}" ref_type="mover">{{$followtext}}</a>
                            @endif
                            <a href="javascript:void(0)" class="xs-font-size d-flex align-items-center gray my-1"><span class="material-icons gray mr-2">supervised_user_circle</span> <span class="activityCnt">{{$moverProfile->count_follower}}</span> &nbsp;{{ @trans('movement.followers') }}</a>

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

        <section class="section pt-4">
            <!-- Nav tabs -->
            <div class="container">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#Articles">{{count($movements)}} {{ @trans('movement.articles') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#Series">{{count($moverSeries)}} {{ @trans('movement.series2') }}</a>
                    </li>
                </ul>
            </div>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane container active" id="Articles">
                    <div class="row">
                        @if(isset($movements) && count($movements) > 0)

                            @foreach($movements as $movement)
                            <div class="col-sm-6 col-lg-4 vertical-card-view d-flex flex-column mt-4">                            
                                @if($movement->cover_image != '')
                                <a href="{{route('front.movement.movementdetails',['slug' => $movement->slug])}}" >
                                <img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/medium/{{$movement->cover_image}}" alt="{{$movement->movement_title}}" class="rounded-lg mb-3 d-block fit-img" ></a>
                                @endif
                                <div class="chips d-flex align-items-center flex-wrap">
                                    <a href="{{route('front.series.seriesdetails',['slug' => $movement->series->slug])}}" class="em-chip rounded-chip d-flex align-items-center mr-auto"><span class="material-icons smd-font-size mr-1">book</span>{{$movement->series->series_name}}</a>
                                    @if($movement->does_contain_audio == 1)
                                    <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">audiotrack</span></a>
                                    @endif
                                    @if($movement->does_contain_video == 1)
                                    <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">videocam</span></a>
                                    @endif
                                </div>
                                <a href="{{route('front.movement.movementdetails',['slug' => $movement->slug])}}" class="mt-2 mb-2 d-block bold title-font">{{$movement->movement_title}}</a>
                                <p class="smd-font-size mt-auto mb-1">{{ @trans('movement.by') }} <a href="{{route('front.movement.moverdetails',['slug' => $movement->moverprofile->slug])}}">{{$movement->mover->first_name. ' '.$movement->mover->last_name}}</a> {{ @trans('movement.on') }} {{$movement->moverprofile->getDateFormat2($movement->updated_at)}}</p>
                                <hr class="my-2 w-100">
                                <div class="d-flex">
                                    <div class="like mr-3">
                                        <div class="custom-control custom-checkbox p-0">
                                            <label class="custom-control-label smd-font-size gray d-flex align-items-center" for="like1"><span class="material-icons title-font mr-1">favorite</span>{{$movement->count_like}}</label>
                                        </div>
                                    </div>
                                    <a href="javascript:void(0)" class="smd-font-size gray d-flex align-items-center mr-auto"><span class="material-icons title-font mr-1">share</span> {{$movement->count_share}}</a>
                                </div>                            
                            </div>
                            @endforeach

                        @else
                        <div class="col-sm-12 col-lg-12 vertical-card-view d-flex flex-column mt-4" style="text-align: center;">  
                            {{ @trans('movement.no_article_found') }}
                        </div>
                        @endif
                        
                    </div>
                </div>
                <div class="tab-pane container fade" id="Series">
                    <div class="row">
                        <div class="col-12">
                            @if(isset($moverSeries) && count($moverSeries) > 0)
                                                                @foreach($moverSeries as $series)
                                                                    <div class="d-flex flex-wrap align-items-center flex-sm-nowrap @if($i != 1) border-top pt-4 mt-4 @endif">
                                        
                                    @if($series->cover_image != '')
                                        <img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.series') }}/{{$series->id}}/medium/{{$series->cover_image}}" class="fit-img mr-sm-4 rounded-lg dp-img full-width-mobile" alt="{{$series->series_name}}" style="width: 200px;" />
                                    @endif  

                                    <div class="profile-info mt-4 mt-sm-0">
                                        <a href="{{route('front.series.seriesdetails',['slug' => $series->slug])}}" class="xxl-font-size bold mb-2 d-inline-block">{{$series->series_name}}</a>
                                        <div class="chips d-flex align-items-center flex-wrap">
                                            <a href="{{route('front.movement.categorydetails',['slug' => $series->cslug])}}" class="em-chip d-flex align-items-center">{{$series->cname}}</a>
                                        </div>
                                        <p class="mt-3 mb-2 title-font">{{$series->series_description}}</p>
                                        <div class="d-flex flex-wrap align-items-center mt-3">
                                            @if($owner == 1) 
                                            <a href="{{route('front.series.seriesdetails',['slug' => $series->slug])}}" class="btn btn-transparent my-1 mr-3">{{ @trans('movement.manage_series') }}</a>
                                            @else
                                            <a href="javascript:void(0)" class="btn btn-transparent mr-3 follow_activity2-{{$series->id}}" onclick="follow_series('{{$series->id}}');" id="{{$series->id}}" ref_type="series">{{checkSeriesFollower($series->id, $user_id)}}</a>

                                            @endif
                                            <a href="javascript:void(0)" class="smd-font-size d-flex align-items-center my-1 mr-3 gray"><span class="material-icons gray title-font mr-1">assignment</span> 
                                                {{movmentCntBySeries($series->id)}} {{ @trans('movement.articles') }}</a>
                                            <a href="javascript:void(0)" class="xs-font-size d-flex align-items-center my-1 gray"><span class="material-icons mr-2 gray">supervised_user_circle</span> <span class="activityCnt2-{{$series->id}}">{{$series->count_follower}}</span> &nbsp; {{ @trans('movement.followers') }}</a>
                                        </div>
                                    </div>
                                </div>

                                @endforeach

                            @else
                            <div class="col-sm-12 col-lg-12 vertical-card-view d-flex flex-column mt-4" style="text-align: center;">  
                                {{ @trans('movement.no_series_found') }}
                            </div>
                            @endif

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

       

        <!-- The Modal -->
        <div class="modal fade" id="speakerInqModal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">{{ @trans('movement.send_speaker_inquiry') }}</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <form action="{{ route('front.mover.sendspeakerinquiry') }}"
                                method="POST" name="frmSendInquiry" id="frmSendInquiry" autocomplete="off">
                                {{ csrf_field() }}
                            <input type="hidden" name="name" id="name" value="{{$moverProfile->mover->first_name}} {{$moverProfile->mover->last_name}}"> 
                            <input type="hidden" name="slug" id="slug" value="{{$moverProfile->slug}}"> 
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group required">
                                            <label class="control-label">{{ @trans('movement.first_name') }}</label>
                                            <input type="text" id="first_name" name="first_name" value="@if(old('first_name')){{old('first_name')}} @endif" class="form-control" placeholder="{{ @trans('movement.first_name') }}" />
                                        </div>  
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group required">
                                            <label class="control-label">{{ @trans('movement.last_name') }}</label>
                                            <input id="last_name" name="last_name" value="@if(old('last_name')){{old('last_name')}} @endif" type="text" class="form-control" placeholder="{{ @trans('movement.last_name') }}" />
                                        </div>  
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group required">
                                            <label class="control-label">{{ @trans('movement.company_name') }}</label>
                                            <input type="text" id="company_name" name="company_name" value="@if(old('company_name')){{old('company_name')}} @endif" class="form-control" placeholder="{{ @trans('movement.company_name') }}" />
                                        </div>  
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group required">
                                            <label class="control-label">{{ @trans('movement.designation') }}</label>
                                            <input type="text" id="designation" name="designation" value="@if(old('designation')){{old('designation')}} @endif" class="form-control" placeholder="{{ @trans('movement.designation') }}" />
                                        </div>  
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group required">
                                            <label class="control-label">{{ @trans('movement.phone_number') }}</label>
                                            <input type="text" name="phone" id="phone" value="@if(old('phone')){{old('phone')}} @endif" class="form-control" placeholder="{{ @trans('movement.phone_number') }}" />
                                        </div>  
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group required">
                                            <label class="control-label">{{ @trans('movement.email') }}</label>
                                            <input type="email" name="email" id="email" value="@if(old('email')){{old('email')}} @endif" class="form-control" placeholder="{{ @trans('movement.email') }}" />
                                        </div>
                                    </div>                                    
                                    <div class="col-12">
                                        <div class="form-group required">
                                            <label class="control-label">{{ @trans('movement.your_message') }}</label>
                                            <textarea id="message" name="message" rows="3" class="form-control" placeholder="{{ @trans('movement.your_message') }}">@if(old('message')){{old('message')}} @endif</textarea>
                                            <label style="display: none;"></label>
                                        </div> 
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="g-recaptcha" data-sitekey="{{ config('custom.google_recaptcha_site_key') }}"></div>
                                            
                                            <span id="googlerecaptcha" class="invalid-feedback"></span>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-action">
                                <input type="submit" name="submit" id="submit" class="btn btn-transparent submitBtn" value="{{ @trans('movement.send_inquiry') }}" >
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
@push('pageJs')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript" src="{{ asset('js/vendor/jsvalidation.min.js') }}"></script>
{!! JsValidator::formRequest('App\Http\Requests\Movement\SendInquiry', '#frmSendInquiry') !!}
<script>

     @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: "{{ @trans('movement.okay') }}"
    });
    @endif

    $(document).ready(function() {  

        $(document).on("click", ".follow_activity", function() {
            
            var ref_type = $(this).attr("ref_type");
            var ref_id = $(this).attr("id");

            @guest
                $('#frmLoginUser2 #activity_type').val('follow')
                $('#frmLoginUser2 #ref_id').val(ref_id)
                $('#frmLoginUser2 #ref_type').val(ref_type)
                $("#moverLoginModal").modal("show");
            @endguest
            
            @auth
            $.ajax({
                method: 'POST',
                url: "{{route('front.activity.store')}}",
                data: {
                    "_token": "{{csrf_token()}}",
                    'ref_type': ref_type,
                    'ref_id': ref_id,
                    'activity_type': 'follow'
                },
                success: function(res) {                
                    res=res.split("~");
                    $('.follow_activity').html(res[1]); 
                    $('.activityCnt').html(res[0]);

                    if ( $('.follow_activity').is( ".Following" ) ) {
                        $("a").removeClass("Following");
                    } else {
                        $('.follow_activity').addClass('Following');
                    }
                }
            });
            @endauth
        });


    });
    function follow_series(id)
    {

        var ref_type = 'series';
        var ref_id = id;

        @guest
            $('#frmLoginUser2 #activity_type').val('follow')
            $('#frmLoginUser2 #ref_id').val(ref_id)
            $('#frmLoginUser2 #ref_type').val(ref_type)
            $("#moverLoginModal").modal("show");
        @endguest
        
        @auth
        $.ajax({
            method: 'POST',
            url: "{{route('front.activity.store')}}",
            data: {
                "_token": "{{csrf_token()}}",
                'ref_type': ref_type,
                'ref_id': ref_id,
                'activity_type': 'follow'
            },
            success: function(res) {                
                res=res.split("~");
                $('.follow_activity2-'+id).html(res[1]); 
                $('.activityCnt2-'+id).html(res[0]); 

                /*if ( $('.follow_activity2-'+id).is( ".Following" ) ) {
                    $("a").removeClass("Following");
                } else {
                    $('.follow_activity2-'+id).addClass('Following');
                } */
            }
        });
        @endauth
    }

    $('#submit').click(function()
    {   
        //$('#storeMovement').validate();
        if($('#frmSendInquiry').valid()) // check if form is valid
        {
            var response = grecaptcha.getResponse();
            if(response.length == 0){
                $('#googlerecaptcha').show();
                $('#googlerecaptcha').html('Please verify above by ticking the reCAPTCHA box');
                return false;
            }
            else{
                $('#googlerecaptcha').hide();
                $('#googlerecaptcha').html('');
                $(".submitBtn").val("Please Wait...");            
            }
        }        
    });
   
</script>
@endpush