Added Production Calendar screen page

resources/views/filament/pages/production-calender.blade.php

@@ -0,0 +1,13 @@
+<x-filament-panels::page>
+
+<div class="space-y-4">
+
+    {{-- Render the Select form fields --}}
+    <div class="space-y-4">
+        {{ $this->form }}
+    </div>
+
+
+</div>
+
+</x-filament-panels::page>

resources/views/forms/calendar.blade.php

@@ -0,0 +1,151 @@
+<!-- <select id="yearSelect">
+    <option value="">Select Year</option>
+</select> -->
+
+
+<div id="calendar" wire:ignore></div>
+
+
+<!-- <input type="text" name="working_days" placeholder="Working Days"> -->
+
+<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+
+    let selectedDates = [];
+    let calendarEl = document.getElementById('calendar');
+
+    var calendar = new FullCalendar.Calendar(calendarEl, {
+    initialView: 'dayGridMonth',
+    height: 600,
+    showNonCurrentDates: true,
+
+    datesSet: function(info) {
+        // Clear previous month selections
+        selectedDates = [];
+
+        // Remove background events
+        calendar.removeAllEvents();
+
+        // Recalculate working days for new month
+        updateWorkingDays(info.view.currentStart);
+    },
+
+    dateClick: function(info) {
+
+        let viewMonth = calendar.view.currentStart.getMonth();
+        let clickedMonth = info.date.getMonth();
+
+        if (viewMonth != clickedMonth) return;
+
+        let dateStr = info.dateStr;
+
+        if (selectedDates.includes(dateStr)) {
+            selectedDates = selectedDates.filter(d => d !== dateStr);
+
+            calendar.getEvents().forEach(event => {
+                if (event.startStr == dateStr) event.remove();
+            });
+
+        } else {
+            selectedDates.push(dateStr);
+
+            calendar.addEvent({
+                start: dateStr,
+                display: 'background',
+                color: '#f03f17'
+            });
+        }
+
+        updateWorkingDays(info.date);
+    }
+});
+
+
+    // var calendar = new FullCalendar.Calendar(calendarEl, {
+    //     initialView: 'dayGridMonth',
+    //     height: 600,
+    //     showNonCurrentDates: true,
+
+    //     dateClick: function(info) {
+
+    //         let viewMonth = calendar.view.currentStart.getMonth();
+    //         let clickedMonth = info.date.getMonth();
+
+    //         // let month = info.date.getMonth() + 1; // JS month: 0-11 → 1-12
+    //         // let year = info.date.getFullYear();
+
+    //         if (viewMonth != clickedMonth) {
+    //             return; // Ignore next/prev month dates
+    //         }
+
+    //         let dateStr = info.dateStr;
+
+    //         if (selectedDates.includes(dateStr)) {
+    //             selectedDates = selectedDates.filter(d => d !== dateStr);
+
+    //             calendar.getEvents().forEach(event => {
+    //                 if (event.startStr == dateStr) {
+    //                     event.remove();
+    //                 }
+    //             });
+
+    //         } else {
+    //             selectedDates.push(dateStr);
+
+    //             calendar.addEvent({
+    //                 start: dateStr,
+    //                 display: 'background',
+    //                 color: '#f03f17'
+    //             });
+    //         }
+
+    //         updateWorkingDays(info.date);
+    //     }
+    // });
+
+    // yearSelect.addEventListener('change', function () {
+    //     let year = this.value;
+    //     if (!year) return;
+
+    //     let currentDate = calendar.getDate();
+    //     let newDate = new Date(year, currentDate.getMonth(), 1);
+
+    //     calendar.gotoDate(newDate);
+    // });
+
+    function updateWorkingDays(date) {
+        let totalDays = new Date(
+            date.getFullYear(),
+            date.getMonth()+1,
+            0
+        ).getDate();
+
+        let workingDays = totalDays - selectedDates.length;
+        // document.querySelector('input[name="working_days"]').value = workingDays;
+
+        const input = document.querySelector('#working_days');
+
+        input.value = workingDays;
+
+        input.dispatchEvent(new Event('input'));
+
+        const monthInput = document.querySelector('#month');
+        monthInput.value = date.getMonth() + 1; // 1–12 month number
+        monthInput.dispatchEvent(new Event('input'));
+
+        const yearInput = document.querySelector('#year');
+        yearInput.value = date.getFullYear();
+        yearInput.dispatchEvent(new Event('input'));
+
+        const selectedDatesInput = document.querySelector('#selected_dates');
+        selectedDatesInput.value = selectedDates.join(',');
+        selectedDatesInput.dispatchEvent(new Event('input'));
+
+    }
+
+    calendar.render();
+});
+</script>

resources/views/forms/save.php

@@ -0,0 +1,9 @@
+<div class="flex space-x-2 items-center">
+    <button
+        type="button"
+        class="inline-flex items-center px-3 py-1 bg-primary-600 text-white rounded hover:bg-primary-700"
+        wire:click="saveWorkingDays"
+    >
+        Save
+    </button>
+</div>