@extends('superadmin.sidebar')

@section('content')
<div class="container-fluid px-4">
    <h1 class="mt-4">Relationship Officers Analytics</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item active">Performance Dashboard</li>
    </ol>

    <!-- Filters Card -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <i class="fas fa-filter me-1"></i>
            Filter Options
        </div>
        <div class="card-body">
            <form id="filterForm">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="dateRange">Date Range</label>
                            <input type="text" class="form-control date-range-picker" id="dateRange" name="date_range">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="labFilter">Lab</label>
                            <select class="form-control select2" id="labFilter" name="lab_id">
                                <option value="">All Labs</option>
                                @foreach($labs as $lab)
                                    <option value="{{ $lab->lid }}">{{ $lab->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="routeFilter">Route</label>
                            <select class="form-control select2" id="routeFilter" name="route_id">
                                <option value="">All Routes</option>
                                @foreach($routes as $route)
                                    <option value="{{ $route->rid }}" data-lab="{{ $route->lid }}">
                                        {{ $route->routename }} ({{ $route->lab->name }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-chart-bar me-1"></i> Apply Filters
                        </button>
                        <button type="reset" class="btn btn-outline-secondary">
                            <i class="fas fa-undo me-1"></i> Reset
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Top Performers Card -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card h-100 border-success">
                <div class="card-header bg-success text-white">
                    <i class="fas fa-trophy me-1"></i>
                    Top Performing Officer
                </div>
                <div class="card-body text-center" id="topOfficerCard">
                    <div class="d-flex justify-content-center mb-3">
                        <div class="avatar-lg bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fas fa-crown fa-2x text-success"></i>
                        </div>
                    </div>
                    <h4 class="text-success" id="topOfficerName">--</h4>
                    <p class="mb-1">Total Collected Amount:</p>
                    <h3 class="text-success" id="topOfficerAmount">₹0.00</h3>
                    <div class="mt-3">
                        <span class="badge bg-success" id="topOfficerTransactionCount">0 transactions</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 border-warning">
                <div class="card-header bg-warning text-dark">
                    <i class="fas fa-exclamation-circle me-1"></i>
                    Needs Improvement
                </div>
                <div class="card-body text-center" id="lowOfficerCard">
                    <div class="d-flex justify-content-center mb-3">
                        <div class="avatar-lg bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fas fa-hand-paper fa-2x text-warning"></i>
                        </div>
                    </div>
                    <h4 class="text-warning" id="lowOfficerName">--</h4>
                    <p class="mb-1">Total Collected Amount:</p>
                    <h3 class="text-warning" id="lowOfficerAmount">₹0.00</h3>
                    <div class="mt-3">
                        <span class="badge bg-warning text-dark" id="lowOfficerTransactionCount">0 transactions</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card h-100">
                <div class="card-header bg-info text-white">
                    <i class="fas fa-chart-line me-1"></i>
                    Officers Performance
                </div>
                <div class="card-body">
                    <canvas id="officerPerformanceChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header bg-secondary text-white">
                    <i class="fas fa-map-marked-alt me-1"></i>
                    Route Distribution
                </div>
                <div class="card-body">
                    <canvas id="routeDistributionChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Transactions -->
    <div class="card mb-4">
        <div class="card-header bg-dark text-white">
            <i class="fas fa-table me-1"></i>
            Detailed Transactions by Officer
        </div>
        <div class="card-body">
            <div class="accordion" id="officerAccordion">
                <!-- Will be populated by JavaScript -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    .avatar-lg {
        width: 80px;
        height: 80px;
    }
    .accordion-button:not(.collapsed) {
        background-color: rgba(13, 110, 253, 0.1);
        color: #0d6efd;
    }
    .chart-container {
        position: relative;
        height: 300px;
    }
    .transaction-badge {
        font-size: 0.8rem;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        placeholder: "Select an option",
        allowClear: true
    });

    // Initialize Date Range Picker
    $('.date-range-picker').daterangepicker({
        opens: 'right',
        autoUpdateInput: false,
        locale: {
            format: 'YYYY-MM-DD',
            cancelLabel: 'Clear'
        }
    });

    $('.date-range-picker').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
    });

    $('.date-range-picker').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

    // Route filter depends on Lab filter
    $('#labFilter').change(function() {
        var labId = $(this).val();
        $('#routeFilter option').show();
        if (labId) {
            $('#routeFilter option').each(function() {
                if ($(this).data('lab') != labId && $(this).val() != '') {
                    $(this).hide();
                    if ($(this).prop('selected')) {
                        $(this).prop('selected', false);
                        $('#routeFilter').trigger('change');
                    }
                }
            });
        }
    });

    // Initialize charts
    const officerCtx = document.getElementById('officerPerformanceChart').getContext('2d');
    const routeCtx = document.getElementById('routeDistributionChart').getContext('2d');
    
    let officerChart = new Chart(officerCtx, {
        type: 'bar',
        data: { labels: [], datasets: [] },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' },
                title: { display: true, text: 'Transaction Amount by Officer' }
            },
            scales: {
                y: { beginAtZero: true }
            }
        }
    });

    let routeChart = new Chart(routeCtx, {
        type: 'doughnut',
        data: { labels: [], datasets: [] },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'right' },
                title: { display: true, text: 'Amount Distribution by Route' }
            }
        }
    });

    // Form submission
    $('#filterForm').submit(function(e) {
        e.preventDefault();
        loadData();
    });

    // Initial load
    loadData();

    function loadData() {
        $.ajax({
            url: "{{ route('superadmin.analytics.filter') }}",
            type: "GET",
            data: $('#filterForm').serialize(),
            success: function(response) {
                updateTopOfficers(response.topOfficers);
                updateCharts(response.officerStats, response.routeStats);
                updateOfficerDetails(response.transactions);
            },
            error: function(xhr) {
                console.error(xhr.responseText);
            }
        });
    }

    function updateTopOfficers(topOfficers) {
        if (topOfficers.highest) {
            $('#topOfficerName').text(topOfficers.highest.name);
            $('#topOfficerAmount').text('₹' + topOfficers.highest.total_amount.toLocaleString('en-IN'));
            $('#topOfficerTransactionCount').text(topOfficers.highest.transaction_count + ' transactions');
        } else {
            $('#topOfficerName').text('No data');
            $('#topOfficerAmount').text('₹0.00');
            $('#topOfficerTransactionCount').text('0 transactions');
        }

        if (topOfficers.lowest) {
            $('#lowOfficerName').text(topOfficers.lowest.name);
            $('#lowOfficerAmount').text('₹' + topOfficers.lowest.total_amount.toLocaleString('en-IN'));
            $('#lowOfficerTransactionCount').text(topOfficers.lowest.transaction_count + ' transactions');
        } else {
            $('#lowOfficerName').text('No data');
            $('#lowOfficerAmount').text('₹0.00');
            $('#lowOfficerTransactionCount').text('0 transactions');
        }
    }

    function updateCharts(officerStats, routeStats) {
        // Update officer performance chart
        officerChart.data.labels = officerStats.map(o => o.name);
        officerChart.data.datasets = [{
            label: 'Total Amount Collected',
            data: officerStats.map(o => o.total_amount),
            backgroundColor: 'rgba(54, 162, 235, 0.6)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }];
        officerChart.update();

        // Update route distribution chart
        routeChart.data.labels = routeStats.map(r => r.route_name + ' (' + r.lab_name + ')');
        routeChart.data.datasets = [{
            data: routeStats.map(r => r.total_amount),
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)'
            ],
            borderWidth: 1
        }];
        routeChart.update();
    }

    function updateOfficerDetails(transactions) {
        const accordion = $('#officerAccordion');
        accordion.empty();

        if (Object.keys(transactions).length === 0) {
            accordion.append('<div class="text-center py-4">No transaction data found for the selected filters</div>');
            return;
        }

        for (const [uid, officerTransactions] of Object.entries(transactions)) {
            const officer = officerTransactions[0].systemuser;
            const totalAmount = officerTransactions.reduce((sum, t) => sum + parseFloat(t.amount), 0);
            const centerGroups = _.groupBy(officerTransactions, 'cid');

            const accordionItem = $(`
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading${uid}">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${uid}">
                            <div class="d-flex justify-content-between w-100">
                                <span>
                                    <strong>${officer.full_name}</strong>
                                    <span class="badge bg-primary ms-2">${officerTransactions.length} transactions</span>
                                </span>
                                <span class="text-success">
                                    <strong>₹${totalAmount.toLocaleString('en-IN')}</strong>
                                </span>
                            </div>
                        </button>
                    </h2>
                    <div id="collapse${uid}" class="accordion-collapse collapse" data-bs-parent="#officerAccordion">
                        <div class="accordion-body">
                            <div class="row">
                                ${Object.entries(centerGroups).map(([cid, centerTransactions]) => {
                                    const center = centerTransactions[0].center;
                                    const centerAmount = centerTransactions.reduce((sum, t) => sum + parseFloat(t.amount), 0);
                                    return `
                                        <div class="col-md-6 mb-3">
                                            <div class="card">
                                                <div class="card-header py-2">
                                                    <h6 class="mb-0">${center.centername}</h6>
                                                </div>
                                                <div class="card-body py-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span>Transactions:</span>
                                                        <span class="badge bg-info">${centerTransactions.length}</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between mt-1">
                                                        <span>Total Amount:</span>
                                                        <span class="text-success">₹${centerAmount.toLocaleString('en-IN')}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                }).join('')}
                            </div>
                        </div>
                    </div>
                </div>
            `);

            accordion.append(accordionItem);
        }
    }
});
</script>
@endpush