{{-- resources/views/stock_aging/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Stock Aging Analysis')

@section('content')

<!-- Content Header -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <i class="fa fa-clock-o"></i> Stock Aging Analysis
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <!-- Filters -->
    <div class="box box-solid">
        <div class="box-header with-border">
            <h3 class="box-title"><i class="fa fa-filter"></i> Filters</h3>
        </div>
        <div class="box-body">
            <form action="{{ route('stock-aging.index') }}" method="GET" id="filters_form">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{{ __('purchase.business_location') }}:</label>
                            <select name="location_id" class="form-control select2" style="width:100%">
                                <option value="">All Locations</option>
                                @foreach($locations as $id => $name)
                                    <option value="{{ $id }}" {{ request()->input('location_id') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{{ __('product.category') }}:</label>
                            <select name="category_id" class="form-control select2" style="width:100%">
                                <option value="">All Categories</option>
                                @foreach($categories as $id => $name)
                                    <option value="{{ $id }}" {{ request()->input('category_id') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{{ __('product.brand') }}:</label>
                            <select name="brand_id" class="form-control select2" style="width:100%">
                                <option value="">All Brands</option>
                                @foreach($brands as $id => $name)
                                    <option value="{{ $id }}" {{ request()->input('brand_id') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>As of Date:</label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" name="as_of_date" class="form-control datepicker" 
                                    value="{{ request()->input('as_of_date', date('d-m-Y')) }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Search Product:</label>
                            <input type="text" name="product_search" class="form-control" 
                                placeholder="Search by name or SKU..." 
                                value="{{ request()->input('product_search') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Aging Period:</label>
                            <select name="aging_category" class="form-control select2" style="width:100%">
                                <option value="">All Periods</option>
                                @foreach($categoriesList as $key => $label)
                                    <option value="{{ $key }}" {{ request()->input('aging_category') == $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-search"></i> Apply Filters
                                </button>
                                <a href="{{ route('stock-aging.index') }}" class="btn btn-default">
                                    <i class="fa fa-refresh"></i> Reset
                                </a>
                                <a href="{{ route('stock-aging.export') }}?{{ http_build_query(request()->all()) }}" 
                                    class="btn btn-success pull-right">
                                    <i class="fa fa-download"></i> Export
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Summary Cards - ORDERED: Fresh → Aging → Slow → High → Very Slow → Dead -->
    <div class="row">
        @foreach($orderedCategories as $category)
            @php $data = $reportData['summary'][$category] ?? null; @endphp
            @if($data)
                @php
                    $colors = [
                        '0-30' => '#2A3073',
                        '31-60' => '#2A3073',
                        '61-90' => '#2A3073',
                        '91-120' => '#2A3073',
                        '121-160' => '#2A3073',
                        '160+' => '#2A3073',
                    ];
                    $borderColor = $colors[$category] ?? '#6c757d';
                @endphp
                <div class="col-md-2 col-sm-4 col-xs-6">
                    <div class="small-box" style="background-color: white; color: black; ">
                        <div class="inner">
                            <p style="font-weight:bold; font-size:18px; color: {{ $borderColor }};">KSh {{ number_format($data['stock_value'], 0) }}</p>
                            <p style="font-weight:600; font-size:14px;">{{ $data['label'] }}</p>
                            <small>{{ $data['product_count'] }} products | {{ $data['percentage'] }}% of total</small>
                        </div>
                        <div class="icon">
                            <i class="fa fa-clock-o" style="color: {{ $borderColor }};"></i>
                        </div>
                        <a href="#" class="small-box-footer" onclick="filterByCategory('{{ $category }}')" style="background-color: {{ $borderColor }}; color: white;">
                            View Products <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
            @endif
        @endforeach
    </div>

    <!-- Chart -->
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Aging Distribution by Value</h3>
                </div>
                <div class="box-body">
                    <canvas id="agingChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Aging Distribution by Quantity</h3>
                </div>
                <div class="box-body">
                    <canvas id="agingQuantityChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Links to All Categories -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-link"></i> Quick Navigation</h3>
                </div>
                <div class="box-body">
                    <div class="btn-group" style="display: flex; flex-wrap: wrap; gap: 5px;">
                        <a href="{{ route('stock-aging.category', ['category' => '0-30']) }}" class="btn btn-success">
                            <i class="fa fa-check-circle"></i> Fresh (0-30)
                        </a>
                        <a href="{{ route('stock-aging.category', ['category' => '31-60']) }}" class="btn btn-info">
                            <i class="fa fa-clock-o"></i> Aging (31-60)
                        </a>
                        <a href="{{ route('stock-aging.category', ['category' => '61-90']) }}" class="btn btn-warning">
                            <i class="fa fa-hourglass-half"></i> Slow (61-90)
                        </a>
                        <a href="{{ route('stock-aging.category', ['category' => '91-120']) }}" class="btn btn-orange" style="background-color: #fd7e14; color: white;">
                            <i class="fa fa-exclamation-triangle"></i> High (91-120)
                        </a>
                        <a href="{{ route('stock-aging.category', ['category' => '121-160']) }}" class="btn" style="background-color: #e83e8c; color: white;">
                            <i class="fa fa-warning"></i> Very Slow (121-160)
                        </a>
                        <a href="{{ route('stock-aging.category', ['category' => '160+']) }}" class="btn btn-danger">
                            <i class="fa fa-skull"></i> Dead (160+)
                        </a>
                        <a href="{{ route('stock-aging.turnover') }}" class="btn btn-primary">
                            <i class="fa fa-exchange"></i> Turnover Analysis
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Detailed Aging Report</h3>
                </div>
                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="aging_table" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Location</th>
                                    <th>Aging Category</th>
                                    <th>Days</th>
                                    <th>Qty</th>
                                    <th>Unit Cost</th>
                                    <th>Stock Value</th>
                                    <th>Last Sale</th>
                                    <th>Avg Monthly Sales</th>
                                    <th>Turnover</th>
                                    <th>Recommended Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@stop

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function() {
        // Initialize datepicker
        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        });

        // Initialize DataTable
        var agingTable = $('#aging_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("stock-aging.data") }}',
                data: function(d) {
                    d.location_id = $('select[name="location_id"]').val();
                    d.category_id = $('select[name="category_id"]').val();
                    d.brand_id = $('select[name="brand_id"]').val();
                    d.aging_category = $('select[name="aging_category"]').val();
                    d.product_search = $('input[name="product_search"]').val();
                    d.as_of_date = $('input[name="as_of_date"]').val();
                }
            },
            columns: [
                { data: 'product_display', name: 'product_display' },
                { data: 'location_name', name: 'location_name' },
                { data: 'aging_badge', name: 'aging_badge', orderable: false },
                { data: 'days_badge', name: 'avg_days_in_stock' },
                { data: 'quantity', name: 'quantity' },
                { data: 'unit_cost_formatted', name: 'unit_cost' },
                { data: 'stock_value_formatted', name: 'stock_value' },
                { data: 'last_sale_date', name: 'last_sale_date' },
                { data: 'avg_monthly_sales', name: 'avg_monthly_sales' },
               
                { data: 'stock_turnover', name: 'stock_turnover' },
                { data: 'action_badge', name: 'recommended_action', orderable: false }
            ],
            order: [[3, 'desc']],
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
            dom: 'Bfrtip',
        });

        // Initialize charts with ordered data
        initializeCharts(@json($reportData['summary']), @json($orderedCategories));

        // Handle filter changes
        $('#filters_form select, #filters_form input').on('change keyup', function() {
            if (this.tagName !== 'INPUT' || this.type === 'text') {
                agingTable.ajax.reload();
            }
        });

        // Handle form submit
        $('#filters_form').on('submit', function(e) {
            e.preventDefault();
            agingTable.ajax.reload();
        });
    });

    function initializeCharts(summaryData, orderedCategories) {
        var labels = [];
        var values = [];
        var colors = [];
        var quantities = [];

        var colorMap = {
            '0-30': '#28a745',
            '31-60': '#17a2b8',
            '61-90': '#ffc107',
            '91-120': '#fd7e14',
            '121-160': '#e83e8c',
            '160+': '#dc3545'
        };

        orderedCategories.forEach(function(category) {
            var data = summaryData[category];
            if (data) {
                labels.push(data.label);
                values.push(data.stock_value);
                quantities.push(data.quantity);
                colors.push(colorMap[category] || '#6c757d');
            }
        });

        // Value Chart
        var ctx = document.getElementById('agingChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Stock Value (KSh)',
                    data: values,
                    backgroundColor: colors,
                    borderColor: colors,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return 'KSh ' + value.toLocaleString();
                            }
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return 'KSh ' + context.parsed.y.toLocaleString();
                            }
                        }
                    }
                }
            }
        });

        // Quantity Chart
        var ctx2 = document.getElementById('agingQuantityChart').getContext('2d');
        new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Stock Quantity',
                    data: quantities,
                    backgroundColor: colors,
                    borderColor: colors,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

    function filterByCategory(category) {
        $('select[name="aging_category"]').val(category).trigger('change');
        $('#aging_table').DataTable().ajax.reload();
        $('html, body').animate({
            scrollTop: $('#aging_table').offset().top - 100
        }, 500);
    }
</script>
@stop