@extends('layouts.app')

@section('title', 'Declined 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-times-circle"></i>
                    Declined Assessments
                </h1>
                <div class="page-subtitle">
                    Review and manage declined 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-danger 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 Declined</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-times-circle 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="thisMonthCount">0</h4>
                            <p class="card-text">This Month</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-calendar-alt 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="pendingReviewCount">0</h4>
                            <p class="card-text">Pending Review</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-eye fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

    <!-- Declined 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>
                        Declined 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="declinedAssessmentsTable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Assessment Ref</th>
                                    <th>Taxpayer</th>
                                    <th>Taxpayer Type</th>
                                    <th>Amount</th>
                                    <th>Declined Date</th>
                                    <th>Declined By</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="detailsModal" 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 Details</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="detailsContent">
                    <!-- 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="resubmitAssessment">Resubmit Assessment</button>
            </div>
        </div>
    </div>
</div>

<!-- Resubmit Modal -->
<div class="modal fade" id="resubmitModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Resubmit Assessment</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="resubmitForm">
                    <div class="form-group">
                        <label for="resubmitReason">Reason for Resubmission:</label>
                        <textarea class="form-control" id="resubmitReason" rows="3" placeholder="Please provide a reason for resubmitting this assessment..."></textarea>
                    </div>
                    <div class="form-group">
                        <label for="resubmitNotes">Additional Notes:</label>
                        <textarea class="form-control" id="resubmitNotes" rows="2" placeholder="Any additional notes or comments..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmResubmit">Confirm Resubmission</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.page-header {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 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;
}

.declined-reason {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.declined-reason:hover {
    white-space: normal;
    overflow: visible;
    position: relative;
    z-index: 1000;
    background: white;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

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

.action-buttons .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

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

.status-pending-review {
    color: #ffc107;
    font-weight: bold;
}

.status-resubmitted {
    color: #28a745;
    font-weight: bold;
}
</style>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#declinedAssessmentsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("declined") }}',
            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: 'DeclinedDate', 
                name: 'DeclinedDate',
                render: function(data) {
                    if (!data) return 'N/A';
                    return moment(data).format('DD/MM/YYYY');
                }
            },
            { data: 'DeclinedBy', name: 'DeclinedBy' },
            { 
                data: 'DeclineReason', 
                name: 'DeclineReason',
                render: function(data) {
                    if (!data) return 'N/A';
                    return '<span class="declined-reason" title="' + data + '">' + data + '</span>';
                }
            },
            { 
                data: 'StatusName', 
                name: 'StatusName',
                render: function(data) {
                    var status = data || 'Declined';
                    var badgeClass = 'badge-danger';
                    if (status === 'Pending Review') badgeClass = 'badge-warning';
                    else if (status === 'Resubmitted') badgeClass = 'badge-success';
                    return '<span class="badge ' + badgeClass + '">' + status + '</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="viewDetails(' + data + ')" title="View Details">' +
                        '<i class="fas fa-eye"></i>' +
                        '</button>' +
                        '<button class="btn btn-success btn-sm" onclick="resubmitAssessment(' + data + ')" title="Resubmit">' +
                        '<i class="fas fa-redo"></i>' +
                        '</button>' +
                        '<button class="btn btn-info btn-sm" onclick="downloadAssessment(' + data + ')" title="Download">' +
                        '<i class="fas fa-download"></i>' +
                        '</button>' +
                        '</div>';
                }
            }
        ],
        order: [[4, 'desc']], // Sort by declined 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 thisMonth = 0;
        var pendingReview = 0;
        var resubmitted = 0;
        var currentMonth = moment().format('YYYY-MM');

        data.each(function(value, index) {
            var declinedDate = value.DeclinedDate;
            var status = value.StatusName || 'Declined';

            if (declinedDate && declinedDate.startsWith(currentMonth)) {
                thisMonth++;
            }
            if (status === 'Pending Review') {
                pendingReview++;
            }
            if (status === 'Resubmitted') {
                resubmitted++;
            }
        });

        $('#thisMonthCount').text(thisMonth);
        $('#pendingReviewCount').text(pendingReview);
        $('#resubmittedCount').text(resubmitted);
    }

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

    // View assessment details
    window.viewDetails = function(assessmentId) {
        $.ajax({
            url: '/Assessment/Details/' + assessmentId,
            type: 'GET',
            success: function(response) {
                $('#detailsContent').html(response);
                $('#detailsModal').modal('show');
            },
            error: function() {
                showAlert('error', 'Error loading assessment details');
            }
        });
    };

    // Resubmit assessment
    window.resubmitAssessment = function(assessmentId) {
        $('#resubmitModal').modal('show');
        $('#resubmitForm')[0].reset();
        
        $('#confirmResubmit').off('click').on('click', function() {
            var reason = $('#resubmitReason').val();
            var notes = $('#resubmitNotes').val();
            
            if (!reason.trim()) {
                showAlert('error', 'Please provide a reason for resubmission');
                return;
            }

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

    // Download assessment
    window.downloadAssessment = function(assessmentId) {
        window.open('/Assessment/Download/' + assessmentId, '_blank');
    };

    // 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