@extends('layouts/eims_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')

    <style>
        .searchButton {
            padding-top: 1.2% !important;
        }


        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .school-logo img {
            height: 50px;
        }

        .calendar-title h3 {
            font-size: 24px;
        }

        .calendar-container {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 20px;
        }

        .month-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .month {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 10px;
            background-color: #FFFFFF;
            position: relative;
            width: 220px;
            cursor: pointer;
        }

        .month-name {
            text-align: center;
            font-weight: bold;
            margin-bottom: 5px;
            color: #396D67;
        }

        .days-container {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        .days-header,
        .days-container {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        .day-name {
            text-align: center;
            font-weight: bold;
            color: #004640;
        }

        .day-name.weekend {
            background-color: #e6f7ff;
            color: #f51013
        }

        .calendar-key {
            color: #004640;
        }

        .holiday {
            color: #004640;
        }

        .event-exam-view {
            color: #004640;
        }

        .event {
            color: #004640;
        }

        .day {
            text-align: center;
            padding: 5px;
            margin: 3%;
            color: #004640;
        }

        .day.weekend {
            background-color: #e6f7ff;
            color: #f51013
        }

        .day.today {
            background-color: #FFFADF;
            color: #ff6347
        }

        .day.class-day {
            background-color: #eaeaea;
        }
        .day.closed {
            background-color: #C1C1C1;
        }

        .day.exam {
            background-color: #9BB3DB;
        }

        .day.event {
            background-color: #ADEBB3;
        }

        .day.national-holiday {
            background-color: #EC6FAA;
        }

        .day.event-exam {
            background: linear-gradient(to bottom right, #ADEBB3 50%, #9BB3DB 50%);
        }

        .day.exam-event {
            background: linear-gradient(to bottom right, #ADEBB3 50%, #9BB3DB 50%);
        }

        .day.exam-national-holiday {
            background: linear-gradient(to bottom right, #9BB3DB 50%, #EC6FAA 50%);
        }

        .day.national-holiday-exam {
            background: linear-gradient(to bottom right, #9BB3DB 50%, #EC6FAA 50%);
        }

        .day.event-closed {
            background: linear-gradient(to bottom right, #ADEBB3 50%, #C1C1C1 50%);
        }

        .day.event-closed-national-holiday {
            background: linear-gradient(to bottom right, #ADEBB3 0%, #ADEBB3 33%, #C1C1C1 33%, #C1C1C1 66%, #EC6FAA 66%, #EC6FAA 100%);
        }

        .day.closed-event {
            background: linear-gradient(to bottom right, #ADEBB3 50%, #C1C1C1 50%);
        }

        .day.closed-event-national-holiday {
            background: linear-gradient(to bottom right, #ADEBB3 0%, #ADEBB3 33%, #C1C1C1 33%, #C1C1C1 66%, #EC6FAA 66%, #EC6FAA 100%);
        }

        .day.event-first-last-day {
            background: linear-gradient(to bottom right, #ADEBB3 50%, #FCDB04 50%);
        }

        .day.event-first-last-day-national-holiday {
            background: linear-gradient(to bottom right, #ADEBB3 0%, #ADEBB3 33%, #FCDB04 33%, #FCDB04 66%, #EC6FAA 66%, #EC6FAA 100%);
        }

        .day.first-last-day-event {
            background: linear-gradient(to bottom right, #ADEBB3 50%, #FCDB04 50%);
        }

        .day.first-last-day-national-holiday {
            background: linear-gradient(to bottom right, #FCDB04 50%, #EC6FAA 50%);
        }
        .day.national-holiday-first-last-day {
            background: linear-gradient(to bottom right, #EC6FAA 50%, #FCDB04 50%);
        }

        .day.first-last-day-event-national-holiday {
            background: linear-gradient(to bottom right, #ADEBB3 0%, #ADEBB3 33%, #FCDB04 33%, #FCDB04 66%, #EC6FAA 66%, #EC6FAA 100%);
        }

        .day.closed-national-holiday {
            background: linear-gradient(to bottom right, #EC6FAA 50%, #C1C1C1 50%);
        }

        .day.national-holiday-closed {
            background: linear-gradient(to bottom right, #EC6FAA 50%, #C1C1C1 50%);
        }

        .day.first-last-day {
            background-color: #FCDB04;
        }

        .day.closed-first-last-day {
            background: linear-gradient(to bottom right, #FCDB04 50%, #C1C1C1 50%);
        }

        .day.first-last-day-closed {
            background: linear-gradient(to bottom right, #FCDB04 50%, #C1C1C1 50%);
        }

        .key-color {
            display: inline-block;
            height: 10px;
            width: 10px;
        }

        .key-color.class-day {
            background-color: #fff;
            border: 1px dotted #000;
        }
        .key-color.event {
            background-color: #ADEBB3;
        }

        .key-color.exam {
            background-color: #9BB3DB;
        }

        .key-color.closed {
            background-color: #C1C1C1;
        }

        .key-color.national-holiday {
            background-color: #EC6FAA;
        }

        .key-color.first-last-day {
            background-color: #FCDB04;
        }

        .footer-notes {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .footer-notes ul {
            list-style-type: none;
        }

        .calendar-div {
            position: relative;
        }

        .close-button {
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            background-color: #ff6347;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
        }


        /* Additionally, if you want to change the background color for these days */
        .fc-event-main{
            overflow: hidden;
        }
        .fc .fc-toolbar-title {
            color: #004640 !important;
            align-items: center !important;
        }

        .fc-day-sun a,
        .fc-day-mon a,
        .fc-day-tue a,
        .fc-day-wed a,
        .fc-day-thu a {
            color: #004640;
        }

        .fc-day-fri,
        .fc-day-sat {
            background-color: #e6f7ff;
            /* Light red background for visual distinction */
        }

        .fc-day-fri a,
        .fc-day-sat a {
            color: #f51013;
        }

        .fc .fc-daygrid-day {
            position: relative;;
        }
        .fc .fc-daygrid-day-number {
            color: #004640;
        }

        .fc-day-fri .fc-daygrid-day-number,
        .fc-day-sat .fc-daygrid-day-number {
            color: #f51013;
        }

        .fc-day-today a {
            background-color: #FFFADF !important;
            /* Yellow background */
            color: #ff6347 !important;
            /* Black text for contrast */
        }

        .fc .centered {
            display: inline-block;
            justify-content: center;
            align-items: center;
            width: 50%;
            /* Ensures it takes up the full cell height */
            font-size: 1em;
            /* Adjust as needed for sizing */
        }
    </style>
    <div class="row add-data-form" style="padding-bottom:20px;">
        <div class="col-md-12">
            <div class="col-md-1"></div>
            <div class="col-md-10 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    {{-- <button type="button" class="btn btn-primary print_timetable" id="print">Print</button> --}}
                    &nbsp;&nbsp;&nbsp;

                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">{{ $data['pageTitle'] }} List</div>
                    </div>
                    <div class="panel-body">
                        {!! Form::open([
                            'url' => '',
                            'role' => 'form',
                            'class' => 'form-horizontal form-groups',
                            'id' => 'courseClassRoutineForm',
                        ]) !!}

                        <!-- filtering -->
                        @php
                            $options = ['' => 'Select any'];

                            $searchElements = [
                                // ['element' => 'program_id'],
                                ['element' => 'fillSessionId'],
                            ];

                            // Conditionally add 'faculty_id' for 'UNV' companyType at the beginning
                            if ($data['companyType'] == 'UNV') {
                                array_unshift($searchElements, ['element' => 'fillFacultyId']); // Adds 'faculty_id' at the beginning
                            }
                        @endphp
                        @include('partials.searchPanel.main', ['searchElements' => $searchElements])
                        {!! Form::close() !!}
                        <!-- filtering end-->

                        <div class="container">
                            <div id="routineWeekSubmitDiv">
                                <style>
                                    @media print {
                                        html {
                                            -webkit-print-color-adjust: exact !important;
                                            font-family: sans-serif;
                                        }

                                        body {
                                            zoom: 70% !important;
                                            -moz-transform: scale(1.05);
                                            /* Firefox */
                                            -moz-transform-origin: 0 0;
                                        }
                                        .searchButton {
                                            padding-top: 1.2% !important;
                                        }


                                        .calendar-header {
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                        }

                                        .school-logo img {
                                            height: 50px;
                                        }

                                        .calendar-title h3 {
                                            font-size: 24px;
                                        }

                                        .calendar-container {
                                            position: relative;
                                            display: flex;
                                            flex-wrap: wrap;
                                            justify-content: space-around;
                                            margin-top: 20px;
                                        }

                                        .month-grid {
                                            display: grid;
                                            grid-template-columns: repeat(4, 1fr);
                                            gap: 20px;
                                        }

                                        .month {
                                            border: 1px solid #ccc;
                                            border-radius: 8px;
                                            padding: 10px;
                                            background-color: #FFFFFF;
                                            position: relative;
                                            width: 220px;
                                            cursor: pointer;
                                        }

                                        .month-name {
                                            text-align: center;
                                            font-weight: bold;
                                            margin-bottom: 5px;
                                            color: #396D67;
                                        }

                                        .days-container {
                                            display: grid;
                                            grid-template-columns: repeat(7, 1fr);
                                        }

                                        .days-header,
                                        .days-container {
                                            display: grid;
                                            grid-template-columns: repeat(7, 1fr);
                                        }

                                        .day-name {
                                            text-align: center;
                                            font-weight: bold;
                                            color: #004640;
                                        }

                                        .day-name.weekend {
                                            background-color: #e6f7ff;
                                            color: #f51013
                                        }

                                        .calendar-key {
                                            color: #004640;
                                        }

                                        .holiday {
                                            color: #004640;
                                        }

                                        .event-exam-view {
                                            color: #004640;
                                        }

                                        .event {
                                            color: #004640;
                                        }

                                        .day {
                                            text-align: center;
                                            padding: 5px;
                                            margin: 3%;
                                            color: #004640;
                                        }

                                        .day.weekend {
                                            background-color: #e6f7ff;
                                            color: #f51013
                                        }

                                        .day.today {
                                            background-color: #FFFADF;
                                            color: #ff6347
                                        }

                                        .day.class-day {
                                            background-color: #eaeaea;
                                        }
                                        .day.closed {
                                            background-color: #C1C1C1;
                                        }

                                        .day.exam {
                                            background-color: #9BB3DB;
                                        }

                                        .day.event {
                                            background-color: #ADEBB3;
                                        }

                                        .day.national-holiday {
                                            background-color: #EC6FAA;
                                        }

                                        .day.event-exam {
                                            background: linear-gradient(to bottom right, #ADEBB3 50%, #9BB3DB 50%);
                                        }

                                        .day.exam-event {
                                            background: linear-gradient(to bottom right, #ADEBB3 50%, #9BB3DB 50%);
                                        }

                                        .day.exam-national-holiday {
                                            background: linear-gradient(to bottom right, #9BB3DB 50%, #EC6FAA 50%);
                                        }

                                        .day.national-holiday-exam {
                                            background: linear-gradient(to bottom right, #9BB3DB 50%, #EC6FAA 50%);
                                        }

                                        .day.event-closed {
                                            background: linear-gradient(to bottom right, #ADEBB3 50%, #C1C1C1 50%);
                                        }

                                        .day.event-closed-national-holiday {
                                            background: linear-gradient(to bottom right, #ADEBB3 0%, #ADEBB3 33%, #C1C1C1 33%, #C1C1C1 66%, #EC6FAA 66%, #EC6FAA 100%);
                                        }

                                        .day.closed-event {
                                            background: linear-gradient(to bottom right, #ADEBB3 50%, #C1C1C1 50%);
                                        }

                                        .day.closed-event-national-holiday {
                                            background: linear-gradient(to bottom right, #ADEBB3 0%, #ADEBB3 33%, #C1C1C1 33%, #C1C1C1 66%, #EC6FAA 66%, #EC6FAA 100%);
                                        }

                                        .day.event-first-last-day {
                                            background: linear-gradient(to bottom right, #ADEBB3 50%, #FCDB04 50%);
                                        }

                                        .day.event-first-last-day-national-holiday {
                                            background: linear-gradient(to bottom right, #ADEBB3 0%, #ADEBB3 33%, #FCDB04 33%, #FCDB04 66%, #EC6FAA 66%, #EC6FAA 100%);
                                        }

                                        .day.first-last-day-event {
                                            background: linear-gradient(to bottom right, #ADEBB3 50%, #FCDB04 50%);
                                        }

                                        .day.first-last-day-national-holiday {
                                            background: linear-gradient(to bottom right, #FCDB04 50%, #EC6FAA 50%);
                                        }
                                        .day.national-holiday-first-last-day {
                                            background: linear-gradient(to bottom right, #EC6FAA 50%, #FCDB04 50%);
                                        }

                                        .day.first-last-day-event-national-holiday {
                                            background: linear-gradient(to bottom right, #ADEBB3 0%, #ADEBB3 33%, #FCDB04 33%, #FCDB04 66%, #EC6FAA 66%, #EC6FAA 100%);
                                        }

                                        .day.closed-national-holiday {
                                            background: linear-gradient(to bottom right, #EC6FAA 50%, #C1C1C1 50%);
                                        }

                                        .day.national-holiday-closed {
                                            background: linear-gradient(to bottom right, #EC6FAA 50%, #C1C1C1 50%);
                                        }

                                        .day.first-last-day {
                                            background-color: #FCDB04;
                                        }

                                        .day.closed-first-last-day {
                                            background: linear-gradient(to bottom right, #FCDB04 50%, #C1C1C1 50%);
                                        }

                                        .day.first-last-day-closed {
                                            background: linear-gradient(to bottom right, #FCDB04 50%, #C1C1C1 50%);
                                        }

                                        .key-color {
                                            display: inline-block;
                                            height: 10px;
                                            width: 10px;
                                        }

                                        .key-color.class-day {
                                            background-color: #fff;
                                            border: 1px dotted #000;
                                        }
                                        .key-color.event {
                                            background-color: #ADEBB3;
                                        }

                                        .key-color.exam {
                                            background-color: #9BB3DB;
                                        }

                                        .key-color.closed {
                                            background-color: #C1C1C1;
                                        }

                                        .key-color.national-holiday {
                                            background-color: #EC6FAA;
                                        }

                                        .key-color.first-last-day {
                                            background-color: #FCDB04;
                                        }

                                        .footer-notes {
                                            display: flex;
                                            justify-content: space-between;
                                            margin-top: 20px;
                                        }

                                        .footer-notes ul {
                                            list-style-type: none;
                                        }

                                        .calendar-div {
                                            position: relative;
                                        }

                                        .close-button {
                                            position: absolute;
                                            top: 0;
                                            right: 0;
                                            cursor: pointer;
                                            background-color: #ff6347;
                                            color: white;
                                            border: none;
                                            padding: 5px 10px;
                                            border-radius: 4px;
                                        }


                                        /* Additionally, if you want to change the background color for these days */
                                        .fc-event-main{
                                            overflow: hidden;
                                        }
                                        .fc .fc-toolbar-title {
                                            color: #004640 !important;
                                            align-items: center !important;
                                        }

                                        .fc-day-sun a,
                                        .fc-day-mon a,
                                        .fc-day-tue a,
                                        .fc-day-wed a,
                                        .fc-day-thu a {
                                            color: #004640;
                                        }

                                        .fc-day-fri,
                                        .fc-day-sat {
                                            background-color: #e6f7ff;
                                            /* Light red background for visual distinction */
                                        }

                                        .fc-day-fri a,
                                        .fc-day-sat a {
                                            color: #f51013;
                                        }

                                        .fc .fc-daygrid-day {
                                            position: relative;;
                                        }
                                        .fc .fc-daygrid-day-number {
                                            color: #004640;
                                        }

                                        .fc-day-fri .fc-daygrid-day-number,
                                        .fc-day-sat .fc-daygrid-day-number {
                                            color: #f51013;
                                        }

                                        .fc-day-today a {
                                            background-color: #FFFADF !important;
                                            /* Yellow background */
                                            color: #ff6347 !important;
                                            /* Black text for contrast */
                                        }

                                        .fc .centered {
                                            display: inline-block;
                                            justify-content: center;
                                            align-items: center;
                                            width: 50%;
                                            /* Ensures it takes up the full cell height */
                                            font-size: 1em;
                                            /* Adjust as needed for sizing */
                                        }
                                    }
                                </style>
                                <div class="row" style="color:#004640">
                                    @php $company = $data['companyDetails'];@endphp
                                    {{-- make the image vertically and horizontally center inside this div --}}
                                    <div class="col-md-2 col-sm-2 col-xs-12 d-flex justify-content-center">
                                        <img class="img-responsive" src="{{ asset('images/company/' . $company->image) }}"
                                            alt="{{ $company->name }}">
                                    </div>
                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                        <h1 style='font-family: "Arial", sans-serif'>{{ $company->name }}</h1>
                                        <div><b>Address: </b>{{ $company->address }}</div>
                                        <div>
                                            {{ $company->phone ? "Phone: $company->phone" : null }}
                                            {{ $company->telephone ? ', Telephone: ' . $company->telephone : null }}
                                        </div>
                                        <div>Email: {{ $company->email }}</div>
                                        <div>Web: {{ $company->website }}</div>
                                    </div>
                                    <div class="col-md-2 col-sm-2 col-xs-12">
                                        <h4 style='font-family: "Arial", sans-serif'>Academic Calendar <span
                                                id="academic_year">{{ $data['actualYear'] }} </span></h4>
                                    </div>
                                </div>
                                <div class="row">

                                    <!-- Calendar Container -->
                                    <div id="calendar-div" class="calendar-div">
                                        <button class="close-button" id="close-button" style="display: none;">X</button>

                                        <div id="calendarContainer" class="calendar-container"
                                            style="margin-top: 5% !important;">
                                            <!-- JavaScript will populate this area with the calendar months and days -->
                                        </div>
                                        <div id="calendarContainerMonthWise" class="calendar-container-month-wise"
                                            style="margin-top: 5% !important;">
                                            <!-- JavaScript will populate this area with the calendar months and days -->
                                        </div>
                                    </div>

                                    <br>
                                    <br>
                                    <!-- Legend for Key -->

                                    <!-- Footer Notes -->
                                    <div class="footer-notes">
                                        <div class="calendar-key">
                                            <h4>KEY</h4>
                                            @php
                                                $companyType = 'School';
                                                if ($data['companyType'] == 'UNV') {
                                                    $companyType = 'University';
                                                } elseif ($data['companyType'] == 'CLG') {
                                                    $companyType = 'College';
                                                } elseif ($data['companyType'] == 'SCL') {
                                                    $companyType = 'School';
                                                }
                                            @endphp
                                            <div><span class="key-color class-day"></span> {{ $companyType }} Class</div>
                                            <div><span class="key-color event"></span> {{ $companyType }} Event</div>
                                            <div><span class="key-color exam"></span> {{ $companyType }} Exam</div>
                                            <div><span class="key-color closed"></span> {{ $companyType }} Closed</div>
                                            <div><span class="key-color national-holiday"></span> National Holiday</div>
                                            <div><span class="key-color first-last-day"></span> First/Last Day of
                                                {{ $companyType }}</div>
                                        </div>
                                        <div class="event-exam-view">
                                            <h4>Event/Exam</h4>
                                            <ul id="event_exam_list">
                                                @foreach ($data['eventsAll'] as $keyEventsAll => $eventAll)
                                                    <li>
                                                        @php
                                                            $viewOfEvents = '';
                                                            $start_month = date('m', strtotime($eventAll->from_date));
                                                            $end_month = date('m', strtotime($eventAll->to_date));

                                                            if ($start_month == $end_month) {
                                                                if (
                                                                    date('d', strtotime($eventAll->from_date)) ==
                                                                    date('d', strtotime($eventAll->to_date))
                                                                ) {
                                                                    $viewOfEvents =
                                                                        (int) date(
                                                                            'd',
                                                                            strtotime($eventAll->from_date),
                                                                        ) .
                                                                        ' ' .
                                                                        date('M', strtotime($eventAll->from_date)) .
                                                                        ': ' .
                                                                        $eventAll->eims_calendar_activities->name;
                                                                } else {
                                                                    $viewOfEvents =
                                                                        (int) date(
                                                                            'd',
                                                                            strtotime($eventAll->from_date),
                                                                        ) .
                                                                        '-' .
                                                                        (int) date('d', strtotime($eventAll->to_date)) .
                                                                        ' ' .
                                                                        date('M', strtotime($eventAll->from_date)) .
                                                                        ': ' .
                                                                        $eventAll->eims_calendar_activities->name;
                                                                }
                                                                //$viewOfEvents = date('d', strtotime($eventAll->to_date));
                                                            } elseif ($start_month != $end_month) {
                                                                $viewOfEvents =
                                                                    (int) date('d', strtotime($eventAll->from_date)) .
                                                                    ' ' .
                                                                    date('M', strtotime($eventAll->from_date)) .
                                                                    '-' .
                                                                    (int) date('d', strtotime($eventAll->to_date)) .
                                                                    ' ' .
                                                                    date('M', strtotime($eventAll->to_date)) .
                                                                    ': ' .
                                                                    $eventAll->eims_calendar_activities->name;
                                                            }
                                                            echo $viewOfEvents;
                                                        @endphp
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <div class="holiday">
                                            <h4>Holiday</h4>
                                            <ul id="holiday_list">
                                                @foreach ($data['holidaysAll'] as $keyHolidaysAll => $holidaysAll)
                                                    <li>
                                                        @php
                                                            $viewOfHoliday = '';
                                                            $start_month = date(
                                                                'm',
                                                                strtotime($holidaysAll->from_date),
                                                            );
                                                            $end_month = date('m', strtotime($holidaysAll->to_date));

                                                            if ($start_month == $end_month) {
                                                                if (
                                                                    date('d', strtotime($holidaysAll->from_date)) ==
                                                                    date('d', strtotime($holidaysAll->to_date))
                                                                ) {
                                                                    $viewOfHoliday =
                                                                        (int) date(
                                                                            'd',
                                                                            strtotime($holidaysAll->from_date),
                                                                        ) .
                                                                        ' ' .
                                                                        date('M', strtotime($holidaysAll->from_date)) .
                                                                        ': ' .
                                                                        $holidaysAll->name;
                                                                } else {
                                                                    $viewOfHoliday =
                                                                        (int) date(
                                                                            'd',
                                                                            strtotime($holidaysAll->from_date),
                                                                        ) .
                                                                        '-' .
                                                                        (int) date(
                                                                            'd',
                                                                            strtotime($holidaysAll->to_date),
                                                                        ) .
                                                                        ' ' .
                                                                        date('M', strtotime($holidaysAll->from_date)) .
                                                                        ': ' .
                                                                        $holidaysAll->name;
                                                                }
                                                            } elseif ($start_month != $end_month) {
                                                                $viewOfHoliday =
                                                                    (int) date(
                                                                        'd',
                                                                        strtotime($holidaysAll->from_date),
                                                                    ) .
                                                                    ' ' .
                                                                    date('M', strtotime($holidaysAll->from_date)) .
                                                                    '-' .
                                                                    (int) date('d', strtotime($holidaysAll->to_date)) .
                                                                    ' ' .
                                                                    date('M', strtotime($holidaysAll->to_date)) .
                                                                    ': ' .
                                                                    $holidaysAll->name;
                                                            }
                                                            echo $viewOfHoliday;
                                                        @endphp
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
@endsection

<script type="text/javascript" src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/fullcalendar/fullcalendar1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/fullcalendar/daygrid.min.js') }}"></script>
<script type="text/javascript">
    let formattedEventsHoliday = [];
    const uniqueEvents = new Set();
    $(document).ready(function() {

        var calendarActualYear = "{{ $data['actualYear'] }}";
        var calendarYear = "{{ $data['year'] }}";
        var fromDate = "{{ $data['fromDate'] }}";
        var toDate = "{{ $data['toDate'] }}";
        var companyType = "{{ $data['companyType'] }}";

        renderCalendar(calendarYear,fromDate,toDate);

        // Form submission to load events based on the selected filters
        $('form').submit(function(event) {
            event.preventDefault(); // Prevent default form submission
            $('#loadingModal').show(); // Show loading indicator
            $.ajax({
                type: 'post',
                url: '{{ route('eims_activities_calendar') }}', // URL for your backend route
                data: $('form').serialize(), // Serialize form data
                dataType: 'json',
                success: function(_response) {
                    $('#loadingModal').hide(); // Hide loading indicator
                    if (_response.responseStatus === 'success') {
                        $('#academic_year').text(_response.actualYear);
                        renderCalendar(_response.year,_response.fromDate,_response.toDate, _response.events, _response
                            .holidays);
                        console.log(_response.events, _response.holidays);
                        renderEventsExam(_response.events);
                        renderHolidays(_response.holidays);
                        Swal.fire({
                            icon: 'success',
                            title: 'Calendar Updated!!',
                            text: 'Calendar updated successfully!',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'No events!',
                            text: 'No events found for the selected criteria!',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                },
                error: function(_response) {
                    $('#loadingModal').hide(); // Hide loading indicator
                    toastr.error('Response Error');
                }
            });
        });

        $(document).on('click', '.print_timetable', function(e) {
            e.preventDefault(); // avoid to execute the actual submit of the form.
            var $this = $(this);
            var class_id = $this.data('class_id');
            var section_id = $this.data('section_id');
            var printContents = document.getElementById("timetable").innerHTML;
            Popup(printContents);
        });

        function Popup(data, winload = false) {
            var frameDoc = window.open('', 'Print-Window');
            frameDoc.document.open();
            //Create a new HTML document.
            frameDoc.document.write('<html>');
            frameDoc.document.write('<head>');
            frameDoc.document.write('<title></title>');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/bootstrap/css/bootstrap.min.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/dist/css/font-awesome.min.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/dist/css/ionicons.min.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/dist/css/AdminLTE.min.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/dist/css/skins/_all-skins.min.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/plugins/iCheck/flat/blue.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/plugins/morris/morris.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/plugins/jvectormap/jquery-jvectormap-1.2.2.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/plugins/datepicker/datepicker3.css">');
            // frameDoc.document.write('<link rel="stylesheet" href="' + base_url +
            //     'backend/plugins/daterangepicker/daterangepicker-bs3.css">');
            frameDoc.document.write('</head>');
            frameDoc.document.write('<body onload="window.print()">');
            frameDoc.document.write(data);
            frameDoc.document.write('</body>');
            frameDoc.document.write('</html>');
            frameDoc.document.close();
            setTimeout(function() {
                frameDoc.close();
                if (winload) {
                    window.location.reload(true);
                }
            }, 1500);

            return true;
        }

        $(document).on('click', '.month', function(e) {
            let monthId = $(this).data('monthid'); // Use 'this' to refer to the clicked element
            let year = $(this).data('year'); // Use 'this' to refer to the clicked element
            let actualMonthId = parseInt(monthId + 1);
            $('#calendarContainer').fadeOut();
            monthWiseCalendar(actualMonthId, year, formattedEventsHoliday);
            $('#close-button').fadeIn(2500);
            // $('#calendar-close-button').fadeIn('3000');

        });

        $(document).on('click', '.close-button', function(e) {
            $('#calendarContainerMonthWise').fadeOut();
            $('#calendarContainer').fadeIn();
            // $('#calendar-close-button').hide();
            $('#close-button').hide();
        });

    });
    // Helper function to add unique items to formattedEvents
    function addFormattedEventHoliday(item, itemType) {
        // var formattedEventsHoliday = [];
        // Format dates to include time
        const startFormatted = new Date(item.start_date);
        const endFormatted = new Date(item.end_date);

        // Determine classNames based on type
        let classNames = 'day';
        if (itemType === 'event') {
            if (item.activities_type === 'event') classNames += ' event';
            if (item.activities_type === 'first-last-day') classNames += ' first-last-day';
            if (item.activities_type === 'exam') classNames += ' exam';
            if (item.activities_type === 'closed') classNames += ' closed';
        } else if (itemType === 'holiday') {
            if (item.activities_type === 'national-holiday') classNames += ' national-holiday';
        }

        // Create a unique key for each item
        const itemKey = `${item.event_name || item.holiday_name}_${startFormatted}`;

        // Add item only if it's unique
        if (!uniqueEvents.has(itemKey)) {
            uniqueEvents.add(itemKey); // Track as added

            // Get the day name (e.g., 'Monday')
            const dayName = startFormatted.toLocaleString('en-US', { weekday: 'short' });

            formattedEventsHoliday.push({
                title: item.event_name || item.holiday_name,
                start: startFormatted,
                end: endFormatted,
                dayName: dayName,
                classNames: classNames.trim()
            });
        }
    }

    function renderCalendar(year, fromDate = null, toDate = null, events = [], holidays = []) {
        console.log('Year:', year);
        $('#calendarContainer').empty();
        const daysNameOfWeek = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
        const today = new Date(); // Get today's date
        today.setHours(0, 0, 0, 0); // Normalize to midnight for accurate comparison

        // Use the updated getMonthsBetween function to get month and year details
        const monthsWithYears = getMonthsBetween(fromDate, toDate);
        const totalMonth = monthsWithYears.length;

        const monthGrid = $('<div class="month-grid"></div>');

        // Iterate through each month and year in the range
        for (let i = 0; i < totalMonth; i++) {
            // Extract month and year from the monthWithYears array
            const [monthName, monthYear] = monthsWithYears[i].split('-');
            const monthIndex = new Date(`${monthName} 1, ${monthYear}`).getMonth();
            const currentYear = parseInt(monthYear);

            // Create a div for each month
            let monthDiv = $('<div class="month" data-year="' + currentYear + '" data-monthid="' + monthIndex + '"></div>');
            monthDiv.append(`<div class="month-name">${monthName} ${currentYear}</div>`);

            // Add days of the week header
            let daysHeader = $('<div class="days-header"></div>');
            daysNameOfWeek.forEach(dayName => {
                let dayNameDiv = $('<div class="day-name">' + dayName + '</div>');
                daysHeader.append(dayNameDiv);
                if (dayName === 'FR' || dayName === 'SA') {
                    dayNameDiv.addClass('weekend');
                }
            });
            monthDiv.append(daysHeader);

            let daysContainer = $('<div class="days-container"></div>');

            // Determine the number of days in the current month and the first day of the month
            let daysInMonth = getDaysInMonth(monthIndex, currentYear);
            let firstDayOfWeek = new Date(currentYear, monthIndex, 1).getDay();

            // Add blank spaces for the days before the first day of the month
            for (let j = 0; j < firstDayOfWeek; j++) {
                daysContainer.append('<div class="day blank"></div>');
            }

            // Loop through each day of the current month
            for (let day = 1; day <= daysInMonth; day++) {
                let dayDiv = $('<div class="day">' + day + '</div>');
                let dayOfWeek = (firstDayOfWeek + day - 1) % 7;

                // Highlight Fridays and Saturdays
                if (dayOfWeek === 5 || dayOfWeek === 6) {
                    dayDiv.addClass('weekend');
                }

                // Create a Date object for the current day being rendered
                let currentDate = new Date(currentYear, monthIndex, day);
                currentDate.setHours(0, 0, 0, 0); // Normalize the date for comparison

                if (currentDate.getTime() === today.getTime()) {
                    dayDiv.addClass('today');
                }

                // Initialize an object to hold classes and event names by date
                let activities_classes_by_date = {};
                let event_holiday_names_by_date = {};

                // Check and render events
                if (events.length > 0) {
                    events.forEach(event => {
                        let eventStartDate = new Date(event.start_date);
                        let eventEndDate = new Date(event.end_date);
                        eventStartDate.setHours(0, 0, 0, 0); // Normalize for comparison
                        eventEndDate.setHours(0, 0, 0, 0); // Normalize for comparison

                        if (eventStartDate <= currentDate && eventEndDate >= currentDate) {
                            if (!activities_classes_by_date[currentDate]) {
                                activities_classes_by_date[currentDate] = [];
                            }
                            if (!event_holiday_names_by_date[currentDate]) {
                                event_holiday_names_by_date[currentDate] = [];
                            }

                            if (event.activities_type) {
                                activities_classes_by_date[currentDate].push(event.activities_type);
                            }

                            if (!event_holiday_names_by_date[currentDate].includes(event.event_name)) {
                                event_holiday_names_by_date[currentDate].push(event.event_name);
                            }

                            activities_classes_by_date[currentDate] = [...new Set(activities_classes_by_date[currentDate])];
                        }
                    });
                    events.forEach(event => addFormattedEventHoliday(event, 'event'));
                }

                // Check and render holidays
                if (holidays.length > 0) {
                    holidays.forEach(holiday => {
                        let holidayStartDate = new Date(holiday.start_date);
                        let holidayEndDate = new Date(holiday.end_date);
                        holidayStartDate.setHours(0, 0, 0, 0); // Normalize for comparison
                        holidayEndDate.setHours(0, 0, 0, 0); // Normalize for comparison

                        if (holidayStartDate <= currentDate && holidayEndDate >= currentDate) {
                            dayDiv.addClass('national-holiday');
                            dayDiv.attr('title', holiday.holiday_name);

                            if (!activities_classes_by_date[currentDate]) {
                                activities_classes_by_date[currentDate] = [];
                            }
                            if (!event_holiday_names_by_date[currentDate]) {
                                event_holiday_names_by_date[currentDate] = [];
                            }

                            if (holiday.activities_type) {
                                activities_classes_by_date[currentDate].push(holiday.activities_type);
                            }

                            if (!event_holiday_names_by_date[currentDate].includes(holiday.holiday_name)) {
                                event_holiday_names_by_date[currentDate].push(holiday.holiday_name);
                            }

                            activities_classes_by_date[currentDate] = [...new Set(activities_classes_by_date[currentDate])];
                        }
                    });
                    holidays.forEach(holiday => addFormattedEventHoliday(holiday, 'holiday'));
                }

                if (activities_classes_by_date[currentDate]) {
                    let activities_classes = activities_classes_by_date[currentDate].join('-');
                    let event_names = event_holiday_names_by_date[currentDate].join(', ');

                    if (dayOfWeek !== 5 && dayOfWeek !== 6) { // Only apply to non-weekend days
                        dayDiv.addClass(activities_classes);
                        dayDiv.attr('title', event_names);
                    }
                }

                daysContainer.append(dayDiv);
            }

            monthDiv.append(daysContainer);
            monthGrid.append(monthDiv);
        }

        $('#calendarContainer').append(monthGrid);
    }


    function getDaysInMonth(month, year) {
        return new Date(year, month + 1, 0).getDate();
    }


    function getMonthsBetween(startDate, endDate) {
        const months = [
            "January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"
        ];

        const start = new Date(startDate);
        const end = new Date(endDate);
        const result = [];

        // Iterate from the start date to the end date
        while (start <= end) {
            // Get the month name and the year
            const monthYear = `${months[start.getMonth()]}-${start.getFullYear()}`;
            result.push(monthYear);

            // Move to the next month
            start.setMonth(start.getMonth() + 1);
        }


        // If startDate or endDate is null, return all months without specific years
        if (startDate == null && endDate == null) {
            return months;
        }else{
            return result;
        }
    }

    // Function to render a month-wise calendar


    function monthWiseCalendar(month, year, formattedEventsHolidayGet) {
        console.log(month, year, formattedEventsHolidayGet);
        $('#calendarContainerMonthWise').fadeIn();
        const calendarEl = document.getElementById('calendarContainerMonthWise');

        // Create initialDate from month and year
        const initialDate = `${year}-${String(month).padStart(2, '0')}-01`;

        // Initialize FullCalendar with dynamic initialDate
        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            initialDate: initialDate,
            headerToolbar: {
                end: ''
            },
            // events: formattedEventsHolidayGet,
            events: formattedEventsHolidayGet.filter(event => {
                // Filter out events that fall on weekends
                const eventDate = new Date(event.start);
                const dayOfWeek = eventDate.getDay();
                console.log('dayOfWeek ',dayOfWeek);
                return dayOfWeek !== 5 && dayOfWeek !== 6; // Exclude Friday (5) & Saturday (6)
            }),
            eventDisplay: 'block',
            dayMaxEventRows: true,
            editable: false,
            selectable: false,
            eventContent: function(arg) {
                return {
                    html: `<div class="myDivGet" style="color: #004640; font-weight: bold;">${arg.event.title}</div>`
                };
            },
            dayCellDidMount: function(info) {
                // Get today's date
                const today = new Date();
                today.setHours(0, 0, 0, 0); // Normalize time

                // Check if this cell represents today's date
                if (info.date.getTime() === today.getTime()) {
                    info.el.style.backgroundColor = '#FFFADF'; // Yellow background
                    info.el.style.color = '#ff6347'; // Black text
                    info.el.innerHTML = "<span class='centered' style='position:absolute;top:40%;left:40%;'>Today</span>";
                }

                const dayOfWeek = info.date.getDay();
                // Style weekends (Fri: 5, Sat: 6)
                if (dayOfWeek === 5 || dayOfWeek === 6) {
                    info.el.style.backgroundColor = '#f8f9fa'; // Light gray for weekends
                    info.el.style.color = ''; // Default text color
                    info.el.removeAttribute('title'); // Remove titles for weekends
                    info.el.classList.add('weekend'); // Optional: Add custom "weekend" class
                }
            }
        });

        calendar.render();
    }

    // Function to format the events similar to the PHP code
    function formatEventExamHolidayDate(fromDate, toDate, eventHolidayName) {
        const start = new Date(fromDate);
        const end = new Date(toDate);

        const startDay = start.getDate();
        const endDay = end.getDate();
        const startMonth = start.toLocaleString('default', {
            month: 'short'
        });
        const endMonth = end.toLocaleString('default', {
            month: 'short'
        });

        // Check if events start and end in the same month
        if (startMonth === endMonth) {
            if (startDay === endDay) {
                // Single day event
                return `${startDay} ${startMonth}: ${eventHolidayName}`;
            } else {
                // Multi-day event within the same month
                return `${startDay}-${endDay} ${startMonth}: ${eventHolidayName}`;
            }
        } else {
            // Event spanning across months
            return `${startDay} ${startMonth}-${endDay} ${endMonth}: ${eventHolidayName}`;
        }
    }

    // Function to render holidays into the <ul> with id "holiday_list"
    function renderEventsExam(eventExams) {
        const eventExamList = document.getElementById('event_exam_list');
        eventExamList.innerHTML = ''; // Clear previous list items if any

        eventExams.forEach(eventExam => {
            const listItem = document.createElement('li');
            listItem.textContent = formatEventExamHolidayDate(eventExam.start_date, eventExam.end_date,
                eventExam.event_name);
            eventExamList.appendChild(listItem);
        });
    }

    // Function to render holidays into the <ul> with id "holiday_list"
    function renderHolidays(holidays) {
        const holidaysList = document.getElementById('holiday_list');
        holidaysList.innerHTML = ''; // Clear previous list items if any

        holidays.forEach(holiday => {
            const listItem = document.createElement('li');
            listItem.textContent = formatEventExamHolidayDate(holiday.start_date, holiday.end_date, holiday
                .holiday_name);
            holidaysList.appendChild(listItem);
        });
    }

    function printDiv() {
        var printContents = document.getElementById("routineWeekSubmitDiv").innerHTML;
        var printStyle =
            '<style>' +
            '@page { size: A4 landscape; margin: 0; }' +
            '#purchasesBarcodePrint { float: left; height: 100px; padding: 0px; width: 100%; font-size: 11px; margin-bottom: 30px; page-break-inside: auto; width: 250px; page-break-inside: avoid; }' +
            '.barcodeSpan { margin: 2px 3px 2px 3px; display: inline-block; text-align: center !important; }' +
            '</style>';
        var printDiv = '<div id="order-details-wrapper" style="padding: 0;">' + printStyle + printContents + '</div>';
        document.body.innerHTML = printDiv;
        var originalContents = document.body.innerHTML;
        window.print();
        document.body.innerHTML = originalContents;
        location.reload();
    }
</script>