@extends('frontend.layouts.app')

@section('content')
    {{-- {{ dd($logged_in_user->labs()->get())}} --}}
    {{-- @foreach ($logged_in_user->labs()->get() as $lab)

        @foreach ($lab->members()->get() as $item)
        {{dd(date('Y-m-d',strtotime($item->pivot->created_at)))}}
        @endforeach
    @endforeach --}}
    {{--    Top row: user info, icons of lab groups--}}
    <div class="header_section d-flex align-items-end">
        <div class="profile_container">
            <div class="profile_section">
                {{--        Profile picture--}}
                <div class="profile_image" style="">
                    <a href="{{route('frontend.user.account')}}">
                    <!-- <img src="{{ $logged_in_user->getPicture(80) }}"
                                                                       alt="Profile Picture"
                                                                       style="border-radius: 10px 0px 10px 10px; height: 80px"> -->
                        <img src="{{ $logged_in_user->getPicture(80) }}"
                             style="background-color: whitesmoke; border: 1px solid rgb(42, 168, 204); border-radius: 10px 0px 10px 10px;"
                             alt="Our Business Is Life Itself">
                    </a>
                </div>
                {{--        User info--}}
                <div class="user-name"><a href="{{route('frontend.user.account')}}"><p
                            class="g_et_al_header2">   {{ $logged_in_user->name }}</p></a>
                    <p class="g_et_al_paragraph2">
                        Plan: @if($logged_in_user->has_active_subscription)
                            {{ $logged_in_user->plan }}
                        @else
                            Free plan  <a href="{{route('frontend.user.newplan')}}"
                                          class="btn btn-sm btn-outline-warning">
                                Upgrade your account!
                            </a>@endif</p></div>
            </div>
        </div>
        <div class="nav-container desktop-nav-container">
            @include('frontend.includes.nav_minimal')
            {{--        Lab icons--}}
            @if($logged_in_user->labs()->count()>0)
                @foreach($logged_in_user->labs()->get() as $lab)
                    <div class="p-2 header_image"
                         style="">
                        @if($lab->icon_path)
                            <a
                                href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                    src="{{ asset('storage/'.$lab->icon_path) }}"
                                    style="" alt="we love doing science!"></a>
                        @else
                            <a
                                href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                    src="{{ asset('img/frontend/placeholders/lab_icon_default.svg') }}"
                                    style="" alt="we love doing science!"></a>
                        @endif

                    </div>
                @endforeach
            @endif
        </div>

    </div>

        <!-- New Design -->
    <div class="user_settings_container">
        <div class="row">
            <div class="col-lg-6 user_settings_left">
                <div class="content_box">
                    <div>
                        <div class="heading_section">
                            <h4 class="section_heading">Personal Details</h4>
                            <h6 class="section_action"><a href="#" data-toggle="modal"
                                                          data-target="#user_details_update">Update</a></h6>
                        </div>
                        <div class="details_section">
                            <div class="details_field">
                                <h5 class="details_field_label">Name</h5>
                                <p class="details_field_content">{{ $logged_in_user->prefix ? $logged_in_user->prefix->text.' ':''}}{{$logged_in_user->name }}</p>
                            </div>
                            <div class="details_field">
                                <h5 class="details_field_label">Phone</h5>
                                <p class="details_field_content">{{$logged_in_user->phone}}</p>
                            </div>
                            <div class="details_field">
                                <h5 class="details_field_label">Organisation</h5>
                                <p class="details_field_content">{{$logged_in_user->institution?$logged_in_user->institution->text:'(not set)'}}</p>
                            </div>
                            <div class="details_field">
                                <h5 class="details_field_label">Position</h5>
                                <p class="details_field_content">{{$logged_in_user->position?$logged_in_user->position->text:'(not set)'}}</p>
                            </div>
                            <div class="details_field">
                                <h5 class="details_field_label">Research focus</h5>
                                <p class="details_field_content">@foreach(explode(',',$logged_in_user->research_focus_lookup_ids) as $research_focus_lookup_id)
                                        {{\App\Models\Lookups\Research_focus_lookup::find($research_focus_lookup_id)?\App\Models\Lookups\Research_focus_lookup::find($research_focus_lookup_id)->text:''}}@if(!$loop->last)
                                            ,@endif
                                    @endforeach</p>
                            </div>
                            <div class="details_field">
                                <h5 class="details_field_label">Profile visibility</h5>
                                <!-- details_field_content_public = Green , details_field_content_private = red -->
                                {!! $logged_in_user->public==1 ?'
                                <p class="details_field_content details_field_content_public">Public</p>':'<p class="details_field_content details_field_content_private">Private</p>'!!}
                            </div>
                            <div class="last_update">Last
                                update {{ timezone()->convertToLocal($logged_in_user->updated_at) }}
                                ({{ $logged_in_user->updated_at->diffForHumans() }})
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="heading_section">
                            <h4 class="section_heading">Subscription Details</h4>
                            <div class="heading_subsection heading_subsection_actions">
                                @if($subscriptionDeets)
                                    <h6 class="section_action seperater">
                                        @if($logged_in_user->is_beta_user)
                                            <a href="#" data-toggle="modal" data-target="#beta_payment_dialog">Payment
                                                settings</a>
                                            <h6 class="section_action"><a href="#" data-toggle="modal"
                                                                          data-target="#beta_payment_dialog">Change
                                                    plan</a></h6>
                                        @else
                                            {{--                                <a href="{{route('frontend.user.changepaymentmethod')}}">Payment settings</a>--}}
                                            <h6 class="section_action"><a
                                                    href="{{route('frontend.user.plansettings')}}">Change plan/Payment
                                                    settings</a></h6>
                                        @endif
                                    </h6>
                                @endif

                            </div>
                        </div>
                        <div class="plan_section">
                            <div class="plan_image">

                                @foreach($logged_in_user->labs as $lab)
                                    @hasanyrole('lab_member|lab admin|big lab admin')

                                    @if($lab->icon_path)
                                        <a
                                            href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                                src="{{ asset('storage/'.$lab->icon_path) }}"
                                                style="" alt="we love doing science!"></a>
                                    @else
                                        <a
                                            href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                                src="{{ asset('img/frontend/placeholders/lab_icon_default.svg') }}"
                                                style="min-width: 50px" alt="we love doing science!"></a>
                                    @endif

                                    @endhasanyrole
                                @endforeach
                            </div>
                            <div class="plan_content">
                                @if($logged_in_user->current_incomplete_subscriptions->count())
                                    <div class="alert alert-danger" role="alert">
                                        You have a payment that requires attention.<br/> Please <a
                                            href="{{route('cashier.payment',[$logged_in_user->current_incomplete_subscriptions->last()->latestPayment()->id, 'redirect' => route('frontend.user.account')])}}">click
                                            here to resolve</a>, or contact your card provider for more details
                                    </div>
                                @endif
                                <h5 class="plan_content_title">Plan:
                                    <span>{{$subscriptionDeets ? $logged_in_user->subscriptions->first()->name : 'Free plan :)'}}</span>
                                </h5>
                                @hasanyrole('lab admin|big lab admin')
                                @if($logged_in_user->my_lab)
                                    <h6 class="plan_content_detail">Lab name:
                                        <span>{{$logged_in_user->my_lab->name}}</span></h6>
                                @endif
                                @endhasanyrole
                                @if($subscriptionDeets)
                                    <h6 class="plan_content_detail">Next payment:
                                        <span>{{\Carbon\Carbon::createFromTimestamp($subscriptionDeets->current_period_end)->toFormattedDateString()}}</span>
                                    </h6>
                                @endif
                                @hasanyrole('lab admin|big lab admin')
                                @if($logged_in_user->my_lab)
                                    <h6 class="plan_content_detail">Collaborators:
                                        <span>{{$logged_in_user->my_lab->members()->count()}}</span>
                                        of {{$logged_in_user->my_lab->user_limit}} licences used</h6>
                                @endif
                                @endhasanyrole
                            </div>
                        </div>
                        @if($subscriptionDeets)
                            <div class="last_update">Last
                                update {{ timezone()->convertToLocal($logged_in_user->subscriptions->first()->updated_at) }}</div>
                        @endif
                    </div>
                </div>

                <div class="content_box">
                    <div>
                        <div class="heading_section">
                            <h4 class="section_heading">Login Details</h4>
                            @if($logged_in_user->providers->count())
                                <h6 class="section_action">(managed by {{$logged_in_user->providers->first()->provider}}
                                    )</h6>
                            @else
                                <h6 class="section_action"><a href="#" data-toggle="modal"
                                                              data-target="#user_login_update">Update</a></h6>
                            @endif
                        </div>
                        <div class="details_section details_section_login">
                            <div class="details_field">
                                <h5 class="details_field_label">Email</h5>
                                <p class="details_field_content">{{ $logged_in_user->email }}</p>
                            </div>
                            <div class="details_field">
                                <h5 class="details_field_label">Two-Factor Authentication</h5>
                                <!-- details_field_content_public = Green , details_field_content_private = red -->
                                <p class="details_field_content">TBD</p>
                            </div>
                        </div>
                        <div class="last_update">Last
                            update {{ timezone()->convertToLocal($logged_in_user->updated_at) }}
                            ({{ $logged_in_user->updated_at->diffForHumans() }})
                        </div>
                    </div>
                </div>
            </div>
            @if($logged_in_user->labs->count()>0)
                <div class="col-lg-6 user_settings_right">
                    <div class="content_box"
                         style=" {{$logged_in_user->labs->count()>0?'':'background-color:whitesmoke'}}">
                        @hasanyrole('lab admin|big lab admin')
                        @if($logged_in_user->my_lab)
                            <div>
                                <div class="heading_section">
                                    <h4 class="section_heading">Lab Details</h4>
                                    <h6 class="section_action"><a
                                            href="{{@route('frontend.lab.index',['id'=>$lab->id]).'?edit=open'}}">Update</a>
                                    </h6>
                                </div>
                                <div class="plan_section lab_details">
                                    <div class="plan_image">
                                        @if($lab->icon_path)
                                            <a
                                                href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                                    src="{{ asset('storage/'.$lab->icon_path) }}"
                                                    style="" alt="we love doing science!"></a>
                                        @else
                                            <a
                                                href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                                    src="{{ asset('img/frontend/placeholders/lab_icon_default.svg') }}"
                                                    style="min-width:100px" alt="we love doing science!"></a>
                                        @endif
                                    </div>
                                    <div class="plan_content">
                                        <h5 class="plan_content_title">{{$logged_in_user->my_lab->name}}</h5>
                                        <h6 class="plan_content_detail">Description:
                                            <span>{{$logged_in_user->my_lab->description}}</span></h6>
                                        <h6 class="plan_content_detail">Boards:
                                            <span>{{App\Models\Boards\Board::where('lab_id',$logged_in_user->my_lab->id)->count()}}</span>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="heading_section">
                                    <div class="heading_subsection">
                                        <h4 class="section_heading">Collaborators</h4>
                                        <button class="showall_btn" data-toggle="modal" onclick="showCollabrators()">
                                            Show All
                                        </button>
                                    </div>
                                    <div class="heading_subsection heading_subsection_actions">
                                        <h6 class="section_action ">
                                            @if($logged_in_user->my_lab->members()->count()<$logged_in_user->my_lab->user_limit)
                                                <a href="#" data-toggle="modal"
                                                   data-target="#user_invite">Send
                                                    Invite</a>
                                            @else
                                                Limit reached, contact us for more!
                                            @endif
                                        </h6>
                                        {{--                                        <h6 class="section_action">Permissions</h6>--}}
                                    </div>
                                </div>
                                <div class="row collaborators_container">
                                    @foreach($logged_in_user->my_lab->members as $member)
                                        <div class="col-6">
                                            <div class="plan_section collaborators_section">
                                                <div class="plan_image">
                                                    <img src="{{ $member->getPicture(40) }}" alt="logo_image">
                                                </div>
                                                <div class="plan_content">
                                                    <h5 class="plan_content_title">{{$member->first_name}} {{$member->last_name}}</h5>
                                                    @if($member->id == $logged_in_user->id)
                                                        <h6 class="plan_content_detail">Admin</h6>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                        @endif
                        @endhasanyrole

                        @if($logged_in_user->labs->count()>0)
                            <div>
                                <div class="heading_section">
                                    <div class="heading_subsection">
                                        <h4 class="section_heading">Joined Labs</h4>
                                        <button class="showall_btn" data-toggle="modal" onclick="showJoinedLabs()">Show
                                            All
                                        </button>
                                    </div>
                                </div>
                                <div class="row joined_labs_container">
                                    @foreach($logged_in_user->labs as $lab)
                                        <div class="col-6">
                                            <div class="plan_section collaborators_section">
                                                <div class="plan_image">
                                                    @if($lab->icon_path)
                                                        <a
                                                            href="{{@route('frontend.lab.index',['id'=>$lab->id])}}">
                                                            <img
                                                                src="{{ asset('storage/'.$lab->icon_path) }}"
                                                                style="" alt="we love doing science!"></a>
                                                    @else
                                                        <a
                                                            href="{{@route('frontend.lab.index',['id'=>$lab->id])}}">
                                                            <img
                                                                src="{{ asset('img/frontend/placeholders/lab_icon_default.svg') }}"
                                                                style="min-width:50px" alt="we love doing science!"></a>
                                                    @endif
                                                </div>
                                                <div class="plan_content">
                                                    <h5 class="plan_content_title">{{$lab->name}}</span></h5>
                                                    <h6 class="plan_content_detail">Collaborators:
                                                        <span>{{$lab->members()->count()}}</span></h6>
                                                    <h6 class="plan_content_detail">Boards:
                                                        <span>{{App\Models\Boards\Board::where('lab_id',$lab->id)->count()}}</span>
                                                    </h6>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <!--<div class="last_update">Last update xx/xx/xx</div>-->
                            </div>
                        @else
                            <div>
                                <div class="heading_section">
                                    <div class="heading_subsection">
                                        <h4 class="section_heading">You are not a member of any labs</h4>
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            @else
                <div class="col-lg-6 user_settings_right">
                    <div class="content_box"
                         style=" {{$logged_in_user->labs->count()>0?'':'background-color:whitesmoke'}}">
                        <div>
                            <div class="heading_section">
                                <div class="heading_subsection">
                                    <h4 class="section_heading">You are not a member of any labs</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{--            here--}}

        </div>
    </div>


