@extends('layouts.sale')

@section('content')
<div class="content-wrapper" id="app">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>{{ __('Income Report (Sales/Invoices)') }}</h1>
        <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Sales Report</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                @include('partials.flash')
                
                <!-- Filter Box -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-filter"></i> {{ __('Filter by Date') }}</h3>
                    </div>
                    <div class="box-body">
                        <form method="GET" action="{{ route('report.sale') }}" id="salesFilterForm">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>{{ __('Start Date') }}</label>
                                        <input type="date" name="start_date" id="start_date" value="{{ $startDate }}" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>{{ __('End Date') }}</label>
                                        <input type="date" name="end_date" id="end_date" value="{{ $endDate }}" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>&nbsp;</label><br>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fa fa-search"></i> {{ __('Filter') }}
                                        </button>
                                        <a href="{{ route('report.sale') }}" class="btn btn-default">
                                            <i class="fa fa-refresh"></i> {{ __('Reset') }}
                                        </a>
                                        <button type="button" class="btn btn-success" onclick="window.print()">
                                            <i class="fa fa-print"></i> {{ __('Print') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Income Summary Cards -->
                <div id="sales_report_content">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="info-box bg-aqua">
                                <span class="info-box-icon"><i class="fa fa-money"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">{{ __('Grand Total') }}</span>
                                    <span class="info-box-number">KES {{ number_format($grandTotal, 2) }}</span>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: 100%"></div>
                                    </div>
                                    <span class="progress-description">
                                        Total Revenue Generated
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="info-box bg-green">
                                <span class="info-box-icon"><i class="fa fa-check-circle"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">{{ __('Payment Received') }}</span>
                                    <span class="info-box-number">KES {{ number_format($totalPaid, 2) }}</span>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: {{ $grandTotal > 0 ? ($totalPaid / $grandTotal * 100) : 0 }}%"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{ $grandTotal > 0 ? number_format(($totalPaid / $grandTotal * 100), 1) : 0 }}% of Total
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="info-box bg-red">
                                <span class="info-box-icon"><i class="fa fa-exclamation-triangle"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">{{ __('Outstanding Dues') }}</span>
                                    <span class="info-box-number">KES {{ number_format($totalDues, 2) }}</span>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: {{ $grandTotal > 0 ? ($totalDues / $grandTotal * 100) : 0 }}%"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{ $grandTotal > 0 ? number_format(($totalDues / $grandTotal * 100), 1) : 0 }}% Unpaid
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sales Breakdown -->
                    <div class="box box-success">
                        <div class="box-header with-border">
                            <h3 class="box-title"><i class="fa fa-bar-chart"></i> {{ __('Sales Breakdown') }}</h3>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                    <i class="fa fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div id="list_sale_report" class="list-sale-report table-responsive">
                                <table class="table table-bordered table-striped table-hover">
                                    <thead class="bg-primary">
                                        <tr>
                                            <th><i class="fa fa-cube"></i> {{ __('Product Type') }}</th>
                                            <th class="text-center"><i class="fa fa-shopping-cart"></i> {{ __('Total Sold') }}</th>
                                            <th class="text-right"><i class="fa fa-money"></i> {{ __('Total Revenue (KES)') }}</th>
                                            <th class="text-center"><i class="fa fa-percent"></i> {{ __('% of Total') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($sales as $sale)
                                            <tr>
                                                <td><strong>{{ $sale->product_type }}</strong></td>
                                                <td class="text-center">
                                                    <span class="badge bg-blue">{{ number_format($sale->total_sold) }}</span>
                                                </td>
                                                <td class="text-right">
                                                    <strong>{{ number_format($sale->total_revenue, 2) }}</strong>
                                                </td>
                                                <td class="text-center">
                                                    <div class="progress progress-xs">
                                                        <div class="progress-bar progress-bar-success" 
                                                             style="width: {{ $grandTotal > 0 ? ($sale->total_revenue / $grandTotal * 100) : 0 }}%">
                                                        </div>
                                                    </div>
                                                    <span class="badge bg-green">
                                                        {{ $grandTotal > 0 ? number_format(($sale->total_revenue / $grandTotal * 100), 1) : 0 }}%
                                                    </span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="text-center text-muted">
                                                    <i class="fa fa-info-circle"></i> {{ __('No sales data found for the selected period.') }}
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                    @if($sales->isNotEmpty())
                                    <tfoot class="bg-gray">
                                        <tr>
                                            <th>{{ __('GRAND TOTAL') }}</th>
                                            <th class="text-center">
                                                <span class="badge bg-navy">{{ number_format($sales->sum('total_sold')) }}</span>
                                            </th>
                                            <th class="text-right">
                                                <strong style="font-size: 16px;">{{ number_format($grandTotal, 2) }}</strong>
                                            </th>
                                            <th class="text-center">
                                                <span class="badge bg-navy">100%</span>
                                            </th>
                                        </tr>
                                    </tfoot>
                                    @endif
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Stats -->
                    @if($sales->isNotEmpty())
                    <div class="row">
                        <div class="col-md-6">
                            <div class="box box-info">
                                <div class="box-header with-border">
                                    <h3 class="box-title">{{ __('Payment Status') }}</h3>
                                </div>
                                <div class="box-body">
                                    <div class="chart">
                                        <canvas id="paymentChart" style="height: 250px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="box box-warning">
                                <div class="box-header with-border">
                                    <h3 class="box-title">{{ __('Sales Distribution') }}</h3>
                                </div>
                                <div class="box-body">
                                    <div class="chart">
                                        <canvas id="salesChart" style="height: 250px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
$(document).ready(function() {
    // AJAX Form Submission
    $('#salesFilterForm').on('submit', function(e) {
        const startDate = $('#start_date').val();
        const endDate = $('#end_date').val();
        
        // Validate dates
        if (startDate > endDate) {
            e.preventDefault();
            if (typeof $.notify !== 'undefined') {
                $.notify({ message: '{{ __("Start date cannot be after end date") }}' }, { type: 'danger' });
            } else {
                alert('{{ __("Start date cannot be after end date") }}');
            }
            return false;
        }
    });

    // Create Charts if data exists
    @if($sales->isNotEmpty())
    
    // Payment Status Chart
    const paymentCtx = document.getElementById('paymentChart').getContext('2d');
    new Chart(paymentCtx, {
        type: 'doughnut',
        data: {
            labels: ['Paid', 'Dues'],
            datasets: [{
                data: [{{ $totalPaid }}, {{ $totalDues }}],
                backgroundColor: ['#00a65a', '#dd4b39'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Sales Distribution Chart
    const salesCtx = document.getElementById('salesChart').getContext('2d');
    new Chart(salesCtx, {
        type: 'bar',
        data: {
            labels: [@foreach($sales as $sale) '{{ $sale->product_type }}', @endforeach],
            datasets: [{
                label: 'Revenue (KES)',
                data: [@foreach($sales as $sale) {{ $sale->total_revenue }}, @endforeach],
                backgroundColor: '#00c0ef',
                borderColor: '#0073b7',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'KES ' + value.toLocaleString();
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
    @endif

    // Print functionality
    window.addEventListener('beforeprint', function() {
        $('.box').addClass('print-visible');
    });

    window.addEventListener('afterprint', function() {
        $('.box').removeClass('print-visible');
    });
});
</script>

<style>
@media print {
    .content-wrapper {
        margin-left: 0 !important;
    }
    
    .box-tools, .btn, .breadcrumb {
        display: none !important;
    }
    
    .info-box {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .box {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    canvas {
        display: none !important;
    }
}

.info-box {
    min-height: 90px;
    margin-bottom: 15px;
}

.info-box-number {
    font-size: 24px;
    font-weight: bold;
}

.progress-description {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}

.bg-primary {
    background-color: #3c8dbc !important;
    color: white !important;
}

.table-hover tbody tr:hover {
    background-color: #f5f5f5;
}

.badge {
    font-size: 12px;
    padding: 4px 8px;
}
</style>
@endsection