@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">Leave</h1>
                    <p class="text-muted">Manage employee leave requests and balances</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.dashboard', $company) }}" class="btn btn-outline-secondary me-2">
                        <i class="bi bi-arrow-left"></i> Back to HR
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Leave Navigation Tabs -->
    <div class="mb-4">
        <ul class="nav nav-tabs" id="leaveTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="leave-calendar-tab" data-bs-toggle="tab" data-bs-target="#leave-calendar" type="button" role="tab">
                    Leave Calendar
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="view-applications-tab" data-bs-toggle="tab" data-bs-target="#view-applications" type="button" role="tab">
                    View Applications
                </button>
            </li>
            @if(!auth()->user()->isManager())
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="replacement-credit-tab" data-bs-toggle="tab" data-bs-target="#replacement-credit" type="button" role="tab">
                    Replacement Credit
                </button>
            </li>
            @endif
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="leave-reports-tab" data-bs-toggle="tab" data-bs-target="#leave-reports" type="button" role="tab">
                    View Leave Reports
                </button>
            </li>
        </ul>
    </div>

    <!-- Tab Content -->
    <div class="tab-content" id="leaveTabContent">

        <!-- Leave Calendar Tab -->
        <div class="tab-pane fade show active" id="leave-calendar" role="tabpanel">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h5 class="card-title">Leave Calendar</h5>
                            <p class="text-muted">View all approved leaves in calendar format</p>
                        </div>
                        @if(!auth()->user()->isManager())
                        <div class="col-md-6 text-end">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newLeaveModal">
                                <i class="bi bi-plus"></i> Apply for Leave
                            </button>
                        </div>
                        @endif
                    </div>

                    <!-- Calendar Navigation -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center">
                            <button type="button" class="btn btn-outline-secondary btn-sm me-2" onclick="previousMonth()">
                                <i class="bi bi-chevron-left"></i>
                            </button>
                            <h5 class="mb-0 mx-3" id="currentMonth"></h5>
                            <button type="button" class="btn btn-outline-secondary btn-sm ms-2" onclick="nextMonth()">
                                <i class="bi bi-chevron-right"></i>
                            </button>
                        </div>
                        <div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="goToToday()">Today</button>
                        </div>
                    </div>

                    <!-- Calendar -->
                    <div class="calendar-container">
                        <div id="leaveCalendar" class="table-responsive">
                            <table class="table table-bordered calendar-table">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center">Sun</th>
                                        <th class="text-center">Mon</th>
                                        <th class="text-center">Tue</th>
                                        <th class="text-center">Wed</th>
                                        <th class="text-center">Thu</th>
                                        <th class="text-center">Fri</th>
                                        <th class="text-center">Sat</th>
                                    </tr>
                                </thead>
                                <tbody id="calendarBody">
                                    <!-- Calendar days will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Calendar Legend -->
                    <div class="mt-3">
                        <div class="row">
                            <div class="col-md-12">
                                <small class="text-muted">
                                    <span class="badge bg-success me-2">●</span> Approved Leave
                                    <span class="badge bg-warning text-dark me-2 ms-3">●</span> Pending Leave
                                    <span class="badge bg-danger me-2 ms-3">●</span> Rejected Leave
                                    <span class="badge bg-info me-2 ms-3">●</span> Replacement Credit
                                    <br><small class="mt-2 d-block"><i class="bi bi-info-circle"></i> Click on any leave entry to view full details including dates, type, and reason</small>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- View Applications Tab -->
        <div class="tab-pane fade" id="view-applications" role="tabpanel">
            <!-- Filters -->
            <div class="mb-4">
                <h6 class="mb-3">Filter data:</h6>
                <form method="GET" class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="employee_filter" value="{{ request('employee_filter') }}"
                               placeholder="Search by name or sel...">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="location_filter" value="{{ request('location_filter') }}"
                               placeholder="Search by Location">
                    </div>
                    <div class="col-md-2">
                        <input type="date" class="form-control" name="start_date" value="{{ request('start_date') }}">
                    </div>
                    <div class="col-md-2">
                        <input type="date" class="form-control" name="end_date" value="{{ request('end_date') }}">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary rounded-circle me-2">
                            <i class="bi bi-funnel"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary rounded-circle me-2" onclick="window.location.href='{{ route('companies.hr.leaves.index', $company) }}'">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                    </div>
                </form>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Employee <i class="bi bi-caret-down-fill"></i></th>
                                    <th>From <i class="bi bi-caret-down-fill"></i></th>
                                    <th>To <i class="bi bi-caret-down-fill"></i></th>
                                    <th>Applied <i class="bi bi-caret-down-fill"></i></th>
                                    <th>Status <i class="bi bi-caret-down-fill"></i></th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($leaves ?? [] as $leave)
                                <tr>
                                    <td>{{ $leave->employee->full_name ?? '' }}</td>
                                    <td>{{ $leave->start_date ? $leave->start_date->format('M d, Y') : '' }}</td>
                                    <td>{{ $leave->end_date ? $leave->end_date->format('M d, Y') : '' }}</td>
                                    <td>{{ $leave->created_at ? $leave->created_at->format('M d, Y') : '' }}</td>
                                    <td>
                                        @if($leave->status === 'pending')
                                            <span class="badge bg-warning text-dark">Pending</span>
                                        @elseif($leave->status === 'approved')
                                            <span class="badge bg-success">Approved</span>
                                        @elseif($leave->status === 'rejected')
                                            <span class="badge bg-danger">Rejected</span>
                                        @else
                                            <span class="badge bg-secondary">{{ ucfirst($leave->status ?? 'Unknown') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($leave->status === 'pending')
                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-sm btn-info" title="View Details"
                                                        data-bs-toggle="modal" data-bs-target="#viewLeaveModal{{ $leave->id }}">
                                                    <i class="bi bi-eye"></i>
                                                </button>
                                                <form method="POST" action="{{ route('companies.hr.leaves.approve', [$company, $leave]) }}" style="display: inline;">
                                                    @csrf
                                                    <button type="submit" class="btn btn-sm btn-success" title="Approve Leave" 
                                                            onclick="return confirm('Are you sure you want to approve this leave application?')">
                                                        <i class="bi bi-check-circle"></i>
                                                    </button>
                                                </form>
                                                <button type="button" class="btn btn-sm btn-danger" title="Reject Leave"
                                                        data-bs-toggle="modal" data-bs-target="#rejectLeaveModal{{ $leave->id }}">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                            </div>
                                        @else
                                            <button type="button" class="btn btn-sm btn-info" title="View Details"
                                                    data-bs-toggle="modal" data-bs-target="#viewLeaveModal{{ $leave->id }}">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">No leave applications found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @if(!auth()->user()->isManager())
        <!-- Replacement Credit Tab -->
        <div class="tab-pane fade" id="replacement-credit" role="tabpanel">
            <div class="row mb-4">
                <div class="col-md-8">
                    <h4>Apply for Replacement Credit</h4>
                    <p class="text-muted">You may apply for replacement credit if you have worked on a public holiday or weekend.</p>
                </div>
                @if(!auth()->user()->isManager())
                <div class="col-md-4 text-end">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#replacementCreditModal">
                        Apply for Replacement Credit
                    </button>
                </div>
                @endif
            </div>

            <!-- Filters -->
            <div class="mb-4">
                <form method="GET" class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="employee_search" value="{{ request('employee_search') }}"
                               placeholder="Search by name or sel...">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="location_search" value="{{ request('location_search') }}"
                               placeholder="Search by Location">
                    </div>
                    <div class="col-md-2">
                        <input type="date" class="form-control" name="from_date" value="{{ request('from_date') }}">
                    </div>
                    <div class="col-md-2">
                        <input type="date" class="form-control" name="to_date" value="{{ request('to_date') }}">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary rounded-circle me-2">
                            <i class="bi bi-funnel"></i>
                        </button>
                    </div>
                </form>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Employee <i class="bi bi-caret-down-fill"></i></th>
                                    <th>From <i class="bi bi-caret-down-fill"></i></th>
                                    <th>To <i class="bi bi-caret-down-fill"></i></th>
                                    <th>Applied <i class="bi bi-caret-down-fill"></i></th>
                                    <th>Status <i class="bi bi-caret-down-fill"></i></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($replacementCredits ?? [] as $credit)
                                <tr>
                                    <td>{{ $credit->employee->full_name ?? '' }}</td>
                                    <td>{{ $credit->from_date ? $credit->from_date->format('M d, Y') : '' }}</td>
                                    <td>{{ $credit->to_date ? $credit->to_date->format('M d, Y') : '' }}</td>
                                    <td>{{ $credit->created_at ? $credit->created_at->format('M d, Y') : '' }}</td>
                                    <td>
                                        @if($credit->status === 'pending')
                                            <span class="badge bg-warning text-dark">Pending</span>
                                        @elseif($credit->status === 'approved')
                                            <span class="badge bg-success">Approved</span>
                                        @elseif($credit->status === 'rejected')
                                            <span class="badge bg-danger">Rejected</span>
                                        @else
                                            <span class="badge bg-secondary">{{ ucfirst($credit->status ?? 'Unknown') }}</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">No replacement credit applications found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- View Leave Reports Tab -->
        <div class="tab-pane fade" id="leave-reports" role="tabpanel">


            <!-- Report Type Tabs -->
            <div class="mb-4">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="leave-balances-tab" data-bs-toggle="tab" data-bs-target="#leave-balances" type="button" role="tab">
                            Leave Balances
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="individual-report-tab" data-bs-toggle="tab" data-bs-target="#individual-report" type="button" role="tab">
                            Leave Report by Individual
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="department-report-tab" data-bs-toggle="tab" data-bs-target="#department-report" type="button" role="tab">
                            Report by Leave Type and Department
                        </button>
                    </li>
                </ul>
            </div>

            <!-- Leave Balances Sub-tab -->
            <div class="tab-content">
                <div class="tab-pane fade show active" id="leave-balances" role="tabpanel">
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label class="form-label">Group by:</label>
                            <select class="form-select" name="group_by">
                                <option value="department">Department</option>
                                <option value="employee">Employee</option>
                                <option value="location">Location</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Year:</label>
                            <input type="number" class="form-control" name="year" value="2025">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Effective as at:</label>
                            <input type="date" class="form-control" name="effective_date" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="button" class="btn btn-outline-primary" onclick="exportLeaveBalances()">Export</button>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <!-- Department grouping -->
                            @forelse($leaveBalances ?? [] as $department => $departmentBalances)
                            <div class="mb-4">
                                <div class="d-flex align-items-center mb-3" style="cursor: pointer;" onclick="toggleDepartment('{{ $department }}')">
                                    <i class="bi bi-chevron-down me-2" id="chevron-{{ Str::slug($department) }}"></i>
                                    <strong>{{ $department }} ({{ $departmentBalances->count() }} employees)</strong>
                                </div>
                                <div id="department-{{ Str::slug($department) }}" class="show">

                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Employee</th>
                                                <th>Employee #</th>
                                                <th>MoS</th>
                                                <th>Annual</th>
                                                <th>CarryForward</th>
                                                <th>Compassionate</th>
                                                <th>Hospitalization</th>
                                                <th>Maternity</th>
                                                <th>Paternity</th>
                                                <th>Replacement</th>
                                                <th>Sick</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($departmentBalances as $balance)
                                            <tr>
                                                <td><a href="#" class="text-primary">{{ $balance->employee->full_name }}</a></td>
                                                <td>{{ $balance->employee->employee_id }}</td>
                                                <td>{{ $balance->months_of_service }}</td>
                                                <td>{{ $balance->annual_leave }}</td>
                                                <td>{{ $balance->carry_forward }}</td>
                                                <td>{{ $balance->compassionate }}</td>
                                                <td>{{ $balance->hospitalization }}</td>
                                                <td>{{ $balance->maternity }}</td>
                                                <td>{{ $balance->paternity }}</td>
                                                <td>{{ $balance->replacement }}</td>
                                                <td>{{ $balance->sick }}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                </div>
                            </div>
                            @empty
                            <div class="mb-4">
                                <div class="d-flex align-items-center mb-3">
                                    <i class="bi bi-chevron-down me-2"></i>
                                    <strong>No Departments Found</strong>
                                </div>

                                <div class="text-center py-4 text-muted">
                                    No employees found for leave balance calculation.
                                </div>
                            </div>
                            @endforelse

                            <!-- Additional collapsed departments -->
                            @if($leaveBalances && $leaveBalances->count() > 1)
                                @foreach($leaveBalances->skip(1) as $department => $departmentBalances)
                                <div class="mt-3">
                                    <div class="d-flex align-items-center text-muted" style="cursor: pointer;" onclick="toggleDepartment('{{ $department }}')">
                                        <i class="bi bi-chevron-right me-2" id="chevron-{{ Str::slug($department) }}"></i>
                                        <span>{{ $department }} ({{ $departmentBalances->count() }} employees)</span>
                                    </div>
                                    <div id="department-{{ Str::slug($department) }}" class="collapse mt-2">
                                        <div class="table-responsive">
                                            <table class="table table-sm">
                                                <thead>
                                                    <tr>
                                                        <th>Employee</th>
                                                        <th>Employee #</th>
                                                        <th>MoS</th>
                                                        <th>Annual</th>
                                                        <th>CarryForward</th>
                                                        <th>Compassionate</th>
                                                        <th>Hospitalization</th>
                                                        <th>Maternity</th>
                                                        <th>Paternity</th>
                                                        <th>Replacement</th>
                                                        <th>Sick</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($departmentBalances as $balance)
                                                    <tr>
                                                        <td><a href="#" class="text-primary">{{ $balance->employee->full_name }}</a></td>
                                                        <td>{{ $balance->employee->employee_id }}</td>
                                                        <td>{{ $balance->months_of_service }}</td>
                                                        <td>{{ $balance->annual_leave }}</td>
                                                        <td>{{ $balance->carry_forward }}</td>
                                                        <td>{{ $balance->compassionate }}</td>
                                                        <td>{{ $balance->hospitalization }}</td>
                                                        <td>{{ $balance->maternity }}</td>
                                                        <td>{{ $balance->paternity }}</td>
                                                        <td>{{ $balance->replacement }}</td>
                                                        <td>{{ $balance->sick }}</td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endif

                            <!-- Pagination -->
                            <div class="d-flex justify-content-between align-items-center mt-4">
                                @php
                                    $totalEmployees = $leaveBalances ? $leaveBalances->flatten()->count() : 0;
                                @endphp
                                <div class="small text-muted">1 - {{ $totalEmployees }} of {{ $totalEmployees }} items</div>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge bg-primary">1</span>
                                    <select class="form-select form-select-sm" style="width: auto;">
                                        <option>10 / page</option>
                                        <option>25 / page</option>
                                        <option>50 / page</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="individual-report" role="tabpanel">
                    <!-- Individual Report Filters -->
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <label class="form-label">Employee:</label>
                            <select class="form-select" name="individual_employee" id="individualEmployee" onchange="generateIndividualReport()">
                                <option value="">Select Employee</option>
                                @foreach($employees ?? [] as $employee)
                                    <option value="{{ $employee->id }}">{{ $employee->full_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Year:</label>
                            <input type="number" class="form-control" name="individual_year" id="individualYear" value="{{ date('Y') }}" onchange="generateIndividualReport()">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Effective as at:</label>
                            <input type="date" class="form-control" name="individual_effective_date" id="individualEffectiveDate" value="{{ date('Y-m-d') }}" onchange="generateIndividualReport()">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="button" class="btn btn-outline-primary" onclick="exportIndividualReport()">Export</button>
                        </div>
                    </div>

                    <!-- Individual Report Results -->
                    <div id="individualReportResults">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Leave Type</th>
                                                <th>Entitlement</th>
                                                <th>Jan</th>
                                                <th>Feb</th>
                                                <th>Mar</th>
                                                <th>Apr</th>
                                                <th>May</th>
                                                <th>Jun</th>
                                                <th>Jul</th>
                                                <th>Aug</th>
                                                <th>Sep</th>
                                                <th>Oct</th>
                                                <th>Nov</th>
                                                <th>Dec</th>
                                                <th>Total Taken</th>
                                                <th>Balance</th>
                                            </tr>
                                        </thead>
                                        <tbody id="individualReportTableBody">
                                            <tr>
                                                <td colspan="16" class="text-center py-4 text-muted">Please select an employee to view leave report</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- Pagination -->
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <div class="small text-muted" id="individualPaginationInfo">0 - 0 of 0 items</div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge bg-primary">1</span>
                                        <select class="form-select form-select-sm" style="width: auto;">
                                            <option>10 / page</option>
                                            <option>25 / page</option>
                                            <option>50 / page</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="department-report" role="tabpanel">
                    <!-- Department Report Filters -->
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <label class="form-label">Policy:</label>
                            <select class="form-select" name="leave_type_filter" id="leaveTypeFilter" onchange="generateDepartmentReport()">
                                <option value="annual">Annual</option>
                                <option value="sick">Sick</option>
                                <option value="maternity">Maternity</option>
                                <option value="paternity">Paternity</option>
                                <option value="compassionate">Compassionate</option>
                                <option value="replacement_credit">Replacement Credit</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Department:</label>
                            <select class="form-select" name="department_filter" id="departmentFilter" onchange="generateDepartmentReport()">
                                <option value="">All Department</option>
                                @if($leaveBalances)
                                    @foreach($leaveBalances->keys() as $department)
                                        <option value="{{ $department }}">{{ $department }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Year:</label>
                            <input type="number" class="form-control" name="department_year" id="departmentYear" value="{{ date('Y') }}" onchange="generateDepartmentReport()">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Effective as at:</label>
                            <input type="date" class="form-control" name="department_effective_date" id="departmentEffectiveDate" value="{{ date('Y-m-d') }}" onchange="generateDepartmentReport()">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="button" class="btn btn-outline-primary" onclick="exportDepartmentReport()">Export</button>
                        </div>
                    </div>

                    <!-- Department Report Results -->
                    <div id="departmentReportResults">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Employee</th>
                                                <th>Employee #</th>
                                                <th>Entitlement</th>
                                                <th>Jan</th>
                                                <th>Feb</th>
                                                <th>Mar</th>
                                                <th>Apr</th>
                                                <th>May</th>
                                                <th>Jun</th>
                                                <th>Jul</th>
                                                <th>Aug</th>
                                                <th>Sep</th>
                                                <th>Oct</th>
                                                <th>Nov</th>
                                                <th>Dec</th>
                                                <th>Total Taken</th>
                                                <th>Balance</th>
                                            </tr>
                                        </thead>
                                        <tbody id="departmentReportTableBody">
                                            <tr>
                                                <td colspan="17" class="text-center py-4 text-muted">Select policy and department to view department report</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- Pagination -->
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <div class="small text-muted" id="departmentPaginationInfo">0 - 0 of 0 items</div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge bg-primary">1</span>
                                        <select class="form-select form-select-sm" style="width: auto;">
                                            <option>10 / page</option>
                                            <option>25 / page</option>
                                            <option>50 / page</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(!auth()->user()->isManager())
<!-- New Leave Application Modal -->
<div class="modal fade" id="newLeaveModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Apply for Leave</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('companies.hr.leaves.store', $company) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Select an Employee <span class="text-danger">*</span></label>
                        <select class="form-select" name="employee_id" id="modalEmployeeSelect" onchange="updateLeaveBalances()" required>
                            <option value="">Select Employee</option>
                            @foreach($employees ?? [] as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->full_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Select Leave Type <span class="text-danger">*</span></label>
                        <div class="dropdown">
                            <button class="form-control dropdown-toggle text-start" type="button" id="leaveTypeDropdown" data-bs-toggle="dropdown" aria-expanded="false" style="background: white; border: 1px solid #ced4da;">
                                <span id="selectedLeaveType" class="text-muted">Select Leave Type</span>
                            </button>
                            <ul class="dropdown-menu w-100" id="leaveTypeDropdownMenu">
                                <li><a class="dropdown-item" href="#" onclick="selectLeaveType('annual', 'Annual')">Annual (<span id="annual-balance">0</span> days available)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="selectLeaveType('carry_forward', 'Carry Forward')">Carry Forward (<span id="carry_forward-balance">0</span> days available)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="selectLeaveType('sick', 'Hospitalization')">Hospitalization (<span id="sick-balance">0</span> days available)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="selectLeaveType('paternity', 'Paternity')">Paternity (<span id="paternity-balance">0</span> days available)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="selectLeaveType('replacement_credit', 'Replacement')">Replacement (<span id="replacement_credit-balance">0</span> days available)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="selectLeaveType('sick', 'Sick')">Sick (<span id="sick-balance-2">0</span> days available)</a></li>
                            </ul>
                        </div>
                        <input type="hidden" name="leave_type" id="selectedLeaveTypeInput" required>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Start Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="start_date" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="end_date" required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-12">
                            <label class="form-label">Leave Length <span class="text-danger">*</span></label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="leave_length" value="full_day" id="fullDay" checked>
                                    <label class="form-check-label" for="fullDay">Full Day</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="leave_length" value="half_day_am" id="halfDayAM">
                                    <label class="form-check-label" for="halfDayAM">Half Day (AM)</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="leave_length" value="half_day_pm" id="halfDayPM">
                                    <label class="form-check-label" for="halfDayPM">Half Day (PM)</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Reason <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="reason" rows="4" placeholder="Please provide reason for leave..." required></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Supporting Document</label>
                        <div class="input-group">
                            <input type="file" class="form-control" name="supporting_document" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                            <span class="input-group-text">
                                <i class="bi bi-paperclip"></i> Select File
                            </span>
                        </div>
                        <small class="form-text text-muted">Max file size 1MB. Upload MC, doctor's note, or other supporting documents.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="applyLeaveBtn">Apply for <span id="leaveDaysText">1</span> day</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@if(!auth()->user()->isManager())
<!-- Replacement Credit Modal -->
<div class="modal fade" id="replacementCreditModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Apply for Replacement Credit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('companies.hr.leaves.replacement-credit.store', $company) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Select an Employee <span class="text-danger">*</span></label>
                        <select class="form-select" name="employee_id" required>
                            <option value="">Select Employee</option>
                            @foreach($employees ?? [] as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->full_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Date(s) to Apply for Replacement Credit <span class="text-danger">*</span></label>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="date" class="form-control" name="from_date" placeholder="From Date" required>
                            </div>
                            <div class="col-md-6">
                                <input type="date" class="form-control" name="to_date" placeholder="To Date" required>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Leave Length <span class="text-danger">*</span></label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="leave_length" value="full_day" id="rcFullDay" checked>
                                <label class="form-check-label" for="rcFullDay">Full Day</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="leave_length" value="half_day_am" id="rcHalfDayAM">
                                <label class="form-check-label" for="rcHalfDayAM">AM</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="leave_length" value="half_day_pm" id="rcHalfDayPM">
                                <label class="form-check-label" for="rcHalfDayPM">PM</label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Reason <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="reason" rows="3" placeholder="Reason for replacement credit..." required></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Supporting Document</label>
                        <div class="input-group">
                            <input type="file" class="form-control" name="supporting_document" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                            <span class="input-group-text">
                                <i class="bi bi-paperclip"></i> Select File
                            </span>
                        </div>
                        <small class="form-text text-muted">Max file size 1MB.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Apply</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Leave Details Modal -->
<div class="modal fade" id="leaveDetailsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Leave Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-4"><strong>Employee:</strong></div>
                    <div class="col-8" id="modalEmployeeName">-</div>
                </div>
                <div class="row mb-3">
                    <div class="col-4"><strong>Leave Type:</strong></div>
                    <div class="col-8" id="modalLeaveType">-</div>
                </div>
                <div class="row mb-3">
                    <div class="col-4"><strong>Start Date:</strong></div>
                    <div class="col-8" id="modalStartDate">-</div>
                </div>
                <div class="row mb-3">
                    <div class="col-4"><strong>End Date:</strong></div>
                    <div class="col-8" id="modalEndDate">-</div>
                </div>
                <div class="row mb-3">
                    <div class="col-4"><strong>Status:</strong></div>
                    <div class="col-8" id="modalStatus">-</div>
                </div>
                <div class="row mb-3">
                    <div class="col-4"><strong>Reason:</strong></div>
                    <div class="col-8" id="modalReason">-</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endif

@push('styles')
<style>
.calendar-table {
    font-size: 0.9rem;
}
.calendar-table td {
    height: 140px;
    vertical-align: top;
    position: relative;
    padding: 5px;
}
.calendar-date {
    font-weight: bold;
    margin-bottom: 5px;
}
.leave-item {
    font-size: 0.65rem;
    padding: 2px 3px;
    margin: 1px 0;
    border-radius: 3px;
    display: block;
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    line-height: 1.1;
    max-height: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.leave-item:hover {
    opacity: 0.8;
    transform: scale(1.02);
}
.leave-approved { background-color: #d1edff; color: #0056b3; }
.leave-pending { background-color: #fff3cd; color: #856404; }
.leave-rejected { background-color: #f8d7da; color: #721c24; }
.leave-replacement { background-color: #d1ecf1; color: #0c5460; }
.other-month { color: #ccc; background-color: #f8f9fa; }
.today { background-color: #e3f2fd; }
</style>
@endpush

@push('scripts')
<script>
// Tab switching functionality is handled by Bootstrap automatically

// Calendar variables
let currentDate = new Date();
let leaveData = @json($allLeaves ?? []);
let monthlyLeaveData = @json($monthlyLeaveData ?? []);

// Initialize data
if (!Array.isArray(leaveData)) {
    leaveData = [];
    console.warn('Leave data is not an array, initialized as empty array');
}

// Debug: Log the leave data to check format
console.log('Leave data loaded:', leaveData);
if (leaveData.length > 0) {
    console.log('Sample leave entry:', leaveData[0]);
}

// Calendar functions
function initializeCalendar() {
    renderCalendar();
}

function renderCalendar() {
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December'];
    
    document.getElementById('currentMonth').textContent = 
        monthNames[currentDate.getMonth()] + ' ' + currentDate.getFullYear();
    
    const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
    const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
    const startDate = new Date(firstDay);
    startDate.setDate(startDate.getDate() - firstDay.getDay());
    
    const calendarBody = document.getElementById('calendarBody');
    calendarBody.innerHTML = '';
    
    let date = new Date(startDate);
    
    for (let week = 0; week < 6; week++) {
        const row = document.createElement('tr');
        
        for (let day = 0; day < 7; day++) {
            const cell = document.createElement('td');
            const dayNumber = document.createElement('div');
            dayNumber.className = 'calendar-date';
            dayNumber.textContent = date.getDate();
            
            if (date.getMonth() !== currentDate.getMonth()) {
                cell.className = 'other-month';
            }
            
            if (date.toDateString() === new Date().toDateString()) {
                cell.className += ' today';
            }
            
            cell.appendChild(dayNumber);
            
            // Add leave items for this date
            // Format the date as YYYY-MM-DD in local time (not UTC)
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const dateStr = `${year}-${month}-${day}`;
            const dayLeaves = getLeavesForDate(dateStr);
            
            // Debug: Log if we find any leaves for specific dates
            if (dayLeaves.length > 0) {
                console.log(`Found ${dayLeaves.length} leaves for date ${dateStr}:`, dayLeaves);
            }
            dayLeaves.forEach(leave => {
                const leaveElement = document.createElement('div');
                leaveElement.className = `leave-item leave-${leave.status}`;
                
                // Create display text with type and name
                const displayName = leave.employee_name.length > 10 ? 
                    leave.employee_name.substring(0, 10) + '...' : 
                    leave.employee_name;
                
                const leaveTypeDisplay = leave.type ? leave.type.charAt(0).toUpperCase() + leave.type.slice(1).replace('_', ' ') : 'Leave';
                
                // Shorten leave type for display
                const shortType = leaveTypeDisplay.length > 8 ? leaveTypeDisplay.substring(0, 8) + '...' : leaveTypeDisplay;
                const displayText = `${shortType}: ${displayName}`;
                
                leaveElement.textContent = displayText;
                leaveElement.title = `Click to view details`;
                leaveElement.dataset.leaveData = JSON.stringify({
                    employee_name: leave.employee_name,
                    type: leaveTypeDisplay,
                    reason: leave.reason,
                    status: leave.status,
                    start_date: leave.start_date,
                    end_date: leave.end_date
                });
                leaveElement.addEventListener('click', function() {
                    showLeaveDetails(JSON.parse(this.dataset.leaveData));
                });
                cell.appendChild(leaveElement);
            });
            
            row.appendChild(cell);
            date.setDate(date.getDate() + 1);
        }
        
        calendarBody.appendChild(row);
        
        if (date.getMonth() !== currentDate.getMonth()) {
            break;
        }
    }
}

function getLeavesForDate(dateStr) {
    // Ensure leaveData is an array
    if (!Array.isArray(leaveData)) {
        console.warn('leaveData is not an array:', leaveData);
        return [];
    }
    
    return leaveData.filter(leave => {
        if (!leave.start_date || !leave.end_date) {
            return false;
        }
        
        // Handle Laravel date format (YYYY-MM-DD or date object)
        let startDateStr = typeof leave.start_date === 'object' ? leave.start_date.date : leave.start_date;
        let endDateStr = typeof leave.end_date === 'object' ? leave.end_date.date : leave.end_date;
        
        // Extract just the date part if it's a datetime string
        if (typeof startDateStr === 'string' && startDateStr.includes(' ')) {
            startDateStr = startDateStr.split(' ')[0];
        }
        if (typeof endDateStr === 'string' && endDateStr.includes(' ')) {
            endDateStr = endDateStr.split(' ')[0];
        }
        
        // Try parsing dates with multiple approaches
        let startDate, endDate, checkDate;
        
        try {
            // First try: split and create dates manually (most reliable)
            const startParts = startDateStr.split('-');
            const endParts = endDateStr.split('-');
            const checkParts = dateStr.split('-');
            
            if (startParts.length === 3 && endParts.length === 3 && checkParts.length === 3) {
                startDate = new Date(parseInt(startParts[0]), parseInt(startParts[1]) - 1, parseInt(startParts[2]));
                endDate = new Date(parseInt(endParts[0]), parseInt(endParts[1]) - 1, parseInt(endParts[2]));
                checkDate = new Date(parseInt(checkParts[0]), parseInt(checkParts[1]) - 1, parseInt(checkParts[2]));
            } else {
                // Fallback: use Date constructor directly
                startDate = new Date(startDateStr);
                endDate = new Date(endDateStr);
                checkDate = new Date(dateStr);
            }
        } catch (e) {
            console.error('Date parsing error:', e, { startDateStr, endDateStr, dateStr });
            return false;
        }
        
        // Check if dates are valid
        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime()) || isNaN(checkDate.getTime())) {
            console.warn('Invalid dates:', { startDateStr, endDateStr, dateStr });
            return false;
        }
        
        // Reset time components to ensure we're only comparing dates
        startDate.setHours(0, 0, 0, 0);
        endDate.setHours(0, 0, 0, 0);
        checkDate.setHours(0, 0, 0, 0);
        
        // Check if the checkDate falls within the leave period
        return checkDate >= startDate && checkDate <= endDate;
    }).map(leave => ({
        employee_name: leave.employee ? leave.employee.full_name : 'Unknown',
        type: leave.leave_type,
        status: leave.status,
        reason: leave.reason || 'No reason provided',
        start_date: leave.start_date,
        end_date: leave.end_date
    }));
}

function previousMonth() {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar();
}

function nextMonth() {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar();
}

function goToToday() {
    currentDate = new Date();
    renderCalendar();
}

// Show leave details modal
function showLeaveDetails(leaveData) {
    document.getElementById('modalEmployeeName').textContent = leaveData.employee_name;
    document.getElementById('modalLeaveType').textContent = leaveData.type;
    document.getElementById('modalStartDate').textContent = formatDate(leaveData.start_date);
    document.getElementById('modalEndDate').textContent = formatDate(leaveData.end_date);
    
    // Format status with badge
    const statusElement = document.getElementById('modalStatus');
    const status = leaveData.status.charAt(0).toUpperCase() + leaveData.status.slice(1);
    let badgeClass = 'bg-secondary';
    
    if (leaveData.status === 'approved') badgeClass = 'bg-success';
    else if (leaveData.status === 'pending') badgeClass = 'bg-warning text-dark';
    else if (leaveData.status === 'rejected') badgeClass = 'bg-danger';
    
    statusElement.innerHTML = `<span class="badge ${badgeClass}">${status}</span>`;
    
    document.getElementById('modalReason').textContent = leaveData.reason || 'No reason provided';
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('leaveDetailsModal'));
    modal.show();
}

// Helper function to format dates
function formatDate(dateStr) {
    if (!dateStr) return '-';
    
    // Handle different date formats
    let date;
    if (typeof dateStr === 'object' && dateStr.date) {
        date = new Date(dateStr.date);
    } else if (typeof dateStr === 'string') {
        // Extract just date part if it's datetime
        const datePart = dateStr.includes(' ') ? dateStr.split(' ')[0] : dateStr;
        date = new Date(datePart);
    } else {
        date = new Date(dateStr);
    }
    
    if (isNaN(date.getTime())) return dateStr;
    
    return date.toLocaleDateString('en-US', { 
        year: 'numeric', 
        month: 'short', 
        day: 'numeric' 
    });
}

// Individual Report functions
function generateIndividualReport() {
    const employeeId = document.getElementById('individualEmployee').value;
    const year = document.getElementById('individualYear').value;
    const effectiveDate = document.getElementById('individualEffectiveDate').value;
    
    if (!employeeId) {
        document.getElementById('individualReportTableBody').innerHTML = `
            <tr>
                <td colspan="16" class="text-center py-4 text-muted">Please select an employee to view leave report</td>
            </tr>
        `;
        document.getElementById('individualPaginationInfo').textContent = '0 - 0 of 0 items';
        return;
    }
    
    const employee = getEmployeeById(employeeId);
    if (!employee) return;
    
    // Find employee data in monthly leave data
    const employeeLeaveData = monthlyLeaveData.find(emp => emp.id == employeeId);
    if (!employeeLeaveData) return;
    
    // Generate individual leave report data from real data
    const leaveTypes = [
        { 
            name: 'Annual', 
            entitlement: employeeLeaveData.leave_types.annual?.entitlement || 12, 
            monthlyUsage: employeeLeaveData.leave_types.annual?.monthly_usage || [0,0,0,0,0,0,0,0,0,0,0,0] 
        },
        { 
            name: 'Sick', 
            entitlement: employeeLeaveData.leave_types.sick?.entitlement || 14, 
            monthlyUsage: employeeLeaveData.leave_types.sick?.monthly_usage || [0,0,0,0,0,0,0,0,0,0,0,0] 
        },
        { 
            name: 'Hospitalization', 
            entitlement: 60, 
            monthlyUsage: [0,0,0,0,0,0,0,0,0,0,0,0] 
        },
        { 
            name: 'Paternity', 
            entitlement: employeeLeaveData.leave_types.paternity?.entitlement || 7, 
            monthlyUsage: employeeLeaveData.leave_types.paternity?.monthly_usage || [0,0,0,0,0,0,0,0,0,0,0,0] 
        },
        { 
            name: 'CarryForward', 
            entitlement: 10, 
            monthlyUsage: [0,0,0,0,0,0,0,0,0,0,0,0] 
        }
    ];
    
    let tableHTML = '';
    let totalItems = leaveTypes.length;
    
    leaveTypes.forEach(leaveType => {
        const totalTaken = leaveType.monthlyUsage.reduce((sum, usage) => sum + usage, 0);
        const balance = leaveType.entitlement - totalTaken;
        
        tableHTML += `
            <tr>
                <td>${leaveType.name}</td>
                <td>${leaveType.entitlement}</td>
                <td>${leaveType.monthlyUsage[0]}</td>
                <td>${leaveType.monthlyUsage[1]}</td>
                <td>${leaveType.monthlyUsage[2]}</td>
                <td>${leaveType.monthlyUsage[3]}</td>
                <td>${leaveType.monthlyUsage[4]}</td>
                <td>${leaveType.monthlyUsage[5]}</td>
                <td>${leaveType.monthlyUsage[6]}</td>
                <td>${leaveType.monthlyUsage[7]}</td>
                <td>${leaveType.monthlyUsage[8]}</td>
                <td>${leaveType.monthlyUsage[9]}</td>
                <td>${leaveType.monthlyUsage[10]}</td>
                <td>${leaveType.monthlyUsage[11]}</td>
                <td>${totalTaken}</td>
                <td>${balance}</td>
            </tr>
        `;
    });
    
    document.getElementById('individualReportTableBody').innerHTML = tableHTML;
    document.getElementById('individualPaginationInfo').textContent = `1 - ${totalItems} of ${totalItems} items`;
}

// Department Report functions
function generateDepartmentReport() {
    const department = document.getElementById('departmentFilter').value;
    const leaveType = document.getElementById('leaveTypeFilter').value;
    const year = document.getElementById('departmentYear').value;
    const effectiveDate = document.getElementById('departmentEffectiveDate').value;
    
    // Filter monthly leave data based on department
    const filteredEmployees = department ? 
        monthlyLeaveData.filter(emp => emp.department === department) : 
        monthlyLeaveData;
    
    if (filteredEmployees.length === 0) {
        document.getElementById('departmentReportTableBody').innerHTML = `
            <tr>
                <td colspan="17" class="text-center py-4 text-muted">No employees found for selected department</td>
            </tr>
        `;
        document.getElementById('departmentPaginationInfo').textContent = '0 - 0 of 0 items';
        return;
    }
    
    // Generate department report data
    let tableHTML = '';
    let totalItems = filteredEmployees.length;
    
    filteredEmployees.forEach(employee => {
        // Get leave data for selected leave type
        const leaveTypeData = employee.leave_types[leaveType];
        if (!leaveTypeData) return;
        
        const entitlement = leaveTypeData.entitlement;
        const monthlyUsage = leaveTypeData.monthly_usage;
        const totalTaken = leaveTypeData.total_taken;
        const balance = entitlement - totalTaken;
        
        tableHTML += `
            <tr>
                <td>${employee.name}</td>
                <td>${employee.employee_id}</td>
                <td>${entitlement}</td>
                <td>${monthlyUsage[0]}</td>
                <td>${monthlyUsage[1]}</td>
                <td>${monthlyUsage[2]}</td>
                <td>${monthlyUsage[3]}</td>
                <td>${monthlyUsage[4]}</td>
                <td>${monthlyUsage[5]}</td>
                <td>${monthlyUsage[6]}</td>
                <td>${monthlyUsage[7]}</td>
                <td>${monthlyUsage[8]}</td>
                <td>${monthlyUsage[9]}</td>
                <td>${monthlyUsage[10]}</td>
                <td>${monthlyUsage[11]}</td>
                <td>${totalTaken}</td>
                <td>${balance}</td>
            </tr>
        `;
    });
    
    document.getElementById('departmentReportTableBody').innerHTML = tableHTML;
    document.getElementById('departmentPaginationInfo').textContent = `1 - ${totalItems} of ${totalItems} items`;
}

// Helper functions
function getEmployeeById(employeeId) {
    const employees = @json($employees ?? []);
    return employees.find(emp => emp.id == employeeId);
}

// Export functions
function exportLeaveBalances() {
    const params = new URLSearchParams();
    const year = document.querySelector('input[name="year"]').value;
    const groupBy = document.querySelector('select[name="group_by"]').value;
    const effectiveDate = document.querySelector('input[name="effective_date"]').value;

    if (year) params.append('year', year);
    if (groupBy) params.append('group_by', groupBy);
    if (effectiveDate) params.append('effective_date', effectiveDate);

    window.location.href = `{{ route('companies.hr.leaves.export', $company) }}?${params.toString()}`;
}

function exportIndividualReport() {
    const employeeId = document.getElementById('individualEmployee').value;
    if (!employeeId) {
        alert('Please select an employee and generate report first');
        return;
    }
    
    const params = new URLSearchParams();
    params.append('type', 'individual');
    params.append('employee_id', employeeId);
    params.append('year', document.getElementById('individualYear').value);
    
    window.location.href = `{{ route('companies.hr.leaves.export', $company) }}?${params.toString()}`;
}

function exportDepartmentReport() {
    const params = new URLSearchParams();
    params.append('type', 'department');
    params.append('department', document.getElementById('departmentFilter').value);
    params.append('leave_type', document.getElementById('leaveTypeFilter').value);
    params.append('year', document.getElementById('departmentYear').value);
    
    window.location.href = `{{ route('companies.hr.leaves.export', $company) }}?${params.toString()}`;
}

// Toggle department accordion
function toggleDepartment(department) {
    const slug = department.toLowerCase().replace(/[^a-z0-9]/g, '-');
    const element = document.getElementById('department-' + slug);
    const chevron = document.getElementById('chevron-' + slug);

    if (element && chevron) {
        if (element.classList.contains('show')) {
            element.classList.remove('show');
            chevron.classList.remove('bi-chevron-down');
            chevron.classList.add('bi-chevron-right');
        } else {
            element.classList.add('show');
            chevron.classList.remove('bi-chevron-right');
            chevron.classList.add('bi-chevron-down');
        }
    }
}

// Leave application modal functions
function updateLeaveBalances() {
    const employeeId = document.getElementById('modalEmployeeSelect').value;
    
    if (!employeeId) {
        // Reset all balances to 0
        document.getElementById('annual-balance').textContent = '0';
        document.getElementById('carry_forward-balance').textContent = '0';
        document.getElementById('sick-balance').textContent = '0';
        document.getElementById('paternity-balance').textContent = '0';
        document.getElementById('replacement_credit-balance').textContent = '0';
        document.getElementById('sick-balance-2').textContent = '0';
        return;
    }
    
    // Find employee data in monthly leave data
    const employeeLeaveData = monthlyLeaveData.find(emp => emp.id == employeeId);
    if (!employeeLeaveData) return;
    
    // Update leave balances in dropdown
    const leaveTypes = employeeLeaveData.leave_types;
    
    // Calculate remaining balances
    const annualBalance = (leaveTypes.annual?.entitlement || 0) - (leaveTypes.annual?.total_taken || 0);
    const sickBalance = (leaveTypes.sick?.entitlement || 0) - (leaveTypes.sick?.total_taken || 0);
    const paternityBalance = (leaveTypes.paternity?.entitlement || 0) - (leaveTypes.paternity?.total_taken || 0);
    const replacementBalance = (leaveTypes.replacement_credit?.entitlement || 0) - (leaveTypes.replacement_credit?.total_taken || 0);
    
    // Update UI
    document.getElementById('annual-balance').textContent = Math.max(0, annualBalance);
    document.getElementById('carry_forward-balance').textContent = '10'; // Fixed carry forward
    document.getElementById('sick-balance').textContent = '60'; // Hospitalization
    document.getElementById('paternity-balance').textContent = Math.max(0, paternityBalance);
    document.getElementById('replacement_credit-balance').textContent = Math.max(0, replacementBalance);
    document.getElementById('sick-balance-2').textContent = Math.max(0, sickBalance);
}

function selectLeaveType(leaveType, displayName) {
    document.getElementById('selectedLeaveType').textContent = displayName;
    document.getElementById('selectedLeaveType').classList.remove('text-muted');
    document.getElementById('selectedLeaveTypeInput').value = leaveType;
    
    // Close dropdown
    const dropdown = bootstrap.Dropdown.getInstance(document.getElementById('leaveTypeDropdown'));
    if (dropdown) {
        dropdown.hide();
    }
}

function calculateLeaveDays() {
    const startDate = document.querySelector('#newLeaveModal input[name="start_date"]').value;
    const endDate = document.querySelector('#newLeaveModal input[name="end_date"]').value;
    const leaveLength = document.querySelector('#newLeaveModal input[name="leave_length"]:checked')?.value || 'full_day';
    
    if (startDate && endDate) {
        const start = new Date(startDate);
        const end = new Date(endDate);
        
        // Calculate the difference in days
        const timeDiff = end.getTime() - start.getTime();
        let daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
        
        // Ensure minimum 1 day if same dates
        if (daysDiff < 1) {
            daysDiff = 1;
        }
        
        // Adjust for half days
        if (leaveLength.includes('half_day')) {
            daysDiff = daysDiff * 0.5;
        }
        
        document.getElementById('leaveDaysText').textContent = daysDiff;
        document.getElementById('applyLeaveBtn').innerHTML = `Apply for ${daysDiff} day${daysDiff !== 1 ? 's' : ''}`;
    } else {
        // Default to 1 day if dates not selected
        document.getElementById('leaveDaysText').textContent = '1';
        document.getElementById('applyLeaveBtn').innerHTML = 'Apply for 1 day';
    }
}

// Form validation and date range logic
document.addEventListener('DOMContentLoaded', function() {
    // Initialize calendar when page loads
    initializeCalendar();
    
    // Initialize department report with default values
    generateDepartmentReport();
    
    // Auto-fill end date when start date changes for single day leaves
    const startDateInputs = document.querySelectorAll('input[name="start_date"]');
    const endDateInputs = document.querySelectorAll('input[name="end_date"]');

    startDateInputs.forEach((startInput, index) => {
        startInput.addEventListener('change', function() {
            if (endDateInputs[index] && !endDateInputs[index].value) {
                endDateInputs[index].value = this.value;
            }
        });
    });

    // Handle leave length changes
    const leaveLengthRadios = document.querySelectorAll('#newLeaveModal input[name="leave_length"]');
    leaveLengthRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            // Auto-adjust end date for half-day leaves
            const endDateInput = document.querySelector('#newLeaveModal input[name="end_date"]');
            const startDateInput = document.querySelector('#newLeaveModal input[name="start_date"]');

            if (this.value.includes('half_day') && startDateInput.value) {
                endDateInput.value = startDateInput.value;
            }
            
            // Recalculate leave days
            calculateLeaveDays();
        });
    });
    
    // Add event listeners for date changes in modal
    const modalStartDate = document.querySelector('#newLeaveModal input[name="start_date"]');
    const modalEndDate = document.querySelector('#newLeaveModal input[name="end_date"]');
    
    if (modalStartDate) {
        modalStartDate.addEventListener('change', function() {
            if (!modalEndDate.value) {
                modalEndDate.value = this.value;
            }
            calculateLeaveDays();
        });
    }
    
    if (modalEndDate) {
        modalEndDate.addEventListener('change', calculateLeaveDays);
    }
    
    // Add event listener for when leave modal is opened
    const newLeaveModal = document.getElementById('newLeaveModal');
    if (newLeaveModal) {
        newLeaveModal.addEventListener('shown.bs.modal', function() {
            // Reset and calculate leave days when modal opens
            calculateLeaveDays();
        });
        
        // Reset modal when closed
        newLeaveModal.addEventListener('hidden.bs.modal', function() {
            // Reset form and button text
            document.getElementById('leaveDaysText').textContent = '1';
            document.getElementById('applyLeaveBtn').innerHTML = 'Apply for 1 day';
            document.getElementById('selectedLeaveType').textContent = 'Select Leave Type';
            document.getElementById('selectedLeaveType').classList.add('text-muted');
            document.getElementById('selectedLeaveTypeInput').value = '';
        });
    }
});
</script>
@endpush

<!-- View Leave Details Modals -->
@foreach($leaves ?? [] as $leave)
<div class="modal fade" id="viewLeaveModal{{ $leave->id }}" tabindex="-1" aria-labelledby="viewLeaveModalLabel{{ $leave->id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewLeaveModalLabel{{ $leave->id }}">Leave Application Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h6 class="text-muted mb-1">Employee</h6>
                        <p class="mb-0"><strong>{{ $leave->employee->full_name ?? 'N/A' }}</strong></p>
                        <small class="text-muted">ID: {{ $leave->employee->employee_id ?? 'N/A' }}</small>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted mb-1">Department</h6>
                        <p class="mb-0">{{ $leave->employee->department->name ?? 'N/A' }}</p>
                    </div>
                </div>
                
                <hr>
                
                <div class="row mb-3">
                    <div class="col-md-4">
                        <h6 class="text-muted mb-1">Leave Type</h6>
                        <p class="mb-0">
                            <span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $leave->leave_type)) }}</span>
                        </p>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-muted mb-1">Duration</h6>
                        <p class="mb-0"><strong>{{ $leave->total_days }} day(s)</strong></p>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-muted mb-1">Status</h6>
                        <p class="mb-0">
                            @if($leave->status === 'pending')
                                <span class="badge bg-warning text-dark">Pending</span>
                            @elseif($leave->status === 'approved')
                                <span class="badge bg-success">Approved</span>
                            @elseif($leave->status === 'rejected')
                                <span class="badge bg-danger">Rejected</span>
                            @else
                                <span class="badge bg-secondary">{{ ucfirst($leave->status) }}</span>
                            @endif
                        </p>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h6 class="text-muted mb-1">Start Date</h6>
                        <p class="mb-0">{{ $leave->start_date ? $leave->start_date->format('d M Y') : 'N/A' }}</p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted mb-1">End Date</h6>
                        <p class="mb-0">{{ $leave->end_date ? $leave->end_date->format('d M Y') : 'N/A' }}</p>
                    </div>
                </div>
                
                @if($leave->half_day_type)
                <div class="row mb-3">
                    <div class="col-12">
                        <h6 class="text-muted mb-1">Half Day Type</h6>
                        <p class="mb-0">{{ ucfirst(str_replace('_', ' ', $leave->half_day_type)) }}</p>
                    </div>
                </div>
                @endif
                
                @if($leave->is_emergency)
                <div class="row mb-3">
                    <div class="col-12">
                        <div class="alert alert-warning mb-0">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            This is an emergency leave request
                        </div>
                    </div>
                </div>
                @endif
                
                <div class="row mb-3">
                    <div class="col-12">
                        <h6 class="text-muted mb-1">Reason</h6>
                        <div class="bg-light p-3 rounded">
                            {{ $leave->reason ?? 'No reason provided' }}
                        </div>
                    </div>
                </div>
                
                @if($leave->attachment_path)
                <div class="row mb-3">
                    <div class="col-12">
                        <h6 class="text-muted mb-1">Supporting Documents</h6>
                        <a href="{{ Storage::url($leave->attachment_path) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-file-earmark-text me-1"></i> View Attachment
                        </a>
                    </div>
                </div>
                @endif
                
                @if($leave->approved_by)
                <hr>
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-muted mb-2">Approval Information</h6>
                        <p class="mb-1"><strong>{{ $leave->status === 'approved' ? 'Approved' : 'Rejected' }} by:</strong> {{ $leave->approver->name ?? 'N/A' }}</p>
                        <p class="mb-1"><strong>Date:</strong> {{ $leave->approved_at ? $leave->approved_at->format('d M Y H:i') : 'N/A' }}</p>
                        @if($leave->approval_notes)
                            <p class="mb-0"><strong>Notes:</strong> {{ $leave->approval_notes }}</p>
                        @endif
                        @if($leave->rejection_reason)
                            <p class="mb-0"><strong>Rejection Reason:</strong> {{ $leave->rejection_reason }}</p>
                        @endif
                    </div>
                </div>
                @endif
            </div>
            <div class="modal-footer">
                @if($leave->status === 'pending')
                    <form method="POST" action="{{ route('companies.hr.leaves.approve', [$company, $leave]) }}" style="display: inline;">
                        @csrf
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-check-circle me-1"></i> Approve
                        </button>
                    </form>
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#rejectLeaveModal{{ $leave->id }}">
                        <i class="bi bi-x-circle me-1"></i> Reject
                    </button>
                @endif
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endforeach

<!-- Reject Leave Modals -->
@foreach($leaves ?? [] as $leave)
<div class="modal fade" id="rejectLeaveModal{{ $leave->id }}" tabindex="-1" aria-labelledby="rejectLeaveModalLabel{{ $leave->id }}" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="rejectLeaveModalLabel{{ $leave->id }}">Reject Leave Application</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('companies.hr.leaves.reject', [$company, $leave]) }}">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        You are about to reject the leave application for <strong>{{ $leave->employee->full_name ?? 'Unknown' }}</strong>.
                    </div>

                    <div class="mb-3">
                        <p><strong>Leave Details:</strong></p>
                        <ul class="mb-3">
                            <li>Type: {{ ucfirst(str_replace('_', ' ', $leave->leave_type)) }}</li>
                            <li>Duration: {{ $leave->total_days }} day(s)</li>
                            <li>Period: {{ $leave->start_date ? $leave->start_date->format('d M Y') : 'N/A' }} - {{ $leave->end_date ? $leave->end_date->format('d M Y') : 'N/A' }}</li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <label for="rejection_reason{{ $leave->id }}" class="form-label">Rejection Reason <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="rejection_reason{{ $leave->id }}" name="rejection_reason" rows="4" placeholder="Please provide a reason for rejecting this leave application..." required></textarea>
                        <div class="form-text">This reason will be shared with the employee.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-x-circle me-1"></i> Confirm Rejection
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

@endsection