@endsection
@section('dialogs')

    <div id="beta_payment_dialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">Hey!</h4>
                    <button type="button" class="close .btn-block" data-dismiss="modal"><i class="fa fa-times"
                                                                                           aria-hidden="true"
                                                                                           style="color: red"></i>
                    </button>
                </div>
                <div class="modal-body">
                    Why are you clicking here? you don't need to pay during beta testing!
                </div>
            </div>
        </div>
    </div>

    <div id="user_details_update" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update profile</h4>
                    <button type="button" class="close .btn-block" data-dismiss="modal"><i class="fa fa-times"
                                                                                           aria-hidden="true"
                                                                                           style="color: red"></i>
                    </button>
                </div>
                <div class="modal-body">
                    @include('frontend.user.account.form.editprofile')
                </div>
            </div>
        </div>
    </div>

    <div id="user_login_update" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update login details</h4>
                    <button type="button " class="close" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"
                                                                                 style="color: red"></i></button>
                </div>
                <div class="modal-body">
                    @include('frontend.user.account.form.change-password')
                </div>
            </div>
        </div>
    </div>

    <div id="leave_lab" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Really leave lab?</h4>
                    <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"
                                                                                style="color: red"></i></button>
                </div>
                <div class="modal-body">
                    {{ html()->form('POST', route('frontend.auth.leavelab'))->open() }}
                    <div class="form-group">
                        <input name="lab_id" id="leavelab_id" type="hidden" value="">
                        {{--<button type="submit" class="btn btn-primary">Submit</button>--}}
                        <div style="margin: 0 auto; text-align: center; ">
                            {!! Form::button('<i class="fas fa-sign-out-alt"></i> Leave', ['type' => 'submit', 'class'=>'btn btn-lg btn-warning']) !!}
                            <button class="btn btn-secondary btn-lg" data-dismiss="modal"><i class="fas fa-undo"
                                                                                             aria-hidden="true"></i>
                                Cancel
                            </button>
                        </div>

                    </div>
                    {{html()->form()->close()}}
                </div>
            </div>
        </div>
    </div>



    @if($logged_in_user->my_lab)
        <div id="user_invite" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Invite someone to your lab</h4>
                        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"
                                                                                    aria-hidden="true"
                                                                                    style="color: red"></i></button>
                    </div>
                    <div class="modal-body">
                        {{ html()->form('POST', route('frontend.auth.invite'))->open() }}
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    {{ html()->label(__('validation.attributes.frontend.email'))->for('email') }}
                                    {{ html()->email('email')
                                        ->class('form-control')
                                        ->placeholder(__('validation.attributes.frontend.email'))
                                        ->attribute('maxlength', 191)
                                        ->required() }}
                                </div><!--form-group-->
                            </div><!--col-->
                        </div><!--row-->

                        <div class="row">
                            <div class="col">
                                <div class="form-group mb-0 clearfix">
                                    {{ form_submit('Send invite','btn-block btn btn-success') }}
                                </div><!--form-group-->
                            </div><!--col-->
                        </div><!--row-->
                        {{ html()->form()->close() }}

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

        <div id="resend_invite" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Resend invitation?</h4>
                        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"
                                                                                    aria-hidden="true"
                                                                                    style="color: red"></i></button>
                    </div>
                    <div class="modal-body row">
                        <div class="col text-center">
                            <button class="btn btn-success btn-lg " onclick="resendInvite()"><i
                                    class="fas fa-paper-plane"></i>
                                Resend
                            </button>
                        </div>
                        <div class="col text-center">
                            <button class="btn btn-secondary btn-lg " data-dismiss="modal"><i class="fas fa-undo"
                                                                                              aria-hidden="true"></i>
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="delete_invite" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Delete invitation?</h4>
                        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"
                                                                                    aria-hidden="true"
                                                                                    style="color: red"></i></button>
                    </div>
                    <div class="modal-body row">
                        <div class="col text-center">
                            <button class="btn btn-warning btn-lg " onclick="deleteInvite()"><i
                                    class="fas fa-times"></i>
                                Delete
                            </button>
                        </div>
                        <div class="col text-center">
                            <button class="btn btn-secondary btn-lg " data-dismiss="modal"><i class="fas fa-undo"
                                                                                              aria-hidden="true"></i>
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        <div id="boot_from_lab" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Remove <span id="user_to_remove"></span> from lab?</h4>
                        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"
                                                                                    aria-hidden="true"
                                                                                    style="color: red"></i></button>
                    </div>
                    <div class="modal-body row">
                        {{ html()->form('POST', route('frontend.auth.bootfromlab'))->open() }}
                        <div class="form-group">
                            <input name="lab_id" type="hidden" value="{{$logged_in_user->my_lab->id}}">
                            <input name="user_id" id="bootlab_user_id" type="hidden" value="">
                            {{--<button type="submit" class="btn btn-primary">Submit</button>--}}
                            <div style="margin: 0 auto; text-align: center; ">
                                {!! Form::button('<i class="fas fa-tomes"></i> Remove', ['type' => 'submit', 'class'=>'btn btn-lg btn-warning']) !!}
                                <button class="btn btn-secondary btn-lg" data-dismiss="modal"><i class="fas fa-undo"
                                                                                                 aria-hidden="true"></i>
                                    Cancel
                                </button>
                            </div>

                        </div>
                        {{html()->form()->close()}}

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

    @endif

    <div class="modal fade load-spinner" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <i class="fas fa-circle-notch fa-spin fa-3x mx-auto"></i>
            </div>
        </div>
    </div>

    @if($logged_in_user->my_lab)
        <div id="updateLab" role="dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Update lab</h4>
                        <button type="button" class="close .btn-block" data-dismiss="modal">
                            <i class="fa fa-times" aria-hidden="true" style="color: red"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ html()->modelForm($logged_in_user->my_lab, 'POST', route('frontend.lab.update',['id'=>$logged_in_user->my_lab->id]))->attribute('enctype', 'multipart/form-data')->open() }}
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    {{ html()->label('Name')->for('name') }}
                                    {{ html()->text('name')
                                        ->class('form-control')
                                        ->placeholder('Lab Name')
                                        ->attribute('type', 'text')}}
                                </div><!--form-group-->
                            </div><!--col-->
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    {{ html()->label('Description')->for('description') }}
                                    {{ html()->textarea('description')
                                        ->class('form-control')
                                        ->placeholder('Lab Name')
                                        ->attribute('rows', '3')}}
                                </div><!--form-group-->
                            </div><!--col-->
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    {{ html()->label('Lab Icon')->for('icon_path') }}
                                    {{ html()->file('icon_path')
                                        ->class('form-control')}}
                                </div><!--form-group-->
                            </div><!--col-->
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="color">Accent colour</label>
                                    <input type="color" id="color" class="form-control" name="color"
                                           value="">
                                </div><!--form-group-->
                            </div><!--col-->
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="header_type">Header Type</label>
                                    <select class="form-control" id="header_type" name="header_type"
                                            onchange="labsettingshide()">
                                        <option
                                            value="color" >
                                            Color
                                        </option>
                                        <option
                                            value="image" >
                                            Image
                                        </option>
                                    </select>
                                </div><!--form-group-->
                            </div><!--col-->
                            <div class="col-md-6" id="header_type_color">
                                <div class="form-group">
                                    <label for="color">Header Color</label>
                                    <input type="color" id="" class="form-control col-sm-6" name="header"
                                           value="">
                                </div><!--form-group-->
                            </div><!--col-->
                            <div class="col-md-6" id="header_type_image">
                                <div class="form-group">
                                    <label for="color">Header Image</label>
                                    <input type="file" id="" class="form-control" name="header">
                                </div><!--form-group-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="background_type">Background Type</label>
                                    <select class="form-control" id="background_type" name="background_type"
                                            onchange="labsettingshide()">
                                        <option
                                            value="color" >
                                            Color
                                        </option>
                                        <option
                                            value="image" >
                                            Image
                                        </option>
                                    </select>
                                </div><!--form-group-->
                            </div><!--col-->
                            <div class="col-md-6" id="background_type_color">
                                <div class="form-group">
                                    <label for="color">Background Color</label>
                                    <input type="color" id="favcolor" class="form-control col-sm-6" name="background"
                                           value="">
                                </div><!--form-group-->
                            </div><!--col-->
                            <div class="col-md-6" id="background_type_image">
                                <div class="form-group">
                                    <label for="color">Background Image</label>
                                    <input type="file" id="" class="form-control" name="background">
                                </div><!--form-group-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="footer_type">Footer Type</label>
                                    <select class="form-control" id="footer_type" name="footer_type"
                                            onchange="labsettingshide()">
                                        <option
                                            value="color" >
                                            Color
                                        </option>
                                        <option
                                            value="image" >
                                            Image
                                        </option>
                                    </select>
                                </div><!--form-group-->
                            </div><!--col-->
                            <div class="col-md-6" id="footer_type_color">
                                <div class="form-group">
                                    <label for="color">Footer Color</label>
                                    <input type="color" id="footer" class="form-control col-sm-6" name="footer"
                                           value="">
                                </div><!--form-group-->
                            </div><!--col-->
                            <div class="col-md-6" id="footer_type_image">
                                <div class="form-group">
                                    <label for="color">Background Image</label>
                                    <input type="file" id="footer" class="form-control" name="footer">
                                </div><!--form-group-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    {!!form_submit('Update') !!}
                                </div>
                            </div>
                        </div><!--row-->
                        {{ html()->closeModelForm() }}
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Modal -->
    <div class="modal fade collaborators-modal" id="collaboratorsModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link all-navlink active" id="all-labs-tab" data-toggle="tabajax"
                               href="all_lab" role="tab"
                               aria-controls="all-labs" aria-selected="true" data-target="#all-labs">Joined Labs</a>
                        </li>
                        @if ($logged_in_user->my_lab)
                            <li class="nav-item">
                                <a class="nav-link my-navlink" id="my-lab-tab" data-toggle="tabajax" href="my_lab"
                                   role="tab"
                                   aria-controls="my-lab" aria-selected="false"
                                   data-target="#my-lab">{{$logged_in_user->my_lab->name}}</a>
                            </li>
                        @endif
                    </ul>
                    <div class="tab-content nav-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="all-labs" role="tabpanel"
                             aria-labelledby="all-labs-tab">
                            <div class="lab-modal-header">
                                <h4 class="lab-modal-heading">Collaborators</h4>
                                <div class="search_field"><i class="fas fa-search"></i> <input type="text"
                                                                                               id="allCollabaratorsSearch"
                                                                                               placeholder="Search">
                                </div>
                                <button class="lab-modal-close" data-dismiss="modal" aria-label="Close">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                                        <g id="Layer_2" data-name="Layer 2">
                                            <g id="Layer_1-2" data-name="Layer 1">
                                                <path
                                                    d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/>
                                            </g>
                                        </g>
                                    </svg>
                                </button>
                            </div>
                            <div class="lab-modal-table">
                                <table style="width: 100%" id="allCollabarators">
                                    <thead>
                                    <tr>
                                        <th style="width: 40%" id="collabName"><h4>Name</h4></th>
                                        <th style="width: 40%" id="collabLabName"><h4>Lab</h4></th>
                                        <th style="width: 20%" id="collabJoined"><h4>Joined</h4></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($logged_in_user->labs as $lab)
                                        @foreach ($lab->members()->get() as $member)
                                            <tr>
                                                <td>
                                                    <div class="plan_section collaborators_section">
                                                        <div class="plan_image">
                                                            <img src="{{$member->getPicture(80)}}" alt="logo_image">
                                                        </div>
                                                        <div class="plan_content">
                                                            <h5 class="plan_content_title">{{$member->name}}</h5>
                                                            <h6 class="plan_content_detail">
                                                                @if ($member->pivot->admin)
                                                                    Admin
                                                                @elseif($member->pivot->moderator)
                                                                    Moderator
                                                                @else
                                                                    Collaborator
                                                                @endif
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="plan_section collaborators_section">
                                                        <div class="plan_image">
                                                            <img src="{{$lab->lab_icon}}" alt="logo_image">
                                                        </div>
                                                        <div class="plan_content">
                                                            <h5 class="plan_content_title">{{$lab->name}}</h5>
                                                            <h6 class="plan_content_detail">
                                                                Collaborators:<span>{{$lab->members()->count()}}</span>
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="notification-time">
                                                        <h5>{{date('Y-m-d',strtotime($member->pivot->created_at))}}</h5>
                                                        <h5>{{date('h:m a',strtotime($member->pivot->created_at))}}</h5>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                    </tbody>

                                </table>
                            </div>
                        </div>
                        @if ($logged_in_user->my_lab)
                            <div class="tab-pane fade" id="my-lab" role="tabpanel" aria-labelledby="my-lab-tab">
                                <div class="lab-modal-header">
                                    <h4 class="lab-modal-heading">Collaborators</h4>
                                    <div class="search_field"><i class="fas fa-search"></i> <input type="text"
                                                                                                   placeholder="Search"
                                                                                                   id="myCollabaratorsSearch">
                                    </div>
                                    <span class="filter_dropdown dropdown send-invite-button float-end">
                                    <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                            class="folder-btn">
                                        Send Invite
                                    </button>
                                    <div class="dropdown-menu send-invite" x-placement="bottom-start"
                                         style="position: absolute; will-change: transform; top: 0px; transform: translate3d(0px, 20px, 0px);">
                                        {{ html()->form('POST', route('frontend.auth.invite'))->open() }}
                                            <div class="form-group">
                                                <input type="email" name="email" placeholder="E-mail address"
                                                       class="form-control">
                                            </div>
                                            <div class="form-group create_btn">
                                                <button type="submit" class="btn btn-primary">Send</button>
                                            </div>
                                        {{ html()->form()->open() }}
                                    </div>
                                </span>
                                    <button class="lab-modal-close" data-dismiss="modal" aria-label="Close">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                                            <g id="Layer_2" data-name="Layer 2">
                                                <g id="Layer_1-2" data-name="Layer 1">
                                                    <path
                                                        d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/>
                                                </g>
                                            </g>
                                        </svg>
                                    </button>
                                </div>
                                <div class="lab-modal-table">
                                    <table style="width: 100%" id="myCollabarators">
                                        <thead>
                                        <tr>
                                            <th style="width: 45%" id="myCollabName"><h4>Name</h4></th>
                                            {{-- <th style="width: 45%" id="myCollabLab"><h4>Lab</h4></th> --}}
                                            <th style="width: 20%" id="myCollabJoined"><h4>Joined</h4></th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        @foreach ($logged_in_user->my_lab->members()->get() as $member)
                                            <tr>
                                                <td>
                                                    <div class="plan_section collaborators_section">
                                                        <div class="plan_image">
                                                            <img src="{{$member->getPicture(80)}}" alt="logo_image">
                                                        </div>
                                                        <div class="plan_content">
                                                            <h5 class="plan_content_title">{{$member->name}}</h5>
                                                            <div class="edit_role_option">
                                                                                                                                <span
                                                                    class="filter_dropdown dropdown role-dropdown float-end">
                                                                <button data-toggle="dropdown" aria-haspopup="true"
                                                                        aria-expanded="true"
                                                                        class="folder-btn {{$button_status}}">
                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                         viewBox="0 0 22 16">
                                                                        <path id="Polygon_5" data-name="Polygon 5"
                                                                              d="M9.352,2.4a2,2,0,0,1,3.3,0l7.2,10.47A2,2,0,0,1,18.2,16H3.8a2,2,0,0,1-1.648-3.133Z"
                                                                              fill="#dcdcdc"/>
                                                                    </svg>
                                                                </button>
                                                                <div class="dropdown-menu" x-placement="bottom-start"
                                                                     style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 20px, 0px);">
                                                                    <button type="button" class="role-btn"
                                                                            data-lab="{{$logged_in_user->my_lab->id}}"
                                                                            data-user="{{$member->id}}"
                                                                            data-status="{{$status}}">{{$text}}</button>
                                                                    <button type="button" class="role-remove-btn"
                                                                            onclick="removeUser({{$logged_in_user->my_lab->id}},{{$member->id}},this)">
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                             viewBox="0 0 129.94 129.94"><g id="Layer_2"
                                                                                                            data-name="Layer 2"><g
                                                                                    id="Layer_1-2" data-name="Layer 1"><path
                                                                                        d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/></g></g></svg>
                                                                        Remove
                                                                    </button>
                                                                </div>
                                                            </span>
                                                                <h6 class="plan_content_detail">
                                                                    @if ($member->pivot->admin)
                                                                        Admin
                                                                    @elseif($member->pivot->moderator)
                                                                        Moderator
                                                                    @else
                                                                        Collaborator
                                                                    @endif
                                                                </h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                {{-- <td>
                                                    <div class="plan_section collaborators_section">
                                                        <div class="plan_image">
                                                            <img src="{{$logged_in_user->my_lab->lab_icon}}" alt="logo_image">
                                                        </div> <div class="plan_content">
                                                            <h5 class="plan_content_title">{{$logged_in_user->my_lab->name}}</h5>
                                                            <h6 class="plan_content_detail">collaborators:<span>{{$logged_in_user->my_lab->members()->count()}}</span></h6>
                                                        </div>
                                                    </div>
                                                </td> --}}
                                                <td>
                                                    <div class="notification-time">
                                                        <h5>{{date("Y-m-d",strtotime($member->pivot->created_at))}}</h5>
                                                        <h5>{{date("h:m A",strtotime($member->pivot->created_at))}}</h5>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade collaborators-modal joined-lab-modal" id="joinedLabModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link all-navlink active" id="all-labs-joined-tab" data-toggle="tab"
                               href="#all-labs-joined" role="tab"
                               aria-controls="all-labs-joined" aria-selected="true">All Labs</a>
                        </li>
                        {{-- <li class="nav-item">
                            <a class="nav-link my-navlink" id="my-lab-joined-tab" data-toggle="tab" href="#my-lab-joined" role="tab"
                                aria-controls="my-lab-joined" aria-selected="false">My Lab</a>
                        </li> --}}
                    </ul>
                    <div class="tab-content nav-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="all-labs-joined" role="tabpanel"
                             aria-labelledby="all-labs-joined-tab">
                            <div class="lab-modal-header">
                                <h4 class="lab-modal-heading">Joined Labs</h4>
                                <div class="search_field"><i class="fas fa-search"></i> <input type="text"
                                                                                               placeholder="Search"
                                                                                               id="allLabsSearch"></div>
                                <button class="lab-modal-close" data-dismiss="modal" aria-label="Close">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                                        <g id="Layer_2" data-name="Layer 2">
                                            <g id="Layer_1-2" data-name="Layer 1">
                                                <path
                                                    d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/>
                                            </g>
                                        </g>
                                    </svg>
                                </button>
                            </div>
                            <div class="lab-modal-table">
                                <table style="width: 100%" id="allLabs">
                                    <thead>
                                    <tr>
                                        <th style="width: 80%" id="labName"><h4>Lab</h4></th>
                                        <th style="width: 20%" id="joinedDate"><h4>Joined</h4></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($logged_in_user->labs as $lab)
                                        <tr>
                                            <td>
                                                <div class="plan_section collaborators_section">

                                                    <div class="plan_image">
                                                        @if($lab->icon_path)
                                                            <img src="{{$lab->lab_icon}}" alt="logo_image">
                                                        @else
                                                            <img
                                                                src="{{ asset('img/frontend/placeholders/lab_icon_default.svg') }}"
                                                                style="min-width:30px" alt="we love doing science!">
                                                        @endif

                                                    </div>
                                                    <div class="plan_content">
                                                        <h5 class="plan_content_title">{{$lab->name}}</h5>
                                                        <h6 class="plan_content_detail">
                                                            Collaborators:<span>{{$lab->members()->count()}}</span></h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="notification-time">
                                                    <h5>{{date("Y-m-d",strtotime($lab->pivot->created_at))}}</h5>
                                                    <h5>{{date("h:m A",strtotime($lab->pivot->created_at))}}</h5>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="my-lab-joined" role="tabpanel"
                             aria-labelledby="my-lab-joined-tab">
                            <div class="lab-modal-header">
                                <h4 class="lab-modal-heading">Joined Lab</h4>
                                <div class="search_field"><i class="fas fa-search"></i> <input type="text"
                                                                                               placeholder="Search">
                                </div>
                                <span class="filter_dropdown dropdown send-invite-button float-end">
                                <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                        class="folder-btn">
                                    Send Invite
                                </button>
                            <div class="dropdown-menu send-invite" x-placement="bottom-start"
                                 style="position: absolute; will-change: transform; top: 0px; transform: translate3d(0px, 20px, 0px);">
                            <select name="" class="send-invite_select">
                                <option value="aaaaa">aaaa</option>
                                <option value="aaaaa">aaaa</option>
                            </select>
                                <div class="form-group">
                                    <input type="text" placeholder="Folder name" class="form-control">
                                </div>
                            <div class="form-group create_btn">
                                <button type="button" class="btn btn-primary">Send</button>
                            </div>
                        </div>
                    </span>
                                <button class="lab-modal-close" data-dismiss="modal" aria-label="Close">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                                        <g id="Layer_2" data-name="Layer 2">
                                            <g id="Layer_1-2" data-name="Layer 1">
                                                <path
                                                    d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"/>
                                            </g>
                                        </g>
                                    </svg>
                                </button>
                            </div>
                            <div class="lab-modal-table">
                                <table style="width: 100%">
                                    <tr>
                                        <th style="width: 85%"><h4>Lab</h4></th>
                                        <th style="width: 15%"><h4>Joined</h4></th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="plan_section collaborators_section">
                                                <div class="plan_image">
                                                    <img
                                                        src="http://127.0.0.1:8000/storage/avatars/f1165382-4c64-40ab-a955-1f9d8cd46b38.jpg"
                                                        alt="logo_image">
                                                </div>
                                                <div class="plan_content">
                                                    <h5 class="plan_content_title">Dave Landow</h5>
                                                    <h6 class="plan_content_detail">Admin</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="notification-time">
                                                <h5>Date</h5>
                                                <h5>Time</h5>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="plan_section collaborators_section">
                                                <div class="plan_image">
                                                    <img
                                                        src="http://127.0.0.1:8000/storage/avatars/f1165382-4c64-40ab-a955-1f9d8cd46b38.jpg"
                                                        alt="logo_image">
                                                </div>
                                                <div class="plan_content">
                                                    <h5 class="plan_content_title">Dave Landow</h5>
                                                    <h6 class="plan_content_detail">Admin</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="notification-time">
                                                <h5>Date</h5>
                                                <h5>Time</h5>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="plan_section collaborators_section">
                                                <div class="plan_image">
                                                    <img
                                                        src="http://127.0.0.1:8000/storage/avatars/f1165382-4c64-40ab-a955-1f9d8cd46b38.jpg"
                                                        alt="logo_image">
                                                </div>
                                                <div class="plan_content">
                                                    <h5 class="plan_content_title">Dave Landow</h5>
                                                    <h6 class="plan_content_detail">Admin</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="notification-time">
                                                <h5>Date</h5>
                                                <h5>Time</h5>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>
    <script>

        var current_id = -1;
        $(document).ready(function () {
            $('select').select2({
                placeholder: 'Select...',
                tags: true
            });

            // multiple select
            $('select[name="research_focus_lookup_id[]"]').val([
                @foreach(explode(',', $logged_in_user->research_focus_lookup_ids) as $research_focus_lookup_id)
                {{$research_focus_lookup_id}}
                @if(!$loop->last)
                ,@endif
                @endforeach
            ]).trigger('change');
            var avatar_location = $("#avatar_location");

            if ($('input[name=avatar_type]:checked').val() === 'storage') {
                avatar_location.show();
            } else {
                avatar_location.hide();
            }

            $('input[name=avatar_type]').change(function () {
                if ($(this).val() === 'storage') {
                    avatar_location.show();
                } else {
                    avatar_location.hide();
                }
            });

            $('#leave_lab').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var lab_id = button.data('lab_id') // Extract info from data-* attributes
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this)
                $("#leavelab_id").val(lab_id)
            });

            @if($logged_in_user->my_lab)
            $('#resend_invite').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                current_id = button.data('id') // Extract info from data-* attributes
            });

            $('#delete_invite').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                current_id = button.data('id') // Extract info from data-* attributes
            });

            $('#boot_from_lab').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                current_id = button.data('id') // Extract info from data-* attributes
                $("#user_to_remove").html(button.data('name'))
                $("#bootlab_user_id").val(button.data('id'))
            });

            @endif

            labsettingshide();

        })


        function deleteInvite() {
            wait(true);
            axios.get('{!! URL::to('invite/')!!}/' + current_id + '/delete',
            ).then(function (response) {
                console.log(response);
                if (response.data.status == 0) {
                    alert('Invitation deleted');
                    location.reload();
                } else {
                    alert('something went wrong with the operation');
                }
            })
                .catch(function (error) {
                    console.log(error);
                    alert('something went wrong with the operation');
                })
                .finally(function () {
                    // always executed
                    wait(false)
                });
        }

        @if($logged_in_user->my_lab)
        {{--function bootUserFromLab() {--}}
        {{--    wait(true);--}}
        {{--    axios.post('{{route('frontend.auth.bootfromlab')}}',--}}
        {{--        {--}}
        {{--            user_id: current_id,--}}
        {{--            lab_id: {{$logged_in_user->my_lab->id}}--}}
        {{--        }--}}
        {{--    ).then(function (response) {--}}
        {{--        console.log(response);--}}
        {{--        if (response.data.status == 0) {--}}
        {{--            alert('Invitation deleted');--}}
        {{--            location.reload();--}}
        {{--        } else {--}}
        {{--            alert('something went wrong with the operation');--}}
        {{--        }--}}
        {{--    })--}}
        {{--        .catch(function (error) {--}}
        {{--            console.log(error);--}}
        {{--            alert('something went wrong with the operation');--}}
        {{--        })--}}
        {{--        .finally(function () {--}}
        {{--            // always executed--}}
        {{--            wait(false)--}}
        {{--        });--}}
        {{--}--}}

        function resendInvite() {
            wait(true);
            axios.get('{!! URL::to('invite/')!!}/' + current_id + '/resend',
            ).then(function (response) {
                console.log(response);
                if (response.data.status == 0) {
                    alert('Invitation resent');
                } else {
                    alert('something went wrong with the operation');
                }
            })
                .catch(function (error) {
                    console.log(error);
                    alert('something went wrong with the operation');
                })
                .finally(function () {
                    // always executed
                    wait(false)
                });
        }
        @endif


        function wait(on) {
            console.log(on)
            if (on) {
                $('.load-spinner').modal('show');
            } else {
                setTimeout(function () {
                    $('.load-spinner').modal('hide');
                }, 500)

            }
        }

        function labsettingshide() {
            var header_type = $("#header_type").val();
            if (header_type == "color") {
                $("#header_type_color").show();
                $("#header_type_image").hide();
            } else {
                $("#header_type_color").hide();
                $("#header_type_image").show();
            }
            var footer_type = $("#footer_type").val();
            if (footer_type == "color") {
                $("#footer_type_color").show();
                $("#footer_type_image").hide();
            } else {
                $("#footer_type_color").hide();
                $("#footer_type_image").show();
            }
            var background_type = $("#background_type").val();
            if (background_type == "color") {
                $("#background_type_color").show();
                $("#background_type_image").hide();
            } else {
                $("#background_type_color").hide();
                $("#background_type_image").show();
            }
        }

        function showCollabrators(type = 'all_lab') {
            $('#collaboratorsModal').modal('show');
        }

        $('[data-toggle="tabajax"]').click(function (e) {
            var $this = $(this),
                loadurl = $this.attr('href'),
                targ = $this.attr('data-target');
            showCollabrators(loadurl);
            $this.tab('show');
            return false;
        })
        $('.role-btn').click(function (e) {
            var labId = $(this).attr('data-lab');
            var userId = $(this).attr('data-user');
            var status = $(this).attr('data-status');
            alert(status);
            var button = $(this);
            var data = {
                labId,
                userId,
                status: status == true ? 1 : 0,
                "_token": "{{ csrf_token() }}",
            }
            $.post('{!! URL::to("makeCollaborator") !!}', data, function (success) {
                console.log(button.parent().text());
                if (status == true) {
                    button.text("Make Collaborator");
                    button.attr('data-status', false);
                    button.parent().parent().next().text("Moderator");
                } else {
                    button.text("Make Moderator");
                    button.attr('data-status', 1);
                    button.parent().parent().next().text("Collaborator");
                }
            }).fail(function (error) {
                console.log(error);
            })
        })

        function showJoinedLabs() {
            $('#joinedLabModal').modal('show');
        }

        var allLabsTable = $('#allLabs');
        $('#labName, #joinedDate')
            .each(function () {

                var th = $(this),
                    thIndex = th.index(),
                    inverse = false;

                th.click(function () {
                    var activeClass = inverse == true ? 'option_two' : 'option_one';
                    th.children('h4').addClass(activeClass);
                    allLabsTable.find('td').filter(function () {

                        return $(this).index() === thIndex;

                    }).sortElements(function (a, b) {

                        return $.text([a]) > $.text([b]) ?
                            inverse ? -1 : 1
                            : inverse ? 1 : -1;

                    }, function () {

                        // parentNode is the element we want to move
                        return this.parentNode;

                    });

                    inverse = !inverse;

                });

            });
        $("#allLabsSearch").on("keyup", function () {
            var value = $(this).val().toLowerCase();

            $("#allLabs tr").filter(function (e) {
                if (e != 0) {
                    $(this).toggle($(this).find('td:first').text().toLowerCase().indexOf(value) > -1)
                }

            });
        });
        var table = $('#allCollabarators');
        $('#collabName, #collabLabName,#collabJoined')
            .each(function () {

                var th = $(this),
                    thIndex = th.index(),
                    inverse = false;

                th.click(function () {
                    var activeClass = inverse == true ? 'option_two' : 'option_one';
                    th.children('h4').addClass(activeClass);
                    table.find('td').filter(function () {

                        return $(this).index() === thIndex;

                    }).sortElements(function (a, b) {

                        return $.text([a]) > $.text([b]) ?
                            inverse ? -1 : 1
                            : inverse ? 1 : -1;

                    }, function () {

                        // parentNode is the element we want to move
                        return this.parentNode;

                    });

                    inverse = !inverse;

                });

            });

        $("#allCollabaratorsSearch").keyup(function () {
            var value = $(this).val().toLowerCase();
            $("#allCollabarators tr").filter(function (e) {
                if (e != 0) {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                }
            });
        })

        function removeUser(labId, userId, el) {
            var data = {
                labId,
                userId,
                "_token": "{{ csrf_token() }}",
            }
            $.ajax({
                url: '{!! URL::to("removeCollaborator") !!}',
                type: "POST",
                data: data,
                beforeSend: function () {
                    return confirm("Are you sure ?");
                },
                success: function (success) {
                    $(el).parents("tr").remove();
                },
                error: function (error) {
                    alert('Error while selecting list..!!');
                }
            })
        }


        var myTable = $('#myCollabarators');
        $('#myCollabName, #myCollabLab,#myCollabJoined')
            .each(function () {

                var th = $(this),
                    thIndex = th.index(),
                    inverse = false;


                th.click(function () {
                    var activeClass = inverse == true ? 'option_two' : 'option_one';
                    th.children('h4').addClass(activeClass);
                    myTable.find('td').filter(function () {

                        return $(this).index() === thIndex;

                    }).sortElements(function (a, b) {

                        return $.text([a]) > $.text([b]) ?
                            inverse ? -1 : 1
                            : inverse ? 1 : -1;

                    }, function () {

                        // parentNode is the element we want to move
                        return this.parentNode;

                    });
                    inverse = !inverse;
                });

            });

        $("#myCollabaratorsSearch").keyup(function () {
            var value = $(this).val().toLowerCase();
            $("#myCollabarators tr").filter(function (e) {
                if (e != 0) {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                }
            });
        })

    </script>
@endpush

@push('after-styles')
    <style>
        .select2 {
            width: 100% !important;
        }

        .modal-backdrop.show {
            opacity: 0;
        }

        .role-dropdown svg {
            transform: rotate(180deg)
        }

        .role-dropdown.show svg {
            transform: rotate(0deg)
        }
    </style>
@endpush