@extends('layouts.app')

@section('title', 'Pending Approvals')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="fas fa-clock text-warning mr-2"></i>Pending Approvals</h1>
        <span class="badge bg-primary">{{ $totalPending }} Pending</span>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center bg-light">
                <div class="card-body">
                    <h3 class="text-primary">{{ $totalPending }}</h3>
                    <p class="text-muted mb-0">Total Pending</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-light">
                <div class="card-body">
                    <h3 class="text-warning">{{ $urgentCount }}</h3>
                    <p class="text-muted mb-0">Urgent (≤2 steps left)</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-light">
                <div class="card-body">
                    <h3 class="text-danger">{{ $overdueCount }}</h3>
                    <p class="text-muted mb-0">Overdue (>5 days)</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-light">
                <div class="card-body">
                    <h3 class="text-success">{{ $totalPending - $urgentCount - $overdueCount }}</h3>
                    <p class="text-muted mb-0">On Track</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Pending Approvals Table -->
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col">
                    <h5 class="mb-0">Your Pending Approvals</h5>
                </div>
                <div class="col-auto">
                    <a href="{{ route('approvals.instances.index') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-list"></i> View All Instances
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($pendingApprovals->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th style="width: 50px">#</th>
                                <th>Reference</th>
                                <th>Workflow</th>
                                <th>Record Type</th>
                                <th>Initiated By</th>
                                <th>Initiated Date</th>
                                <th>Current Step</th>
                                <th>Days Pending</th>
                                <th>Status</th>
                                <th style="width: 100px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pendingApprovals as $index => $approval)
                                <tr class="@if($approval->initiated_at < now()->subDays(5)) table-danger @endif">
                                    <td>{{ $pendingApprovals->firstItem() + $index }}</td>
                                    <td>
                                            <strong>{{ $approval->record_number ?? 'N/A' }}</strong>
                                    </td>
                                    <td>
                                        @if($approval->workflow)
                                            <span class="badge bg-primary">{{ $approval->workflow->workflow_name }}</span>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </td>
                                    <td class="small">
                                        {{ $approval->record_type ?? 'N/A' }}
                                    </td>
                                    <td>
                                        {{ $approval->initiatedBy->name ?? 'System' }}
                                    </td>
                                    <td class="small text-muted">
                                        {{ $approval->initiated_at?->format('d M Y H:i') ?? 'N/A' }}
                                    </td>
                                    <td class="small">
                                        <span class="badge bg-info">
                                            Step {{ $approval->current_step ?? 1 }}
                                        </span>
                                    </td>
                                    <td class="small">
                                        @php
                                            $daysPending = now()->diffInDays($approval->initiated_at);
                                        @endphp
                                        <span class="@if($daysPending > 5) text-danger font-weight-bold @elseif($daysPending > 2) text-warning @endif">
                                            {{ $daysPending }} days
                                        </span>
                                    </td>
                                    <td>
                                        @switch($approval->status)
                                            @case('PENDING')
                                                <span class="badge bg-warning">Pending</span>
                                                @break
                                            @case('IN_PROGRESS')
                                                <span class="badge bg-info">In Progress</span>
                                                @break
                                            @case('APPROVED')
                                                <span class="badge bg-success">Approved</span>
                                                @break
                                            @case('REJECTED')
                                                <span class="badge bg-danger">Rejected</span>
                                                @break
                                            @default
                                                <span class="badge bg-dark">{{ $approval->status }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        <a href="{{ route('approvals.instances.show', $approval->instance_id) }}" 
                                           class="btn btn-sm btn-primary" title="Process Approval">
                                            <i class="fas fa-arrow-right"></i> Process
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="small text-muted">
                        Showing {{ $pendingApprovals->firstItem() }} to {{ $pendingApprovals->lastItem() }} of {{ $pendingApprovals->total() }} approvals
                    </div>
                    {{ $pendingApprovals->links('pagination::bootstrap-4') }}
                </div>
            @else
                <div class="alert alert-success text-center">
                    <i class="fas fa-check-circle"></i> No pending approvals! You're all caught up.
                </div>
            @endif
        </div>
    </div>
</div>
@endsection