@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">Commented Messages from AVP</span></p>
        </div>

        <div class="col-md-10">
            <div class="card">
                <div class="card-body">
                    <div class="card-header alert alert-success">
                        <button class="btn btn-sm btn-outline-primary" onclick="window.history.back();">< Back</button>
                    </div>
                    @php
                        $count = 1;
                        $forDatalist = $allMails;
                        $index = 0;
                    @endphp

                    @if (count($forDatalist) > 30)
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" name="subject" id="subject" class="form-control"
                                    placeholder="Type date to filter..."
                                    list="outbox_list"
                                    {{-- autocomplete="on" --}}
                                    oninput="viewThisContent(this.value)"
                                    required>
                            </div>
                            <datalist id="outbox_list">
                                @foreach ($forDatalist as $list)
                                    <option value="{{$index}}">
                                        {{ Carbon\Carbon::parse($list->sent_date)->format('l M j, Y') }}
                                    </option>
                                    @php
                                        $index++;
                                    @endphp
                                @endforeach
                            </datalist>
                        </div>
                        <br>
                    @endif

                    <div class="hidden_panels">
                        <p id="search_result" class="my_header_2"></p>
                        <p id="search_link" class="align_right"></p>
                        <hr>
                    </div>
                    @foreach ($allMails as $mail)
                        <div class="alert alert-none">
                            <details>
                                <br>
                                <summary>
                                    <span>{{ Carbon\Carbon::parse($mail->sent_date)->format('l M j, Y') }}</span>
                                </summary>
                                <p class="my_header_2">
                                    <b>{{ $mail->subject }}</b> <br>
                                    {{ $mail->body }}
                                </p>
                                <p class="align_right my_header_2" @style(['padding:0px', 'margin:0px'])>
                                    <a href="com_view_report/{{$mail->message_date}}" class="btn btn-sm btn-primary">View Report</a>
                                </p>
                            </details>
                        </div>
                        @php
                            $count++;
                        @endphp
                        @if ($count > 30)
                            @break
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    function viewThisContent(index)
    {
        var data = {{ Js::from($forDatalist) }};
        var content = '<b>'+data[index]['subject']+'</b><br> '+data[index]['body'];
        var link = "<a href='com_view_report/"+data[index]['message_date']+"' class='btn btn-sm btn-primary'>View Report</a>";
        $("#search_result").html(content);
        $("#search_link").html(link);
        $(".hidden_panels").show();
    }
</script>
@endsection