@extends('layouts.appv2')

@section('content')

<style>
    /* Reset cursor to default for table and content areas */
    .table-wrapper, .table-wrapper * {
        cursor: default !important;
    }
    
    /* Only show pointer cursor on interactive elements */
    button, a, .btn, input[type="button"], input[type="submit"], .export-btn {
        cursor: pointer !important;
    }
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .export-btn {
        margin-bottom: 15px;
    }
    
    /* Table wrapper with scroll */
    .table-wrapper {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    .table-scroll {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
        overflow-x: auto;
    }
    
    /* Sticky header wrapper */
    .sticky-header-wrapper {
        position: sticky;
        top: 0;
        z-index: 100;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .leave-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    
    .leave-table thead th {
        background-color: #4a90e2;
        color: white;
        padding: 10px 8px;
        text-align: center;
        font-weight: 600;
        border: 1px solid #ddd;
    }
    
    /* Bank Leave columns */
    .leave-table thead th.bank-leave {
        background-color: #8B7355 !important;
    }
    
    .leave-table td {
        padding: 8px;
        border: 1px solid #ddd;
        text-align: center;
    }
    
    .unit-header {
        background-color: #2d5f2e;
        color: white;
        font-weight: bold;
        padding: 8px;
        text-align: left;
    }
    
    .employee-row {
        background-color: #f9f9f9;
    }
    
    .employee-row:nth-child(even) {
        background-color: #ffffff;
    }
    
    .employee-row:hover {
        background-color: #f0f7ff;
    }
    
    /* Color coding for different units/divisions - matching the image */
    .unit-gceo {
        background-color: #90ee90 !important;
    }
    
    .unit-corporate {
        background-color: #ffeb9c !important;
    }
    
    .unit-sales {
        background-color: #c6e0b4 !important;
    }
    
    .unit-cc {
        background-color: #ffd9b3 !important;
    }
    
    .unit-operation {
        background-color: #f4b084 !important;
    }
    
    .unit-std {
        background-color: #c5e0b4 !important;
    }
    
    .unit-pmo {
        background-color: #c6e0b4 !important;
    }
    
    .unit-ts {
        background-color: #b4c7e7 !important;
    }
    
    .unit-ss {
        background-color: #fff2cc !important;
    }
    
    .unit-irm {
        background-color: #e4dfec !important;
    }
    
    .export-btn {
        margin-bottom: 15px;
    }
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
</style>

<div class="container-fluid">
    <div class="page-header">
        <div>
            <h1 class="gradient-text mb-2">DEMI GROUP</h1>
            <h5>REPORT ANNUAL LEAVE STAFF AS AT {{ strtoupper(date('d F Y')) }}</h5>
        </div>
        <button id="export-btn" class="btn btn-success export-btn">
            <i class="fas fa-file-excel"></i> Export to Excel
        </button>
    </div>

    <div class="table-wrapper">
        <div class="sticky-header-wrapper">
            <table class="leave-table">
                <colgroup>
                    <col style="width: 40px;">
                    <col style="width: 200px;">
                    <col style="width: 100px;">
                    <col style="width: 60px;">
                    <col style="width: 60px;">
                    <col style="width: 60px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 60px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 60px;">
                    <col style="width: 70px;">
                </colgroup>
                <thead>
                    <tr>
                        <th rowspan="2">No</th>
                        <th rowspan="2">Employee Name</th>
                        <th rowspan="2">Join Date</th>
                        <th colspan="3" class="bank-leave">Bank Leave</th>
                        <th rowspan="2">Balance AL {{ date('Y') - 1 }}</th>
                        <th rowspan="2">AL {{ date('Y') }}</th>
                        <th rowspan="2">RL {{ date('Y') }}</th>
                        <th rowspan="2">Unrecorded Leave</th>
                        <th rowspan="2">Total Leave Entitled</th>
                        <th rowspan="2">AL Taken</th>
                        <th rowspan="2">EL Taken</th>
                        <th rowspan="2">Total Leave Taken</th>
                        <th rowspan="2">AL Balance</th>
                        <th rowspan="2">MC</th>
                        <th rowspan="2">ML Taken</th>
                        <th rowspan="2">ML Balance</th>
                        <th rowspan="2">UPL</th>
                        <th rowspan="2">Time Slip</th>
                    </tr>
                    <tr>
                        <th class="bank-leave">{{ date('Y') - 2 }}</th>
                        <th class="bank-leave">{{ date('Y') - 1 }}</th>
                        <th class="bank-leave">Total</th>
                    </tr>
                </thead>
            </table>
        </div>
        
        <div class="table-scroll">
            <table class="leave-table">
                <colgroup>
                    <col style="width: 40px;">
                    <col style="width: 200px;">
                    <col style="width: 100px;">
                    <col style="width: 60px;">
                    <col style="width: 60px;">
                    <col style="width: 60px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 60px;">
                    <col style="width: 70px;">
                    <col style="width: 70px;">
                    <col style="width: 60px;">
                    <col style="width: 70px;">
                </colgroup>
                <tbody>
                @php
                    // Define unit colors based on the image
                    $unitColors = [
                        'GCEO OFFICE' => 'unit-gceo',
                        'CORPORATE DIVISION' => 'unit-corporate',
                        'SALES & MARKETING DIVISION' => 'unit-sales',
                        'UNIT CC' => 'unit-cc',
                        'OPERATION DIVISION' => 'unit-operation',
                        'UNIT STD' => 'unit-std',
                        'UNIT PMO' => 'unit-pmo',
                        'UNIT TS' => 'unit-ts',
                        'UNIT SS' => 'unit-ss',
                        'UNIT IRM' => 'unit-irm',
                    ];
                @endphp

                @foreach($groupedEmployees as $unitName => $employees)
                    <tr class="unit-header">
                        <td colspan="20" style="text-align: left; padding-left: 15px;">
                            {{ strtoupper($unitName) }}
                        </td>
                    </tr>
                    
                    @php
                        $unitColorClass = $unitColors[strtoupper($unitName)] ?? 'employee-row';
                        $unitCounter = 0; // Reset counter for each unit
                    @endphp
                    
                    @foreach($employees as $employee)
                        @php 
                            $unitCounter++;
                            
                            // Calculate leave taken for current year
                            $ALtaken = \App\Models\LeaveApply::where('user_id', $employee->employee_user_id)
                                ->where('leave_type_id', 1)
                                ->where('all_status', 1)
                                ->whereYear('start_date', date('Y'))
                                ->sum('total_days') ?? 0;
                            
                            $ELtaken = \App\Models\LeaveApply::where('user_id', $employee->employee_user_id)
                                ->where('leave_type_id', 2)
                                ->where('all_status', 1)
                                ->whereYear('start_date', date('Y'))
                                ->sum('total_days') ?? 0;
                            
                            $MCtaken = \App\Models\LeaveApply::where('user_id', $employee->employee_user_id)
                                ->where('leave_type_id', 3)
                                ->where('all_status', 1)
                                ->whereYear('start_date', date('Y'))
                                ->sum('total_days') ?? 0;
                            
                            $MLtaken = \App\Models\LeaveApply::where('user_id', $employee->employee_user_id)
                                ->where('leave_type_id', 3) // Medical Leave (MC)
                                ->where('all_status', 1)
                                ->whereYear('start_date', date('Y'))
                                ->sum('total_days') ?? 0; // Sum total days
                            
                            $UPLtaken = \App\Models\LeaveApply::where('user_id', $employee->employee_user_id)
                                ->where('leave_type_id', 12) // UL - Unpaid Leave
                                ->where('all_status', 1)
                                ->whereYear('start_date', date('Y'))
                                ->sum('total_days') ?? 0;
                            
                            $TStaken = \App\Models\LeaveApply::where('user_id', $employee->employee_user_id)
                                ->where('leave_type_id', 13) // TS - Time Slip
                                ->where('all_status', 1)
                                ->whereYear('start_date', date('Y'))
                                ->sum('total_days') ?? 0;
                            
                            // Get bank leave from previous years (dynamically calculated)
                            $currentYear = date('Y');
                            $twoYearsAgo = $currentYear - 2;
                            $lastYear = $currentYear - 1;
                            
                            $bankLeaveTwoYearsAgo = \App\Models\LeaveEntitled::where('user_id', $employee->employee_user_id)
                                ->where('year_entitled', $twoYearsAgo)
                                ->value('balance_last_year') ?? 0;
                            
                            $bankLeaveLastYear = \App\Models\LeaveEntitled::where('user_id', $employee->employee_user_id)
                                ->where('year_entitled', $lastYear)
                                ->value('balance_last_year') ?? 0;
                            
                            $bankLeaveTotal = $bankLeaveTwoYearsAgo + $bankLeaveLastYear;
                            
                            // Current year entitlements
                            $AL = $employee->AL ?? 0;
                            $EL = $employee->EL ?? 0;
                            $MC = $employee->ML ?? 0; // MC is Medical Leave entitled (ML in database)
                            $RL = $employee->RL ?? 0;
                            $carryForward = $employee->carry_forward ?? 0;
                            $unrecordedLeave = $employee->unrecorded_leave ?? 0;
                            
                            // Calculations - Include unrecorded leave for existing users only
                            $totalLeaveEntitled = $AL + $carryForward + $unrecordedLeave; // AL + Carry Forward + Unrecorded
                            $totalLeaveTaken = $ALtaken + $ELtaken;
                            $ALbalance = $carryForward + $AL + $RL + $unrecordedLeave - $totalLeaveTaken;
                            $MLbalance = $MC - $MLtaken; // MC entitled minus ML taken
                        @endphp
                        <tr class="{{ $unitColorClass }}">
                            <td>{{ $unitCounter }}</td>
                            <td style="text-align: left; padding-left: 10px;">
                                {{ $employee->employee_first_name }}
                            </td>
                            <td>{{ $employee->employee_joined_at ? date('d-M-y', strtotime($employee->employee_joined_at)) : '-' }}</td>
                            <td>{{ $bankLeaveTwoYearsAgo }}</td>
                            <td>{{ $bankLeaveLastYear }}</td>
                            <td>{{ $bankLeaveTotal }}</td>
                            <td style="background-color: {{ $carryForward > 0 ? '#FFB6C1' : 'inherit' }};">
                                {{ $carryForward }}
                            </td>
                            <td>{{ $AL }}</td>
                            <td style="background-color: {{ $RL > 0 ? '#FFE4B5' : 'inherit' }};">
                                {{ $RL }}
                            </td>
                            <td>{{ $unrecordedLeave }}</td>
                            <td>{{ $totalLeaveEntitled }}</td>
                            <td style="color: {{ $ALtaken > 0 ? 'blue' : 'black' }};">
                                {{ $ALtaken }}
                            </td>
                            <td style="color: {{ $ELtaken > 0 ? 'red' : 'black' }}; background-color: {{ $ELtaken > 0 ? '#FFFF99' : 'inherit' }};">
                                {{ $ELtaken }}
                            </td>
                            <td>{{ $totalLeaveTaken }}</td>
                            <td style="background-color: {{ $ALbalance < 5 ? '#FFFF00' : 'inherit' }};">
                                {{ $ALbalance }}
                            </td>
                            <td>{{ $MC }}</td>
                            <td>{{ $MLtaken }}</td>
                            <td>{{ $MLbalance }}</td>
                            <td style="color: {{ $UPLtaken > 0 ? 'red' : 'black' }};">
                                {{ $UPLtaken }}
                            </td>
                            <td>{{ $TStaken }}</td>
                        </tr>
                    @endforeach
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
        
        <!-- Color Coding Legend -->
        <div style="margin-top: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6;">
            <h5 style="font-weight: bold; margin-bottom: 15px; color: #333;">LEGEND - COLOR CODING</h5>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px;">
                <div style="display: flex; align-items: center;">
                    <div style="width: 30px; height: 25px; background-color: #FFB6C1; border: 1px solid #ccc; margin-right: 10px;"></div>
                    <span><strong>Pink Background</strong> = Carry Forward from 2024 (Balance AL 2024 > 0)</span>
                </div>
                <div style="display: flex; align-items: center;">
                    <div style="width: 30px; height: 25px; background-color: #FFE4B5; border: 1px solid #ccc; margin-right: 10px;"></div>
                    <span><strong>Beige Background</strong> = Replacement Leave Available (RL 2025 > 0)</span>
                </div>
                <div style="display: flex; align-items: center;">
                    <div style="width: 30px; height: 25px; background-color: #FFFF00; border: 1px solid #ccc; margin-right: 10px;"></div>
                    <span><strong>Yellow Background</strong> = Low AL Balance (< 5 days) OR Emergency Leave Taken</span>
                </div>
                <div style="display: flex; align-items: center;">
                    <div style="width: 30px; height: 25px; border: 1px solid #ccc; margin-right: 10px; display: flex; align-items: center; justify-content: center;">
                        <span style="color: #0000FF; font-weight: bold;">Text</span>
                    </div>
                    <span><strong>Blue Text</strong> = Annual Leave Taken</span>
                </div>
                <div style="display: flex; align-items: center;">
                    <div style="width: 30px; height: 25px; border: 1px solid #ccc; margin-right: 10px; display: flex; align-items: center; justify-content: center;">
                        <span style="color: #FF0000; font-weight: bold;">Text</span>
                    </div>
                    <span><strong>Red Text</strong> = Emergency Leave OR Unpaid Leave Taken</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('export-btn').addEventListener('click', function(e) {
    e.preventDefault();
    
    // Show loading spinner
    const loader = document.getElementById('page-loader');
    const loadingText = loader ? loader.querySelector('.loading-text') : null;
    
    if (loader) {
        loader.style.display = 'flex';
    }
    
    if (loadingText) {
        loadingText.textContent = 'Loading...';
    }
    
    // Build export URL
    const url = "{{ route('admins.exportleavereport') }}";
    
    // Create XMLHttpRequest
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    
    // Track download progress
    xhr.onprogress = function() {
        if (loadingText) {
            loadingText.textContent = 'Downloading file...';
        }
    };
    
    // Handle response
    xhr.onload = function() {
        if (xhr.status === 200) {
            const contentType = xhr.getResponseHeader('Content-Type');
            
            // Check if it's an error JSON response
            if (contentType && contentType.includes('application/json')) {
                const reader = new FileReader();
                reader.onload = function() {
                    try {
                        const error = JSON.parse(reader.result);
                        alert(error.error || 'An error occurred during export.');
                    } catch (e) {
                        alert('An error occurred during export. Please try again.');
                    }
                    
                    if (loader) {
                        loader.style.display = 'none';
                    }
                    if (loadingText) {
                        loadingText.textContent = 'Loading';
                    }
                };
                reader.readAsText(xhr.response);
                return;
            }
            
            // Success - download the file
            const blob = xhr.response;
            const downloadUrl = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = downloadUrl;
            
            // Get filename from Content-Disposition header
            const contentDisposition = xhr.getResponseHeader('Content-Disposition');
            let filename = 'Leave_Report_{{ date("Y-m-d") }}.xlsx';
            
            if (contentDisposition) {
                const filenameMatch = contentDisposition.match(/filename="?(.+)"?/i);
                if (filenameMatch && filenameMatch[1]) {
                    filename = filenameMatch[1];
                }
            }
            
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            
            // Cleanup
            window.URL.revokeObjectURL(downloadUrl);
            document.body.removeChild(a);
            
            // Hide loading spinner
            if (loader) {
                loader.style.display = 'none';
            }
            if (loadingText) {
                loadingText.textContent = 'Loading';
            }
            
        } else if (xhr.status === 404) {
            alert('No data available for export.');
            if (loader) {
                loader.style.display = 'none';
            }
            if (loadingText) {
                loadingText.textContent = 'Loading';
            }
        } else {
            alert('An error occurred during export. Please try again.');
            if (loader) {
                loader.style.display = 'none';
            }
            if (loadingText) {
                loadingText.textContent = 'Loading';
            }
        }
    };
    
    // Handle network errors
    xhr.onerror = function() {
        alert('Network error occurred. Please check your connection and try again.');
        if (loader) {
            loader.style.display = 'none';
        }
        if (loadingText) {
            loadingText.textContent = 'Loading';
        }
    };
    
    // Send the request
    xhr.send();
});
</script>

@endsection