@extends('index')
@section('title', Helper::getSiteTitle($title))

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></li>
                    <li class="breadcrumb-item active">{{ __($title) }}</li>
                </ol>
            </div>
            <h4 class="page-title">{{ __($title) }}</h4>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card-box">
            <a href="{{ route('create-home-section') }}" class="btn btn-success waves-effect waves-light float-right">
                <span class="btn-label"><i class="fas fa-plus"></i></span>
                {{ __('Create New Collection') }}
            </a>
            <h4 class="header-title mb-4">{{ __($title) }}</h4>
            {!! Helper::getDatatables([__('ID'), __('Title'), __('Description'), __('Status'), __('Action')]) !!}
        </div>
    </div>
</div>
@endsection

@section('js-lib')
<script src="{{ asset('libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-keytable/js/dataTables.keyTable.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-select/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('libs/pdfmake/build/pdfmake.min.js') }}"></script>
<script src="{{ asset('libs/pdfmake/build/vfs_fonts.js') }}"></script>
<script src="{{ asset('libs/sweetalert2/sweetalert2.min.js') }}"></script>
@endsection

@section('css-lib')
<meta name="remove-url" content="{{ route('remove-home-section') }}">
<meta name="class-to-open" content='home_sections'>
<link href="{{ asset('libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('js')
<script type="text/javascript">
    function createTable()
    {
        table = $('.datatable').DataTable({
            language:{paginate:{previous:"<i class='mdi mdi-chevron-left'>",next:"<i class='mdi mdi-chevron-right'>"}},
            drawCallback:function(){$(".dataTables_paginate > .pagination").addClass("pagination-rounded")},
            "processing": true,
            "serverSide": true,
            "paging": true,
            "scrollX": false,
            "pageLength": 25,
            "language": {
                "emptyTable": "{{ __('No collection found') }}"
            },
            "order": [[0, "desc"]],
            "ajax":
            {
                url: "{{ route('pages-home-sections') }}",
                data: function ( d ) {},
                beforeSend: function(jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown){},
                complete: function(jqXHR) {}
            },
            createdRow: function( row, full, dataIndex ) {

                if (full.deleted_at) 
                {
                    $( row ).addClass('alert alert-dark');
                }
                else
                {
                    if (full.active == 0) 
                    {
                        $( row ).addClass('alert alert-danger');
                    }
                }
            },
            "columnDefs": [
                { className: "text-right", "targets": [ 3 ] },
            ],
            "columns":[
                { "data": "id", "name":"id" },
                { "data": "title", "name":"id" },
                { "data": "description", "name":"id" },
                { "data": "status", "name":"id", "sortable": false },
                { "data": "actions", "name":"id", "sortable": false },
            ] 
        });
    }
</script>
@endsection