@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.event.create') ? route('informasi.event.create') : null])
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="event-table" data-testid="table-informasi">
                        <thead>
                            <tr>
                                <th style="max-width: 80px;">Aksi</th>
                                <th>Kegiatan</th>
                                <th>Tanggal Mulai</th>
                                <th>Tanggal Selesai</th>
                                <th>Dihadiri Oleh</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@include('partials.asset_datatables')

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            var data = $('#event-table').DataTable({
                processing: true,
                serverSide: false,
                ajax: "{!! route('informasi.event.getdata') !!}",
                columns: [{
                        data: 'aksi',
                        name: 'aksi',
                        class: 'text-center text-nowrap',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'event_name',
                        name: 'event_name'
                    },
                    {
                        data: 'start',
                        name: 'start'
                    },
                    {
                        data: 'end',
                        name: 'end'
                    },
                    {
                        data: 'attendants',
                        name: 'attendants'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    }
                ],
                order: [
                    [2, 'asc']
                ]
            });
            // Event untuk tombol pratinjau
            $(document).on('click', '.btn-preview-surat', function(e) {
                e.preventDefault();
                var url = $(this).data('url');
                $('#modalPreviewSuratLabel').text('Pratinjau');
                $('#modalPreviewSurat .modal-body').html('<iframe src="' + url + '" width="100%" height="500px" style="border:none;"></iframe>');
                $('#modalPreviewSurat').modal('show');
            });
        });
    </script>
    @include('components.modal-preview-surat')
    @include('forms.datatable-vertical')
    @include('forms.delete-modal')
@endpush