@extends('layouts.dashboard_template')

@section('content')
    <section class="content-header block-breadcrumb">
        <h1>
            {{ $page_title ?? 'Page Title' }}
            <small>{{ $page_description ?? '' }}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li class="active">{{ $page_title }}</li>
        </ol>
    </section>
    <section class="content container-fluid">

        @include('partials.flash_message')

        <div class="box box-primary">
            <div class="box-header with-border">
                @include('forms.btn-social', ['create_url' => auth()->user()->can('access.informasi.artikel.create') ? route('informasi.artikel.create') : null])
            </div>
            <div class="box-body">
                <!-- Filter Dropdown -->
                <div class="form-group">
                    <label for="filter-kategori">Filter Kategori:</label>
                    <select id="filter-kategori" class="form-control" style="width: 200px;">
                        <option value="">Semua Kategori</option>
                        @foreach ($kategori as $kate)
                            <option value="{{ $kate->id_kategori }}">{{ $kate->nama_kategori }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="artikel-table" data-testid="table-informasi">
                        <thead>
                            <tr>
                                <th class="text-center text-nowrap" style="max-width: 80px;">Aksi</th>
                                <th>Judul</th>
                                <th>Kategori</th>
                                <th style="max-width: 100px;">Status</th>
                                <th>Tanggal Terbit</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('css')
    <style>
        #artikel-table .artikel-title-cell {
            display: inline-block;
            max-width: 320px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
    </style>
@endpush

@include('partials.asset_datatables')

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            var data = $('#artikel-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{!! route('informasi.artikel.getdata') !!}",
                    type: "POST",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.id_kategori = $('#filter-kategori').val();
                    }
                },
                columns: [{
                        data: 'aksi',
                        name: 'aksi',
                        class: 'text-center text-nowrap',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'judul',
                        name: 'judul',
                        class: 'artikel-title-cell',
                        render: function(data, type, row) {
                            var title = data;
                            if (title && title.length > 50) {
                                title = title.substr(0, 50) + '...';
                            }
                            return '<span title="' + (data ? data.replace(/"/g, '&quot;') : '') + '">' + title + '</span>';
                        }
                    },
                    {
                        data: 'kategori',
                        name: 'kategori.nama_kategori'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        class: 'text-center',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'tanggal_terbit',
                        name: 'tanggal_terbit',
                        class: 'text-center',
                        searchable: false
                    }
                ],
                order: [
                    [4, 'desc']
                ]
            });

            $('#filter-kategori').on('change', function() {
                data.draw();
            });
        });
    </script>
    @include('forms.datatable-vertical')
    @include('forms.delete-modal')
@endpush