@extends('frontend.layouts.app_minimal')

@section('content')
    <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: @can('no ads')
                            {{ $logged_in_user->plan }}
                        @else
                            Free plan  <a href="{{route('frontend.user.changeplan')}}"
                                          class="btn btn-sm btn-outline-warning">
                                Go pro for more!
                            </a>@endcan</p></div>
            </div>

        </div>
        <div class="nav-container">
        @include('frontend.includes.nav_minimal')
        <!-- <div class="p-2 bd-highlight">
                {{--<hello-vue></hello-vue>--}}
            Roles debug:
            <ul>
                @role('administrator')
                <li>Administrator</li>
                @endrole
                @role('lab member')
                <li>Lab member</li>
                @endrole
                @role('user')
                <li>Base user</li>
                @endrole
                @role('student')
                <li>student</li>
                @endrole
                @role('researcher')
                <li>researcher</li>
                @endrole
                @role('lab admin')
                <li>lab admin</li>
                @endrole
                @role('big lab admin')
                <li>big lab admin</li>
                @endrole
            </ul>
        </div> -->

            {{--        Lab icons--}}
            @if($logged_in_user->labs()->count()>0)
                @foreach($logged_in_user->labs()->get() as $lab)
                    <div class="p-2 header_image"
                         style="background-color: #ffffff; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px;  ">
                        <a
                            href="{{@route('frontend.lab.index',['id'=>$lab->id])}}"> <img
                                src="{{ $lab->lab_icon }}"
                                style="" alt="we love doing science!"></a></div>
                @endforeach
            @endif

        </div>
    </div>
    {{--    @include('frontend.messaging.partials.flash')--}}
    <!-- <div class="row" style="margin-top: 10px; min-height: 500px">
        <div class="col"
             style="margin-left:20px; background-color: whitesmoke; border: 1px solid #2aa8cc; border-radius: 0px 10px 10px 10px; margin-right: 5px">
            <div class="g_et_al_header2" style="border-bottom: 2px solid grey; padding-bottom: 5px">Notifications
            </div>
            @if(!$threads->count())
        There are no current notifications
@endif
        <table class="table table-hover">

@foreach($threads as $thread)
        <tr class="{{$thread->isUnread($logged_in_user->id)?'message_unread':'message_read'}}">
                        <td>
                            <div class="d-flex">
                                <div class="p-2 w-25">
                                    <div class="row">

                                        <div
                                            class=" col--sm-10 g_et_al_timecell"> {{$thread->latestMessage->created_at->diffForHumans()}}</div>
                                        <div class="col-sm-2">
                                            <i class="far  {{$thread->isUnread($logged_in_user->id)?'fa-envelope text-primary':'fa-envelope-open text-secondary'}}"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-2 flex-grow-1">
                                    <div class="row">

                                        <div class="col g_et_al_listtitle">
                                            <a href="{{ route('frontend.messages.show', $thread->id) }}">{{ $thread->subject }}</a>
                                        </div>
                                    </div>
{{--                                    <div class="row">--}}
        {{--                                        <div class="col g_et_al_paragraph2 text-nowrap text-truncate"--}}
        {{--                                        >--}}
        {{--                                            {!! $thread->latestMessage->body !!}--}}
        {{--                                        </div>--}}
        {{--                                    </div>--}}
            </div>
            <div class="p-2">
                <div class="row">
                    <div class="col g_et_al_timecell">
                        Sent by
                    </div>
                </div>
                <div class="row">
                    <div class="col g_et_al_paragraph2">


{{--@if($thread->hascreator())--}}
{{--            @if($thread->creator()->public=='1')--}}
{{--                <a href="{{route('frontend.user.profile.view', $thread->creator()->uuid)}}">--}}
{{--                                                        @endif--}}
{{--        @endif--}}
{{--        {{$thread->creator_name }}--}}
{{--        @if($thread->hascreator())--}}
{{--            @if($thread->creator()->public=='1')--}}
{{--                </a>--}}
{{--@endif--}}
{{--        @endif--}}
        {{--                                            @if($thread->creator()&&($thread->creator()->public=='1'))--}}

        {{--                                                <a href="{{route('frontend.user.profile.view', $thread->creator()->uuid)}}">--}}
        {{--                                                    @endif--}}
        {{--                                                    {{ $thread->creator_name }}--}}
        {{--                                                    @if($thread->creator()&&($thread->creator()->public=='1'))--}}

        {{--                                                </a>--}}
        {{--                                            @endif--}}
            </div>
        </div>
    </div>
    <div class="p-2">
        <a href="#" data-toggle="modal" data-target="#deletedialog"
           data-id="{{$thread->id}}"> <i class="far fa-times-circle text-danger"></i></a>
                                </div>
                            </div>
                        </td>

                    </tr>

                @endforeach
        </table>
    </div>


