@extends('layouts.admin.master')
@section('content')
    <div>
        <h6 class="mt-2">Aktivitas, Agenda dan Kalender Kegiatan</h6>
    </div>
    <div class="row mt-3">
        <!-- Kolom Kalender -->
        <div class="col-md-8">
            <div class="card h-100">
                <div class="card-body">
                    <div id="calendar" class="mt-3"></div>
                </div>
            </div>
        </div>
        <!-- Kolom Kegiatan Hari Ini -->
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="card-title">
                        <h6 class="mt-2">Kegiatan Hari Ini</h6>
                    </div>
                    <div class="list-group mt-3">
                        <!-- Contoh Kegiatan 1 -->
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">Rapat Tim Pengembang</h6>
                                <small class="text-success">Aktif</small>
                            </div>
                            <small class="text-muted">10:00 - 12:00 | Ruang Rapat A</small>
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-primary">Detail</button>
                                <button class="btn btn-sm btn-outline-danger">Batalkan</button>
                            </div>
                        </div>
                        <!-- Contoh Kegiatan 2 -->
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">Presentasi Klien</h6>
                                <small class="text-warning">Menunggu</small>
                            </div>
                            <small class="text-muted">14:00 - 15:30 | Online (Zoom)</small>
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-primary">Detail</button>
                                <button class="btn btn-sm btn-outline-success">Mulai</button>
                            </div>
                        </div>
                        <!-- Contoh Kegiatan 3 -->
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">Evaluasi Bulanan</h6>
                                <small class="text-secondary">Selesai</small>
                            </div>
                            <small class="text-muted">09:00 - 10:00 | Ruang Rapat B</small>
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-primary">Detail</button>
                                <button class="btn btn-sm btn-outline-info">Ulasan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/daterangepicker/daterangepicker.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">
    <style>
        #calendar {
            min-height: 400px;
        }
        .list-group-item {
            margin-bottom: 10px;
            border-radius: 5px;
        }

        /* Warna khusus untuk hari Sabtu dan Minggu */
        .weekend-day {
            background-color: rgba(255, 0, 0, 0.05) !important;
            color: #ff0000 !important;
        }

        /* Untuk border (opsional) */
        .weekend-day .fc-daygrid-day-frame {
            border: 1px solid rgba(255, 0, 0, 0.2) !important;
        }

        /* Warna hover (opsional) */
        .weekend-day:hover {
            background-color: rgba(255, 0, 0, 0.1) !important;
        }
    </style>
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/js/jquery.sparkline.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/circle-progress.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/charts-c3/d3.v5.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/charts-c3/c3-chart.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/input-mask/jquery.mask.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js" integrity="sha512-hktawXAt9BdIaDoaO9DlLp6LYhbHMi5A36LcXQeHgVKUH6kJMOQsAtIw2kmQ9RERDpnSTlafajo6USh9JUXckw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('assets/templates/admin/plugins/daterangepicker/moment.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/apexcharts-bundle/js/apexcharts.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/id.min.js"></script>
    @php
        $resource = resource_loader(
            blade_path: $view,
            params: [
                'page_title' => $page_attr['title'],
            ],
        );
    @endphp
    <script src="{{ $resource }}"></script>
@endsection