@extends('layouts.appv2')

@section('content')

<h1 class="mb-4 gradient-text">Staff Movement Report</h1>

<div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
    <div class="card-header">
        <div class="align-items-center">
            <form id="dateRangeForm" method="GET">
                <div class="row">
                    <div class="col-sm-6">
                        <button type="button" id="filterdrop" class="btn btn-sm btn-outline-primary w-100">
                            <i class="fas fa-chevron-circle-down"></i> FILTER
                        </button>
                    </div>

                    <div class="col-sm-6">
                        <button type="submit" class="btn btn-sm btn-outline-info w-100">
                            <i class="fas fa-file-download"></i> EXPORT
                        </button>
                    </div>
                </div>

                <div id="filterFields" style="display: none;">
                    <div class="row mt-3">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <div class="form-line">
                                    Start Date:
                                    <input type="date" 
                                           class="form-control" 
                                           name="start_date" 
                                           id="start_date" 
                                           value="{{ request('start_date', now()->startOfMonth()->format('Y-m-d')) }}"
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <div class="form-line">
                                    End Date:
                                    <input type="date" 
                                           class="form-control" 
                                           name="end_date" 
                                           id="end_date" 
                                           value="{{ request('end_date', now()->endOfMonth()->format('Y-m-d')) }}"
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <div class="form-line">
                                    &nbsp;
                                    <button type="button" id="applyFilterBtn" class="btn btn-success w-100" style="margin-top: 0px;">
                                        <i class="fas fa-filter"></i> APPLY FILTER
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
            </form>
        </div>
    </div>

    <div class="card-body">
        @if(isset($reportData))
            @if(count($reportData) > 0)
            @php
                $grandTotalStart = 0;
                $grandTotalRecruitment = 0;
                $grandTotalResignation = 0;
                $grandTotalEnd = 0;
            @endphp

            @foreach($reportData as $division)
                @php
                    $grandTotalStart += $division['total_start'];
                    $grandTotalRecruitment += $division['total_recruitment'];
                    $grandTotalResignation += $division['total_resignation'];
                    $grandTotalEnd += $division['total_end'];
                @endphp

                <!-- Division Section -->
                <div class="division-section mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-3 p-3 text-white division-header" style="border-radius: 5px;">

                        <h4 class="mb-0">{{ $division['division_name'] }}</h4>
                        <div class="d-flex gap-3">
                            <span class="badge badge-light" style="font-size: 1rem; padding: 8px 15px;">
                                <i class="fas fa-users"></i> Start: <strong>{{ $division['total_start'] }}</strong>
                            </span>
                            <span class="badge badge-primary" style="font-size: 1rem; padding: 8px 15px; margin-left: 10px;">
                                <i class="fas fa-user-plus"></i> Recruitment: <strong>{{ $division['total_recruitment'] }}</strong>
                            </span>
                            <span class="badge badge-danger" style="font-size: 1rem; padding: 8px 15px; margin-left: 10px;">
                                <i class="fas fa-user-minus"></i> Resignation: <strong>{{ $division['total_resignation'] }}</strong>
                            </span>
                            <span class="badge badge-success" style="font-size: 1rem; padding: 8px 15px; margin-left: 10px;">
                                <i class="fas fa-users"></i> End: <strong>{{ $division['total_end'] }}</strong>
                            </span>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-striped division-table">
                            <thead class="thead-light">
                                <tr>
                                    <th width="10%">No.</th>
                                    <th width="30%">Job Grade</th>
                                    <th width="15%" class="text-center">Start Count</th>
                                    <th width="15%" class="text-center">Recruitment</th>
                                    <th width="15%" class="text-center">Resignation</th>
                                    <th width="15%" class="text-center">End Count</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($division['grades'] as $index => $grade)
                                    <tr>
                                        <td class="text-center">{{ $index + 1 }}</td>
                                        <td><strong>{{ $grade['grade_name'] }}</strong></td>
                                        <td class="text-center">{{ $grade['start_count'] }}</td>
                                        <td class="text-center">
                                            @if($grade['recruitment'] > 0)
                                                <span style="color: #0066cc; font-weight: bold; font-size: 1.1rem;">
                                                    {{ $grade['recruitment'] }}
                                                </span>
                                            @else
                                                {{ $grade['recruitment'] }}
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if($grade['resignation'] > 0)
                                                <span style="color: #dc3545; font-weight: bold; font-size: 1.1rem;">
                                                    {{ $grade['resignation'] }}
                                                </span>
                                            @else
                                                {{ $grade['resignation'] }}
                                            @endif
                                        </td>
                                        <td class="text-center"><strong>{{ $grade['end_count'] }}</strong></td>
                                    </tr>
                                @endforeach
                                <tr class="table-success font-weight-bold">
                                    <td colspan="2" class="text-center"><strong>TOTAL</strong></td>
                                    <td class="text-center"><strong>{{ $division['total_start'] }}</strong></td>
                                    <td class="text-center"><strong style="color: #0066cc; font-size: 1.1rem;">{{ $division['total_recruitment'] }}</strong></td>
                                    <td class="text-center"><strong style="color: #dc3545; font-size: 1.1rem;">{{ $division['total_resignation'] }}</strong></td>
                                    <td class="text-center"><strong>{{ $division['total_end'] }}</strong></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <hr>
            @endforeach

            <!-- Overall Summary -->
            <div class="row mt-4">
                <div class="col-md-3">
                    <div class="card text-white bg-secondary">
                        <div class="card-body text-center">
                            <h5 class="card-title"><i class="fas fa-users"></i> Total Start</h5>
                            <h1 class="display-4">{{ $grandTotalStart }}</h1>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-white bg-primary">
                        <div class="card-body text-center">
                            <h5 class="card-title"><i class="fas fa-user-plus"></i> Total Recruitment</h5>
                            <h1 class="display-4">{{ $grandTotalRecruitment }}</h1>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-white bg-danger">
                        <div class="card-body text-center">
                            <h5 class="card-title"><i class="fas fa-user-minus"></i> Total Resignation</h5>
                            <h1 class="display-4">{{ $grandTotalResignation }}</h1>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-white bg-success">
                        <div class="card-body text-center">
                            <h5 class="card-title"><i class="fas fa-users"></i> Total End</h5>
                            <h1 class="display-4">{{ $grandTotalEnd }}</h1>
                        </div>
                    </div>
                </div>
            </div>
            @else
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i> No data found for the selected date range.
                </div>
            @endif
        @else
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> Loading all staff movement data...
            </div>
        @endif
    </div>
