@extends('layout.app')

@section('title', 'Brand Performance Report')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="javascript:void(0);">Vehicle Maintenance</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('vms.lifespan.index') }}">Lifespan Tracker</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Brand Performance Report</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="card shadow-sm mb-4">
            <div class="card-header d-flex align-items-center">
                <h5 class="card-title mb-0">Component Durability Analysis</h5>
                <div class="ms-auto d-flex gap-2">
                    <div style="min-width: 250px;">
                        {!! Form::select('product_id', ['' => '-- All Products --'] + $products, null, [
                            'class' => 'form-control select2',
                            'id' => 'product_id',
                        ]) !!}
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle m-0" id="reportTable">
                        <thead class="table-dark text-center font-size-12">
                            <tr>
                                <th width="40">#</th>
                                <th>Brand</th>
                                <th>Product</th>
                                <th>Total Units</th>
                                <th>Avg Lifespan (KM)</th>
                                <th>Best Performance (KM)</th>
                                <th>Worst Performance (KM)</th>
                                <th>Avg Days on Vehicle</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-light">
                <p class="small text-muted mb-0">
                    <i class="ri-information-line"></i> 
                    <strong>Note:</strong> This report aggregates data from all <strong>removed</strong> components. 
                    The default sorting is by <strong>Average KM</strong> (highest to lowest).
                </p>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Re-draw table on filter change
            $("#product_id").on('change', function() {
                $('#reportTable').DataTable().draw(false);
            });

            // DataTable Initialization
            $('#reportTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: '{{ route('vms.lifespan.getBrandReportData') }}',
                    data: function(d) {
                        d.product_id = $('#product_id').val();
                    }
                },
                order: [[4, 'desc']], // Default sort by Avg KM Desc
                columns: [
                    { data: 'DT_RowIndex', name: 'id', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'brand_name', name: 'brands.brand_name' },
                    { data: 'product_name', name: 'products.product_name' },
                    { data: 'total_units', name: 'total_units', className: 'text-center' },
                    { data: 'avg_km', name: 'avg_km', className: 'text-center' },
                    { data: 'best_km', name: 'best_km', className: 'text-center' },
                    { data: 'worst_km', name: 'worst_km', className: 'text-center' },
                    { data: 'avg_days', name: 'avg_days', className: 'text-center' }
                ]
            });
        });
    </script>
@endpush