@extends('template.master')

@section('page_styles')
    <link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
    <style>
        .btn-css{
            padding: 24% !important;
        }
        #success
        {
            float: right;
            padding: 1%;
            border: 1px solid darkseagreen;
            background: lightgreen;
            color: white;
        }

        #locations {
            overflow-y: scroll;
            height: 400px;
        }
        /*loader*/
        .loading{position:fixed;z-index:9999;height:2em;width:2em;overflow:visible;margin:auto;top:0;left:0;bottom:0;right:0}.loading:before{content:'';display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)}.loading:not(:required){font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.loading:not(:required):after{content:'';display:block;font-size:10px;width:1em;height:1em;margin-top:-.5em;-webkit-animation:spinner 1.5s infinite linear;-moz-animation:spinner 1.5s infinite linear;-ms-animation:spinner 1.5s infinite linear;-o-animation:spinner 1.5s infinite linear;animation:spinner 1.5s infinite linear;border-radius:.5em;-webkit-box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.5) -1.5em 0 0 0,rgba(0,0,0,.5) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0;box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.75) -1.5em 0 0 0,rgba(0,0,0,.75) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
    </style>
@stop

@section('content')
    <div id="success" style="display: none">
        Successful!
    </div>
    <div class="container-fluid">
        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center">
                    <h2 class="page-header-title text-gradient-01">Email Logs</h2>

                </div>
            </div>
        </div>
        <!-- End Page Header -->
        <div class="row flex-row">
            <div class="col-xl-12">

                <table id="email-tbl" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Module</th>
                            {{-- <th>Parameters</th> --}}
                            <th>Template</th>
                            <th>Title</th>
                            <th>To</th>
                            <th>From</th>
                            <th>Subject</th>
                            <th>Created Date</th>
                            <th>Created By</th>
                            <th>Body</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Module</th>
                            {{-- <th>Parameters</th> --}}
                            <th>Template</th>
                            <th>Title</th>
                            <th>To</th>
                            <th>From</th>
                            <th>Subject</th>
                            <th>Created Date</th>
                            <th>Created By</th>
                            <th>Body</th>
                        </tr>
                    </tfoot>
                </table>

            </div>
        </div>
        <!-- End Row -->

        <div class="col-md-5 padding-top-25 padding-left-25" id="col-recording">
            <div class="loading" style="display:none;">Loading&#8230;</div>
            <div id="" class="call-audio" style="background-color: #388aed">

            </div>
        </div>
    </div>

@stop

@section('page_modals')

    @include('template.alert')

@stop
@section('page_scripts')
    <script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            $('#email-tbl').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": "{{route('emails.load')}}"
            } );
        } );

        function emailLog(id)
        {
            $('.notification_message').html('Loading...');
            $('.notification_message').html('<iframe style="width: 100%; border: none;" id="msg-bdy-'+id+'" onload="setIframeHeight('+id+')" class="message-body" src="{{route('emails.message')}}?id='+id+'"></iframe>');
        }

        function setIframeHeight(id) {
            var ifrm = document.getElementById('msg-bdy-'+id);
            var doc = ifrm.contentDocument? ifrm.contentDocument: 
                ifrm.contentWindow.document;
            ifrm.style.visibility = 'hidden';
            ifrm.style.height = "10px"; // reset to minimal height ...
            // IE opt. for bing/msn needs a bit added or scrollbar appears
            ifrm.style.height = getDocHeight( doc ) + 4 + "px";
            ifrm.style.visibility = 'visible';
        }

        function getDocHeight(doc) {
            doc = doc || document;
            // stackoverflow.com/questions/1145850/
            var body = doc.body, html = doc.documentElement;
            var height = Math.max( body.scrollHeight, body.offsetHeight, 
                html.clientHeight, html.scrollHeight, html.offsetHeight );
            return height;
        }
    </script>
@stop