@extends('layouts.master')
@section('page_title', 'Financial Health Monitoring')
@section('content')

<div class="card">
    <div class="card-header header-elements-inline">
        <h6 class="card-title">
            <i class="icon-shield-check mr-2"></i>Financial Health Monitoring
        </h6>
        <div class="header-elements">
            <div class="list-icons">
                <a class="list-icons-item" data-action="collapse"></a>
            </div>
        </div>
    </div>

    <div class="card-body">
        <div class="row">
            <!-- Overview Section -->
            <div class="col-md-12 mb-4">
                <div class="alert alert-info border-0">
                    <h6 class="alert-heading">
                        <i class="icon-info22 mr-2"></i>About Financial Health Monitoring
                    </h6>
                    <p class="mb-0">
                        This system automatically monitors financial activities to detect potential fraud, ensure billing integrity, 
                        and maintain financial transparency. Reports are generated automatically and can be sent to designated oversight personnel.
                    </p>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Quick Report Generation -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h6 class="card-title mb-0">
                            <i class="icon-file-stats mr-2"></i>Generate Financial Health Reports
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 text-center mb-3">
                                <div class="card bg-light">
                                    <div class="card-body p-3">
                                        <i class="icon-calendar-check icon-3x text-primary mb-2"></i>
                                        <h6>Weekly Report</h6>
                                        <p class="text-muted small mb-3">Last 7 days activity analysis</p>
                                        <a href="{{ route('payments.financial-health.report', 'weekly') }}" class="btn btn-primary btn-sm">
                                            <i class="icon-eye mr-1"></i>View Report
                                        </a>
                                        <a href="{{ route('payments.financial-health.download', 'weekly') }}" class="btn btn-outline-primary btn-sm ml-1">
                                            <i class="icon-download4 mr-1"></i>Download
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 text-center mb-3">
                                <div class="card bg-light">
                                    <div class="card-body p-3">
                                        <i class="icon-calendar-plus icon-3x text-info mb-2"></i>
                                        <h6>Monthly Report</h6>
                                        <p class="text-muted small mb-3">Current month comprehensive analysis</p>
                                        <a href="{{ route('payments.financial-health.report', 'monthly') }}" class="btn btn-info btn-sm">
                                            <i class="icon-eye mr-1"></i>View Report
                                        </a>
                                        <a href="{{ route('payments.financial-health.download', 'monthly') }}" class="btn btn-outline-info btn-sm ml-1">
                                            <i class="icon-download4 mr-1"></i>Download
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 text-center mb-3">
                                <div class="card bg-light">
                                    <div class="card-body p-3">
                                        <i class="icon-stats-bars icon-3x text-success mb-2"></i>
                                        <h6>Quarterly Report</h6>
                                        <p class="text-muted small mb-3">3-month trend and pattern analysis</p>
                                        <a href="{{ route('payments.financial-health.report', 'quarterly') }}" class="btn btn-success btn-sm">
                                            <i class="icon-eye mr-1"></i>View Report
                                        </a>
                                        <a href="{{ route('payments.financial-health.download', 'quarterly') }}" class="btn btn-outline-success btn-sm ml-1">
                                            <i class="icon-download4 mr-1"></i>Download
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Send Report Form -->
                        <div class="border-top pt-3 mt-3">
                            <h6 class="mb-3">
                                <i class="icon-mail5 mr-2"></i>Send Report via Email
                            </h6>
                            <form id="sendReportForm">
                                @csrf
                                <div class="row">
                                    <div class="col-md-4">
                                        <select name="type" class="form-control" required>
                                            <option value="">Select Report Type</option>
                                            <option value="weekly">Weekly Report</option>
                                            <option value="monthly">Monthly Report</option>
                                            <option value="quarterly">Quarterly Report</option>
                                        </select>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="email" name="email" class="form-control" placeholder="Email address (optional)" />
                                        <small class="form-text text-muted">Leave empty to send to configured recipients</small>
                                    </div>
                                    <div class="col-md-3">
                                        <button type="submit" class="btn btn-dark btn-block">
                                            <i class="icon-paperplane mr-1"></i>Send Report
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Monitoring Features -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h6 class="card-title mb-0">
                            <i class="icon-shield-check mr-2"></i>Monitoring Features
                        </h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                                <span>
                                    <i class="icon-cash mr-2 text-warning"></i>Cash Payment Monitoring
                                </span>
                                <span class="badge badge-success badge-pill">Active</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                                <span>
                                    <i class="icon-copy mr-2 text-info"></i>Duplicate Detection
                                </span>
                                <span class="badge badge-success badge-pill">Active</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                                <span>
                                    <i class="icon-file-check mr-2 text-primary"></i>Billing Integrity
                                </span>
                                <span class="badge badge-success badge-pill">Active</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                                <span>
                                    <i class="icon-balance mr-2 text-secondary"></i>Account Reconciliation
                                </span>
                                <span class="badge badge-success badge-pill">Active</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                                <span>
                                    <i class="icon-alert mr-2 text-danger"></i>Fraud Risk Assessment
                                </span>
                                <span class="badge badge-success badge-pill">Active</span>
                            </li>
                        </ul>

                        <div class="border-top pt-3 mt-3">
                            <h6 class="text-muted mb-2">
                                <i class="icon-clock mr-1"></i>Automated Schedule
                            </h6>
                            <div class="small">
                                <div class="d-flex justify-content-between mb-1">
                                    <span>Weekly Reports:</span>
                                    <span class="badge badge-primary badge-pill">Mon 8AM</span>
                                </div>
                                <div class="d-flex justify-content-between mb-1">
                                    <span>Monthly Reports:</span>
                                    <span class="badge badge-info badge-pill">1st @ 9AM</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>Quarterly Reports:</span>
                                    <span class="badge badge-success badge-pill">Quarterly</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Handle send report form
    $('#sendReportForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        
        submitBtn.html('<i class="icon-spinner2 spinner mr-1"></i>Sending...').prop('disabled', true);
        
        $.ajax({
            url: '{{ route("payments.financial-health.send") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    $('#sendReportForm')[0].reset();
                } else {
                    toastr.error(response.message || 'Failed to send report');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                toastr.error(response?.message || 'Failed to send report');
            },
            complete: function() {
                submitBtn.html(originalText).prop('disabled', false);
            }
        });
    });
});
</script>
@endsection