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

@section('title', 'Transaction 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">Transaction Analysis</li>
                    </ol>
                </div>
                <h4 class="page-title">Transaction 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.transaction-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.transaction-analysis') }}" class="btn btn-secondary">
                                    <i class="mdi mdi-refresh me-1"></i> Clear Filters
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistical Analysis -->
    <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-chart-line widget-icon bg-primary-lighten text-primary"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Average Amount">Average Amount</h5>
                    <h3 class="mt-3 mb-3">${{ number_format($analysis['average_amount'], 2) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-primary me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Mean transaction value
                    </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-box widget-icon bg-success-lighten text-success"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Median Amount">Median Amount</h5>
                    <h3 class="mt-3 mb-3">${{ number_format($analysis['median_amount'], 2) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-success me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Middle value
                    </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-scatter-plot widget-icon bg-info-lighten text-info"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Standard Deviation">Standard Deviation</h5>
                    <h3 class="mt-3 mb-3">${{ number_format($analysis['standard_deviation'], 2) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-info me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Data spread
                    </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-timeline-variant widget-icon bg-warning-lighten text-warning"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Coefficient of Variation">Coefficient of Variation</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($analysis['coefficient_of_variation'], 2) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-warning me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Relative variability
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Distribution Analysis -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Distribution Statistics</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="text-center">
                                <h5 class="text-muted">Skewness</h5>
                                <h4 class="text-primary">{{ number_format($analysis['skewness'], 3) }}</h4>
                                <p class="text-muted mb-0">{{ $analysis['skewness'] > 0 ? 'Right-skewed' : ($analysis['skewness'] < 0 ? 'Left-skewed' : 'Symmetric') }}</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h5 class="text-muted">Kurtosis</h5>
                                <h4 class="text-success">{{ number_format($analysis['kurtosis'], 3) }}</h4>
                                <p class="text-muted mb-0">{{ $analysis['kurtosis'] > 0 ? 'Heavy-tailed' : ($analysis['kurtosis'] < 0 ? 'Light-tailed' : 'Normal') }}</p>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-4">
                            <div class="text-center">
                                <h5 class="text-muted">Q1</h5>
                                <h4 class="text-info">${{ number_format($analysis['quartiles']['q1'], 2) }}</h4>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <h5 class="text-muted">Q2 (Median)</h5>
                                <h4 class="text-warning">${{ number_format($analysis['quartiles']['q2'], 2) }}</h4>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <h5 class="text-muted">Q3</h5>
                                <h4 class="text-danger">${{ number_format($analysis['quartiles']['q3'], 2) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outliers Detection</h4>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <h3 class="text-warning">{{ $analysis['outliers']->count() }}</h3>
                        <p class="text-muted mb-0">Outliers Detected</p>
                    </div>
                    @if($analysis['outliers']->count() > 0)
                    <div class="mt-3">
                        <h6>Outlier Values:</h6>
                        <div class="row">
                            @foreach($analysis['outliers']->take(5) as $outlier)
                            <div class="col-6">
                                <span class="badge bg-warning">${{ number_format($outlier, 2) }}</span>
                            </div>
                            @endforeach
                        </div>
                        @if($analysis['outliers']->count() > 5)
                        <small class="text-muted">... and {{ $analysis['outliers']->count() - 5 }} more</small>
                        @endif
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Trends Analysis -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Transaction Trends</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Growth Rate</h5>
                                <h4 class="text-{{ $trends['growth_rate'] > 0 ? 'success' : ($trends['growth_rate'] < 0 ? 'danger' : 'info') }}">
                                    {{ number_format($trends['growth_rate'], 2) }}%
                                </h4>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Trend Direction</h5>
                                <h4 class="text-{{ $trends['trend_direction'] == 'increasing' ? 'success' : ($trends['trend_direction'] == 'decreasing' ? 'danger' : 'info') }}">
                                    {{ ucfirst($trends['trend_direction']) }}
                                </h4>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <canvas id="trendsChart" height="100"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Seasonality Analysis -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Seasonality Analysis</h4>
                </div>
                <div class="card-body">
                    <canvas id="seasonalityChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Patterns Analysis -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Transaction Patterns</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Pattern Type</th>
                                    <th>Status</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Day of Week</td>
                                    <td><span class="badge bg-info">Analyzed</span></td>
                                    <td>Peak activity patterns</td>
                                </tr>
                                <tr>
                                    <td>Hour Pattern</td>
                                    <td><span class="badge bg-info">Analyzed</span></td>
                                    <td>Time-based distribution</td>
                                </tr>
                                <tr>
                                    <td>Month Pattern</td>
                                    <td><span class="badge bg-info">Analyzed</span></td>
                                    <td>Seasonal variations</td>
                                </tr>
                                <tr>
                                    <td>Payment Method</td>
                                    <td><span class="badge bg-info">Analyzed</span></td>
                                    <td>Method preferences</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Correlation Analysis</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Variables</th>
                                    <th>Correlation</th>
                                    <th>Strength</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Amount vs Time</td>
                                    <td>{{ number_format($correlations['amount_vs_time'], 3) }}</td>
                                    <td>
                                        <span class="badge bg-{{ abs($correlations['amount_vs_time']) > 0.7 ? 'success' : (abs($correlations['amount_vs_time']) > 0.3 ? 'warning' : 'secondary') }}">
                                            {{ abs($correlations['amount_vs_time']) > 0.7 ? 'Strong' : (abs($correlations['amount_vs_time']) > 0.3 ? 'Moderate' : 'Weak') }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Amount vs Country</td>
                                    <td>N/A</td>
                                    <td><span class="badge bg-info">Analyzed</span></td>
                                </tr>
                                <tr>
                                    <td>Amount vs Type</td>
                                    <td>N/A</td>
                                    <td><span class="badge bg-info">Analyzed</span></td>
                                </tr>
                                <tr>
                                    <td>Status vs Amount</td>
                                    <td>N/A</td>
                                    <td><span class="badge bg-info">Analyzed</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Trends Chart
    const trendsCtx = document.getElementById('trendsChart').getContext('2d');
    const trendsData = @json($trends['monthly_data']);
    
    new Chart(trendsCtx, {
        type: 'line',
        data: {
            labels: trendsData.map(item => item.month),
            datasets: [{
                label: 'Transaction Count',
                data: trendsData.map(item => item.count),
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1
            }, {
                label: 'Total Amount (USD)',
                data: trendsData.map(item => item.total_amount),
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                tension: 0.1,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: {
                        drawOnChartArea: false,
                    },
                }
            }
        }
    });

    // Seasonality Chart
    const seasonalityCtx = document.getElementById('seasonalityChart').getContext('2d');
    const seasonalityData = @json($seasonality['monthly_seasonality']);
    
    new Chart(seasonalityCtx, {
        type: 'bar',
        data: {
            labels: seasonalityData.map(item => {
                const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                return monthNames[item.month - 1];
            }),
            datasets: [{
                label: 'Transaction Count',
                data: seasonalityData.map(item => item.count),
                backgroundColor: 'rgba(54, 162, 235, 0.8)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }, {
                label: 'Total Amount (USD)',
                data: seasonalityData.map(item => item.total_amount),
                backgroundColor: 'rgba(255, 206, 86, 0.8)',
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 1,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: {
                        drawOnChartArea: false,
                    },
                }
            }
        }
    });
});
</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;
}
</style>
@endpush