@extends('adminlte::page')

@section('title', 'Reports Center')

@section('content_header')
    <h1 class="font-weight-bold text-dark">Reports Center</h1>
@stop

@section('content')
<div class="row">
    {{-- Depreciation Reports --}}
    <div class="col-md-12 mb-3">
        <h5 class="text-muted text-uppercase font-weight-bold"><i class="fas fa-chart-line mr-2"></i> Depreciation Reports</h5>
    </div>
    
    <div class="col-md-3">
        <a href="{{ route('reports.fixed_asset_schedule') }}" class="card shadow-sm border-0 hover-card text-decoration-none">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-indigo-light mb-3 mx-auto">
                    <i class="fas fa-table text-indigo fa-2x"></i>
                </div>
                <h5 class="font-weight-bold text-dark">Asset Schedule</h5>
                <p class="text-muted small">Standard movement schedules by category</p>
            </div>
        </a>
    </div>

    <div class="col-md-3">
        <a href="{{ route('reports.depreciation.asset') }}" class="card shadow-sm border-0 hover-card text-decoration-none">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-primary-light mb-3 mx-auto">
                    <i class="fas fa-cubes text-primary fa-2x"></i>
                </div>
                <h5 class="font-weight-bold text-dark">By Asset</h5>
                <p class="text-muted small">Detailed depreciation history per asset</p>
            </div>
        </a>
    </div>

    <div class="col-md-3">
        <a href="{{ route('reports.depreciation.category') }}" class="card shadow-sm border-0 hover-card text-decoration-none">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-success-light mb-3 mx-auto">
                    <i class="fas fa-tags text-success fa-2x"></i>
                </div>
                <h5 class="font-weight-bold text-dark">By Category</h5>
                <p class="text-muted small">Aggregated depreciation values by category</p>
            </div>
        </a>
    </div>

    <div class="col-md-3">
        <a href="{{ route('reports.depreciation.location') }}" class="card shadow-sm border-0 hover-card text-decoration-none">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-info-light mb-3 mx-auto">
                    <i class="fas fa-map-marker-alt text-info fa-2x"></i>
                </div>
                <h5 class="font-weight-bold text-dark">By Location</h5>
                <p class="text-muted small">Depreciation distribution across locations</p>
            </div>
        </a>
    </div>

    {{-- Operational Reports --}}
    <div class="col-md-12 my-3">
        <h5 class="text-muted text-uppercase font-weight-bold"><i class="fas fa-cogs mr-2"></i> Operational Reports</h5>
    </div>

    <div class="col-md-3">
        <a href="{{ route('reports.maintenance') }}" class="card shadow-sm border-0 hover-card text-decoration-none">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-warning-light mb-3 mx-auto">
                    <i class="fas fa-tools text-warning fa-2x"></i>
                </div>
                <h5 class="font-weight-bold text-dark">Maintenance & Repairs</h5>
                <p class="text-muted small">Service history and costs</p>
            </div>
        </a>
    </div>

    <div class="col-md-3">
        <a href="{{ route('reports.movement') }}" class="card shadow-sm border-0 hover-card text-decoration-none">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-danger-light mb-3 mx-auto">
                    <i class="fas fa-exchange-alt text-danger fa-2x"></i>
                </div>
                <h5 class="font-weight-bold text-dark">Asset Movement</h5>
                <p class="text-muted small">Transfer history and current location</p>
            </div>
        </a>
    </div>

    <div class="col-md-3">
        <a href="{{ route('reports.asset_schedule') }}" class="card shadow-sm border-0 hover-card text-decoration-none">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-indigo-light mb-3 mx-auto">
                    <i class="fas fa-clipboard-list text-indigo fa-2x"></i>
                </div>
                <h5 class="font-weight-bold text-dark">Asset Schedule</h5>
                <p class="text-muted small">Comprehensive asset listing</p>
            </div>
        </a>
    </div>

    <div class="col-md-3">
        <a href="{{ route('reports.audit_trail') }}" class="card shadow-sm border-0 hover-card text-decoration-none">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-secondary-light mb-3 mx-auto">
                    <i class="fas fa-history text-secondary fa-2x"></i>
                </div>
                <h5 class="font-weight-bold text-dark">Audit Trail</h5>
                <p class="text-muted small">System activity logs</p>
            </div>
        </a>
    </div>
</div>
@stop

@section('css')
<style>
    .hover-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }
    .icon-circle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bg-primary-light { background-color: #e0f2fe; }
    .bg-success-light { background-color: #dcfce7; }
    .bg-info-light { background-color: #cffafe; }
    .bg-warning-light { background-color: #fef9c3; }
    .bg-danger-light { background-color: #fee2e2; }
    .bg-indigo-light { background-color: #e0e7ff; }
    .bg-secondary-light { background-color: #f3f4f6; }
    .text-indigo { color: #4f46e5; }
</style>
@stop