@extends('admin::layouts.master')
@section('pagetitle','Employer Attendance')

@section('content')    
<style>
    #calendar {
		align-self: center;
		height:80%;
		width:70%;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .fc-daygrid-event {
        background-color: #3788d8;
        color: #ffffff;
        border: none;
        padding: 5px;
        border-radius: 5px;
        cursor: pointer;
    }

    .fc-daygrid-event-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }

    .fc-event-title {
        display: inline-block;
        margin-left: 5px;
    }
</style>

<div id="calendar"></div>


<div class="modal fade" id="attendanceModal" tabindex="-1" role="dialog" aria-labelledby="attendanceModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="attendanceModalTitle">Attendance Details</h5>
                    <button class="btn btn-active-icon-primary" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p><strong>Employer Name:</strong> <span id="modalEmployerName"></span></p>
                    <p><strong>In-Time:</strong> <span id="modalTimeIn"></span></p>
                    <p><strong>Out-Time:</strong> <span id="modalTimeOut"></span></p>
                </div>
            </div>
        </div>
    </div>


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

            // Check if attendanceData is defined
            var attendanceData = @json($attendanceData);

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: attendanceData,
                eventClick: function(info) {
                    var event = info.event;
                    var employerName = event.title;
                    var timeIn = event.extendedProps.time_in ? moment(event.extendedProps.time_in).format('hh:mm:ss A') : '-';
                    var timeOut = event.extendedProps.time_out ? moment(event.extendedProps.time_out).format('hh:mm:ss A') : '-';

                    // Update modal content
                    document.getElementById('modalEmployerName').textContent = employerName;
                    document.getElementById('modalTimeIn').textContent = timeIn;
                    document.getElementById('modalTimeOut').textContent = timeOut;

                    // Show the modal
                    $('#attendanceModal').modal('show');
                }
            });
            calendar.render();
        });
    </script>
@endsection

<!-- @section('scripts')
  <script src="/js/admin/attendance/attendance.js" type="text/javascript"></script>
@endsection -->