@extends('admin.layouts.layouts')

@section('title', 'View Monthly Leave Allocation')

@section('content')
<style>
    .table-scroll-wrapper {
        overflow-x: auto;
        position: relative;
        margin: 0 -1px;
    }

    .sticky-col {
        position: sticky;
        background: white;
        z-index: 2;
        box-shadow: 1px 0 0 0 #dee2e6;
    }

    .left-col {
        left: 0;
        z-index: 3;
        box-shadow: 
            1px 0 0 0 #dee2e6,
            inset -1px 0 0 0 #dee2e6;
    }

    .second-col {
        left: 150px;
        z-index: 3;
    }

    th, td {
        white-space: nowrap;
        position: relative;
    }

    .left-col, .second-col {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }

    table {
        border-collapse: separate;
        border-spacing: 0;
    }

    table td, table th {
        border: 1px solid #dee2e6;
    }

    .table-scroll-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background-color: #dee2e6;
        z-index: 4;
    }
</style>

<div class="page-header">
    <h3 class="page-title">
        Monthly Leave Allocation View
    </h3>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('monthly-leave-allocations.index') }}">Monthly Leave Allocation</a></li>
            <li class="breadcrumb-item active" aria-current="page">View</li>
        </ol>
    </nav>
</div>
    <div class="card shadow-sm rounded border-0">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">Monthly Leave Allocation - {{ $selectedYear }}</h5>
            <a href="{{ route('monthly-leave-allocations.index') }}" class="btn btn-primary btn-sm">
                &larr; Back
            </a>
        </div>
        <div class="card-body">
            <div class="row mb-4">
                <div class="table-scroll-wrapper" style="overflow-x: auto;">
                    <table class="table table-bordered" style="min-width: 1000px;">
                        <thead>
                            <tr>
                                <th class="sticky-col left-col">Month</th>
                                <th class="sticky-col second-col">Total Leave</th>
                                @foreach($leaveTypes as $leaveType)
                                    <th>{{ $leaveType->name }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($months as $month)
                                <tr>
                                    <td class="sticky-col left-col">{{ $month }}</td>
                                    <td class="sticky-col second-col">{{ $monthlyData[$month]['month_total_leave'] ?? '' }}</td>
                                    @foreach($leaveTypes as $leaveType)
                                        <td>{{ $monthlyData[$month]['leave_types'][$leaveType->id] ?? 0 }}</td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection