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

    
    
    <main class="main-content">

        <div class="container">
            <div class="page-header">
                <h3><?php echo e(__('message.add')); ?> Holiday 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">
            <?php if (isset($component)) { $__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74 = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\FlashMessage::class, []); ?>
<?php $component->withName('flashMessage'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74)): ?>
<?php $component = $__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74; ?>
<?php unset($__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74); ?>
<?php endif; ?>
                <div class="card-body py-0">
                    <div class="row">
                        <div class="col-md-3 d-flex flex-column align-items-center justify-content-between">
                            <div>
                                <h3 class="text-capitalize"></h3>
                                                
                           
                                <ul class="d-flex flex-column justify-content-between align-items-center">
                                    <li><button class="btn btn-outline-primary px-5 mb-3" data-toggle="modal" data-target="#eventModal">Add Holiday</button></li>
                                    <!-- <li><button class="btn btn-outline-primary px-5 mb-3" data-toggle="modal" data-target="#leaveModal">Leave</button></li> -->

                                                                
                                </ul>
                            </div>
                            <div class="">
                                
                            </div>
                        </div>
                        
                        <div class="col-md-9 border-left">
                           
                            <div class="row border-bottom mb-3">
                                <div class="col-md-12 p-2">
                                    
                                        <div class="row">
                                            <div class="col-md-5 pt-3">
                                                <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>
                                            <div class="col-md-7 d-flex justify-content-end">                                                
                                                <form action="<?php echo e(asset('hrms/holiday-calendar')); ?>" method="get" class="d-flex justify-content-end align-items-center">
                                                    <select class="form-control" name="department">
                                                        <option selected disabled>All</option>
                                                        <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dpt): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                            <option value="<?php echo e($dpt->id); ?>" <?php echo e(isset($_GET["department"]) ? ($_GET["department"] == $dpt->id ? 'selected' : '') : ''); ?>><?php echo e($dpt->name); ?></option>
                                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    </select>
                                                    <div class="d-flex">
                                                        
                                                        <button class="btn btn-outline-secondary"><i class="ti ti-filter"></i></button>
                                                        <a href="<?php echo e(asset('hrms/holiday-calendar')); ?>" class="btn btn-outline-secondary"><i class="ti ti-reload"></i></a>
                                                    </div>
                                                </form>
                                            </div>
                                           
                                        </div>
                                        
                                      
                                </div>
                               
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="calendar"></div>
                                </div>
                            </div>
                            
                        </div>
                       
                    </div>
                </div>
            </div>
           
        </div>


        
        <div class="modal animate__animated fadeIn" id="eventModal">
            <div class="modal-dialog modal-dialog-centered" >
                <div class="modal-content" style="border-radius:16px;">            
                    <div class="modal-header bg-primary " style="border-top-left-radius: 16px;border-top-right-radius: 16px;">
                        <h4 class="modal-title">Add Holiday</h4>
                        <button type="button" class="close close_btn" >&times;</button>
                    </div>
                    <div class="modal-body p-4">
                        <form action="<?php echo e(asset('hrms/add-event')); ?>" method="post">
                            <?php echo csrf_field(); ?>
                            <div class="row">
                        
                                <div class="col-12">
                                    <div class="row">
                                        <div class="mb-3 col-6">
                                            <label for="title">Branch/Organization</label>
                                            <select class="form-control select2" name="school_id">
                                                <?php $__currentLoopData = $school; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option value="<?php echo e($s->id); ?>"><?php echo e($s->school); ?></option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                        </div>
                                        
                                        <div class="mb-3 col-6">
                                            <label for="title">Departments</label>
                                            <select class="form-control select2" name="department_id[]" multiple>
                                                <option value="0">All</option>
                                                <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dpt): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option value="<?php echo e($dpt->id); ?>"><?php echo e($dpt->name); ?></option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="mb-3 col-6">
                                        
                                            <label for="holiday_name">Holiday Name</label>
                                            <input type="text" name="holiday_name" class="form-control" id="holiday_name">
                                       
                                        </div>
                                        
                                        <div class="mb-3 col-6">
                                            <label for="title">Employee</label>
                                            <select class="form-control select2" name="emp_id[]" multiple>
                                                <option value="0">All</option>
                                                <?php $__currentLoopData = $employees; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $emp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option value="<?php echo e($emp->id); ?>"><?php echo e($emp->name); ?></option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                        </div>
                                    </div>
                                        
                                    <div class="row">
                                        <div class="mb-3 col-6">
                                            <label>Start Date</label>
                                            <input type="datetime-local" name="start_date" class="form-control">
                                        </div>
                                        <div class="mb-3 col-6">
                                            <label>End Date</label>
                                            <input type="datetime-local" name="end_date" class="form-control">
                                        </div>
                                        
                                    </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" type="submit">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>
       
       
        
        <!-- end::fullcalendar -->

         
        
        <script>
           
            var allHolidays = <?php echo json_encode($holidays, 15, 512) ?>;
            //console.log(allHolidays);
             // Define leave and working day dates
            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;


            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    headerToolbar: {
                            left: 'prev,next today',    // Navigation buttons on the left
                            center: 'title',            // Title (Month/Week/Day) in the center
                            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' // View buttons on the right
                        },
                    businessHours: { 
                        daysOfWeek: [1, 2, 3, 4, 5], 
                        startTime: '10:00', 
                        endTime: '19:00' 
                    },
                    events: 
                        allHolidays.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
                                }
                            
                        })),
                    eventDidMount: function(info) {
                        if (info.event.extendedProps.status === 'done') {
                            info.el.style.backgroundColor = 'red';

                            var dotEl = info.el.getElementsByClassName('fc-event-dot')[0];
                            if (dotEl) {
                                dotEl.style.backgroundColor = 'white';
                            }
                        }
                    },                   
                   
                    eventMouseEnter: function(info) {
                        // Create a tooltip div
                        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;

                        // Append tooltip to the body
                        document.body.appendChild(tooltip);

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

                        // Position tooltip near the mouse
                        document.addEventListener('mousemove', function moveTooltip(e) {
                            tooltip.style.left = e.pageX + 10 + 'px';
                            tooltip.style.top = e.pageY + 10 + 'px';
                           
                        });

                        // Remove tooltip when mouse leaves the event
                        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/attendance/holiday-calendar.blade.php ENDPATH**/ ?>