@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">

        <div class="date_panel">
            <p class="text-center"><span class="date_para">{{ simpleDate() }}</span></p>
        </div>

        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <span class="my_header_1">{{ __('Inbox') }}</span> - from Coordinator(s)
                </div>

                <div class="card-body">
                    @if (session('message'))
                        <div class="alert alert-success" role="alert">
                            @php
                                $msg = session('message');
                            @endphp
                            <p @style(['font-size:20px;', 'white-space: pre-line'])>
                                {{$msg}}
                            </p>
                        </div>
                    @endif

                    @if($messages->count())

                        @foreach ($messages as $message)
                            <div class="alert alert-light">
                                <details>
                                    <summary>
                                        {{ $message->subject }}
                                    </summary>
                                    <p>
                                        <br>
                                        <b>Sent Date: </b> {{ Carbon\Carbon::parse($message->sent_date)->format('l, F j') }}
                                    </p>
                                    <p>
                                        {{ $message->body }}
                                    </p>
                                    <p class="align_right">
                                        <a href="{{ route('deanViewReport', [
                                            'date' => $message->message_date]) }}" class="btn btn-sm btn-primary">View Report</a>
                                    </p>
                                </details>
                            </div>
                        @endforeach

                    @else
                       <p class="text-center">No New Messages Yet</p>
                    @endif
                </div>
            </div>

            <br>
            <div class="card">
                <div class="card-body">
                    <p @style('cursor: pointer')  onclick="toggleView()">
                        <a class="my_header_1" @style('text-decoration:none')>Latest Comment from AVP</a>
                    </p>
                    <hr>
                    {{-- @style(['display:none']) --}}
                    <div id="message_div">
                        <p class="date_para" id="forwarded_date"></p>
                        <p id="subject_"></p>
                        <p id="body_"></p>
                        <p id="view_more" class="align_right"></p>
                        <p id="no_message"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

    document.addEventListener("DOMContentLoaded",
    function()
    {
        $(function()
        {
            $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: "com_load_avp_latest",
                type: 'POST',
                dataType: 'json',
                success: function(result){
                    if (result.status)
                    {
                        let myArray = JSON.parse(JSON.stringify(result.comment));
                        let dates = myArray['message_date'];
                            $("#forwarded_date").html(new Date(dates).toDateString())
                            $("#subject_").html("<b>Subject: </b>"+myArray['subject'])
                            $("#body_").html("<b>Body: </b>"+myArray['body'])
                        //
                            let view = "<a href='com_view_report/"+dates+"' class='btn btn-sm btn-outline-primary'>View Report</a>";
                            let more = "<a href='/com_more_from_avp' class='btn btn-sm btn-info'>View More</a>";

                        $("#view_more").html(view +" "+ more);
                        $("#no_message").html("");
                    }else{
                        $("#no_message").html("No message yet");
                    }
                }
            });
        });
    });

    function toggleView(){

        if($("#message_div").is(":visible")){
            $("#message_div").hide();
        }else{
            $("#message_div").show();
        }
    }
</script>
@endsection