</div>

<style>
.table th {
    vertical-align: middle;
    font-weight: 600;
}

.card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.division-section {
    page-break-inside: avoid;
}

.division-table tbody tr:hover {
    background-color: #f0f8ff;
}

.card-body h1 {
    font-weight: bold;
}

.badge {
    font-weight: normal;
}

.division-header {
    background-color: #676F77;
}

.bg-primary h4 {
    font-weight: 600;
}

.gap-3 {
    gap: 0.5rem;
}

@media print {
    .division-section {
        page-break-after: always;
    }
    
    button {
        display: none;
    }
}
</style>

<script>
    // Toggle filter fields visibility
    document.getElementById('filterdrop').addEventListener('click', function() {
        const filterFields = document.getElementById('filterFields');
        if (filterFields.style.display === 'none') {
            filterFields.style.display = 'block';
        } else {
            filterFields.style.display = 'none';
        }
    });

    // Apply filter button handler
    document.getElementById('applyFilterBtn').addEventListener('click', function() {
        const startDateInput = document.getElementById('start_date');
        const endDateInput = document.getElementById('end_date');
        const startDate = new Date(startDateInput.value);
        const endDate = new Date(endDateInput.value);

        if (!startDateInput.value || !endDateInput.value) {
            alert('⚠️ Please select both Start Date and End Date before filtering.');
            startDateInput.focus();
            return false;
        }

        if (startDate > endDate) {
            alert('⚠️ End Date cannot be before Start Date. Please adjust the dates.');
            endDateInput.focus();
            return false;
        }

        // Show loading state
        const loader = document.getElementById('page-loader');
        if (loader) {
            loader.style.display = 'flex';
        }

        // Redirect to the same page with date parameters
        const url = new URL(window.location.href);
        url.searchParams.set('start_date', startDateInput.value);
        url.searchParams.set('end_date', endDateInput.value);
        window.location.href = url.toString();
    });

    // Handle form submission and loading screen
    document.addEventListener('DOMContentLoaded', function() {
        const dateRangeForm = document.getElementById('dateRangeForm');
        
        if (!dateRangeForm) return;

        // Intercept form submission to handle download with automatic detection
        dateRangeForm.addEventListener('submit', function(e) {
            // Prevent default form submission
            e.preventDefault();
            
            // Validate dates first
            const startDateInput = document.getElementById('start_date');
            const endDateInput = document.getElementById('end_date');
            const startDate = new Date(startDateInput.value);
            const endDate = new Date(endDateInput.value);

            if (!startDateInput.value || !endDateInput.value) {
                alert('⚠️ Please select both Start Date and End Date before generating the report.');
                startDateInput.focus();
                return false;
            }

            if (startDate > endDate) {
                alert('⚠️ End Date cannot be before Start Date. Please adjust the dates.');
                endDateInput.focus();
                return false;
            }

            // Get loader elements
            const loader = document.getElementById('page-loader');
            const loadingText = loader ? loader.querySelector('.loading-text') : null;
            const btn = dateRangeForm.querySelector('button[type="submit"]');

            // Show loading screen
            if (loader) {
                loader.style.display = 'flex';
            }

            // Update loading message
            if (loadingText) {
                loadingText.textContent = 'Loading...';
            }

            // Disable button
            if (btn) {
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
            }

            // Build export URL with parameters
            const url = "{{ route('admins.staffmovementreportexcel') }}?start_date=" + 
                       encodeURIComponent(startDateInput.value) + 
                       "&end_date=" + encodeURIComponent(endDateInput.value);

            // Create XMLHttpRequest for automatic download detection
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';

            // Track download progress
            xhr.onprogress = function() {
                if (loadingText) {
                    loadingText.textContent = 'Downloading file...';
                }
            };

            // Handle response
            xhr.onload = function() {
                if (xhr.status === 200) {
                    const contentType = xhr.getResponseHeader('Content-Type');
                    
                    // Check if server returned an error as JSON
                    if (contentType && contentType.includes('application/json')) {
                        const reader = new FileReader();
                        reader.onload = function() {
                            try {
                                const error = JSON.parse(reader.result);
                                alert(error.error || 'An error occurred during export.');
                            } catch (e) {
                                alert('An error occurred during export. Please try again.');
                            }
                            
                            // Hide loader and reset button
                            if (loader) loader.style.display = 'none';
                            if (loadingText) loadingText.textContent = 'Loading';
                            if (btn) {
                                btn.disabled = false;
                                btn.innerHTML = '<i class="fas fa-file-download"></i> EXPORT';
                            }
                        };
                        reader.readAsText(xhr.response);
                        return;
                    }

                    // Success - download the file
                    const blob = xhr.response;
                    const downloadUrl = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = downloadUrl;

                    // Get filename from server or use default
                    const contentDisposition = xhr.getResponseHeader('Content-Disposition');
                    let filename = 'Staff_Movement_Report.xlsx';
                    
                    if (contentDisposition) {
                        const filenameMatch = contentDisposition.match(/filename="?(.+)"?/i);
                        if (filenameMatch && filenameMatch[1]) {
                            filename = filenameMatch[1];
                        }
                    }

                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();

                    // Cleanup
                    window.URL.revokeObjectURL(downloadUrl);
                    document.body.removeChild(a);

                    // Hide loader and reset button
                    if (loader) loader.style.display = 'none';
                    if (loadingText) loadingText.textContent = 'Loading';
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-file-download"></i> EXPORT';
                    }

                } else if (xhr.status === 404) {
                    alert('No data available for export. Please adjust your date range.');
                    if (loader) loader.style.display = 'none';
                    if (loadingText) loadingText.textContent = 'Loading';
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-file-download"></i> EXPORT';
                    }
                } else if (xhr.status === 500) {
                    alert('Server error during export. Please try again or contact support.');
                    if (loader) loader.style.display = 'none';
                    if (loadingText) loadingText.textContent = 'Loading';
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-file-download"></i> EXPORT';
                    }
                } else {
                    console.error('Export failed with status:', xhr.status);
                    alert('Failed to generate report. Please try again.');
                    if (loader) loader.style.display = 'none';
                    if (loadingText) loadingText.textContent = 'Loading';
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-file-download"></i> EXPORT';
                    }
                }
            };

            // Handle network errors
            xhr.onerror = function() {
                alert('Network error. Please check your connection and try again.');
                if (loader) loader.style.display = 'none';
                if (loadingText) loadingText.textContent = 'Loading';
                if (btn) {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-file-download"></i> EXPORT';
                }
            };

            // Send the request
            xhr.send();
        });
    });
</script>
@endsection