@extends('admin.layout.master')

@section('content')
<div class="container py-4">

    @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <form action="{{ route('admin.report') }}" method="GET" class="mb-4">
        <div class="input-group">
            <input type="text" name="search" class="form-control" placeholder="Search by name..."
                value="{{ request('search') }}">
            <button class="btn btn-outline-primary" type="submit">Search</button>
        </div>
    </form>

    @if($components->count())
    <div class="row">
        @foreach($components as $component)
        <div class="col-md-4 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body d-flex flex-column">
                    <!-- Title with Icon -->
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-4"
                            style="width: 20px; height: 20px;">
                            <i class="mdi mdi-file-document-box fs-4"></i>
                        </div>
                        <h5 class="card-title mb-0 ml-2">{{ ucfirst($component->name) }}</h5>

                    </div>


                    <!-- Buttons -->
                    <div class="row mb-3 ps-5">
                        <div class="col-12">
                            <a href="{{ route('admin.report.showComponent', $component->id) }}"
                                class="btn btn-sm btn-outline-primary">
                                <i class="mdi mdi-database-outline me-1"></i> Component Data & Mapping
                            </a>
                        </div>

                    </div>



                    <!-- Created Date -->
                    <p class="card-text text-muted mt-auto">
                        <i class="mdi mdi-calendar-clock me-1"></i>
                        Created on {{ $component->created_at->format('M d, Y') }}
                    </p>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="alert alert-warning d-flex align-items-center">
        <i class="mdi mdi-alert-circle-outline me-2"></i> No results found.
    </div>
    @endif






</div>
@endsection