
<?php $__env->startSection('content'); ?>

    
    
    <main class="main-content">

        <div class="container">
            <div class="page-header">
                <h3><?php echo e(__('message.add')); ?> Attendance Details</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo e(asset('dashboard')); ?>"><?php echo e(__('message.dashboard')); ?></a></li>
                        <li class="breadcrumb-item" aria-current="page"><a href="<?php echo e(asset('hrms/salary')); ?>">Salary</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><?php echo e(__('message.add')); ?></li>
                    </ol>
                </nav>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        
                        <div class="col-md-3">
                            
                               
                            <form>
                                    <button type="button" class="btn btn-outline-success mb-3" id="working_count">Working Days : 30</button>
                                    <button type="button" class="btn btn-outline-danger  mb-3" id="leave_count">Leave Days : 30</button>
                                
                                    <div class="d-flex justify-content-start mb-5">
                                        <div class="form-group position-relative" style="width:120px;left:0px;">
                                            <button type="button" class="btn btn-primary position-absolute" style="width:120px;left:0px;">Upload CSV</button>
                                            <input type="file" accept="file" class="border position-absolute" style="width:120px;left:0px;opacity:0;z-index:2;cursor:pointer;"  />
                                            
                                        </div>
                                    </div>
                                    
                            </form>
                            <div class="mt-3">
                                <a class="btn btn-warning text-white" href="#">Download Sample</a>
                            </div>
                               
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-12">
                                    
                                </div>
                                
                            </div>
                           
                            <div id="calendar"></div>
                        </div>
                        <div class="col-md-1">
                            
                        </div>
                    </div>
                </div>
            </div>
           
        </div>


        
        <div class="modal animate__animated fadeIn" id="eventModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">            
                    <div class="modal-header bg-primary rounded-0">
                        <h4 class="modal-title">Add Event</h4>
                        <button type="button" class="close close_btn" >&times;</button>
                    </div>
                    <div class="modal-body p-4">
                        <form>
                            <div class="row">
                        
                                <div class="col-12">
                                
                                        <div class="mb-3">
                                            <label for="title">Title</label>
                                            <input type="text" name="title" class="form-control" id="title">
                                        </div>
                                        <div class="mb-3">
                                            <label>Date</label>
                                            <input type="datetime-local" name="event_date" class="form-control">
                                        </div>
                                        <div class="mb-3">
                                            <label>Description</label>
                                            <textarea name="description" class="form-control"></textarea>
                                        </div>
                                        <div class="mb-3 d-flex justify-content-end">
                                            <button class="btn btn-primary">SUBMIT</button>
                                        </div>
                                </div>
                            
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <!-- leave -->
        <div class="modal animate__animated fadeIn" id="leaveModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">            
                    <div class="modal-header rounded-0 bg-primary">
                        <h4 class="modal-title">Add Leave</h4>
                        <button type="button" class="close close_btn" >&times;</button>
                    </div>
                    <div class="modal-body p-4">
                        <form>
                            <div class="row">
                        
                                <div class="col-12">
                                
                                        <div class="mb-3">
                                            <label for="leave_type">Leave Type</label>
                                            <select class="form-control" id="leave_type" name="leave_type">
                                                <option value="pl">Privilege Leave (PL) or Earned Leave (EL)</option>
                                                <option value="cl">Casual Leave (CL)</option>
                                                <option value="sl">Sick Leave (SL)</option>
                                                <option value="ml">Maternity Leave (ML)</option>
                                                <option value="comp_off">Compensatory Off (Comp-off)</option>
                                                <option value="marriage_leave">Marriage Leave</option>
                                                <option value="paternity_leave">Paternity Leave</option>
                                                <option value="bereavement_leave">Bereavement Leave</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label>Start Date</label>
                                            <input type="date" name="start_date" class="form-control">
                                        </div>
                                        <div class="mb-3">
                                            <label>End Date</label>
                                            <input type="date" name="end_date" class="form-control">
                                        </div>
                                        <div class="mb-3 d-flex justify-content-end">
                                            <button class="btn btn-primary">SUBMIT</button>
                                        </div>
                                </div>
                            
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <?php $__env->startPush('footer-script'); ?>
    <!-- FullCalendar CSS -->
    <link rel="stylesheet" href="<?php echo e(asset('public/admin/vendors/fullcalendar/fullcalendar.min.css')); ?>" type="text/css">
        <link rel="stylesheet" href="<?php echo e(asset('public/calendar/calendar.min.css')); ?>" type="text/css">
        <script src="<?php echo e(asset('public/admin/vendors/fullcalendar/moment.min.js')); ?>"></script>
        <script src="<?php echo e(asset('public/admin/vendors/jquery/jquery-ui.min.js')); ?>"></script>
       
       
        <script src="<?php echo e(asset('public/calendar/calendar.min.js')); ?>"></script>
       
        <script>
           

             document.addEventListener('DOMContentLoaded', function () {
                var emp_attendance = <?php echo json_encode($attendances, 15, 512) ?>;  // Laravel blade syntax to inject data
                var holidays = <?php echo json_encode($holidays, 15, 512) ?>; 
                var leaves = <?php echo json_encode($leaves, 15, 512) ?>;
                //console.log(leaves);

                var leaveDates = ['2025-01-06', '2025-01-10'];
                var workingDates = ['2025-01-13', '2025-01-14', '2025-01-15'];

                // Calculate total leave and working days
                var totalLeaves = leaveDates.length;
                var totalWorkingDays = workingDates.length;

                // Update count in HTML
                document.getElementById('leave_count').textContent = "Leave Days " + totalLeaves;
                document.getElementById('working_count').textContent = "Working Days " + totalWorkingDays;

                // Attendance Status Mapping
                var statusMapping = {
                    'present': 'P',
                    'absent': 'A',
                    'holiday': 'L',
                    'halfday': 'H',
                    'in_time': 'I',
                    'out_time': 'O'
                };
                var colorMapping = {
                    'P': '#bef942',
                    'A': 'red',
                    'H': 'orange',
                    'L': 'blue'
                };

                // Convert emp_attendance array into FullCalendar event objects
                var attendanceEvents = emp_attendance.map(function (attendance) {
                    var shortStatus = statusMapping[attendance.status.toLowerCase()] || attendance.status;
                    var backgroundColor = shortStatus === 'P' ? '#8fd004' : (shortStatus === 'A' ? 'red' : 'orange');

                    return {
                        title: shortStatus,
                        start: attendance.date,
                        backgroundColor: backgroundColor,
                        borderColor: backgroundColor,
                        extendedProps: {
                            description: `Attendance: ${attendance.status}`
                        }
                    };
                });

                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                    },
                    businessHours: {
                        daysOfWeek: [1, 2, 3, 4, 5],
                        startTime: '10:00',
                        endTime: '19:00'
                    },
                    events: [
                        ...attendanceEvents,
                    
                    ...holidays.map(item=>({
                            
                            title: item.holiday_name,
                            start: item.start_date,
                            end: item.end_date ? item.end_date : null,
                            backgroundColor: 'deeppink',
                            borderColor: 'green',
                            extendedProps: {
                                description: item.description
                            }
                        
                    })),
                    ...leaves.map(item=>({
                            
                            title: item.name,
                            start: item.start_date,
                            end: item.end_date ? item.end_date : null,
                            backgroundColor: 'blue',
                            borderColor: 'green',
                            extendedProps: {
                                description: item.subject
                            }
                        
                    }))

                ],
                    eventMouseEnter: function (info) {
                        var tooltip = document.createElement('div');
                        tooltip.setAttribute('id', 'tooltip');
                        tooltip.style.position = 'absolute';
                        tooltip.style.background = 'black';
                        tooltip.style.color = 'white';
                        tooltip.style.padding = '5px 10px';
                        tooltip.style.borderRadius = '5px';
                        tooltip.style.fontSize = '12px';
                        tooltip.style.whiteSpace = 'nowrap';
                        tooltip.style.zIndex = '1200';
                        tooltip.innerHTML = info.event.title + '<br>' + info.event.extendedProps.description;

                        document.body.appendChild(tooltip);

                        function moveTooltip(e) {
                            tooltip.style.left = e.pageX + 10 + 'px';
                            tooltip.style.top = e.pageY + 10 + 'px';
                        }

                        document.addEventListener('mousemove', moveTooltip);
                        info.el.addEventListener('mouseleave', function () {
                            if (tooltip && tooltip.parentNode) {
                                tooltip.parentNode.removeChild(tooltip);
                            }
                            document.removeEventListener('mousemove', moveTooltip);
                        });
                    },
                    selectable: true,
                    editable: true
                });

                calendar.render();
        });



            $('#eventModal').on('show.bs.modal', function () {
                $(this).removeClass('animate__zoomOut');  
                $(this).addClass('animate__zoomIn');     
            });

            // Triggered when modal is closing (Zoom Out)
            $('.close_btn').click(function () {
                $('#eventModal').removeClass('animate__zoomIn');   
                $('#eventModal').addClass('animate__zoomOut');
                setTimeout(() => {
                   
                     $('#eventModal').modal('hide');
                }, 500);
                     // Add zoom-out class
            });

            //leave modal
            $('#leaveModal').on('show.bs.modal', function () {
                $(this).removeClass('animate__zoomOut');  
                $(this).addClass('animate__zoomIn');     
            });

            // Triggered when modal is closing (Zoom Out)
            $('.close_btn').click(function () {
                $('#leaveModal').removeClass('animate__zoomIn');   
                $('#leaveModal').addClass('animate__zoomOut');
                setTimeout(() => {
                   
                     $('#leaveModal').modal('hide');
                }, 500);
                     // Add zoom-out class
            });
        </script>
    <?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\blurb_erp\resources\views/hrms/payroll/salary/calendar.blade.php ENDPATH**/ ?>