@extends('layouts.app')

@section('title', 'Pending Assessments')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-header">
                <h1 class="page-title">
                    <i class="fas fa-clock"></i>
                    Pending Assessments
                </h1>
                <div class="page-subtitle">
                    Review and manage pending assessment requests
                </div>
            </div>
        </div>
    </div>

    @if(isset($error))
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle"></i>
                {{ $error }}
            </div>
        </div>
    </div>
    @endif

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ number_format($totalCount ?? 0) }}</h4>
                            <p class="card-text">Total Pending</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-file-invoice fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title" id="highPriorityCount">0</h4>
                            <p class="card-text">High Priority</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title" id="overdueCount">0</h4>
                            <p class="card-text">Overdue</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-calendar-times fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title" id="todayCount">0</h4>
                            <p class="card-text">Due Today</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-calendar-day fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pending Assessments Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fas fa-list"></i>
                        Pending Assessment List
                    </h5>
                    <div class="card-tools">
                        <button type="button" class="btn btn-primary btn-sm" onclick="refreshTable()">
                            <i class="fas fa-sync-alt"></i> Refresh
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="pendingAssessmentsTable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Assessment Ref</th>
                                    <th>Taxpayer</th>
                                    <th>Taxpayer Type</th>
                                    <th>Amount</th>
                                    <th>Due Date</th>
                                    <th>Days Overdue</th>
                                    <th>Priority</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Action Modal -->
<div class="modal fade" id="actionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assessment Action</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="actionContent">
                    <!-- Content will be loaded dynamically -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="confirmAction">Confirm Action</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.page-header {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
}

.page-subtitle {
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
}

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 10px 10px 0 0 !important;
}

.table th {
    background: #f8f9fa;
    border-top: none;
    font-weight: 600;
    color: #495057;
}

.priority-high {
    background-color: #ffe6e6 !important;
}

.priority-medium {
    background-color: #fff3cd !important;
}

.priority-low {
    background-color: #d1ecf1 !important;
}

.overdue {
    color: #dc3545;
    font-weight: bold;
}

.due-today {
    color: #ffc107;
    font-weight: bold;
}

.action-buttons {
    display: flex;
    gap: 0.25rem;
}

