@extends('layouts.appv2')

@section('content')

                                @if ($message = Session::get('success'))
                                    <div class="alert alert-success" role="alert">
                                        {{ $message }}
                                    </div>
                                @endif

                                @if ($message = Session::get('error'))
                                    <div class="alert alert-danger" role="alert">
                                        {{ $message }}
                                    </div>
                                @endif

                                @if ($errors->any())
                                    <div class="alert alert-danger" role="alert">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <div class="card"  style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                                    <div class="card-header">
                                    <div class="d-flex justify-content-between align-items-center mb-0">
                                        <h5>Entitled Monitoring</h5>

                                        <div class="btn-toolbar mb-2 mb-md-0">
                                            <a href="#" class="btn btn-sm btn-info mt-1 mb-1" style="width:80px; text-align: center; border-radius: 50px;" data-toggle="modal" data-target="#entitledglobal">Entitled</a>
                                            <a href="{{ route('admins.leavestaff')}}" class="btn btn-sm btn-secondary mt-1 mb-1" style="width:70px; text-align: center; border-radius: 50px;">Back</a>
                                        </div>

                                    </div>
                                    </div>
                                    <div class="card-body">

                                        <div class="dt-responsive table-responsive">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-sm table-hover" style="font-size: 12px;">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th class="text-center" style="width: 40px;">No</th>
                                                        <th class="text-center" style="width: 120px;">Name</th>
                                                        <th class="text-center" style="width: 60px;">Year</th>
                                                        <th class="text-center" style="width: 60px;">Type</th>
                                                        <th class="text-center" style="width: 60px;">Grade</th>
                                                        <th class="text-center" style="width: 80px;">AL Taken Last Year</th>
                                                        <th class="text-center" style="width: 80px;">AL Entitled Last Year</th>
                                                        <th class="text-center" style="width: 80px;">Balance Last Year</th>
                                                        <th class="text-center" style="width: 80px;">Carry Forward</th>
                                                        <th class="text-center" style="width: 80px;">Year Services</th>
                                                        <th class="text-center" style="width: 40px;">AL</th>
                                                        <th class="text-center" style="width: 80px;">Total AL</th>
                                                        <th class="text-center" style="width: 40px;">ML</th>
                                                        <th class="text-center" style="width: 40px;">EL</th>
                                                        <th class="text-center" style="width: 40px;">CML</th>
                                                        <th class="text-center" style="width: 40px;">PTL</th>
                                                        <th class="text-center" style="width: 40px;">MTL</th>
                                                        <th class="text-center" style="width: 40px;">PI</th>
                                                        <th class="text-center" style="width: 40px;">HOSP</th>
                                                        <th class="text-center" style="width: 40px;">MGL</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                @php $counter = 1; @endphp
                                                @if (!$leaveglobal->isEmpty())
                                                    @foreach ($leaveglobal as $list)
                                                    <tr>
                                                        <td class="text-center">{{ $counter++ }}</td>
                                                        <td class="text-center">{{ $list['leave']->employee_first_name }}</td>
                                                        <td class="text-center">{{ $list['leave']->year_entitled }}</td>
                                                        <td class="text-center">{{ $list['leave']->emptype_code}}</td>
                                                        <td class="text-center">{{ $list['leave']->grade_code}}</td>
                                                        <td class="text-center">{{ $list['ALtaken'] }}</td>
                                                        <td class="text-center">{{ $list['ELtaken'] }}</td>
                                                        <td class="text-center">{{ $list['leave']->balance_last_year}}</td>
                                                        <td class="text-center">{{ $list['leave']->carry_forward}}</td>
                                                        <td class="text-center"></td>
                                                        <td class="text-center">{{ $list['leave']->AL}}</td>
                                                        <td class="text-center">{{ $list['leave']->total_AL }}</td>
                                                        <td class="text-center">{{ $list['leave']->ML}}</td>
                                                        <td class="text-center">{{ $list['leave']->EL}}</td>
                                                        <td class="text-center">{{ $list['leave']->CML}}</td>
                                                        <td class="text-center">{{ $list['leave']->PTL}}</td>
                                                        <td class="text-center">{{ $list['leave']->MTL}}</td>
                                                        <td class="text-center">{{ $list['leave']->PI}}</td>
                                                        <td class="text-center">{{ $list['leave']->HOSP}}</td>
                                                        <td class="text-center">{{ $list['leave']->MGL}}</td>
                                                    </tr>
                                                    @endforeach
                                                @else
                                                    <tr>
                                                        <td colspan="15" class="text-center">No Data Found</td>
                                                    </tr>
                                                @endif
                                                </tbody>
                                            </table>
                                        </div>


                                        </div>
      
                                    </div>
                                </div>

                                <div class="modal fade" id="entitledglobal" tabindex="-1" role="dialog" aria-labelledby="entitledglobalModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="entitledglobalModalLabel">Entitled Leave</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form action="{{ route('admins.entitledleaveglobal')}}" enctype="multipart/form-data" method="POST">
                                                    @csrf
                                                    <h3>New Leaves Will be Added for {{ date('Y') }}</h3>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-primary">Leave Entitled Globally Confirm</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const joinedAtField = document.getElementById('employee_joined_at');
        const lengthOfServiceField = document.getElementById('length_of_services');

        if (joinedAtField && lengthOfServiceField) {
            const joinedAtText = joinedAtField.textContent.trim();

            // Ensure the joinedAtText is a valid date
            if (joinedAtText && joinedAtText !== 'N/A') {
                const joinedAt = new Date(joinedAtText);
                const today = new Date();

                // Calculate the difference
                let years = today.getFullYear() - joinedAt.getFullYear();
                let months = today.getMonth() - joinedAt.getMonth();
                let days = today.getDate() - joinedAt.getDate();

                // Adjust for negative months/days
                if (months < 0) {
                    years -= 1;
                    months += 12;
                }
                if (days < 0) {
                    const previousMonth = new Date(today.getFullYear(), today.getMonth(), 0);
                    months -= 1;
                    days += previousMonth.getDate();
                }

                // Display the length of service
                lengthOfServiceField.textContent = `${years} Years, ${months} Months, ${days} Days`;
            } else {
                lengthOfServiceField.textContent = 'N/A';
            }
        }
    });
</script>
@endsection