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

{{-- Content --}}
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@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>
<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
{{-- <link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/> <link href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css"/> --}}

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->

    <!--end::Subheader-->
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">     
        <!--begin::Container-->
        <div class="container">       
            <!--begin::Row-->
            <div class="container py-8 ph-1">
                <div class="row">
                    <!--begin::Container-->
                    <div class="container">
                        <!--begin::Notice-->

                        <!--end::Notice-->
                        <!--begin::Card-->
                        <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">
                                <!--begin: Search Form-->
                                <!--begin::Search Form-->   
                                <!--end::Search Form-->
                                <!--end: Search Form-->
                                <!--begin: Datatable-->
                                <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>
                            <!--end: Datatable-->
                        </div>
</div>
<!--end::Card-->
</div>

<!--end::Container-->
<!--end::Row-->
<!--end::Dashboard-->
</div>
<!--end::Container-->
</div>
<!--end::Entry-->
</div>
</div>

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

{{-- Scripts --}}
@section('scripts')
    <!-- <script>
        var link = '{{ $page->link }}';
    </script>
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ asset('js/developer/ajax-crud.js') }}"></script> -->

   <!--  <script>
        $( document ).ready(function() {
            FormValidation.formValidation(
                document.getElementById('formAddress'),
                {
                    fields: {
                        company_name: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter company name'
                                },
                                // stringLength: {
                                //     min:10,
                                //     max:200,
                                //     message: 'Please enter a comment within length range 10 and 200'
                                // }
                            }
                        },
                        line_1: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter address line 1'
                                },
                               
                            }
                        },
                        line_2: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter address line 2'
                                },
                               
                            }
                        },
                        line_3: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter address line 3'
                                },
                               
                            }
                        },
                        city: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter city'
                                },
                               
                            }
                        },
                        county: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter county'
                                },
                               
                            }
                        },
                        postal_code: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter post code'
                                },
                            }
                        },
                    },

                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        // Bootstrap Framework Integration
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                        // Validate fields when clicking the Submit button
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        // Submit the form when all fields are valid
                        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    }
            });
        });
    </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_" },
                    
                //processing: true,

                mark: true,
                ajax: {
                    url: '{!! route('letterList') !!}',
                    data: function (d) {
                    }
                },

                columns: [
                // {data: 's#', name: 's#'},
                {data: 'name', name: 'name'},
                // {data: 'trigger', name: 'trigger'},       
                // // {data: 'executer', name: 'executer'},
                // // {data: 'publication_date', name: 'publication_date'},
                // // {data: 'created_date', name: 'created_date'},           
                // // {data: 'claim_date', name: 'claim_date'},
                // {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