{{--Get the Page Format--}}
@extends('layouts.app')

{{--Set Page Title--}}
@section('title', 'My Email Inbox')

{{--Include any Internal JS Code--}}
@section('internal-js')
    <script>
        $(document).ready(function () {
            $('#search-criteria-list').select2();

            /**When the Search button is clicked Upon**/
            $('#submit-search').click(function (){
                let criteria = $('#search-criteria-list').val();
                let parameter = $('#my-search-parameter').val();

                if(criteria != ""){
                    if(parameter != ""){
                        /**Display the Loading gif**/
                        $('.returned-inbox-entries').html('<div style="text-align: center; margin: 10% 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>');
                        /**Using AJax, go and Find the entered Search Parameters**/
                        $.ajax({
                            method: "GET",
                            url: '/get-inbox-emails-from-search-parameter/'+criteria+'/'+parameter,
                            success: function (res){
                                if(res != ""){
                                    $('.returned-inbox-entries').html(res);
                                }else{
                                    $('.returned-inbox-entries').html('<div style="text-align: center; margin-top: 25%;" class="error">No Emails found having the entered Search parameters</div>');
                                }
                            }
                        });

                    }else{
                        alert('Please enter the Search Parameter to Perform the Search');
                    }
                }else{
                    alert('Please choose a specific Criteria to be used for the Search');
                }
            });

            /**When changing the Search Criteria, if Value is ALl, just refresh the Page**/
            $('#search-criteria-list').on('change', function (){
                let criteria = $(this).val();

                if(criteria == 'all'){
                    location.reload();
                }
            });
        });

        function viewEmailDetails(id){
            $(this).removeClass('not-read').addClass('read');

            let emailDetailsSection = $('#email-details');

            /**Display the Loader First**/
            emailDetailsSection.html('<div style="text-align: center; margin: 15% 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>');
            /**Using JQuery Get the Email Details**/
            $.ajax({
                method: "GET",
                url: '/get-email-details/'+id,
                data: id,
                success: function (res){
                    if(res != ""){
                        emailDetailsSection.html(res);
                    }else{
                        emailDetailsSection.html('<div style="text-align: center; margin-top: 25%;" class="error">Click on a Specific Email to See Details</div>');
                    }
                }
            });
        }
    </script>
@endsection

{{--Include any Internal CSS Code--}}
@section('internal-css')
    <style>
        ul,li{
            list-style: none;
        }
        .display-my-email{
            border-radius: 10px;
            cursor: pointer;
            margin-bottom: 0;
        }
        .not-read{
            background-color: #e7f0fc;
        }
        .read{
            background-color: #f8fafc;
        }

        .emailReadingSection{
            background-color: rgba(224, 255, 255, 0.53);
        }
    </style>

@endsection

{{--Control Page Header/Links--}}
@section('headers')
    @include('headers.email-header')
@endsection

{{--Set Page Heading--}}
@section('heading')
    My Email Inbox:
@endsection
@section('done-by', '')
@section('searches')
    <button onclick="sendEmail()" type="button" class="navButtons" style="margin-bottom: 0;background-color: #73d3e3; float: right; color: black"><i
            class="fa fa-envelope"></i> &nbsp;Send New Email
    </button>
@endsection
{{--Page Content Goes here--}}
@section('content')
    <div class="wrapperer" id="client-table-wrapper">
        <div class="column" style="max-width: 30%; height: 380px;overflow-y:auto; max-height: 380px;">
           <div style="margin: 5px">
               {{--We provide some searching Criteria--}}
               <div style="background-color: lightcyan">
                   <div class="guestDetails_inputDividerNone"></div>
                   <div class="guestDetails_input">
                       <div class="guestDetails_input">
                           <select name="search-criteria" id="search-criteria-list" style="width: 90px">
                               <option value="">--Choose Criteria--</option>
                               <option value="all">ALL</option>
                               <option value="subject">Subject</option>
                               <option value="body">Body</option>
                               <option value="from">From</option>
                               <option value="to">To</option>
                               <option value="cc">CC</option>
                               <option value="bcc">BCC</option>
                           </select>
                       </div>
                   </div>
                   <div class="guestDetails_input">
                       <div class="guestDetails_input">
                           {!! Form::text('parameter', '', ['class'=>'input-text-height', 'id'=>'my-search-parameter','size'=>13]) !!}
                       </div>
                   </div>
                   <div class="guestDetails_input">
                       <div class="guestDetails_input">
                           <button type="button" id="submit-search" style="width: auto; height: 22px; cursor: pointer" title="Search Emails"><i class="fa fa-search" aria-hidden="true"></i></button>
                       </div>
                   </div>
                   <div class="guestDetails_inputDivider"></div>
               </div>
               <div class="returned-inbox-entries">
                   {{--We Loop through the Inbox List--}}
                   @if($inbox->count() > 0)
                       @foreach($inbox as $row)
                           @if($row->email)
                               <div class="display-my-email @if($row->read == 1) read @else not-read @endif" onclick="viewEmailDetails('{{$row->id}}')">
                                   <ul>
                                       <li><b>{!! substr($row->email->subject,0, 40) !!}</b><br></li>
                                       {{--<li>{!! substr($row->email->body,0, 10) !!}...</li>--}}
                                       <li style="text-align: right; margin-right: 5px"><b style="color: #a29191" >{!! date(DATE_RFC822, strtotime($row->email->created_at)) !!}</b></li>
                                   </ul>
                                   <hr>
                               </div>
                           @endif
                       @endforeach
                   @else
                       <div style="text-align: center; font-weight: bold;">
                           <i class="error">You Have No New Emails in your Inbox</i>
                       </div>
                   @endif
               </div>
           </div>
        </div>
        <div class="column emailReadingSection" style="max-width: 70%; height: 380px;overflow-y:auto; max-height: 380px;">
            <div id="email-details">
                <div style="text-align: center; margin-top: 25%;" class="error">Click on a Specific Email to See Details</div>
            </div>
        </div>
    </div>
@endsection
{{--System Hints Page--}}
@section('modal_heading')
    <h1>My Email Inbox</h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <b>
        <ol>
            <li>View and Read your Inbox Emails</li>
        </ol>
    </b>
@endsection
