@extends('garage.layouts.app')

@section('title', $title ?? 'Report')

@push('styles')
<style>
    .ar-hero{
        background: rgba(var(--bs-primary-rgb), .06);
        border: 1px solid rgba(var(--bs-primary-rgb), .22);
        border-radius: 14px;
        padding: .9rem 1rem;
    }
    .ar-kpi{
        border:1px solid #e9edf5;
        border-radius:12px;
        background:#fff;
        box-shadow: 0 6px 18px rgba(16,24,40,.05);
        position:relative;
        overflow:hidden;
    }
    .ar-kpi::before{
        content:"";
        position:absolute; left:0; top:0; bottom:0;
        width:4px;
        background: var(--bs-primary);
    }
    .ar-kpi.danger::before{ background: var(--bs-primary); }
    .ar-num{ font-weight:800; font-variant-numeric: tabular-nums; }
    .ar-wrap{
        border:1px solid #e9edf5;
        border-radius:12px;
        overflow:hidden;
        background:#fff;
        box-shadow: 0 10px 28px rgba(16,24,40,.06);
    }
    .ar-head{
        background: #fff;
        border-bottom: 1px solid #e9edf5;
    }
    .ar-table thead th{
        font-size:.76rem;
        text-transform:uppercase;
        letter-spacing:.02em;
        color:#475467;
        background:#f8fafc;
        border-bottom:1px solid #e9edf5;
        white-space:nowrap;
    }
    .ar-table tbody tr:hover{ background:#f8fbff; }
    .ar-mono{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
</style>
@endpush

@section('content')
<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="ar-hero d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h1 class="h5 mb-0">
                @if(!empty($icon))<i class="bi {{ $icon }} me-2 text-primary"></i>@endif
                {{ $title ?? 'Report' }}
            </h1>
            @if(!empty($subtitle))
                <div class="text-muted small">{{ $subtitle }}</div>
            @endif
        </div>
        <a class="btn btn-sm btn-outline-secondary" href="{{ route('garage.reports.index') }}">Back to reports</a>
    </div>

    @if(!empty($filters))
        <form method="GET" class="row g-2 mb-3">
            @foreach(($filters ?? []) as $f)
                @php
                    $type = $f['type'] ?? 'text';
                    $name = $f['name'] ?? '';
                    $label = $f['label'] ?? $name;
                    $value = $f['value'] ?? '';
                    $options = $f['options'] ?? [];
                    $col = $f['col'] ?? 'col-6 col-lg-2';
                @endphp
                <div class="{{ $col }}">
                    <label class="form-label small text-muted mb-1">{{ $label }}</label>
                    @if($type === 'select')
                        <select class="form-select form-select-sm" name="{{ $name }}">
                            @foreach($options as $opt)
                                <option value="{{ $opt['value'] }}" @selected((string)$opt['value'] === (string)$value)>{{ $opt['label'] }}</option>
                            @endforeach
                        </select>
                    @else
                        <input type="{{ $type }}" class="form-control form-control-sm" name="{{ $name }}" value="{{ $value }}">
                    @endif
                </div>
            @endforeach
            <div class="col-12 col-lg-2 d-grid align-items-end">
                <button class="btn btn-sm btn-primary mt-4">Filter</button>
            </div>
        </form>
    @endif

    @if(!empty($kpis))
        <div class="row g-2 mb-3">
            @foreach(($kpis ?? []) as $k)
                <div class="col-6 col-lg-3">
                    <div class="ar-kpi {{ !empty($k['danger']) ? 'danger' : '' }}">
                        <div class="p-2 ps-3">
                            <div class="small text-muted">{{ $k['label'] }}</div>
                            <div class="ar-num">{{ $k['value'] }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    <div class="ar-wrap">
        <div class="p-2 ar-head d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="fw-semibold">{{ $tableTitle ?? 'Details' }}</div>
            @if(!empty($tableHint))
                <div class="small text-muted">{{ $tableHint }}</div>
            @endif
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 align-middle ar-table">
                <thead>
                <tr>
                    @foreach(($columns ?? []) as $c)
                        <th class="{{ ($c['align'] ?? '') === 'end' ? 'text-end' : '' }}">{{ $c['label'] }}</th>
                    @endforeach
                </tr>
                </thead>
                <tbody>
                @forelse(($rows ?? []) as $r)
                    <tr>
                        @foreach(($columns ?? []) as $c)
                            @php $k = $c['key']; $align = $c['align'] ?? ''; @endphp
                            <td class="{{ $align === 'end' ? 'text-end ar-mono' : '' }}">
                                {!! $r[$k] ?? '' !!}
                            </td>
                        @endforeach
                    </tr>
                @empty
                    <tr><td colspan="{{ count($columns ?? []) }}" class="text-center text-muted py-4">No records found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection