@extends('layouts.appv2')

@section('content')


<style>
    .nav-tabs .nav-link {
        transition: background-color 0.3s, color 0.3s;
        color: black;

    }

    .nav-tabs .nav-link:hover {
        background-color: #f0f0f0;
        color: black;
    }

    .nav-tabs .nav-link.active {
        background-color: white;
        color: #9e1a1a;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    
    .nav-tabs .nav-link i {
        margin-right: 5px;
    }
</style>

<div class="d-flex align-items-center mb-4">
    <h1 class="mb-4 gradient-text">Leaves</h1>
    <p class="ml-3 mb-3 font-weight-normal" style="font-size: 2.0rem;">|</p>
    <p class="ml-3 mb-3 font-weight-normal" style="font-size: 2.0rem;">Staff Leave Record</p>
</div>

<!-- Navigation Tabs -->
<ul class="nav nav-tabs justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" href="#" data-target="#main-content">
            <i class="fas fa-home"></i> Main
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-target="#contract-content">
            <i class="fas fa-file-contract"></i> Contracts
        </a>
    </li>
</ul>



                                <div id="main-content" class="card content-section" style="border-radius: 20px;  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);">

                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h4>Employee's Leave</h4>
                                            <div class="btn-toolbar mb-2 mb-md-0">
                                                <a class="btn-sm btn-outline-primary" href="{{ route('admins.showgloballeave')}}" style="border-radius: 50px; font-weight:bolder;"title="Entitled Leave">
                                                    <i class="fa-solid fa-cloud-arrow-down"  style="border-radius: 20px;"></i> Entitled
                                                </a>
                                            </div>
                                        </div>

                                        <div class="dt-responsive table-responsive">
                                            <table id="id=serial-table" class="table table-sm mb-0 table-hover results table-bordered" style="font-size: 0.85rem; ">
                                            <thead class="text-center thead-dark">
                                                <tr>
                                                    <th class="p-1">No.</th>
                                                    <th class="p-1">Employee Name</th>
                                                    <th class="p-1">Carried <br>Forward</th>
                                                    <th class="p-1">AL</th>
                                                    <th class="p-1">RL</th>
                                                    <th class="p-1">Total <br>Leave Entitled</th>
                                                    <th class="p-1">AL <br>Taken</th>
                                                    <th class="p-1">EL <br>Taken</th>
                                                    <th class="p-1">Total <br>Leave Taken</th>
                                                    <th class="p-1">Balance <br>Leave</th>
                                                    <th class="p-1">ML</th>
                                                    <th class="p-1">ML <br>Taken</th>
                                                    <th class="p-1">ML <br>Balance</th>
                                                    <th class="p-1">UPL</th>
                                                    <th class="p-1">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php $counter = 1; @endphp
                                                @if (!$leaveData->isEmpty())
                                                    @foreach ($leaveData as $list)
                                                        <tr>
                                                            <td class="text-center p-1">{{ $counter++ }}</td>
                                                            <td class="p-1">{{ $list['leave']->employee_first_name }}</td>
                                                            <td class="text-center p-1">{{ $list['leave']->carry_forward }}</td>
                                                            <td class="text-center p-1">{{ $list['leave']->AL }}</td>
                                                            <td class="text-center p-1">{{ $list['leave']->RL }}</td>
                                                            <td class="text-center p-1">{{ $list['leave']->total_AL  }}</td>
                                                            <td class="text-center p-1">{{ $list['ALtaken'] }}</td>
                                                            <td class="text-center p-1">{{ $list['ELtaken'] }}</td>
                                                            <td class="text-center p-1">{{ $list['TotalLeaveTaken'] }}</td>
                                                            <td class="text-center p-1">{{ $list['leave']->total_AL }}</td>
                                                            <td class="text-center p-1">{{ $list['leave']->ML }}</td>
                                                            <td class="text-center p-1">{{ $list['MCtaken'] }}</td>
                                                            <td class="text-center p-1">{{ $list['MLBalance'] }}</td>
                                                            <td class="text-center p-1">{{ $list['UPLtaken'] }}</td>
                                                            <td class="text-center p-1">
                                                                <a href="{{ route('admins.editleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="Edit">
                                                                    <i class="fas fa-edit"></i>
                                                                </a>
                                                                <a href="{{ route('admins.viewleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="View">
                                                                    <i class="fas fa-eye"></i>
                                                                </a>
                                                                <a href="{{ route('admins.addleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="Add">
                                                                    <i class="fas fa-plus"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @else
                                                    <tr>
                                                        <td colspan="15" class="text-center">No Data Found</td>
                                                    </tr>
                                                @endif
                                            </tbody>


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

                                </div>


                                <div id="contract-content" class="card content-section"  style="display: none; border-radius: 20px;  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);">
                                    <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h4>Employee's Leave</h4>
                                            <div class="btn-toolbar mb-2 mb-md-0">
                                                <a class="btn-sm btn-outline-primary" href="{{ route('admins.showgloballeave')}}" style="border-radius: 50px; font-weight:bolder;"title="Add employee">
                                                    <i class="fa-solid fa-cloud-arrow-down"  style="border-radius: 20px;"></i> Entitled
                                                </a>
                                            </div>
                                        </div>

                                        <div class="dt-responsive table-responsive">
                                            <table id="id=serial-table" class="table table-sm mb-0 table-hover results table-bordered" style="font-size: 0.85rem; ">
                                            <thead class="text-center thead-dark">
                                                <tr>
                                                    <th class="p-1">No.</th>
                                                    <th class="p-1">Employee Name</th>
                                                    <th class="p-1">Carried <br>Forward</th>
                                                    <th class="p-1">AL</th>
                                                    <th class="p-1">EL</th>
                                                    <th class="p-1">Total <br>Leave Entitled</th>
                                                    <th class="p-1">AL <br>Taken</th>
                                                    <th class="p-1">EL <br>Taken</th>
                                                    <th class="p-1">Total <br>Leave Taken</th>
                                                    <th class="p-1">Balance <br>Leave</th>
                                                    <th class="p-1">ML</th>
                                                    <th class="p-1">ML <br>Taken</th>
                                                    <th class="p-1">ML <br>Balance</th>
                                                    <th class="p-1">UPL</th>
                                                    <th class="p-1">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php $counter = 1; @endphp
                                                @if (!$leaveData->isEmpty())
                                                    @foreach ($leaveData as $list)
                                                        @if ($list['leave']->employee_emptype_id != 1)
                                                            <tr>
                                                                <td class="text-center p-1">{{ $counter++ }}</td>
                                                                <td class="p-1">{{ $list['leave']->employee_first_name }}</td>
                                                                <td class="text-center p-1">{{ $list['leave']->carry_forward ?? '-' }}</td>
                                                                <td class="text-center p-1">{{ $list['leave']->AL }}</td>
                                                                <td class="text-center p-1">{{ $list['leave']->RL }}</td>
                                                                <td class="text-center p-1">{{ $list['TotalLeaveEntitled'] }}</td>
                                                                <td class="text-center p-1">{{ $list['ALtaken'] }}</td>
                                                                <td class="text-center p-1">{{ $list['ELtaken'] }}</td>
                                                                <td class="text-center p-1">{{ $list['TotalLeaveTaken'] }}</td>
                                                                <td class="text-center p-1">{{ $list['leave']->total_AL }}</td>
                                                                <td class="text-center p-1">{{ $list['leave']->ML }}</td>
                                                                <td class="text-center p-1">{{ $list['MCtaken'] }}</td>
                                                                <td class="text-center p-1">{{ $list['MLBalance'] }}</td>
                                                                <td class="text-center p-1">{{ $list['UPLtaken'] }}</td>
                                                                <td class="text-center p-1">
                                                                    <a href="{{ route('admins.editleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="Edit">
                                                                        <i class="fas fa-edit"></i>
                                                                    </a>
                                                                    <a href="{{ route('admins.viewleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="View">
                                                                        <i class="fas fa-eye"></i>
                                                                    </a>
                                                                    <a href="{{ route('admins.addleavestaff', $list['leave']->employee_id) }}" class="btn-sm" title="Add">
                                                                        <i class="fas fa-plus"></i>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <tr>
                                                        <td colspan="15" class="text-center">No Data Found</td>
                                                    </tr>
                                                @endif
                                            </tbody>



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






                                <script>
document.addEventListener('DOMContentLoaded', function() {
    // Get all nav links
    const navLinks = document.querySelectorAll('.nav-tabs .nav-link');
    
    // Add click event listener to each nav link
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent default link behavior
            
            // Remove active class from all links
            navLinks.forEach(l => l.classList.remove('active'));
            
            // Add active class to clicked link
            this.classList.add('active');
            
            // Hide all content sections
            document.querySelectorAll('.content-section').forEach(section => {
                section.style.display = 'none';
            });
            
            // Show the target content section
            const targetId = this.getAttribute('data-target');
            const targetSection = document.querySelector(targetId);
            if (targetSection) {
                targetSection.style.display = 'block';
            }
        });
    });
});
</script>
@endsection