@extends(decide_template())

@section('title', $pageTitle)

@section('page_styles')
<style>
table#queries tr th, table#queries tr td {
    text-align: center;
    padding: 16px 10px !important;
    word-break: break-all !important;
    white-space: normal;
}
table#queries tr th:first-child, table#queries tr td:first-child {
    width: 150px;
    text-align: left;
    max-width: 200px;
    padding: 16px !important;
    min-width: 150px;
    white-space: normal !important;
    word-break: break-word !important;
}
table#queries tr th:nth-child(2), table#queries tr td:nth-child(2) {
    width: 300px;
    max-width: 300px;
    text-align: left;
    min-width: 250px;
    white-space: normal !important;
    word-break: break-word !important;
}
table#queries tr th:nth-child(3), table#queries tr td:nth-child(3),
table#queries tr th:nth-child(4), table#queries tr td:nth-child(4),
table#queries tr th:last-child, table#queries tr td:last-child {
    width: 50px;
}
#editmodal .modal-footer {
    justify-content: space-between;
}
.modal.show .modal-dialog .close {
    top: 35px !important;
    right: 25px !important;
}
.modal-body {
    padding: 30px 20px;
}
@media (max-width: 1200px) {
    .dataTables_wrapper>.row:nth-child(2)>.col-sm-12 {
        overflow-x: scroll;
        overflow-x: overlay;
    }
}
.template-lebel {
    display: block;
}
.badge.badge-grey {
    background-color: #e6e6e6 !important;
    color: #333 !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    /* margin-left: 5px !important; */
    vertical-align: top !important;
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1;
}
table#queries tr th:nth-child(5), table#queries tr td:nth-child(5),
table#queries tr th:nth-child(6), table#queries tr td:nth-child(6),
table#queries tr th:nth-child(7), table#queries tr td:nth-child(7) {
    min-width: 80px;
    max-width: 200px;
}
table#queries tr th:nth-child(6), table#queries tr td:nth-child(6),
table#queries tr th:nth-child(7), table#queries tr td:nth-child(7) {
    min-width: 135px;
    max-width: 200px;
}
table#queries tr th:last-child, table#queries tr td:last-child {
    min-width: 50px;
    max-width: 100px;
}
.fa-long-arrow-alt-left:before {
    content: "\f30a";
}
a.back-link {
    width: 190px;
    text-align: right;
    font-weight: 500;
}
a.back-link i {
    display: inline-block;
    min-width: 20px;
    text-align: left;
    transition: .5s ease all;
    padding-left: 8px;
}
a.back-link:hover i {
    text-align: left;
    transition: .5s ease all;
    padding-left: 5px;
}
a.back-link:hover {
    color: var(--btn-info-hover-bg-color) !important;
}
.dataTables_wrapper>.row:nth-child(2)>.col-sm-12 {
    overflow-x: scroll;
    overflow-x: overlay;
}
</style>
@endsection