.action-buttons .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}
</style>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#pendingAssessmentsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("pending") }}',
            type: 'GET',
            data: function(d) {
                d.start = d.start;
                d.length = d.length;
                d.search = d.search.value;
                d.order = d.order[0] ? d.order[0].column : 0;
                d.dir = d.order[0] ? d.order[0].dir : 'desc';
            }
        },
        columns: [
            { data: 'AssessmentRefNo', name: 'AssessmentRefNo' },
            { data: 'TaxpayerName', name: 'TaxpayerName' },
            { data: 'TaxpayerTypeName', name: 'TaxpayerTypeName' },
            { 
                data: 'AssessmentAmount', 
                name: 'AssessmentAmount',
                render: function(data) {
                    return '₦' + parseFloat(data || 0).toLocaleString('en-NG', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }
            },
            { 
                data: 'SettlementDueDate', 
                name: 'SettlementDueDate',
                render: function(data) {
                    if (!data) return 'N/A';
                    return moment(data).format('DD/MM/YYYY');
                }
            },
            { 
                data: 'DaysOverdue', 
                name: 'DaysOverdue',
                render: function(data, type, row) {
                    var days = parseInt(data || 0);
                    if (days > 0) {
                        return '<span class="overdue">' + days + ' days</span>';
                    } else if (days === 0) {
                        return '<span class="due-today">Due today</span>';
                    } else {
                        return Math.abs(days) + ' days remaining';
                    }
                }
            },
            { 
                data: 'Priority', 
                name: 'Priority',
                render: function(data) {
                    var priority = data || 'Low';
                    var badgeClass = 'badge-secondary';
                    if (priority === 'High') badgeClass = 'badge-danger';
                    else if (priority === 'Medium') badgeClass = 'badge-warning';
                    return '<span class="badge ' + badgeClass + '">' + priority + '</span>';
                }
            },
            { 
                data: 'StatusName', 
                name: 'StatusName',
                render: function(data) {
                    return '<span class="badge badge-warning">' + (data || 'Pending') + '</span>';
                }
            },
            { 
                data: 'AssessmentID', 
                name: 'AssessmentID',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return '<div class="action-buttons">' +
                        '<button class="btn btn-primary btn-sm" onclick="viewAssessment(' + data + ')" title="View Details">' +
                        '<i class="fas fa-eye"></i>' +
                        '</button>' +
                        '<button class="btn btn-success btn-sm" onclick="approveAssessment(' + data + ')" title="Approve">' +
                        '<i class="fas fa-check"></i>' +
                        '</button>' +
                        '<button class="btn btn-danger btn-sm" onclick="declineAssessment(' + data + ')" title="Decline">' +
                        '<i class="fas fa-times"></i>' +
                        '</button>' +
                        '</div>';
                }
            }
        ],
        order: [[4, 'asc']], // Sort by due date
        pageLength: 25,
        responsive: true,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        drawCallback: function(settings) {
            updateStatistics();
        }
    });

    // Update statistics based on loaded data
    function updateStatistics() {
        var data = table.rows({search: 'applied'}).data();
        var highPriority = 0;
        var overdue = 0;
        var today = 0;

        data.each(function(value, index) {
            var priority = value.Priority || 'Low';
            var daysOverdue = parseInt(value.DaysOverdue || 0);

            if (priority === 'High') highPriority++;
            if (daysOverdue > 0) overdue++;
            if (daysOverdue === 0) today++;
        });

        $('#highPriorityCount').text(highPriority);
        $('#overdueCount').text(overdue);
        $('#todayCount').text(today);
    }

    // Refresh table
    window.refreshTable = function() {
        table.ajax.reload();
    };

    // View assessment details
    window.viewAssessment = function(assessmentId) {
        window.location.href = '/Assessment/Edit/' + assessmentId;
    };

    // Approve assessment
    window.approveAssessment = function(assessmentId) {
        if (confirm('Are you sure you want to approve this assessment?')) {
            $.ajax({
                url: '/Assessment/Approve/' + assessmentId,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        showAlert('success', 'Assessment approved successfully');
                        table.ajax.reload();
                    } else {
                        showAlert('error', response.message || 'Error approving assessment');
                    }
                },
                error: function() {
                    showAlert('error', 'Error approving assessment');
                }
            });
        }
    };

    // Decline assessment
    window.declineAssessment = function(assessmentId) {
        $('#actionModal').modal('show');
        $('#actionContent').html(`
            <div class="form-group">
                <label for="declineReason">Reason for Decline:</label>
                <textarea class="form-control" id="declineReason" rows="3" placeholder="Please provide a reason for declining this assessment..."></textarea>
            </div>
        `);
        
        $('#confirmAction').off('click').on('click', function() {
            var reason = $('#declineReason').val();
            if (!reason.trim()) {
                showAlert('error', 'Please provide a reason for declining');
                return;
            }

            $.ajax({
                url: '/Assessment/Decline/' + assessmentId,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    reason: reason
                },
                success: function(response) {
                    if (response.success) {
                        showAlert('success', 'Assessment declined successfully');
                        $('#actionModal').modal('hide');
                        table.ajax.reload();
                    } else {
                        showAlert('error', response.message || 'Error declining assessment');
                    }
                },
                error: function() {
                    showAlert('error', 'Error declining assessment');
                }
            });
        });
    };

    // Auto-refresh every 5 minutes
    setInterval(function() {
        table.ajax.reload(null, false);
    }, 300000);
});

function showAlert(type, message) {
    var alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    var alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'}"></i>
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;
    
    $('.container-fluid').prepend(alertHtml);
    
    // Auto-dismiss after 5 seconds
    setTimeout(function() {
        $('.alert').fadeOut();
    }, 5000);
}
</script>
@endsection