@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">
                        <a class="my_header_1" @style('text-decoration:none')>Today's Report from College Dean(s)</a>
                    </span>
                </div>

                <div class="card-body">

                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    @if (count($messages) > 0)
                        @php
                            $count = 1;
                        @endphp
                        @foreach ($messages as $message)
                            <div class="alert alert-light">
                                <details>
                                    <summary>
                                        {{  $count }}. {{ $message->sender }} ({{ $message->email }})
                                    </summary>
                                    <p>
                                        <br>
                                        <b>Report Date:</b> {{ Carbon\Carbon::parse($message->message_date)->format('l, F j') }} <br>
                                        <b>{{ $message->subject }}</b>
                                        <br>
                                        {{ $message->body }}
                                    </p>
                                </details>
                            </div>
                            @php
                                $count++;
                            @endphp
                        @endforeach
                    @else
                        <p>No message 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>

    function toggleView(){

        if($("#message_div").is(":visible")){
            $("#message_div").hide();
        }else{
            $("#message_div").show();
        }
    }

    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'])
                        //finalized results from avp
                            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");
                    }
                }
            });
        });
    });
</script>
@endsection