@extends('Client::layouts')
@section('page-body')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            <i class="fa fa-{{$pageIcon ? $pageIcon : 'angle-double-right'}}" aria-hidden="true"></i> {{$pageTitle}}
            <br>
            <small>{{$pageDescription}}</small>
        </h1>
        <ol class="breadcrumb">
            <li class="active"><i class="fa fa-{{$pageIcon ? $pageIcon : 'angle-double-right'}}"></i> {{$pageTitle}}</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        @include('Client::message')
        <div class="box box-default">
            <div class="box-header with-border">
                <div class="pull-left">
                    <form action="javascript:void(0)" id="about-us-filter" method="POST" class="form-inline" role="form">
                        <b>Filter: </b>
                        <div class="form-group">
                            <input type="text" name="title" class="form-control" placeholder="Type title to search." style="width: 300px !important;" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="">Search About Us</label>
                            {!! Form::select('status', $status, null, ['class' => 'form-control', 'placeholder'=>'All']) !!}
                        </div>
                        <button type="submit" class="btn btn-primary">Filter</button>
                        <button href="javascript:void(0)" class="btn btn-default" id="reset">Reset</button>
                    </form>
                </div>
                @can('create', $permissions)
                    <div class="pull-right">
                        <a href="{{ route(config('modules.client').'.about-us.create') }}" class="btn btn-primary btn-flat"><i class="fa fa-plus-circle"></i> Add {{$pageModuleName}}</a>
                    </div>
                @endcan
            </div>
            <div class="box-body">
                <table class="table table-bordered table-striped table-hover" id="about-us-table" width="100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Title</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
               </table>
            </div>
        </div>
        @include('Client::logs')
        @include('Client::pages.about-us.includes.about-us-details-modal')
    </section>
@stop
@section('page-js')
<script type="text/javascript">
    $(document).ready(function() {
        var aboutUsTable = $('#about-us-table').DataTable({
            "processing": true,
            "serverSide": true,
            "pagingType": "input",
            ajax: {
                url: '{!! route(config('modules.client').'.about-us.datatables-index') !!}',
                type: 'POST',
                "data": function(d){
                    d.title = $('#about-us-filter [name="title"]').val();
                    d.status = $('#about-us-filter [name="status"]').val();
                }
            },
            "dom": "<'row'<'col-sm-6'i><'col-sm-6 text-right'l>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'><'col-sm-7'p>>",
            columns: [
                {
                    width:'10px', searchable: false, orderable: false,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'title', name: 'title' },
                { data: 'status_name', name: 'status_name', sortable: false, searchable: false, width:'100px', className:'text-center'},
                { data: 'action', name: 'action', orderable: false, searchable: false, width:'60px', className:'text-center'},
            ],
            fnDrawCallback: function ( oSettings ) {
                aboutUsTable.on("click", '#btn-delete', function() {
                    var action = $(this).data('action');
                    swal({
                        title: 'Are you sure you want to delete?',
                        text: "This will be permanently deleted",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes'
                        }).then(function () {
                        $.ajax({
                            type: "DELETE",
                            url: action,
                            dataType: 'json',
                            success: function(data) {
                                if(data.type == "success") {
                                    aboutUsTable.draw();
                                    swal(data.message, '', 'success').catch(swal.noop);
                               }else{
                                    swal(data.message, '', 'error').catch(swal.noop);
                               }
                            },
                            error :function( jqXhr ){
                                swal('Unable to delete.', 'Please try again.', 'error').catch(swal.noop);
                            }
                        });
                    }).catch(swal.noop);
                });
            },
            "order": [[1, "asc"]],
        });
        $('#about-us-filter').on('submit', function(){
            aboutUsTable.draw();
        });
        $('#reset').on('click', function(event) {
            event.preventDefault();
            $('#about-us-filter [name="title"]').val('');
            $('#about-us-filter [name="status"]').val('');
            aboutUsTable.draw();
        });
    });
</script>
<script type="text/javascript">
    $('#about-us-details-modal').on('show.bs.modal', function (event) {
        var modal = $(this);
        var href = $(event.relatedTarget);
        var details_url = href.data('details_url');

        $.ajax({
            url: details_url,
            type: 'GET',
        }).done(function(response){
            modal.find('.title').html(response.title);
            modal.find('.content').html(response.content);
            modal.find('.status').html(response.status_name);
        })
    });

    $('#about-us-details-modal').on('hidden.bs.modal', function (event) {
        var modal = $(this);

        modal.find('.title').html('');
        modal.find('.content').html('');
        modal.find('.status').html('');
    });
</script>
@include('Client::notify')
@stop

• [D] includes
• [F] create.blade.php
  Delete
• [F] edit.blade.php
  Delete
• [F] index.blade.php
  Delete