@extends('layouts.app')

@section('content')
    <div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

        <div class="mb-4">
            <div class="d-flex align-items-center gap-2 mb-1">
                <i class="bi bi-calendar3 text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                <h4 class="fw-bold text-dark mb-0">Smart Operations Calendar</h4>
            </div>
            <p class="text-muted small mb-0">Unified historical calendar timeline mapping active corporate events and task
                pipelines.</p>
        </div>

        <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
            <div id="smartFullCalendar"></div>
        </div>
    </div>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

    <style>
        /* Styling adjustments to match your modern custom Bootstrap dashboard UI */
        .fc {
            font-family: 'Inter', sans-serif;
        }

        .fc .fc-toolbar-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
            text-transform: capitalize;
        }

        .fc .fc-button-primary {
            background-color: #4f46e5;
            border-color: #4f46e5;
            font-size: 13px;
            font-weight: 500;
            border-radius: 6px;
            text-transform: capitalize;
            padding: 6px 12px;
        }

        .fc .fc-button-primary:hover {
            background-color: #4338ca;
            border-color: #4338ca;
        }

        .fc .fc-button-primary:disabled {
            background-color: #94a3b8;
            border-color: #94a3b8;
            opacity: 0.6;
        }

        .fc .fc-col-header-cell-cushion {
            color: #475569;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            padding: 8px 0;
            text-decoration: none;
        }

        .fc-event {
            border: none !important;
            padding: 3px 6px;
            font-size: 12px;
            font-weight: 500;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .fc-daygrid-day-number {
            color: #475569;
            font-size: 12px;
            font-weight: 500;
            text-decoration: none !important;
            padding: 6px !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('smartFullCalendar');

            // Resolve dynamic user role routing path dynamically from current request URI
            var currentRole = "{{ auth()->user()->role }}";
            var fetchUrl = "/" + currentRole + "/calendar/events";

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                editable: false,
                selectable: false,

                // 📍 FIXED: Grid size ko responsive aur compact karne ke liye parameters
                height: 520, // Calendar ki overall height restrict kar di taaki scroll na karna pade
                contentHeight: 480,
                aspectRatio: 1.5, // Width aur height ka scale balance rakhega

                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek'
                },
                events: fetchUrl, // Hit dynamic json controller stream feed link
                eventDisplay: 'block'
            });

            calendar.render();
        });
    </script>
@endsection