@extends('crm.layouts.master')
@section('title','Email Detail')

@section('page-css')
    <style>
        .mce-notification, .mce-notification-inner{
            display: none;
        }
    </style>
@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>{{ $email['subject'] ?? '' }}</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card text-left mb-3 p-4">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="d-flex align-items-center">
                        {{--                        <img src="{{asset('assets/images/placeholder.png')}}" >--}}
                      @if($email['sender'] != '')
                        <div class="rounded-circle text-white profile-name">
                            {{strtoupper(substr($email['sender'],0,1)) }}
                        </div>
                        @endif
                        <div class="mx-2">
                            <h4 class="mb-0"> {{ $email['sender'] }}</h4>
                            <p class="mb-0"><i class="fa fa-envelope fs-5 text-yello me-1"></i> {{ $email['sender_email'] }}</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <p>{{ $email['date']->format('D, d M, H:i') }} ({{ $email['date']->diffForHumans() }})</p>
                        <button id="relpy_email_btn" type="button" class="btn btn-light border-0 rounded-circle" onclick="reply(`{{$email['id']}}`)" title="Reply email"><i class="fa fs-3 fa-reply"></i></button>
                        <button id="delete_email_btn{{$email['id']}}" type="button" class="btn btn-light border-0 rounded-circle" onclick="deleteEmail(`{{$email['id']}}`)" title="Delete email"><i class="fa fs-3 fa-trash"></i></button>


                    </div>
                </div>
                <div class="row profile-card-info">
                    <div class=" mb-3">
                        {!! $email['html_body'] !!}
                    </div>
{{--                    <div class=" mb-3">--}}
{{--                        @if (count($email['attachments']) > 0)--}}
{{--                            <h3>Attachments</h3>--}}
{{--                            <ul>--}}
{{--                                @foreach ($email['attachments'] as $attachment)--}}
{{--                                    <li>--}}
{{--                                        <a href="{{ url('emails/'.$email['id'].'/attachments/'.$attachment->getId()) }}" target="_blank">--}}
{{--                                            {{ $attachment->name }}--}}
{{--                                        </a>--}}
{{--                                    </li>--}}
{{--                                @endforeach--}}
{{--                            </ul>--}}
{{--                        @endif--}}
{{--                    </div>--}}

                </div>
            </div>

        </div>
    </div>
    <!-- The Add Modal -->
    <div class="modal" id="reply_email_modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Reply Email</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="reply_email">
                        <input type="hidden" id="email_id">

                        <div class="form-group">
                            <label class="form-label" for="email_body">Body</label>
                            <textarea type="text" id="email_body" class="form-control" ></textarea>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="reply_email_btn" type="submit">Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script src="{{ asset('js/tinymce.min.js') }}"></script>
    <script>
        $(document).ready(function () {

        });
    function reply(email_id){
        $("#email_id").val(email_id);
        $("#reply_email_modal").modal('show')
    }
        tinymce.init({
            selector: '#email_body',
            plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen codesample table charmap pagebreak nonbreaking insertdatetime advlist lists wordcount help charmap quickbars emoticons',
            menubar: 'file edit view insert format tools table help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | emoticons | fullscreen  preview | insertfile anchor codesample | ltr rtl',
            textcolor_map: [
                "FFFFFF", "White",
            ],
            toolbar_sticky: true,
            autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            importcss_append: true,
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: 300,
            // content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:18px;color:#fff; }'
        });
    </script>

@endsection