@extends('adminlte::page')

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

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

@section('content')
    @if($assetsByCategory->isEmpty())
        <div class="card shadow-md border-0 rounded-lg">
            <div class="card-body text-center py-5">
                <i class="fas fa-info-circle fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No Assets Due for Depreciation</h4>
                <p class="text-muted">There are currently no assets that have reached their next depreciation date.</p>
                <a href="{{ route('depreciations.dashboard') }}" class="btn btn-primary mt-3">
                    <i class="fas fa-arrow-left mr-2"></i> Back to Dashboard
                </a>
            </div>
        </div>
    @else
        <div class="alert alert-info shadow-sm">
            <i class="fas fa-info-circle mr-2"></i>
            <strong>{{ $assetsByCategory->sum('count') }}</strong> assets are due for depreciation across <strong>{{ $assetsByCategory->count() }}</strong> categories.
        </div>

        @foreach($assetsByCategory as $categoryData)
        <div class="card shadow-md border-0 rounded-lg mb-4">
            <div class="card-header bg-gradient-primary text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="mb-0 font-weight-bold">
                            <i class="fas fa-tag mr-2"></i> {{ $categoryData['category']->name }}
                        </h4>
                        <small class="opacity-75">{{ $categoryData['count'] }} asset(s) due for depreciation</small>
                    </div>
                    <div class="d-flex text-right">
                        <div class="mr-4 pr-4 border-right border-light">
                            <h4 class="mb-0 font-weight-bold">₦{{ number_format($categoryData['total_value'], 2) }}</h4>
                            <small class="opacity-75">Total Value</small>
                        </div>
                        <div>
                            <h4 class="mb-0 font-weight-bold text-warning">₦{{ number_format($categoryData['total_depreciable_amount'], 2) }}</h4>
                            <small class="opacity-75">Depreciation Amount</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Category:</strong> {{ $categoryData['category']->name }}<br>
                            <strong>Total Assets:</strong> {{ $categoryData['count'] }}
                            
                        </div>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="{{ route('depreciations.category.assets', $categoryData['category']->id) }}" 
                           class="btn btn-info shadow-sm">
                            <i class="fas fa-eye mr-1"></i> View Items
                        </a>
                        <form action="{{ route('depreciations.category.process', $categoryData['category']->id) }}" 
                              method="POST" 
                              class="process-category-form"
                              data-category-name="{{ $categoryData['category']->name }}"
                              data-count="{{ $categoryData['count'] }}"
                              style="display: inline;">
                            @csrf
                            <button type="button" class="btn btn-success shadow-sm btn-process-category">
                                <i class="fas fa-cogs mr-1"></i> Process Depreciation
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endforeach

        <div class="text-center mt-4">
            <a href="{{ route('depreciations.dashboard') }}" class="btn btn-secondary shadow-sm">
                <i class="fas fa-arrow-left mr-1"></i> Back to Dashboard
            </a>
        </div>
    @endif
@stop

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

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // ── Session Notifications ────────────────────────────────────────────────
    @if(Session::has('success'))
        Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: `{!! Session::get('success') !!}`,
            confirmButtonColor: '#10b981',
        });
    @endif

    @if(Session::has('error'))
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: `{!! Session::get('error') !!}`,
            confirmButtonColor: '#e3342f',
        });
    @endif

    // ── Process Depreciation Confirmation ────────────────────────────────────
    document.querySelectorAll('.btn-process-category').forEach(function(button) {
        button.addEventListener('click', function() {
            const form = this.closest('.process-category-form');
            const categoryName = form.dataset.categoryName;
            const count = form.dataset.count;

            Swal.fire({
                title: 'Process Depreciation?',
                html: `<p>Are you sure you want to process depreciation for <strong>${count} asset(s)</strong> in:</p>
                       <p class="font-weight-bold text-primary" style="font-size:1.1rem;">${categoryName}</p>
                       <p class="text-muted" style="font-size:0.82rem;">This action <strong>cannot be undone</strong>.</p>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-cogs mr-1"></i> Yes, Process',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while the depreciation is being processed.',
                        icon: 'info',
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    form.submit();
                }
            });
        });
    });
});
</script>
@stop