@extends('layouts.appv2')

@section('content')
<div class="container">
    <div class="card p-6 bg-white rounded-lg shadow-md">
        <div class="card-header mb-4 d-flex justify-content-between align-items-center">
            <h1 class="text-2xl font-bold mb-0">Gender Report by Department</h1>
            <form id="exportForm" action="{{ route('admins.genderreportexcel') }}" method="GET" style="display: inline;">
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-file-excel"></i> Export to Excel
                </button>
            </form>
        </div>

        <div class="card-body">
            @if(count($reportData) > 0)
                @php
                    $grandTotalMale = 0;
                    $grandTotalFemale = 0;
                    $grandTotalNA = 0;
                    $grandTotal = 0;
                @endphp

                @foreach($reportData as $data)
                    @php
                        $grandTotalMale += $data['total_male'];
                        $grandTotalFemale += $data['total_female'];
                        $deptNA = $data['total_employees'] - ($data['total_male'] + $data['total_female']);
                        $grandTotalNA += $deptNA;
                        $grandTotal += $data['total_employees'];
                    @endphp

                    <!-- Department Section -->
                    <div class="department-section mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3 p-3 text-white department-header" style="border-radius: 5px;">
                            <h4 class="mb-0">{{ $data['department_name'] }}</h4>
                            <div class="d-flex gap-3">
                                <span class="badge" style="background-color: #0066cc; color: white; font-size: 1rem; padding: 8px 15px;">
                                    <i class="fas fa-male"></i> Male: <strong class="dept-male-count" data-dept="{{ $data['department_name'] }}">{{ $data['total_male'] }}</strong>
                                </span>
                                <span class="badge" style="background-color: #ff69b4; color: white; font-size: 1rem; padding: 8px 15px; margin-left: 10px;">
                                    <i class="fas fa-female"></i> Female: <strong class="dept-female-count" data-dept="{{ $data['department_name'] }}">{{ $data['total_female'] }}</strong>
                                </span>
                                <span class="badge" style="background-color: #6c757d; color: white; font-size: 1rem; padding: 8px 15px; margin-left: 10px;">
                                    <i class="fas fa-question"></i> N/A: <strong class="dept-na-count" data-dept="{{ $data['department_name'] }}">{{ $deptNA }}</strong>
                                </span>
                                <span class="badge badge-warning" style="font-size: 1rem; padding: 8px 15px; margin-left: 10px;">
                                    <i class="fas fa-users"></i> Total: <strong class="dept-total-count" data-dept="{{ $data['department_name'] }}">{{ $data['total_employees'] }}</strong>
                                </span>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-hover table-striped department-table">
                                <thead class="thead-light">
                                    <tr>
                                        <th width="10%">No.</th>
                                        <th width="15%">Employee No</th>
                                        <th width="40%">Full Name</th>
                                        <th width="15%">Gender</th>
                                        <th width="20%">Employment Type</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($data['employees'] as $index => $employee)
                                        <tr>
                                            <td class="text-center">{{ $index + 1 }}</td>
                                            <td>{{ $employee['employee_no'] }}</td>
                                            <td>{{ $employee['full_name'] }}</td>
                                            <td class="text-center gender-cell" data-employee-no="{{ $employee['employee_no'] }}" data-current-gender="{{ $employee['gender_value'] }}" data-dept="{{ $data['department_name'] }}" style="cursor: pointer;" title="Click to change gender">
                                                @if($employee['gender_value'] == 1)
                                                    <span class="badge gender-badge" style="background-color: #0066cc; color: white; font-size: 0.95rem; padding: 6px 12px;">
                                                        <i class="fas fa-male"></i> Male
                                                    </span>
                                                @elseif($employee['gender_value'] == 2)
                                                    <span class="badge gender-badge" style="background-color: #ff69b4; color: white; font-size: 0.95rem; padding: 6px 12px;">
                                                        <i class="fas fa-female"></i> Female
                                                    </span>
                                                @else
                                                    <span class="badge gender-badge badge-secondary" style="font-size: 0.95rem; padding: 6px 12px;">
                                                        <i class="fas fa-question"></i> N/A
                                                    </span>
                                                @endif
                                            </td>
                                            <td>{{ $employee['emptype_name'] }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <hr>
                @endforeach

                <!-- Overall Summary -->
                <div class="row mt-4">
                    <div class="col-md-3">
                        <div class="card text-white" style="background-color: #0066cc;">
                            <div class="card-body text-center">
                                <h5 class="card-title"><i class="fas fa-male"></i> Total Male</h5>
                                <h1 class="display-4" id="grandTotalMale">{{ $grandTotalMale }}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-white" style="background-color: #ff69b4;">
                            <div class="card-body text-center">
                                <h5 class="card-title"><i class="fas fa-female"></i> Total Female</h5>
                                <h1 class="display-4" id="grandTotalFemale">{{ $grandTotalFemale }}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-white" style="background-color: #6c757d;">
                            <div class="card-body text-center">
                                <h5 class="card-title"><i class="fas fa-question"></i> Total N/A</h5>
                                <h1 class="display-4" id="grandTotalNA">{{ $grandTotalNA }}</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> Grand Total</h5>
                                <h1 class="display-4" id="grandTotal">{{ $grandTotal }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> No data available for the gender report.
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Gender Update Modal -->
<div class="modal fade" id="genderUpdateModal" tabindex="-1" role="dialog" aria-labelledby="genderUpdateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="genderUpdateModalLabel">Update Gender</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-3">Select the new gender:</p>
                <div class="d-flex justify-content-center gap-3">
                    <button type="button" class="btn btn-lg gender-select-btn" data-gender="1" style="background-color: #0066cc; color: white; min-width: 120px;">
                        <i class="fas fa-male fa-2x mb-2"></i><br>
                        Male
                    </button>
                    <button type="button" class="btn btn-lg gender-select-btn" data-gender="2" style="background-color: #ff69b4; color: white; min-width: 120px;">
                        <i class="fas fa-female fa-2x mb-2"></i><br>
                        Female
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

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

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

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

.badge {
    font-weight: normal;
}

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

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

.gender-cell:hover {
    background-color: #fffacd !important;
}

.gender-cell:hover .gender-badge {
    transform: scale(1.05);
    transition: transform 0.2s;
}

.gender-select-btn {
    transition: transform 0.2s, box-shadow 0.2s;
}

.gender-select-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media print {
    .department-section {
        page-break-after: always;
    }
    
    button {
        display: none;
    }
    
    .gender-cell {
        cursor: default !important;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Export form handling
    const exportForm = document.getElementById('exportForm');
    if (exportForm) {
        exportForm.addEventListener('submit', function () {
            const loader = document.getElementById('page-loader');
            const btn = exportForm.querySelector('button[type="submit"]');

            if (btn) {
                btn.disabled = true;
            }

            if (loader) {
                setTimeout(function () {
                    if (loader.style.display === 'flex' || loader.style.display === '') {
                        loader.style.display = 'none';
                        if (btn) {
                            btn.disabled = false;
                        }
                    }
                }, 10000);
            }
        });
    }

    // Gender update functionality
    let currentEmployeeNo = null;
    let currentGenderCell = null;

    // Click on gender cell to open modal
    document.querySelectorAll('.gender-cell').forEach(cell => {
        cell.addEventListener('click', function() {
            currentEmployeeNo = this.dataset.employeeNo;
            currentGenderCell = this;
            $('#genderUpdateModal').modal('show');
        });
    });

    // Handle gender selection
    document.querySelectorAll('.gender-select-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const newGender = this.dataset.gender;
            const oldGender = currentGenderCell.dataset.currentGender;
            
            if (newGender === oldGender) {
                $('#genderUpdateModal').modal('hide');
                return;
            }

            updateGender(currentEmployeeNo, newGender, oldGender);
        });
    });

    function updateGender(employeeNo, newGender, oldGender) {
        // Show loading state
        const modalBody = document.querySelector('#genderUpdateModal .modal-body');
        const originalContent = modalBody.innerHTML;
        modalBody.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin fa-2x"></i><p class="mt-2">Updating...</p></div>';

        fetch('{{ route("admins.updateGender") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                employee_no: employeeNo,
                gender: newGender
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Show success message
                showNotification('Gender updated successfully! Reloading page...', 'success');
                
                // Close modal
                $('#genderUpdateModal').modal('hide');
                
                // Reload page after short delay to show the notification
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                throw new Error(data.message || 'Update failed');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            modalBody.innerHTML = originalContent;
            $('#genderUpdateModal').modal('hide');
            showNotification('Failed to update gender. Please try again.', 'error');
        });
    }

    function showNotification(message, type) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        
        const notification = document.createElement('div');
        notification.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
        notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        notification.innerHTML = `
            <i class="fas ${icon}"></i> ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }
});
</script>
@endsection