@if(isset($useRestrictedLayout) && $useRestrictedLayout)
    @extends('patent::layouts.restricted')
@else
    @extends('patent::layouts.master')
@endif

@section('title', 'Patent Transaction Summary 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">Summary Report</li>
                    </ol>
                </div>
                <h4 class="page-title">Patent Transaction Summary 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.summary') }}">
                        <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>
                                    <option value="cancelled" {{ $filters['status'] == 'cancelled' ? 'selected' : '' }}>Cancelled</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.summary') }}" class="btn btn-secondary">
                                    <i class="mdi mdi-refresh me-1"></i> Clear Filters
                                </a>
                                <a href="{{ route('patent.reports.export-pdf', ['summary']) }}?{{ http_build_query($filters) }}" class="btn btn-success">
                                    <i class="mdi mdi-file-pdf me-1"></i> Export PDF
                                </a>
                                <a href="{{ route('patent.reports.export-csv', ['summary']) }}?{{ http_build_query($filters) }}" class="btn btn-info">
                                    <i class="mdi mdi-file-excel me-1"></i> Export CSV
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Key Statistics -->
    <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-receipt widget-icon bg-primary-lighten text-primary"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Total Transactions">Total Transactions</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($statistics['total_transactions']) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-primary me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        All time transactions
                    </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-success-lighten text-success"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Total Amount">Total Amount (USD)</h5>
                    <h3 class="mt-3 mb-3">${{ number_format($statistics['total_amount_usd'], 2) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-success me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Total 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-line widget-icon bg-info-lighten text-info"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Average Transaction">Average Transaction</h5>
                    <h3 class="mt-3 mb-3">${{ number_format($statistics['average_transaction'], 2) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-info 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-file-document-outline widget-icon bg-warning-lighten text-warning"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Total Patents">Total Patents</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($statistics['total_patents']) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-warning me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Patents with transactions
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Distribution -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Status Distribution</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-warning">{{ number_format($statistics['pending_transactions']) }}</h3>
                                <p class="text-muted mb-0">Pending</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-success">{{ number_format($statistics['approved_transactions']) }}</h3>
                                <p class="text-muted mb-0">Approved</p>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-info">{{ number_format($statistics['paid_transactions']) }}</h3>
                                <p class="text-muted mb-0">Paid</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-danger">{{ number_format($statistics['rejected_transactions']) }}</h3>
                                <p class="text-muted mb-0">Rejected</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Geographic Distribution</h4>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <h3 class="text-primary">{{ number_format($statistics['unique_countries']) }}</h3>
                        <p class="text-muted mb-0">Countries</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Data Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Monthly Transaction Trends</h4>
                </div>
                <div class="card-body">
                    <canvas id="monthlyChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Countries -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Top Countries by Transaction Count</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Country</th>
                                    <th>Count</th>
                                    <th>Total Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($topCountries as $country)
                                <tr>
                                    <td>{{ $country->country ?? 'N/A' }}</td>
                                    <td>{{ number_format($country->count) }}</td>
                                    <td>${{ number_format($country->total_amount, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Transaction Types</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Count</th>
                                    <th>Total Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($transactionTypes as $type)
                                <tr>
                                    <td>{{ $type->transactionType->name ?? 'N/A' }}</td>
                                    <td>{{ number_format($type->count) }}</td>
                                    <td>${{ number_format($type->total_amount, 2) }}</td>
                                </tr>
                                @endforeach
                            </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() {
    // Monthly Chart
    const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
    const monthlyData = @json($monthlyData);
    
    new Chart(monthlyCtx, {
        type: 'line',
        data: {
            labels: monthlyData.map(item => item.month),
            datasets: [{
                label: 'Transaction Count',
                data: monthlyData.map(item => item.count),
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1
            }, {
                label: 'Total Amount (USD)',
                data: monthlyData.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,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            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