@extends('layouts.admin')

@section('style')
    @parent
    <style>
        .email_tpl, .email_tpl iframe {
            width: 100%;
        }
        .email_tpl textarea {
            display: none;
        }

        .btn-group-wrap .btn {
            padding: 5px;
            margin-bottom: 5px;
        }
    </style>
@endsection

@section('script')
    @parent


    <script>

        $(function () {
            var t = $('#notification_tpl_list').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{!! addslashes($ajax_route) !!}',
                },
                // scrollX: true,
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"]],
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {
                        data: 'slug',
                        name: 'slug',
                        render: function (data, type, row) {
                            return data + ( row.description ?  '<small title="'+ row.description +'"  data-toggle="tooltip" ><i class="fas fa-question-circle ml-2 text-muted"></i></small>' :'');
                        }
                    },
                    {data: 'type', name: 'type'},
                    {data: 'subject', name: 'subject'},
                    {data: 'content', name: 'content'},
                    {data: 'language', name: 'language'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action'},
                ],
                columnDefs: [{
                    targets: [0,7],
                    searchable: false,
                    orderable: false,
                },{
                    targets: [5,6],
                    className: 'text-center'
                },{
                    targets: [7],
                    className: 'text-center action-group'
                }],
                autoWidth: false,
                drawCallback: function( settings, json ) {
                    $('[data-toggle="tooltip"]').tooltip()
                }
            });


            $('#notification_tpl_list').on('click', '.btn-run-code', function (e) {
                var html = $(this).siblings('textarea').val();
                $(this).siblings('textarea').remove();

                var iframe = $('<iframe>').hide();
                iframe.insertAfter($(this));
                $(this).remove();
                var body = iframe.contents().find('body');
                body.html(html);
                body.on('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                });
                iframe.fadeIn();

                return false;
            });
        });
    </script>
@endsection


@section('content')
    @php
        $page_title =  __('admin_dashboard.titleNotificationTemplateList');
    @endphp

    @component('admin.components.tabs')
        <table id="notification_tpl_list" class="table table-bordered table-hover dataTable">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Slug</th>
                    <th>Type</th>
                    <th>Subject</th>
                    <th>Content</th>
                    <th>Language</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    @endcomponent
@endsection