@extends('layout.base')

@section('action')
    <a href="{{ route('schedule.create') }}" class="btn btn-light-primary btn-sm rounded">
        <i class="fas fa-plus"></i> Add
    </a>
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="card card-flush">
    <div class="card-header">
        <div class="card-title flex-column">
            <h3 class="fw-bold mb-1">Schedule</h3>
        </div>
    </div>
    <div class="card-body">
        <table class="table table-striped" id="scheduleTable">
            <thead>
                <tr>
                    <th></th>
                    <th>Title</th>
                    <th>Location</th>
                    <th>Date</th>
                </tr>
            </thead>

        </table>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        const scheduleUrls = {
            _datatable: "{{ route('schedule.datatable') }}",
        }

        $(document).ready(function() {
            $('#scheduleTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: scheduleUrls._datatable,
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                            <button class="btn btn-sm btn-warning btn-icon edit-data" data-id="${data}">
                                <i class="bx bx-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-danger btn-icon delete-data" data-id="${data}">
                                <i class="bx bx-trash"></i>
                            </button>
                            <button class="btn btn-sm btn-info btn-icon detail-data" data-id="${data}">
                                <i class="bx bx-detail"></i>
                            </button>
                        `;
                        }
                    },
                    {
                        data: 'title'
                    },
                    {
                        data: 'location'
                    },
                    {
                        data: 'date'
                    },
                ],
            });
        });
    </script>
@endsection