@extends('layouts.admin.app')
@section('title', __('trans.page.title'))


@section('datatableCSS')
    @include('layouts.admin.datatables-css')
@endsection

@section('datatablesJS')
    @include('layouts.admin.datatables-js')
@endsection

@section('content')

    <div class="card">
        <h5 class="card-header">@yield('title')</h5>
        <div class="card-datatable">
            <table class="dt-complex-header table table-bordered table-hover table-responsive">
                <thead>
                    <tr>
                        <th class="exp-col">{{ __('trans.id') }}</th>
                        <th class="exp-col">{{ __('trans.page.title') }}</th>
                        <th class="exp-col">{{ __('trans.page.slug') }}</th>
                        <th class="exp-col">{{ __('trans.page.status') }}</th>
                        <th class="exp-col">{{ __('trans.created_at') }}</th>
                        <th>{{ __('trans.actions') }}</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th class="exp-col">{{ __('trans.id') }}</th>
                        <th class="exp-col">{{ __('trans.page.title') }}</th>
                        <th class="exp-col">{{ __('trans.page.slug') }}</th>
                        <th class="exp-col">{{ __('trans.page.status') }}</th>
                        <th class="exp-col">{{ __('trans.created_at') }}</th>
                        <th>{{ __('trans.actions') }}</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>


@endsection

@section('js')
    <script>
        $(document).ready(function() {

            var table = $('.table').DataTable({
                processing: true,
                serverSide: true,
                orderCellsTop: true,
                scrollY: '400px',
                scrollCollapse: true,
                order: [
                    [0, 'desc']
                ],
                lengthMenu: lengthMenu("{{ __('trans.all') }}"),
                language: getlang(),
                dom: dom(),
                buttons: buttons("{{ __('trans.page.add_new') }}",
                    "{{ url('admin/pages/create') }}"),
                ajax: "{{ url('/admin/pages') }}",
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'title',
                    },
                    {
                        data: 'slug',
                    },
                    {
                        data: 'status'
                    },
                    {
                        data: 'created_at'
                    },
                ],
                columnDefs: [{
                    targets: 2,
                    render: function(data, type, row, meta) {
                        return `
                                <a href="/page/${row.slug}" class="btn btn-sm rounded-pill btn-info" target="_blank"><i class="fa-solid fa-link"></i></a>
                            `;
                    }
                }, {
                    targets: 3,
                    render: function(data, type, row, meta) {
                        if (row.status == 'active') {
                            return `Active`;
                        } else if (row.status == 'not_active') {
                            return `Not Active`;
                        }
                    }
                }, {
                    targets: 5,
                    render: function(data, type, row, meta) {
                        return `
                            <a href="{{ url('/admin/pages/`+row.id+`/edit') }}" class="btn btn-sm rounded-pill btn-info"><i class="ti ti-edit"></i></a>
                            <form action="{{ url('/admin/pages') }}/` + row.id + `" style="display:inline-block" method="post">@csrf {{ method_field('DELETE') }}
                                <button class="btn btn-sm rounded-pill btn-danger btn-delete"><i class="ti ti-trash"></i></button>
                            </form>
                        `;
                    }
                }, ],

                initComplete: function() {
                    this.api().columns().every(function() {
                        var that = this;
                        $('input', this.footer()).on('keyup change input clear', function() {
                            if (that.search() !== this.value) {
                                that.search(this.value).draw();
                            }
                        });
                    });
                },
            });

            $('.table tfoot th').each(function() {
                var title = $(this).text();
                var dataName = $(this).data('name');

                if ($(this).hasClass('exp-col')) {
                    $(this).html('<input type="text" class="form-control ' + dataName +
                        '" placeholder="{{ __('trans.search') }}: ' + title + '" />');
                }
            });
        });
    </script>
@endsection