@extends('patent::layouts.master')

@section('title', 'Probability Analysis Report')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('patent.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('patent.reports.index') }}">Reports</a></li>
                        <li class="breadcrumb-item active">Probability Analysis</li>
                    </ol>
                </div>
                <h4 class="page-title">Probability Analysis Report</h4>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Filters</h4>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('patent.reports.probability-analysis') }}">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="date_from" class="form-label">Date From</label>
                                <input type="date" name="date_from" id="date_from" class="form-control" value="{{ $filters['date_from'] }}">
                            </div>
                            <div class="col-md-3">
                                <label for="date_to" class="form-label">Date To</label>
                                <input type="date" name="date_to" id="date_to" class="form-control" value="{{ $filters['date_to'] }}">
                            </div>
                            <div class="col-md-3">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" id="status" class="form-select">
                                    <option value="">All Statuses</option>
                                    <option value="pending" {{ $filters['status'] == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="approved" {{ $filters['status'] == 'approved' ? 'selected' : '' }}>Approved</option>
                                    <option value="paid" {{ $filters['status'] == 'paid' ? 'selected' : '' }}>Paid</option>
                                    <option value="rejected" {{ $filters['status'] == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="country" class="form-label">Country</label>
                                <input type="text" name="country" id="country" class="form-control" value="{{ $filters['country'] }}" placeholder="Enter country">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="mdi mdi-filter me-1"></i> Apply Filters
                                </button>
                                <a href="{{ route('patent.reports.probability-analysis') }}" class="btn btn-secondary">
                                    <i class="mdi mdi-refresh me-1"></i> Clear Filters
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Probability Overview -->
    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="card widget-flat">
                <div class="card-body">
                    <div class="float-end">
                        <i class="mdi mdi-check-circle widget-icon bg-success-lighten text-success"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Approval Probability">Approval Probability</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($probabilities['approval_probability'] * 100, 1) }}%</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-success me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Likelihood of approval
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card widget-flat">
                <div class="card-body">
                    <div class="float-end">
                        <i class="mdi mdi-currency-usd widget-icon bg-info-lighten text-info"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Payment Probability">Payment Probability</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($probabilities['payment_probability'] * 100, 1) }}%</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-info me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Likelihood of payment
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card widget-flat">
                <div class="card-body">
                    <div class="float-end">
                        <i class="mdi mdi-close-circle widget-icon bg-danger-lighten text-danger"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Rejection Probability">Rejection Probability</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($probabilities['rejection_probability'] * 100, 1) }}%</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-danger me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Risk of rejection
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card widget-flat">
                <div class="card-body">
                    <div class="float-end">
                        <i class="mdi mdi-chart-line widget-icon bg-warning-lighten text-warning"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Overall Success Rate">Overall Success Rate</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($successRates['overall_success_rate'] * 100, 1) }}%</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-warning me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        General success rate
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Probability Distribution -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Transaction Outcome Probabilities</h4>
                </div>
                <div class="card-body">
                    <canvas id="probabilityChart" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Amount Probability Distribution</h4>
                </div>
                <div class="card-body">
                    <canvas id="amountDistributionChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Risk Analysis -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Risk Analysis</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">High Risk Transactions</h5>
                                <h3 class="text-danger">{{ count($riskAnalysis['high_risk_transactions']) }}</h3>
                                <p class="text-muted mb-0">Identified</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Risk Factors</h5>
                                <h3 class="text-warning">{{ count($riskAnalysis['risk_factors']) }}</h3>
                                <p class="text-muted mb-0">Detected</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Mitigation Strategies</h5>
                                <h3 class="text-info">{{ count($riskAnalysis['mitigation_strategies']) }}</h3>
                                <p class="text-muted mb-0">Available</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Risk Score</h5>
                                <h3 class="text-primary">Medium</h3>
                                <p class="text-muted mb-0">Overall Risk</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Rates by Category -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Success Rates by Country</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Country</th>
                                    <th>Success Rate</th>
                                    <th>Risk Level</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($successRates['country_success_rates']) > 0)
                                    @foreach($successRates['country_success_rates'] as $country)
                                    <tr>
                                        <td>{{ $country['country'] ?? 'N/A' }}</td>
                                        <td>{{ number_format($country['success_rate'] * 100, 1) }}%</td>
                                        <td>
                                            <span class="badge bg-{{ $country['success_rate'] > 0.8 ? 'success' : ($country['success_rate'] > 0.6 ? 'warning' : 'danger') }}">
                                                {{ $country['success_rate'] > 0.8 ? 'Low' : ($country['success_rate'] > 0.6 ? 'Medium' : 'High') }}
                                            </span>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                <tr>
                                    <td colspan="3" class="text-center text-muted">No data available</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Success Rates by Transaction Type</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Transaction Type</th>
                                    <th>Success Rate</th>
                                    <th>Risk Level</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($successRates['type_success_rates']) > 0)
                                    @foreach($successRates['type_success_rates'] as $type)
                                    <tr>
                                        <td>{{ $type['type'] ?? 'N/A' }}</td>
                                        <td>{{ number_format($type['success_rate'] * 100, 1) }}%</td>
                                        <td>
                                            <span class="badge bg-{{ $type['success_rate'] > 0.8 ? 'success' : ($type['success_rate'] > 0.6 ? 'warning' : 'danger') }}">
                                                {{ $type['success_rate'] > 0.8 ? 'Low' : ($type['success_rate'] > 0.6 ? 'Medium' : 'High') }}
                                            </span>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                <tr>
                                    <td colspan="3" class="text-center text-muted">No data available</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Failure Analysis -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Failure Analysis</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Failure Rate</h5>
                                <h3 class="text-danger">{{ number_format($failureAnalysis['failure_rate'] * 100, 1) }}%</h3>
                                <p class="text-muted mb-0">Overall failure rate</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Common Reasons</h5>
                                <h3 class="text-warning">{{ count($failureAnalysis['common_failure_reasons']) }}</h3>
                                <p class="text-muted mb-0">Identified</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Failure Patterns</h5>
                                <h3 class="text-info">{{ count($failureAnalysis['failure_patterns']) }}</h3>
                                <p class="text-muted mb-0">Detected</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Recovery Strategies</h5>
                                <h3 class="text-success">{{ count($failureAnalysis['recovery_strategies']) }}</h3>
                                <p class="text-muted mb-0">Available</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Predictive Models -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Predictive Models</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card border-primary">
                                <div class="card-body text-center">
                                    <i class="mdi mdi-chart-line text-primary" style="font-size: 48px;"></i>
                                    <h5 class="mt-3">Linear Regression</h5>
                                    <p class="text-muted">Basic trend prediction</p>
                                    <span class="badge bg-primary">Model Ready</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card border-success">
                                <div class="card-body text-center">
                                    <i class="mdi mdi-sitemap text-success" style="font-size: 48px;"></i>
                                    <h5 class="mt-3">Decision Tree</h5>
                                    <p class="text-muted">Rule-based classification</p>
                                    <span class="badge bg-success">Model Ready</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card border-info">
                                <div class="card-body text-center">
                                    <i class="mdi mdi-brain text-info" style="font-size: 48px;"></i>
                                    <h5 class="mt-3">Neural Network</h5>
                                    <p class="text-muted">Advanced pattern recognition</p>
                                    <span class="badge bg-info">Model Ready</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card border-warning">
                                <div class="card-body text-center">
                                    <i class="mdi mdi-chart-box text-warning" style="font-size: 48px;"></i>
                                    <h5 class="mt-3">Model Accuracy</h5>
                                    <p class="text-muted">Overall performance</p>
                                    <span class="badge bg-warning">{{ number_format($predictiveModels['model_accuracy'] * 100, 1) }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Probability Chart
    const probabilityCtx = document.getElementById('probabilityChart').getContext('2d');
    
    new Chart(probabilityCtx, {
        type: 'doughnut',
        data: {
            labels: ['Approved', 'Paid', 'Rejected', 'Pending'],
            datasets: [{
                data: [
                    {{ $probabilities['approval_probability'] * 100 }},
                    {{ $probabilities['payment_probability'] * 100 }},
                    {{ $probabilities['rejection_probability'] * 100 }},
                    {{ (1 - $probabilities['approval_probability'] - $probabilities['payment_probability'] - $probabilities['rejection_probability']) * 100 }}
                ],
                backgroundColor: [
                    'rgba(40, 167, 69, 0.8)',
                    'rgba(23, 162, 184, 0.8)',
                    'rgba(220, 53, 69, 0.8)',
                    'rgba(255, 193, 7, 0.8)'
                ],
                borderColor: [
                    'rgba(40, 167, 69, 1)',
                    'rgba(23, 162, 184, 1)',
                    'rgba(220, 53, 69, 1)',
                    'rgba(255, 193, 7, 1)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ': ' + context.parsed.toFixed(1) + '%';
                        }
                    }
                }
            }
        }
    });

    // Amount Distribution Chart
    const amountDistributionCtx = document.getElementById('amountDistributionChart').getContext('2d');
    
    // Generate sample distribution data
    const amountRanges = ['$0-100', '$100-500', '$500-1000', '$1000-5000', '$5000+'];
    const distributionData = [25, 35, 20, 15, 5]; // Sample percentages
    
    new Chart(amountDistributionCtx, {
        type: 'bar',
        data: {
            labels: amountRanges,
            datasets: [{
                label: 'Percentage of Transactions',
                data: distributionData,
                backgroundColor: 'rgba(54, 162, 235, 0.8)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        callback: function(value) {
                            return value + '%';
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ': ' + context.parsed.y + '%';
                        }
                    }
                }
            }
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.widget-flat {
    transition: transform 0.2s;
}

.widget-flat:hover {
    transform: translateY(-2px);
}

.widget-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.bg-primary-lighten {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.bg-success-lighten {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

.bg-info-lighten {
    background-color: rgba(23, 162, 184, 0.1) !important;
}

.bg-warning-lighten {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.bg-danger-lighten {
    background-color: rgba(220, 53, 69, 0.1) !important;
}
</style>
@endpush