@section('page_scripts')
<script src="{{ asset('themes/default/js/jquery.form.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/jquery.validate.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/additional-methods.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/init.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/select2.full.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/datatables.bundle.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/components-bootstrap-multiselect.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/includes/common.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/form-controls.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/sweetalert.min.js') }}" type="text/javascript"></script>
@php
$aiTagsI18n = [
    'status_changed' => trans('common.message.update'),
    'record_deleted' => trans('common.message.delete'),
];
@endphp
<script>
var aiTagsI18n = @json($aiTagsI18n);
$("body").on("change" , ".status" , function() {
    var form_data = {
        id: $(this).attr("data-id"),
        status: $(this).attr("data-status")
    }
    $.ajax({
        url: "{{route('change-template-status')}}",
        data: form_data,
        type: "POST",
        beforeSend: function () {
            $(".blockUI").hide();
        },
        complete:  function () {
            Command: toastr["success"] (aiTagsI18n.status_changed);
            $(".blockUI").hide();
        },
        success: function (data) {

        }
    });
});
$("body").on("change" , ".user_enabled" , function() {
    var form_data = {
        id: $(this).attr("data-id"),
        user_enabled: $(this).is(":checked") ? 1:0,
    }
    $.ajax({
        url: "{{route('change-template-enable')}}",
        data: form_data,
        type: "POST",
        beforeSend: function () {
            $(".blockUI").hide();
        },
        complete:  function () {
            Command: toastr["success"] (aiTagsI18n.status_changed);
            $(".blockUI").hide();
        },
        success: function (data) {

        }
    });
});
</script>
<script>
    var objTable;
    var record_type = 'our_records';
    $(document).ready(function() {

        $("body").on("click" , ".deleteme" , function() {
            swal({
                title: "@lang('common.message.are_you_sure')",
                text: "@lang('common.message.delete_warning')",
                icon: "warning",
                buttons: true,
                dangerMode: true,
                })
                .then((willDelete) => {
                if (willDelete) {
                    $(".blockUI").show();
                    var form_data = {
                        id:$(this).attr("data-id")
                    }
                    $.ajax({
                        url: "{{ route('deleteTemplate') }}",
                        type: "POST",
                        data: form_data,
                        success:function(data){
                            setTimeout(() => {
                                $(".blockUI").hide();
                                Command: toastr["success"] (aiTagsI18n.record_deleted);
                                location.reload();
                            }, 1500);
                        },
                        error:function(){
                            $(".blockUI").hide();
                        },
                        complete:function(){
                            $(".blockUI").hide();
                        }
                    });



                }
            });
        });

         // function in master2 layout
         var page_limit=show_per_page('','ai_temp_pageLength',10);  // Params (table,page,default_limit=10)
        var table=$('#queries').DataTable({
            "aoColumnDefs": [{"bSortable": false, "aTargets": [0,3,4,6]}],
            "bProcessing": true,
            "bServerSide": true,
            "aaSorting": [[5, "desc"]],
            "sPaginationType": "full_numbers",
            "sAjaxSource": "{{ route('getTemplates') }}",
            "pageLength" : page_limit,
            "fnServerParams": function (aoData) {
                aoData.push({"name": "record_type", "value": record_type});
                aoData.push({"name": "clients", "value": $("#clients").val()});
                aoData.push({"name": "admins", "value": $("#admins").val()});
            },
            "aLengthMenu": [[10, 50, 100, 500], [10, 50, 100, 500]]
        });
        objTable = table;
        page_limit=show_per_page(table,'ai_temp_pageLength');


    });

</script>
@include('includes.view-pages-filter-script')
@endsection

@section(decide_content())
<!-- will be used to show any messages -->
@if (Session::has('msg'))
<div class="alert alert-success" data-name="vImslclh">
    {{ Session::get('msg') }}
</div>
@endif
<div id="msg" class="display-hide" data-name="MMdZaaxz">
    <button class="close" data-close="alert"></button>
    <span id='msg-text' class="alert-text"><span>
</div>
<div class="row" data-name="WcNBieyo">
    <div class="col-md-12" data-name="XmpxcKeQ">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="kt-portlet kt-portlet--height-fluid" data-name="JHBkYrYy">
            <div class="kt-portlet__body" data-name="ryjVLgtd">
                <div class="table-toolbar" data-name="slIdLFad">
                    <div class="form-group row" data-name="rVNLHXmd">
                        <div class="col-md-12" data-name="ZsiERIPI">
                            <div class="btn-group" data-name="xZOwbdmu">
                                <a href="{{ route('contenttags.template.create') }}">
                                    <button id="sample_editable_1_new" class="btn btn-label-success">
                                        <i class="la la-plus"></i> {{trans('common.form.button.add_new')}}
                                    </button>
                                </a>
                            </div>
                            <a href="{{ route('contenttags.index') }}" class="text-info back-link pull-right"><i class="fa fa-long-arrow-alt-left"></i> {{trans('content_tags.query.page.back')}}</a>
                        </div>
                    </div>
                </div>
                @include('includes.view-pages-filter')
                <div class="table-scrollable">
                    <table class="table table-striped table-hover table-checkable" id="queries" role="grid" >
                        <thead>
                            <tr role="row">
                                <th>{{trans('content_tags.table_headings.name')}}</th>
                                <th>{{trans('content_tags.table_headings.description')}}</th>
                                <th>{{trans('content_tags.table_headings.status')}}</th>
                                @if(!isClient())
                                    <th>{{trans('content_tags.table_headings.user_enabled')}}</th>
                                @endif

                                <th>{{trans('content_tags.table_headings.nouse')}}</th>
                                <th>{{trans('content_tags.table_headings.created_on')}}</th>
                                <th>{{trans('content_tags.table_headings.updated_on')}}</th>
                                <th>{{trans('content_tags.table_headings.actions')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>

@endsection