@extends('layouts.user_type.auth')

@section('content')
<div>
    <div class="row">
        <div class="col-12">

            @if(session('success'))
            <div class="m-3 alert alert-success alert-dismissible fade show" role="alert">
                <span class="alert-text text-white">{{ session('success') }}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                    <i class="fa fa-close" aria-hidden="true"></i>
                </button>
            </div>
            @endif

            <div class="card mb-4 mx-4">
                <div class="card-header pb-2">
                    <div class="d-flex flex-row justify-content-between">
                        <div>
                            <h5 class="mb-0">Leaves List</h5>
                        </div>
                        <div class="d-flex gap-2">
                            <!-- Records Per Page Selector -->
                            <div class="d-flex align-items-center">
                                <select id="perPageSelect" class="form-select form-select-sm" style="width: auto;">
                                    @foreach([10, 15, 25, 50, 100] as $option)
                                    <option value="{{ $option }}" {{ $leaves->perPage() == $option ? 'selected' : '' }}>
                                        {{ $option }} per page
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <button id="approve-selected" class="btn bg-gradient-success btn-sm mb-0">
                                <i class="fas fa-check me-1"></i> Approve Selected
                            </button>
                            <button id="reject-selected" class="btn bg-gradient-danger btn-sm mb-0">
                                <i class="fas fa-times me-1"></i> Reject Selected
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Search and Filter Section -->
                <div class="card-header pb-2 pt-0">
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <div class="input-group input-group-sm" style="width: 100%; max-width: 300px;">
                                <span class="input-group-text">
                                    <i class="fas fa-search"></i>
                                </span>
                                <input type="text" id="searchEmployee" class="form-control" placeholder="Search by employee name..." style="border-right: 1px solid #ced4da;">
                                <button id="clearSearch" class="btn btn-outline-secondary" type="button" style="display: none; min-width: 40px;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group input-group-sm" style="width: 100%; max-width: 300px;">
                                <span class="input-group-text">
                                    <i class="fas fa-filter"></i>
                                </span>
                                <select id="filterReportingManager" class="form-control"
                                    style="border-right: 1px solid #ced4da; padding-left: 10px; padding-right: 10px; width: auto;">
                                    <option value="">All Reporting Managers</option>
                                    @foreach($reportingManagers as $manager)
                                    <option value="{{ $manager->id }}" {{ request('reporting_manager_id') == $manager->id ? 'selected' : '' }}>
                                        {{ $manager->name }}
                                    </option>
                                    @endforeach
                                </select>
                                <button id="clearFilter" class="btn btn-outline-secondary" type="button" style="display: none; min-width: 40px;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4 text-end">
                            <span class="text-secondary text-xs font-weight-bold">
                                Showing {{ $leaves->firstItem() }} to {{ $leaves->lastItem() }} of {{ $leaves->total() }} results
                            </span>
                        </div>
                    </div>
                </div>

                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        <input type="checkbox" id="select-all">
                                    </th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Employee</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Leave Type</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Start Date</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">End Date</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Reporting Manager</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Reason</th>
                                </tr>
                            </thead>
                            <tbody id="leavesTableBody">
                                @foreach($leaves as $leave)
                                <tr class="leave-row"
                                    data-employee-name="{{ strtolower($leave->employee->name ?? 'N/A') }}"
                                    data-reporting-manager-id="{{ $leave->reporting_manager_id }}">
                                    <td class="text-center">
                                        @if($leave->status == 'Pending')
                                        <input type="checkbox" class="leave-checkbox" value="{{ $leave->id }}">
                                        @else
                                        <input type="checkbox" class="leave-checkbox" value="{{ $leave->id }}" disabled title="Cannot select {{ $leave->status }} leaves">
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $leave->employee->name ?? 'N/A' }}</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $leave->leaveType->name ?? 'N/A' }}</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $leave->start_date }}</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $leave->end_date }}</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">
                                            {{ $leave->reportingManager->name ?? 'Not Assigned' }}
                                        </p>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge
                                            @if($leave->status == 'Approved') bg-success
                                            @elseif($leave->status == 'Rejected') bg-danger
                                            @elseif($leave->status == 'Pending') bg-warning
                                            @else bg-secondary
                                            @endif">
                                            {{ $leave->status }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $leave->reason ?? '-' }}</p>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="card-footer py-4">
                        <div class="d-flex justify-content-between">
                            <div>
                                Showing {{ $leaves->firstItem() }} to {{ $leaves->lastItem() }} of {{ $leaves->total() }} results
                            </div>
                            <div>
                                {{ $leaves->appends(request()->query())->links('vendor.pagination.bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

<script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log("DOM loaded - leave management system");

        // Select all checkboxes (only enabled ones)
        const selectAllCheckbox = document.getElementById('select-all');
        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('click', function(e) {
                const checkboxes = document.querySelectorAll('.leave-checkbox:not(:disabled)');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = e.target.checked;
                });
                updateButtonStates();
            });
        }

        // Update button states based on selection
        function updateButtonStates() {
            const selectedCount = document.querySelectorAll('.leave-checkbox:checked:not(:disabled)').length;
            const approveBtn = document.getElementById('approve-selected');
            const rejectBtn = document.getElementById('reject-selected');

            if (approveBtn) {
                approveBtn.disabled = selectedCount === 0;
            }
            if (rejectBtn) {
                rejectBtn.disabled = selectedCount === 0;
            }
        }

        // Listen to checkbox changes
        document.querySelectorAll('.leave-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', updateButtonStates);
        });

        // Bulk approve selected leaves
        const approveButton = document.getElementById('approve-selected');
        if (approveButton) {
            approveButton.addEventListener('click', function() {
                const selected = Array.from(document.querySelectorAll('.leave-checkbox:checked:not(:disabled)')).map(cb => cb.value);
                console.log("Selected leaves for approval:", selected);

                if (selected.length === 0) {
                    alert('Please select at least one pending leave to approve.');
                    return;
                }

                if (!confirm(`Are you sure you want to approve ${selected.length} selected leave(s)?`)) return;

                // Show loading state
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Processing...';
                this.disabled = true;

                fetch('{{ route("leave.bulkApprove") }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            leave_ids: selected,
                            action: 'approve'
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            location.reload();
                        } else {
                            alert(data.message || 'Something went wrong');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred. Please try again.');
                    })
                    .finally(() => {
                        this.innerHTML = originalText;
                        this.disabled = false;
                    });
            });
        }

        // Bulk reject selected leaves
        const rejectButton = document.getElementById('reject-selected');
        if (rejectButton) {
            rejectButton.addEventListener('click', function() {
                const selected = Array.from(document.querySelectorAll('.leave-checkbox:checked:not(:disabled)')).map(cb => cb.value);
                console.log("Selected leaves for rejection:", selected);

                if (selected.length === 0) {
                    alert('Please select at least one pending leave to reject.');
                    return;
                }

                if (!confirm(`Are you sure you want to reject ${selected.length} selected leave(s)? This will restore leave balances.`)) return;

                // Show loading state
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Processing...';
                this.disabled = true;

                fetch('{{ route("leave.bulkApprove") }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            leave_ids: selected,
                            action: 'reject'
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            location.reload();
                        } else {
                            alert(data.message || 'Something went wrong');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred. Please try again.');
                    })
                    .finally(() => {
                        this.innerHTML = originalText;
                        this.disabled = false;
                    });
            });
        }

        // Records per page selector
        const perPageSelect = document.getElementById('perPageSelect');
        if (perPageSelect) {
            perPageSelect.addEventListener('change', function() {
                updateUrlParams('per_page', this.value);
            });
        }

        // Reporting Manager Filter
        const filterReportingManager = document.getElementById('filterReportingManager');
        const clearFilterBtn = document.getElementById('clearFilter');

        if (filterReportingManager) {
            filterReportingManager.addEventListener('change', function() {
                if (this.value) {
                    updateUrlParams('reporting_manager_id', this.value);
                    clearFilterBtn.style.display = 'block';
                } else {
                    removeUrlParam('reporting_manager_id');
                    clearFilterBtn.style.display = 'none';
                }
            });
        }

        // Clear filter
        if (clearFilterBtn) {
            clearFilterBtn.addEventListener('click', function() {
                filterReportingManager.value = '';
                removeUrlParam('reporting_manager_id');
                this.style.display = 'none';
            });

            // Show clear button if filter is already applied
            if (filterReportingManager.value) {
                clearFilterBtn.style.display = 'block';
            }
        }

        // URL parameter functions
        function updateUrlParams(key, value) {
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.set(key, value);
            currentUrl.searchParams.set('page', 1); // Reset to first page
            window.location.href = currentUrl.toString();
        }

        function removeUrlParam(key) {
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.delete(key);
            currentUrl.searchParams.set('page', 1); // Reset to first page
            window.location.href = currentUrl.toString();
        }

        // Search functionality
        const searchInput = document.getElementById('searchEmployee');
        const clearSearchBtn = document.getElementById('clearSearch');
        const leaveRows = document.querySelectorAll('.leave-row');

        if (searchInput) {
            // Search input event
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase().trim();
                console.log("Searching for:", searchTerm);

                // Show/hide clear button
                if (clearSearchBtn) {
                    clearSearchBtn.style.display = searchTerm ? 'block' : 'none';
                }

                // Filter rows
                filterRows(searchTerm);
            });

            // Clear search
            if (clearSearchBtn) {
                clearSearchBtn.addEventListener('click', function() {
                    searchInput.value = '';
                    this.style.display = 'none';
                    filterRows('');
                    searchInput.focus();
                });
            }

            // Add keyboard shortcut
            searchInput.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    this.value = '';
                    if (clearSearchBtn) {
                        clearSearchBtn.style.display = 'none';
                    }
                    filterRows('');
                }
            });
        }

        // Filter function
        function filterRows(searchTerm) {
            let visibleCount = 0;

            if (leaveRows.length > 0) {
                leaveRows.forEach(row => {
                    const employeeName = row.getAttribute('data-employee-name');
                    const isVisible = !searchTerm || employeeName.includes(searchTerm);

                    row.style.display = isVisible ? '' : 'none';

                    if (isVisible) {
                        visibleCount++;
                    }
                });

                console.log("Visible rows:", visibleCount);
            } else {
                console.log("No leave rows found");
            }
        }

        // Initialize search
        if (searchInput && searchInput.value.trim() !== '') {
            filterRows(searchInput.value.toLowerCase().trim());
            if (clearSearchBtn) {
                clearSearchBtn.style.display = 'block';
            }
        }

        // Initialize button states
        updateButtonStates();
    });
</script>

<style>
    #searchEmployee:focus,
    #filterReportingManager:focus {
        border-color: #cb0c9f;
        box-shadow: 0 0 0 2px rgba(203, 12, 159, 0.2);
    }

    .leave-row {
        transition: all 0.3s ease;
    }

    #perPageSelect,
    #filterReportingManager {
        width: 140px;
    }

    .table-responsive {
        min-height: 400px;
    }

    .leave-checkbox:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .input-group {
        max-width: 300px;
    }
</style>
@endsection