@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="attendance-report-container">
        <!-- Filter Section -->
        <div class="filter-section">
            <div class="filter-row">
                <div class="filter-group">
                    <label for="batchSelect">Batch</label>
                    <select name="batch_id" id="batchSelect" class="form-control">
                        <option value="">All Batches</option>
                        @foreach($all_batches as $batch)
                            <option value="{{ $batch->id }}">{{ $batch->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="filter-group">
                    <label for="instituteSelect">Institute ID</label>
                    <select name="institute_id" id="instituteSelect" class="form-control">
                        <option value="">All Institute IDs</option>
                        @foreach($institutes as $institute)
                            <option value="{{ $institute }}">{{ $institute }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="filter-group">
                    <label for="fromDate">From Date</label>
                    <input type="date" name="from_date" id="fromDate" class="form-control"
                           value="{{ $default_from_date }}" max="{{ date('Y-m-d') }}">
                </div>

                <div class="filter-group">
                    <label for="toDate">To Date</label>
                    <input type="date" name="to_date" id="toDate" class="form-control"
                           value="{{ $default_to_date }}" max="{{ date('Y-m-d') }}">
                </div>

                <div class="filter-actions">
                    <button type="button" id="applyFilter" class="btn btn-primary">Apply Filter</button>
                    <button type="button" id="resetFilter" class="btn btn-secondary">Reset</button>
                </div>
            </div>
        </div>

        <!-- Instructions -->
        <div class="instruction-box">
            <strong>Instructions:</strong>
            <ul style="margin: 10px 0 0 20px; padding: 0;">
                <li>Select a specific batch or leave as "All Batches" to see all batches</li>
                <li>Apply filter to view attendance data</li>
                <li>Click "Export to Excel" to download filtered data</li>
                <li>Click "Edit" to modify attendance for a specific student</li>
            </ul>
        </div>

        <!-- Messages -->
        <div class="message-container">
            <div id="successMessage" class="alert alert-success" style="display: none;"></div>
            <div id="errorMessage" class="alert alert-error" style="display: none;"></div>
        </div>

        <!-- Results Area -->
        <div id="attendanceResult">
            <div class="initial-state">
                <h3>Attendance Report</h3>
                <p>Please select your filters and click "Apply Filter" to view attendance data.</p>
                <p>No data is displayed until filters are applied.</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.attendance-report-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}
.filter-section {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.filter-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 15px;
}
.filter-group {
    flex: 1;
    min-width: 180px;
}
.filter-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
    font-size: 13px;
}
.filter-group select,
.filter-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.3s;
    height: 40px;
    box-sizing: border-box;
}
.filter-group select:focus,
.filter-group input:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,115,170,0.1);
}
.filter-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.btn {
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.btn-primary {
    background: #0073aa;
    color: white;
}
.btn-primary:hover {
    background: #005a87;
}
.btn-success {
    background: #28a745;
    color: white;
}
.btn-success:hover {
    background: #218838;
}
.btn-warning {
    background: #ff9800;
    color: white;
}
.btn-warning:hover {
    background: #f57c00;
}
.btn-danger {
    background: #dc3545;
    color: white;
}
.btn-danger:hover {
    background: #c82333;
}
.btn-secondary {
    background: #6c757d;
    color: white;
}
.btn-secondary:hover {
    background: #5a6268;
}
.message-container {
    margin: 15px 0;
}
.alert {
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 10px;
    display: none;
}
.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.report-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 4px solid #0073aa;
}
.report-header h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 18px;
}
.report-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.stat-item {
    background: white;
    padding: 10px 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    min-width: 150px;
}
.stat-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}
.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #0073aa;
}
.attendance-table-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.table-responsive {
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}
.attendance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 1000px;
}
.attendance-table th {
    background: #0073aa;
    color: white;
    padding: 12px 15px;
    text-align: center;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    border: none;
}
.attendance-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
    border: none;
}
.attendance-table tr:hover {
    background: #f5f9ff;
}
.present-days {
    color: #28a745;
    font-weight: bold;
}
.absent-days {
    color: #dc3545;
    font-weight: bold;
}
.percentage-cell {
    font-weight: 600;
    color: #333;
}
.no-data {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
    background: #f9f9f9;
    border-radius: 5px;
    margin: 20px 0;
}
.loading-spinner {
    text-align: center;
    padding: 40px;
}
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0073aa;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.action-buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 70px;
    height: 32px;
}
.edit-input {
    width: 70px;
    text-align: center;
    padding: 5px;
    border: 2px solid #0073aa;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    background: #fff;
}
.edit-input:focus {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 0 3px rgba(255,152,0,0.2);
}
.table-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}
.action-buttons-group {
    display: flex;
    gap: 10px;
}
.edit-mode {
    background-color: #fff8e1 !important;
}
.edit-mode:hover {
    background-color: #ffecb3 !important;
}
.edit-controls {
    display: flex;
    gap: 5px;
    justify-content: center;
}
.initial-state {
    text-align: center;
    padding: 60px 20px;
    background: #f9f9f9;
    border-radius: 8px;
    color: #666;
}
.initial-state h3 {
    margin-bottom: 10px;
    color: #0073aa;
}
.initial-state p {
    margin-bottom: 20px;
}
.instruction-box {
    background: #e8f4f8;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    border-left: 4px solid #0073aa;
}
#successMessage, #errorMessage {
    animation: fadeIn 0.3s;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function(){
    // Add CSRF token to all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Set max date to today
    var today = new Date().toISOString().split('T')[0];
    $('#fromDate').attr('max', today);
    $('#toDate').attr('max', today);
    $('#toDate').attr('min', $('#fromDate').val());

    // Update min date for toDate when fromDate changes
    $('#fromDate').on('change', function(){
        $('#toDate').attr('min', $(this).val());
    });

    var editModeActive = false;
    var currentEditRow = null;
    var isDataLoaded = false;

    // Load attendance data
    function loadAttendance(){
        var batch_id = $('#batchSelect').val();
        var institute_id = $('#instituteSelect').val();
        var from_date = $('#fromDate').val();
        var to_date = $('#toDate').val();

        // Validate dates
        if(from_date && to_date && from_date > to_date) {
            showErrorMessage('From date cannot be after To date');
            return;
        }

        // If no dates selected, use defaults
        if(!from_date || !to_date) {
            var current_year = new Date().getFullYear();
            from_date = current_year + '-01-01';
            to_date = today;
            $('#fromDate').val(from_date);
            $('#toDate').val(to_date);
        }

        var data = {
            batch_id: batch_id,
            institute_id: institute_id,
            from_date: from_date,
            to_date: to_date,
            _token: $('meta[name="csrf-token"]').attr('content')
        };

        $('#attendanceResult').html('<div class="loading-spinner"><div class="spinner"></div><p>Loading attendance data...</p></div>');
        $('#successMessage, #errorMessage').hide();

        $.ajax({
            url: '/attendance/load-ajax',
            type: 'GET',
            data: data,
            success: function(response){
                $('#attendanceResult').html(response);
                editModeActive = false;
                currentEditRow = null;
                isDataLoaded = true;

                // Scroll to results
                $('html, body').animate({
                    scrollTop: $('#attendanceResult').offset().top - 100
                }, 500);
            },
            error: function(xhr, status, error){
                console.error('AJAX Error:', xhr.responseText);
                showErrorMessage('Error loading attendance data. Please try again.');
                $('#attendanceResult').html('<div class="initial-state"><h3>Error</h3><p>Failed to load data. Please try again.</p></div>');
                isDataLoaded = false;
            }
        });
    }

    // Apply filter button
    $('#applyFilter').on('click', function(e){
        e.preventDefault();
        loadAttendance();
    });

    // Reset filter button
    $('#resetFilter').on('click', function(){
        $('#batchSelect').val('');
        $('#instituteSelect').val('');
        $('#fromDate').val('{{ $default_from_date }}');
        $('#toDate').val('{{ $default_to_date }}');
        $('#attendanceResult').html('<div class="initial-state"><h3>Attendance Report</h3><p>Please select your filters and click "Apply Filter" to view attendance data.</p><p>No data is displayed until filters are applied.</p></div>');
        isDataLoaded = false;
        $('#successMessage, #errorMessage').hide();
    });

    // Exit edit mode
    function exitEditMode(){
        if(currentEditRow) {
            var $row = currentEditRow;
            var originalPresent = $row.data('original-present');
            var originalAbsent = $row.data('original-absent');
            var totalDays = parseInt($row.find('.total-days').text());

            // Restore original values
            $row.find('.present-days').html('<span class="present-days">' + originalPresent + '</span>');
            $row.find('.absent-days').html('<span class="absent-days">' + originalAbsent + '</span>');
            updatePercentages($row, originalPresent, originalAbsent, totalDays);

            // Restore edit button
            $row.find('.edit-controls').html('<button class="edit-days-btn btn-warning btn-sm" data-student-id="' + $row.data('student-id') + '">Edit</button>');
            $row.removeClass('edit-mode');

            editModeActive = false;
            currentEditRow = null;
        }
    }

    // Update percentages
    function updatePercentages($row, present, absent, totalDays){
        var attPer = totalDays > 0 ? ((present / totalDays) * 100).toFixed(2) : 0;
        var absPer = totalDays > 0 ? ((absent / totalDays) * 100).toFixed(2) : 0;
        $row.find('.att-percentage').text(attPer + '%');
        $row.find('.abs-percentage').text(absPer + '%');
    }

    // Show success message
    function showSuccessMessage(message) {
        $('#successMessage').html(message).show();
        $('#errorMessage').hide();

        // Auto hide after 5 seconds
        setTimeout(function(){
            $('#successMessage').fadeOut(1000);
        }, 5000);
    }

    // Show error message
    function showErrorMessage(message) {
        $('#errorMessage').html(message).show();
        $('#successMessage').hide();

        // Auto hide after 7 seconds
        setTimeout(function(){
            $('#errorMessage').fadeOut(1000);
        }, 7000);
    }

    // Edit button click
    $(document).on('click', '.edit-days-btn', function(e){
        e.preventDefault();
        e.stopPropagation();

        // Exit previous edit mode if any
        if(editModeActive && currentEditRow) {
            exitEditMode();
        }

        var $row = $(this).closest('tr');
        var studentId = $(this).data('student-id');
        var totalDays = parseInt($row.find('.total-days').text());

        // Get current values
        var present = 0;
        var absent = 0;

        var $presentSpan = $row.find('.present-days span');
        var $absentSpan = $row.find('.absent-days span');

        if($presentSpan.length) {
            present = parseInt($presentSpan.text()) || 0;
        } else {
            present = parseInt($row.find('.present-days').text()) || 0;
        }

        if($absentSpan.length) {
            absent = parseInt($absentSpan.text()) || 0;
        } else {
            absent = parseInt($row.find('.absent-days').text()) || 0;
        }

        // Store original values
        $row.data('original-present', present);
        $row.data('original-absent', absent);
        $row.data('student-id', studentId);

        // Replace with input fields
        $row.find('.present-days').html('<input type="number" class="edit-input edit-present" min="0" max="' + totalDays + '" value="' + present + '">');
        $row.find('.absent-days').html('<input type="number" class="edit-input edit-absent" min="0" max="' + totalDays + '" value="' + absent + '">');

        // Create edit controls
        var editControls = '<div class="edit-controls">' +
                           '<button class="save-days-btn btn-success btn-sm" data-student-id="' + studentId + '">Save</button>' +
                           '<button class="cancel-edit-btn btn-danger btn-sm">Cancel</button>' +
                           '</div>';

        $row.find('.action-buttons').html(editControls);
        $row.addClass('edit-mode');

        // Focus on present input
        $row.find('.edit-present').focus().select();

        // Auto-update absent when present changes
        $row.find('.edit-present').on('input', function(){
            var presentVal = parseInt($(this).val()) || 0;
            var absentInput = $row.find('.edit-absent');
            var absentVal = totalDays - presentVal;

            if(presentVal > totalDays) {
                presentVal = totalDays;
                $(this).val(totalDays);
            }

            if(absentVal < 0) absentVal = 0;
            absentInput.val(absentVal);

            // Update percentages
            updatePercentages($row, presentVal, absentVal, totalDays);
        });

        // Auto-update present when absent changes
        $row.find('.edit-absent').on('input', function(){
            var absentVal = parseInt($(this).val()) || 0;
            var presentInput = $row.find('.edit-present');
            var presentVal = totalDays - absentVal;

            if(absentVal > totalDays) {
                absentVal = totalDays;
                $(this).val(totalDays);
            }

            if(presentVal < 0) presentVal = 0;
            presentInput.val(presentVal);

            // Update percentages
            updatePercentages($row, presentVal, absentVal, totalDays);
        });

        // Keyboard shortcuts
        $row.find('.edit-present, .edit-absent').on('keydown', function(e){
            if(e.key === 'Enter') {
                $row.find('.save-days-btn').click();
            } else if(e.key === 'Escape') {
                $row.find('.cancel-edit-btn').click();
            }
        });

        editModeActive = true;
        currentEditRow = $row;
    });

    // Cancel edit
    $(document).on('click', '.cancel-edit-btn', function(){
        var $row = $(this).closest('tr');
        var originalPresent = $row.data('original-present');
        var originalAbsent = $row.data('original-absent');
        var totalDays = parseInt($row.find('.total-days').text());

        // Restore original values
        $row.find('.present-days').html('<span class="present-days">' + originalPresent + '</span>');
        $row.find('.absent-days').html('<span class="absent-days">' + originalAbsent + '</span>');

        // Restore percentages
        updatePercentages($row, originalPresent, originalAbsent, totalDays);

        // Restore edit button
        $row.find('.action-buttons').html('<button class="edit-days-btn btn-warning btn-sm" data-student-id="' + $row.data('student-id') + '">Edit</button>');
        $row.removeClass('edit-mode');

        editModeActive = false;
        currentEditRow = null;
    });

    // Save attendance
    $(document).on('click', '.save-days-btn', function(){
        var $row = $(this).closest('tr');
        var studentId = $(this).data('student-id');
        var studentName = $row.find('td:nth-child(2)').text().trim();
        var instituteId = $row.find('td:nth-child(3)').text().trim();
        var present = parseInt($row.find('.edit-present').val()) || 0;
        var fromDate = $('#fromDate').val();
        var toDate = $('#toDate').val();

        // Validation
        if (isNaN(present)) {
            showErrorMessage('Please enter a valid number for present days');
            $row.find('.edit-present').focus();
            return;
        }

        if (present < 0) {
            showErrorMessage('Present days cannot be negative');
            $row.find('.edit-present').focus();
            return;
        }

        // Show saving indicator
        var $saveBtn = $(this);
        var $cancelBtn = $row.find('.cancel-edit-btn');
        $saveBtn.prop('disabled', true).text('Saving...');
        $cancelBtn.prop('disabled', true);

        // Send update request
        $.ajax({
            url: '/attendance/update-final',
            type: 'POST',
            data: {
                student_id: studentId,
                student_name: studentName,
                present_days: present,
                from_date: fromDate,
                to_date: toDate,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response){
                if(response.success) {
                    // Get updated data from response
                    var presentDays = response.data.present_days;
                    var absentDays = response.data.absent_days;
                    var totalDays = response.data.total_days;

                    // Update the row with new values
                    $row.find('.present-days').html('<span class="present-days">' + presentDays + '</span>');
                    $row.find('.absent-days').html('<span class="absent-days">' + absentDays + '</span>');

                    // Update percentages
                    var attPer = response.data.att_percentage.toFixed(2);
                    var absPer = (100 - attPer).toFixed(2);
                    $row.find('.att-percentage').text(attPer + '%');
                    $row.find('.abs-percentage').text(absPer + '%');

                    // Restore edit button
                    $row.find('.action-buttons').html('<button class="edit-days-btn btn-warning btn-sm" data-student-id="' + studentId + '">Edit</button>');
                    $row.removeClass('edit-mode');

                    // Show success message
                    showSuccessMessage('✓ Attendance updated successfully for ' + studentName + ' (' + instituteId + ')');

                    editModeActive = false;
                    currentEditRow = null;
                } else {
                    showErrorMessage('✗ Error: ' + response.message);
                    $saveBtn.prop('disabled', false).text('Save');
                    $cancelBtn.prop('disabled', false);
                }
            },
            error: function(xhr, status, error){
                console.error('AJAX Error:', xhr.responseText);
                var errorMessage = 'Error saving attendance. Please try again.';

                // Try to parse error response
                try {
                    var response = JSON.parse(xhr.responseText);
                    if (response.message) {
                        errorMessage = '✗ ' + response.message;
                    } else if (response.errors) {
                        // Handle validation errors
                        errorMessage = '✗ Validation Error: ';
                        $.each(response.errors, function(key, value){
                            errorMessage += value[0] + ' ';
                        });
                    }
                } catch (e) {
                    // If can't parse, use default
                }

                showErrorMessage(errorMessage);
                $saveBtn.prop('disabled', false).text('Save');
                $cancelBtn.prop('disabled', false);
            }
        });
    });

    // Print button
    $(document).on('click','#printReport',function(){
        if(!isDataLoaded) {
            showErrorMessage('Please apply filters first to load data');
            return;
        }

        var contents = document.getElementById('printArea').innerHTML;
        var fromDate = $('#fromDate').val();
        var toDate = $('#toDate').val();
        var batch = $('#batchSelect option:selected').text();
        var instituteId = $('#instituteSelect').val();

        var filterInfo = '';
        if(batch) filterInfo += 'Batch: ' + batch + '<br>';
        else filterInfo += 'Batch: All Batches<br>';
        if(instituteId) filterInfo += 'Institute ID: ' + instituteId + '<br>';
        if(fromDate && toDate) filterInfo += 'Date Range: ' + fromDate + ' to ' + toDate;

        var w = window.open('', '', 'width=1200,height=900');
        w.document.write('<html><head><title>Attendance Report</title>');
        w.document.write('<style>');
        w.document.write('body{font-family:Arial,sans-serif;margin:20px;color:#333;}');
        w.document.write('.print-header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #0073aa;}');
        w.document.write('.print-header h2{color:#0073aa;margin-bottom:5px;}');
        w.document.write('.print-header h3{color:#333;margin-bottom:15px;}');
        w.document.write('.print-header p{color:#666;margin:5px 0;}');
        w.document.write('table{width:100%;border-collapse:collapse;margin-top:20px;border:1px solid #ddd;}');
        w.document.write('th{background:#0073aa;color:white;padding:10px;text-align:center;border:1px solid #ddd;}');
        w.document.write('td{border:1px solid #ddd;padding:8px;text-align:center;}');
        w.document.write('.present-days{color:green;font-weight:bold;}');
        w.document.write('.absent-days{color:red;font-weight:bold;}');
        w.document.write('.edit-days-btn, .cancel-edit-btn, .save-days-btn, .action-buttons{display:none;}');
        w.document.write('</style>');
        w.document.write('</head><body>');
        w.document.write('<div class="print-header">');
        w.document.write('<h2>Moraa Institute of Health Science</h2>');
        w.document.write('<h3>Attendance Summary Report</h3>');
        w.document.write('<p>' + filterInfo + '</p>');
        w.document.write('</div>');
        w.document.write(contents);
        w.document.write('</body></html>');
        w.document.close();
        w.print();
    });

    // Export Excel button
    $(document).on('click','#exportExcel',function(){
        if(!isDataLoaded) {
            showErrorMessage('Please apply filters first to load data');
            return;
        }

        var batch_id = $('#batchSelect').val();
        var institute_id = $('#instituteSelect').val();
        var from_date = $('#fromDate').val();
        var to_date = $('#toDate').val();

        var url = '/attendance/export-excel';
        url += '?batch_id=' + encodeURIComponent(batch_id);
        url += '&institute_id=' + encodeURIComponent(institute_id);
        url += '&from_date=' + encodeURIComponent(from_date);
        url += '&to_date=' + encodeURIComponent(to_date);

        window.location.href = url;
    });

    // Load data on page load if filters are set
    if($('#fromDate').val() && $('#toDate').val()) {
        setTimeout(function(){
            loadAttendance();
        }, 500);
    }
});
</script>
@endpush