</div> -->

    <!-- Back to dashboard -->
    <button class="dashboard_nav" onclick="return window.location.href='{{URL::to('/')}}'"><i
            class="fas fa-arrow-left"></i> Back to <br> Dashboard
    </button>
    <!-- Back to dashboard -->

    <!-- New Notifications -->
    <div class="notification_section">
        <div class="row">
            <div class="col-12 navs-link-section-mobile">
                <div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-notifications-tab" data-toggle="pill"
                       href="#v-pills-notifications" role="tab" aria-controls="v-pills-notifications"
                       aria-selected="true"><span>Notifications</span></a>
                    <a class="nav-link" id="v-pills-received-tab" data-toggle="pill" href="#v-pills-received" role="tab"
                       aria-controls="v-pills-received" aria-selected="false"><span>Received</span></a>
                    <a class="nav-link" id="v-pills-sent-tab" data-toggle="pill" href="#v-pills-sent" role="tab"
                       aria-controls="v-pills-sent" aria-selected="false"><span>Sent</span></a>
                    <a class="nav-link" id="v-pills-archived-tab" data-toggle="pill" href="#v-pills-archived" role="tab"
                       aria-controls="v-pills-archived" aria-selected="false"><span>Archived</span></a>
                    <a class="nav-link" id="v-pills-deleted-tab" data-toggle="pill" href="#v-pills-deleted" role="tab"
                       aria-controls="v-pills-deleted" aria-selected="false"><span>Deleted</span></a>
                </div>
            </div>
            <div class="col-2 navs-link-section">
                <div class="nav flex-column align-items-end nav-pills" id="v-pills-tab" role="tablist"
                     aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-notifications-tab" data-toggle="pill"
                       href="#v-pills-notifications" role="tab" aria-controls="v-pills-notifications"
                       aria-selected="true"><span>Notifications</span></a>
                    <a class="nav-link" id="v-pills-received-tab" data-toggle="pill" href="#v-pills-received" role="tab"
                       aria-controls="v-pills-received" aria-selected="false"><span>Received</span></a>
                    <a class="nav-link" id="v-pills-sent-tab" data-toggle="pill" href="#v-pills-sent" role="tab"
                       aria-controls="v-pills-sent" aria-selected="false"><span>Sent</span></a>
                    <a class="nav-link" id="v-pills-archived-tab" data-toggle="pill" href="#v-pills-archived" role="tab"
                       aria-controls="v-pills-archived" aria-selected="false"><span>Archived</span></a>
                    <a class="nav-link" id="v-pills-deleted-tab" data-toggle="pill" href="#v-pills-deleted" role="tab"
                       aria-controls="v-pills-deleted" aria-selected="false"><span>Deleted</span></a>
                </div>
            </div>
            <div class="col-md-10 navs-tab-section">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-notifications" role="tabpanel"
                         aria-labelledby="v-pills-notifications-tab">
                        <div class="tab-search-section">
                            <div class="search_field">
                                <i class="fas fa-search"></i>
                                <input type="text" placeholder="Search">
                            </div>
                            <button class="mark_btn">Mark all as Read</button>
                        </div>
                        <div class="accordion notifications_accordion" id="accordionExample">
                            @foreach($threads as $i => $thread)
                                <div class="card">
                                    <div class="card-header " id="heading{{$i}}"
                                         data-toggle="collapse" data-target="#collapse{{$i}}" aria-expanded="true"
                                         aria-controls="collapse{{$i}}">
                                        <div class="notification-time">
                                            <h5>{{date('h:m A'),strtotime($thread->created_at)}}</h5>
                                            <h5>{{date('d-m-y'),strtotime($thread->created_at)}}</h5>
                                        </div>
                                        <div class="post_section">
{{--                                            <div class="post_image">--}}
{{--                                                <img--}}
{{--                                                    src="{{ asset('img/frontend/placeholders/Umbrella_Corporation_logo.svg') }}"--}}
{{--                                                    alt="logo_image">--}}
{{--                                            </div>--}}
                                            <div class="post_content">
                                                <h5 class="post_content_title">{!! $thread->subject!!}</h5>
                                                <p class="post_content_para">{{  $thread->latestMessage->body }}</p>
                                            </div>
                                        </div>
                                        <div class="post_open_section">
                                            <h4 class="post_open_title">{{$thread->subject}}</h4>
                                            <div class="post_tools">
                                                <i class="far fa-file-archive"></i>
                                                <i class="fas fa-trash-alt"></i>
                                            </div>
                                        </div>
                                        <div class="posted_user_section">
                                            <h5 class="posted_user_title"></h5>
                                            @if($thread->creator())
                                                @if($thread->creator()->public=='1')
                                                <h5 class="posted_user_title posted_user_name"><i
                                                        class="fas fa-circle"></i><a
                                                        href="{{route('frontend.user.profile.view', $thread->creator()->uuid)}}"
                                                        style="text-decoration: none;color: inherit;"> {{$thread->creator()->name}}</a>
                                                </h5>
                                                    @endif
                                            @endif
                                        </div>
                                    </div>

                                    <div id="collapse{{$i}}" class="collapse show"
                                         aria-labelledby="heading{{$i}}" data-parent="#accordionExample">
                                        <div class="card-body">
                                            {!!  $thread->latestMessage->body !!}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
{{--                            <div class="card">--}}
{{--                                <div class="card-header collapsed" id="headingOne" data-toggle="collapse"--}}
{{--                                     data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">--}}
{{--                                    <div class="notification-time">--}}
{{--                                        <h5>12:00 AM</h5>--}}
{{--                                        <h5>12-12-2020</h5>--}}
{{--                                    </div>--}}
{{--                                    <div class="post_section">--}}
{{--                                        <div class="post_image">--}}
{{--                                            <img--}}
{{--                                                src="{{ asset('img/frontend/placeholders/Umbrella_Corporation_logo.svg') }}"--}}
{{--                                                alt="logo_image">--}}
{{--                                        </div>--}}
{{--                                        <div class="post_content">--}}
{{--                                            <h5 class="post_content_title">Post Title</h5>--}}
{{--                                            <p class="post_content_para">It is a long established fact that a reader--}}
{{--                                                will be distracted by the readable content of a page when looking at its--}}
{{--                                                layout. The point of using Lorem Ipsum is that it has a more-or-less--}}
{{--                                                normal distribution of letters, as opposed to using 'Content here,--}}
{{--                                                content here', making it look like readable English. Many desktop--}}
{{--                                                publishing packages and web page editors now use Lorem Ipsum as their--}}
{{--                                                default model text, and a search for 'lorem ipsum' will uncover many web--}}
{{--                                                sites still in their infancy. Various versions have evolved over the--}}
{{--                                                years, sometimes by accident, sometimes on purpose (injected humour and--}}
{{--                                                the like).</p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="post_open_section">--}}
{{--                                        <h4 class="post_open_title">Post Title</h4>--}}
{{--                                        <div class="post_tools">--}}
{{--                                            <i class="far fa-file-archive"></i>--}}
{{--                                            <i class="fas fa-trash-alt"></i>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="posted_user_section">--}}
{{--                                        <h5 class="posted_user_title"><i class="fas fa-flask"></i> Aland Lab</h5>--}}
{{--                                        <h5 class="posted_user_title posted_user_name"><i class="fas fa-circle"></i><a--}}
{{--                                                href="#" style="text-decoration: none;color: inherit;"> Admin</a></h5>--}}
{{--                                    </div>--}}
{{--                                </div>--}}

{{--                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne"--}}
{{--                                     data-parent="#accordionExample">--}}
{{--                                    <div class="card-body">--}}
{{--                                        It is a long established fact that a reader will be distracted by the readable--}}
{{--                                        content of a page when looking at its layout. The point of using Lorem Ipsum is--}}
{{--                                        that it has a more-or-less normal distribution of letters, as opposed to using--}}
{{--                                        'Content here, content here', making it look like readable English. Many desktop--}}
{{--                                        publishing packages and web page editors now use Lorem Ipsum as their default--}}
{{--                                        model text, and a search for 'lorem ipsum' will uncover many web sites still in--}}
{{--                                        their infancy. Various versions have evolved over the years, sometimes by--}}
{{--                                        accident, sometimes on purpose (injected humour and the like).--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}

                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-received" role="tabpanel"
                         aria-labelledby="v-pills-received-tab">
                        <h5 style="margin:10px;text-align:center">You dont have any new messages...!</h5>
                    </div>
                    <div class="tab-pane fade" id="v-pills-sent" role="tabpanel" aria-labelledby="v-pills-sent-tab">
                        <h5 style="margin:10px;text-align:center">You dont have any new messages...!</h5>
                    </div>
                    <div class="tab-pane fade" id="v-pills-archived" role="tabpanel"
                         aria-labelledby="v-pills-archived-tab">
                        <h5 style="margin:10px;text-align:center">You dont have any new messages...!</h5>
                    </div>
                    <div class="tab-pane fade" id="v-pills-deleted" role="tabpanel"
                         aria-labelledby="v-pills-deleted-tab">
                        <h5 style="margin:10px;text-align:center">You dont have any new messages...!</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- New Notifications -->

    {{--    <div class="row" style="padding-top: 20px">--}}
    {{--        <div class="col-md-8 col-md-offset-2">--}}
    {{--            <button class="btn btn-info" data-toggle="modal"--}}
    {{--                    data-target="#addmessagedialog">New--}}
    {{--            </button>--}}
    {{--        </div>--}}
    {{--    </div>--}}

@endsection

@section('dialogs')
    <div id="addmessagedialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">Create a new message</h4>

                </div>
                <div class="modal-body">

                    <form action="{{ route('frontend.messages.store') }}" method="post">
                        {{ csrf_field() }}
                        <div class="col">
                            <!-- Subject Form Input -->
                            <div class="form-group">
                                <label class="control-label">Subject</label>
                                <input type="text" class="form-control" name="subject" placeholder="Subject"
                                       value="{{ old('subject') }}">
                            </div>

                            <!-- Message Form Input -->
                            <div class="form-group">
                                <label class="control-label">Message</label>
                                <textarea name="message" class="form-control">{{ old('message') }}</textarea>
                            </div>


                            <!-- Submit Form Input -->
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary form-control">Submit</button>
                            </div>
                        </div>
                    </form>

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

    <div id="deletedialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">Are you sure?</h4>

                </div>
                <div class="modal-body">

                    <div class="form-group">
                        {{--<button type="submit" class="btn btn-primary">Submit</button>--}}
                        <div style="margin: 0 auto; text-align: center; ">
                            {{ html()->form('POST', route('frontend.messages.delete'))->id('delete-form')->open() }}
                            {{ csrf_field() }}
                            <button type="submit" class="btn-lg btn-warning"><i class="far fa-trash-alt"
                                                                                aria-hidden="true"></i> Delete
                            </button>
                            <button class="btn-default btn-lg" data-dismiss="modal"><i class="fa fa-undo-alt"
                                                                                       aria-hidden="true"></i> Cancel
                            </button>
                            {{ html()->form()->close() }}

                        </div>


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

@endsection
@push('after-scripts')
    <script>

        var currentid = -1;
        var success_status = false;

        $(document).ready(function () {
            $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
                if ((typeof $(this).data('id')) !== 'undefined') {
                    currentid = $(this).data('id');
                }
            });


        });


        $('#delete-form').submit(function (event) {
            //  alert('hi')
            // event.preventDefault()
            $('#deletedialog').modal('hide');

            $("#delete-form").append('<input type="hidden" name="id" value="' + currentid + '" />');
            console.log("#delete-form");
            //form.submit();

        });


    </script>
@endpush