@extends('adminlte::page')

@section('title', 'Depreciation Dashboard')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="font-weight-bold text-dark">Depreciation Dashboard</h1>
        @can('create depreciations')
            <a class="btn btn-primary shadow-sm" href="{{ route('depreciations.create') }}">
                <i class="fas fa-calculator mr-2"></i> Process Depreciation
            </a>
        @endcan
    </div>
@stop

@section('content')
    @if ($message = Session::get('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <i class="fas fa-check-circle mr-2"></i> {{ $message }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-lg-4 col-md-6">
            <div class="card shadow-md border-0 rounded-lg bg-gradient-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-uppercase mb-1 opacity-75">Latest Depreciation</h6>
                            <h2 class="mb-0 font-weight-bold">₦{{ number_format($totalDepreciation, 2) }}</h2>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-chart-line fa-3x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6">
            <div class="card shadow-md border-0 rounded-lg bg-gradient-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-uppercase mb-1 opacity-75">Accumulated Depreciation</h6>
                            <h2 class="mb-0 font-weight-bold">₦{{ number_format($totalAccumulated, 2) }}</h2>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-coins fa-3x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6">
            <div class="card shadow-md border-0 rounded-lg bg-gradient-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-uppercase mb-1 opacity-75">Assets Depreciated</h6>
                            <h2 class="mb-0 font-weight-bold">{{ number_format($assetsDepreciated) }}</h2>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-box fa-3x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Depreciation by Category -->
        <div class="col-lg-6">
            <div class="card shadow-md border-0 rounded-lg">
                <div class="card-header bg-light border-0">
                    <h3 class="card-title font-weight-bold text-dark">
                        <i class="fas fa-tags mr-2 text-primary"></i> Depreciation by Category
                    </h3>
                </div>
                <div class="card-body">
                    @if($depreciationsByCategory->isEmpty())
                        <p class="text-muted text-center py-4">No depreciation data available</p>
                    @else
                        <canvas id="categoryChart" height="250"></canvas>
                    @endif
                </div>
            </div>
        </div>

        <!-- Top Depreciated Assets -->
        <div class="col-lg-6">
            <div class="card shadow-md border-0 rounded-lg">
                <div class="card-header bg-light border-0">
                    <h3 class="card-title font-weight-bold text-dark">
                        <i class="fas fa-trophy mr-2 text-warning"></i> Top Depreciated Assets
                    </h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 400px;">
                        <table class="table table-hover mb-0">
                            <thead class="bg-light sticky-top">
                                <tr>
                                    <th class="border-0">#</th>
                                    <th class="border-0">Asset</th>
                                    <th class="border-0">Category</th>
                                    <th class="border-0 text-right">Total Depreciation</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topDepreciatedAssets as $index => $asset)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td class="font-weight-bold">{{ $asset->name }}</td>
                                    <td><span class="badge badge-info">{{ $asset->category->name ?? 'N/A' }}</span></td>
                                    <td class="text-right font-weight-bold text-danger">₦{{ number_format($asset->total_depreciation, 2) }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">No data available</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Depreciation Records -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-md border-0 rounded-lg">
                <div class="card-header bg-light border-0">
                    <h3 class="card-title font-weight-bold text-dark">
                        <i class="fas fa-history mr-2 text-success"></i> Recent Depreciation Records
                    </h3>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover table-striped mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="border-0">Date</th>
                                <th class="border-0">Asset</th>
                                <th class="border-0">Category</th>
                                <th class="border-0 text-right">Amount</th>
                                <th class="border-0 text-right">Book Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentDepreciations as $depreciation)
                            <tr>
                                <td>{{ $depreciation->depreciation_date->format('d M, Y') }}</td>
                                <td class="font-weight-bold">{{ $depreciation->asset->name ?? 'N/A' }}</td>
                                <td><span class="badge badge-secondary">{{ $depreciation->asset->category->name ?? 'N/A' }}</span></td>
                                <td class="text-right text-danger font-weight-bold">₦{{ number_format($depreciation->amount, 2) }}</td>
                                <td class="text-right font-weight-bold">₦{{ number_format($depreciation->book_value, 2) }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">No recent depreciation records</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
<style>
    .bg-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .bg-gradient-success {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    .bg-gradient-info {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    .opacity-75 {
        opacity: 0.75;
    }
</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
    @if(!$depreciationsByCategory->isEmpty())
    const ctx = document.getElementById('categoryChart').getContext('2d');
    const categoryChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($depreciationsByCategory->pluck('category_name')) !!},
            datasets: [{
                label: 'Depreciation Amount',
                data: {!! json_encode($depreciationsByCategory->pluck('total_amount')) !!},
                backgroundColor: [
                    '#667eea',
                    '#f5576c',
                    '#4facfe',
                    '#f093fb',
                    '#43e97b',
                    '#fa709a',
                    '#30cfd0',
                    '#a8edea',
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                }
            }
        }
    });
    @endif
</script>
@stop