@extends('org.layout.adminPanel')
@section('title', 'Calendar')
@section('section', 'Calendar')
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/calendar.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">
    <style>
        .main-content-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 1.2em;
            align-items: start;
            justify-content: center;
        }

        .table-wrapper {
            flex: 1 1 460px;
        }
    </style>
@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid">
        <div class="container">
            <div class="content-wrapper-7 box-wrapper main-content-wrapper pb-5 px-4">
                <div style="width: 100%;" class="py-2">
                    <center>
                        <h2>Calendar</h2>
                    </center>
                </div>
                <div class="calendar-container">
                    <div class="calendar-header">
                        <select class="calendar-dropdown" data-calendar="months">
                        </select>
                        <select class="calendar-dropdown" data-calendar="years" style="margin-right: auto;">
                        </select>
                        <div class="calendar-button-wrapper">
                            <button class="calendar-button calendar-previous-button">
                                <i class="bi bi-caret-left-fill"></i>
                            </button>
                            <button class="calendar-button calendar-next-button">
                                <i class="bi bi-caret-right-fill"></i>
                            </button>
                        </div>
                    </div>
                    <div class="calendar-wrapper">
                    </div>
                </div>
                <div class="table-wrapper p-0" style="border: none;">
                    <h4 class="mb-3" id="current-date-label">----</h4>
                    <table id="items" class="display responsive nowrap" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th></th>
                                <th>Name</th>
                                {{-- <th>Type</th>
                                <th>Expired at</th> --}}
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
@endsection
@section('js')
    {{-- js --}}
    <script>
        const fetchItemURL = `{{ route('org.calendar.fetch.item', ['subdomain' => $subdomain]) }}`;
        const fetchItemDateURL = `{{ route('org.calendar.fetch.item.date', ['subdomain' => $subdomain]) }}`;
    </script>
    <script src="{{ asset(JSHELPER) }}"></script>
    <script src="{{ asset(JS) }}/calendar.js"></script>
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script>
        $(document).ready(function() {
            drawItemTable(`?date=${calendarInfo.dateStr}`);
        });

        function drawItemTable(parem = "") {
            $('#items').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: fetchItemURL + parem,
                language: {
                    emptyTable: `
                                    <i class="bi bi-box" style="font-size: 3rem; color:var(--border-color);"></i>
                                    <div>
                                        Nothing found
                                    </div>`,
                    processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                },
                order: [
                    [0, 'desc']
                ],
                initComplete: function() {
                    $("#items").removeClass("d-none");
                },
                // lengthMenu: [10,20,50],
                columnDefs: [{
                        "width": "0px",
                        "targets": 0
                    },
                    {
                        "width": "0px",
                        "targets": 1
                    },
                    {
                        "width": "100%",
                        "targets": 2
                    },
                ],
                columns: [{
                        data: "DT_RowIndex",
                        name: "id"
                    },
                    {
                        data: "icon",
                        name: "icon",
                        sortable: false,
                        searchable: false
                    },
                    {
                        data: "name",
                        name: "name",
                        render: function(data) {
                            let columnWrapper = `<div class="columnWrapper">${data}</div>`;
                            return columnWrapper;
                        }
                    },
                    // {
                    //     data: "type",
                    //     name: "type"
                    // },
                    // {
                    //     data: "expired_at",
                    //     name: "expired_at",
                    // },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ],
            });
        }
    </script>

@endsection