{{-- Extends layout --}}
@extends('layout.default')

@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection

{{-- Content --}}
@section('content')
<style>
.table-condensed{
    background:#fff;
}
.card-custom{
    margin-top: 25px;
}
#newbtn
{
    background: #B52555;
}
#newbtn button
{
    color: #fff;
}
#addCampaign
{
     background: #B52555;
     color: #fff;
}
</style>

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="d-flex flex-column-fluid">     
        <div class="container">       
            <div class="container py-8 ph-1">
                <div class="row">
                    <div class="container">
                        <div class="alert alert-custom alert-white alert-shadow gutter-b head-line top-box" role="alert">
                            <div class="alert-text head-text">
                                 {{ Str::singular($page->title) }} Management
                            </div>
                            <div class="ml-2 filter-btn">
                                 <a href="{{ url($page->link.'/create') }}"
                   class="btn btn-primary px-4 font-weight-bold btn_click">Create {{ Str::singular($page->title) }}</a>                                
                            </div>
                        </div>
                        <div class="card card-custom new-property">
                            <div class="card-body card-body-letter">
                                <div class="col-xs-12">
                                    <div class="">                                        
                                         <table id="example2" class="table">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th width="30%">Trigger</th>                    
                                                    <th>Option</th>
                                               </tr>
                                            </thead>                        
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

{{-- Scripts --}}
@section('scripts')
    <script type="text/javascript" src="{{ asset('js/developer/ajax-crud.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>    
    <script src="{!! asset('admin/js/jquery.dataTables.js') !!}"></script>
    <script src="{!! asset('admin/js/dataTables.bootstrap4.js') !!}"></script>
    <script src="{!! asset('admin/js/dataTables.responsive.min.js') !!}"></script>
    <script src="{!! asset('admin/js/responsive.bootstrap4.min.js') !!}"></script>
    <script src="{!! asset('admin/js/tables-datatable.js') !!}"></script>
    <script type="text/javascript">
        var table = $('#example2').DataTable({
            "aaSorting": [],
            "pageLength": 10,
            "sDom": '<"top"f>rt<"bottom"pli><"clear">',
            language: { search: '', searchPlaceholder: "Search...", "sLengthMenu": "_MENU_","sInfo" : "Showing _START_ - _END_ of _TOTAL_ ",// text you want show for info section
"sLengthMenu": "_MENU_" },                
            columnDefs: [
                {
                    targets: 2,
                    searchable: false,
                    orderable: false,    
                }            
            ],
            mark: true,
            ajax: {
                url: '{!! route('letterList') !!}',
                data: function (d) {
                }
            },
            columns: [
                {data: 'name', name: 'name'},
                {data: 'trigger', name: 'trigger'},       
                {data: 'action', name: 'action'},
            ]
        });

        function ajaxDelete(id) {
            swal.fire({
                title: "Are you sure?",
                text: "Delete this item",
                buttonsStyling: !1,
                confirmButtonText: "Delete",
                showCancelButton: true,
                customClass: {
                    confirmButton: "btn font-weight-bold btn-light-primary",
                    cancelButton: "btn font-weight-bold btn-light-danger",
                }
            }).then((function (t) {
                console.log(id);
                if (t.value) {
                    $.ajax({
                        url: "{{ url($page->link) }}" + "/" + id + "/delete",
                        type: "POST",
                        data:{ "_token": "{{ csrf_token() }}"},
                        success: function(response) {
                                        displayMessage(response.message,response.color);
                                        window.location.href = "{{  url('probate-letters') }}";
                                    }, 
                        error: function(f_response) {
                                        displayMessage(f_response.message,f_response.color);
                                        window.location.href = "{{  url('probate-letters') }}";
                                    },                       
                    });
                }
            }));
        }

        function displayMessage(msg, colorcode) {
            var spinner_data = [];
            spinner_data     = {
                                message         : msg, 
                                spinner_size    :'75px', 
                                spinner_type    :'bounce', 
                                backgroundcolor : colorcode,
                                };
            callSpinnerKitLoader(spinner_data);
            setTimeout(function() { stopSpinnerKitLoader(); }, 3000);        
        }
     </script>
@endsection