@extends('layouts.app')

@section('title', 'Buchungsübersicht')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/bootstrap-table/css/bootstrap-table.min.css') }}">
@endpush

@section('content')
<div class="container-xxl">
    <h1>Buchungsübersicht</h1>

    <div id="toolbar">
        <form action="" id="filter-form">
            <div id="status-filter-btns" class="btn-group" role="group">
                <input type="checkbox" class="btn-check" id="btn-filter-status-new" value="1" checked>
                <label class="btn btn-outline-primary" for="btn-filter-status-new">&#x1F525; Neu</label>

                <input type="checkbox" class="btn-check" id="btn-filter-status-open" value="2" checked>
                <label class="btn btn-outline-primary" for="btn-filter-status-open">&#x1F440; Offen</label>

                <input type="checkbox" class="btn-check" id="btn-filter-status-closed" value="3">
                <label class="btn btn-outline-primary" for="btn-filter-status-closed">&#x2705; Geschl.</label>
            </div>

            <div id="owner-filter-btns" class="btn-group" role="group">
                <input type="radio" class="btn-check" name="owner" id="owner-mine">
                <label class="btn btn-outline-primary" for="owner-mine">&#x1F4AA; Meine</label>

                <input type="radio" class="btn-check" name="owner" id="owner-none">
                <label class="btn btn-outline-primary" for="owner-none">&#x2728; n. zuget.</label>

                <input type="radio" class="btn-check" name="owner" id="owner-all" checked>
                <label class="btn btn-outline-primary" for="owner-all">&#x2733; Alle</label>
            </div>
        </form>
    </div>

    <table id="table"
        class="table table-striped table-hover table-sm"
        data-toggle="table"
        data-url="{{ route('booking.server.overview') }}"
        data-method="post"
        data-ajax-options='{"headers": {"X-CSRF-TOKEN": "{{ csrf_token() }}"}}'
        data-pagination="true"
        data-row-attributes="rowAttributes"
        data-show-toggle="true"
        data-show-fullscreen="true"
        data-show-columns="true"
        data-search="true"
        data-locale="de-DE"
        data-toolbar="#toolbar"
        data-page-list="[10, 5, 25, 50]"
        data-sort-name="createdTimestamp"
        data-sort-order="desc">
        <thead>
            <tr>
                <th data-field="publicId">ID</th>
                <th data-field="createdTimestamp" data-sortable="true" data-formatter="dateFormatter">Datum</th>
                <th data-field="personSurname" data-sortable="true">Name</th>
                <th data-field="societyLabel" data-sortable="true">Verein</th>
                <th data-field="eventStartTimestamp" data-sortable="true" data-formatter="dateTimeFormatter">Mietbeginn</th>
                <th data-field="eventEndTimestamp" data-sortable="true" data-formatter="dateTimeFormatter">Mietende</th>
                <th data-field="statusLabel" data-sortable="true">Status</th>
                <th data-field="assignedToDisplayname" data-sortable="true">Bearbeiter:in</th>
                <th data-formatter="editFormatter" data-align="center"></th>
            </tr>
        </thead>
    </table>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/bootstrap-table/js/bootstrap-table.min.js') }}"></script>
<script src="{{ asset('assets/bootstrap-table/locale/bootstrap-table-de-DE.min.js') }}"></script>
<script>
function dateFormatter(value) {
    if (!value) return '';
    return new Date(value * 1000).toLocaleDateString('de-DE');
}
function dateTimeFormatter(value) {
    if (!value) return '';
    return new Date(value * 1000).toLocaleString('de-DE', {day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit'});
}
function editFormatter(value, row) {
    return '<a href="/booking/update/person/' + row.id + '" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></a>';
}
function rowAttributes(row) {
    var classes = {};
    if (row.statusId == 1) classes = {class: 'table-danger'};
    if (row.statusId == 2) classes = {class: 'table-warning'};
    if (row.statusId == 3) classes = {class: 'table-success'};
    return classes;
}
</script>
@endpush