{{-- 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;
    }
    .card-body-letter {
        height: auto !important;
    }
</style>
<!-- <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/> -->
<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('probate-letters')}}" class="btn btn-primary px-4 font-weight-bold btn_click">Letter Management</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>Send Date</th>
                                                    <th>Trigger</th>
                                                    <th>Action</th>
                                               </tr>
                                            </thead>                        
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editCampaignModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Campaign</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="ecmToken" id="ecmToken" value="{{ csrf_token() }}">
                <div class="form-group">
                    <label>Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" placeholder="Enter campaign name" id="ecmName"/>
                    <div class="invalid-feedback" id="ecmNameError"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary font-weight-bold" id="ecmSubmit">Update</button>
            </div>
        </div>
    </div>
</div>
@endsection
{{-- Scripts --}}
@section('scripts') 
    <script>
        var link = '{{ $page->link }}';
    </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" src="{{ asset('js/developer/ajax-crud.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", ".editCampaign", function (e) {
                $('#ecmName').val($(this).data('name')).data('value', $(this).data('name')).data('id', $(this).data('id'));
                $('#editCampaignModal').modal('show');
            });
            $(document).on("keypress", "#ecmName", function (e) {
                $('#ecmName').removeClass('is-invalid');
                $("#ecmNameError").html("");
            });
        });

        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_ ", "sLengthMenu": "_MENU_" },  
            columnDefs: [
                {
                    targets: 3,
                    searchable: false,
                    orderable: false,    
                }            
                ],
            mark: true,
            ajax: {
                    url: '{!! URL::to("/probate-campaign-history/lists") !!}',
                    data: function (d) {
                    }
                },
            columns: [
                {data: 'name', name: 'name'},
                {data: 'sent_date', name: 'sent_date'},       
                {data: 'campaign_status', name: 'campaign_status'},
                {data: 'action', name: 'action'},
            ]
        });           
     </script>
@endsection