@extends('layouts.app')

@section('title', 'Sent Mail List')

@section('content')
    <section>
        <div class="section-body">
            <div class="card">
                <div class="card-head">
                    <header class="text-capitalize">{{ isset($title) ? $title : 'Mails' }}</header>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- BEGIN INBOX NAV -->
                        <div class="col-sm-4 col-md-3 col-lg-2 hidden-xs">
                            @include('mail.partials.sidebar', [
                                'sentMail' => $sentMail,
                                'draftMail' => $draftMail,
                            ])
                        </div>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <div class="text-divider visible-xs"><span>Email list</span></div>
                            <div class="row">

                                <!-- BEGIN INBOX EMAIL LIST -->
                                <div class="col-md-5 col-lg-4 height-6 scroll-sm">
                                    <div class="list-group list-email list-gray">
                                        @forelse($mails as $mail)
                                            <a href="javascript:void(0);" class="list-group-item btn-show-mail"
                                                data-id="{!! $mail->id !!}">
                                                <h5>{!! empty($mail->to) ? '<i>{blank}</i>' : \Illuminate\Support\Str::limit(strip_tags($mail->to), 20) !!}</h5>
                                                <h4>{!! empty($mail->subject) ? '<i>{blank}</i>' : $mail->subject !!}</h4>
                                                <p class="hidden-xs hidden-sm">{!! empty($mail->body) ? '<i>{blank}</i>' : \Illuminate\Support\Str::limit(strip_tags($mail->body), 100) !!}</p>
                                                <div class="stick-top-right small-padding text-default-light text-sm">
                                                    {{ $mail->created_at->format('Y-m-d H:i a') }}</div>
                                            </a>
                                        @empty
                                            There are no mails to show
                                        @endforelse
                                    </div>
                                    <!--end .list-group -->
                                    {!! $mails->links('vendor.pagination.default') !!}
                                </div>
                                <!--end .col -->
                                <!-- END INBOX EMAIL LIST -->

                                <!-- BEGIN EMAIL CONTENT -->
                                <div class="col-md-7 col-lg-8" id="email-container"></div>
                                <!--end .col -->
                                <!-- END EMAIL CONTENT -->

                            </div>
                            <!--end .row -->
                        </div>
                    </div>
                    <!-- END MAIL COMPOSE -->
                </div>
            </div>
        </div>
    </section>
@stop

@push('scripts')
    <script>
        $(document).ready(function() {
            var $btn = $('.btn-show-mail');
            $btn.click(function() {
                var that = this;
                var $emailContainer = $('#email-container');
                $.ajax({
                    'url': '{{ route('mail.show') }}',
                    'type': 'POST',
                    'data': {
                        _token: "{{csrf_token()}}",
                        'id': $(that).data('id')
                    },
                    'beforeSend': function() {
                        $emailContainer.html('Loading...');
                    },
                    'success': function(response) {
                        $btn.removeClass('focus');
                        $(that).addClass('focus');
                        $emailContainer.html(response);
                    },
                    'error': function() {
                        $emailContainer.html('Cannot Fetch Email.')
                    }
                })
            });
            $($btn[0]).trigger('click');
        });
    </script>
@endpush