{{-- resources/views/approvals/instances/index.blade.php --}}

@extends('layouts.app')

@section('title', 'Approval Instances')

@section('page-header')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">
        <i class="fas fa-route me-2 text-gray-500"></i>Approval Instances
    </h1>
    <a href="{{ route('approvals.pending') }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
        <i class="fas fa-clock fa-sm text-white-50"></i> Pending Only
    </a>
</div>
@endsection

@section('content')
<div class="container-fluid approvals-page">
    
    <!-- Statistics Cards -->
    <div class="row mb-4 approvals-stats">
        <div class="col-xl col-md-4 col-6 mb-3">
            <div class="card approvals-stat approvals-stat--warning">
                <div class="card-body">
                    <span class="approvals-stat__icon"><i class="fas fa-hourglass-half"></i></span>
                    <div><h3>{{ $statusCounts['PENDING'] ?? 0 }}</h3><p>Pending</p></div>
                </div>
            </div>
        </div>
        <div class="col-xl col-md-4 col-6 mb-3">
            <div class="card approvals-stat approvals-stat--info">
                <div class="card-body">
                    <span class="approvals-stat__icon"><i class="fas fa-spinner"></i></span>
                    <div><h3>{{ $statusCounts['IN_PROGRESS'] ?? 0 }}</h3><p>In progress</p></div>
                </div>
            </div>
        </div>
        <div class="col-xl col-md-4 col-6 mb-3">
            <div class="card approvals-stat approvals-stat--success">
                <div class="card-body">
                    <span class="approvals-stat__icon"><i class="fas fa-check"></i></span>
                    <div><h3>{{ $statusCounts['APPROVED'] ?? 0 }}</h3><p>Approved</p></div>
                </div>
            </div>
        </div>
        <div class="col-xl col-md-4 col-6 mb-3">
            <div class="card approvals-stat approvals-stat--danger">
                <div class="card-body">
                    <span class="approvals-stat__icon"><i class="fas fa-times"></i></span>
                    <div><h3>{{ $statusCounts['REJECTED'] ?? 0 }}</h3><p>Rejected</p></div>
                </div>
            </div>
        </div>
        <div class="col-xl col-md-4 col-6 mb-3">
            <div class="card approvals-stat approvals-stat--muted">
                <div class="card-body">
                    <span class="approvals-stat__icon"><i class="fas fa-ban"></i></span>
                    <div><h3>{{ $statusCounts['CANCELLED'] ?? 0 }}</h3><p>Cancelled</p></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card approvals-panel shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-sliders-h me-2"></i>Find an Approval Instance
            </h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('approvals.instances.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Workflow</label>
                    <select name="workflow_id" class="form-control">
                        <option value="">-- All Workflows --</option>
                        @foreach($workflows as $workflow)
                            <option value="{{ $workflow->workflow_id }}" 
                                {{ request('workflow_id') == $workflow->workflow_id ? 'selected' : '' }}>
                                {{ $workflow->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-control">
                        <option value="">-- All Status --</option>
                        <option value="PENDING" {{ request('status') == 'PENDING' ? 'selected' : '' }}>Pending</option>
                        <option value="IN_PROGRESS" {{ request('status') == 'IN_PROGRESS' ? 'selected' : '' }}>In Progress</option>
                        <option value="APPROVED" {{ request('status') == 'APPROVED' ? 'selected' : '' }}>Approved</option>
                        <option value="REJECTED" {{ request('status') == 'REJECTED' ? 'selected' : '' }}>Rejected</option>
                        <option value="CANCELLED" {{ request('status') == 'CANCELLED' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">From Date</label>
                    <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">To Date</label>
                    <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <div class="w-100">
                        <button type="submit" class="btn btn-primary mr-2">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <a href="{{ route('approvals.instances.index') }}" class="btn btn-secondary">
                            <i class="fas fa-redo"></i> Reset
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Instances Table -->
    <div class="card approvals-panel approvals-results shadow">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-layer-group me-2"></i>All Instances
            </h6>
            <span class="badge badge-secondary text-white px-3 py-2">
                {{ $instances->total() }} Total
            </span>
        </div>
        <div class="card-body">
            @if($instances->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped approvals-table">
                        <thead class="thead-light">
                            <tr>
                                <th style="width: 50px">#</th>
                                <th>Reference</th>
                                <th>Workflow</th>
                                <th>Initiated By</th>
                                <th>Initiated Date</th>
                                <th>Approval Status</th>
                                <th>Document Status</th>
                                <th>Current Step</th>
                                <th>Expiry Date</th>
                                <th style="width: 120px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($instances as $index => $instance)
                                @php
                                    $documentStatus = 'N/A';
                                    $document = null;
                                    
                                    if ($instance->record_type === 'DOCUMENT') {
                                        $document = \App\Models\Document::where('document_id', $instance->record_id)->first();
                                    } elseif ($instance->record_type === 'sop') {
                                        $document = \App\Models\Document::where('source_id', $instance->record_id)
                                            ->where('source_type', 'sop')
                                            ->first();
                                    }
                                    
                                    if ($document) {
                                        $documentStatus = $document->document_status;
                                    }
                                    
                                    // Map Document Status to Bootstrap 4 badge colors
                                    $docStatusColor = match($documentStatus) {
                                        'Approved' => 'success',
                                        'Under Review' => 'warning',
                                        'Draft' => 'secondary',
                                        'Rejected' => 'danger',
                                        'Archived' => 'dark',
                                        'Request_Changes' => 'info',
                                        default => 'secondary'
                                    };

                                    // Map Workflow Status to Bootstrap 4 badge colors
                                    $workflowStatusColor = match($instance->status) {
                                        'PENDING' => 'warning',
                                        'IN_PROGRESS' => 'info',
                                        'APPROVED' => 'success',
                                        'REJECTED' => 'danger',
                                        'CANCELLED' => 'secondary',
                                        default => 'dark'
                                    };
                                    
                                    // Helper for Badge Text Contrast (Fix for White text on Yellow/Orange)
                                    $workflowBadgeClass = in_array($instance->status, ['PENDING', 'IN_PROGRESS']) ? 'text-dark' : 'text-white';
                                @endphp
                                <tr>
                                    <td>{{ $instances->firstItem() + $index }}</td>
                                    <td>
                                        <strong>{{ $instance->reference_code ?? $instance->record_number ?? 'N/A' }}</strong>
                                    </td>
                                    <td>
                                        @if($instance->workflow)
                                            <span class="badge bg-info text-white">{{ $instance->workflow->name }}</span>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </td>
                                    <td>
                                        {{ $instance->initiator->name ?? 'System' }}
                                    </td>
                                    <td class="small text-muted">
                                        {{ $instance->initiated_at?->format('d M Y H:i') ?? 'N/A' }}
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $workflowStatusColor }} {{ $workflowBadgeClass }}">
                                            {{ ucfirst(str_replace('_', ' ', $instance->status)) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $docStatusColor }} text-white">
                                            {{ $documentStatus }}
                                        </span>
                                    </td>
                                    <td class="small">
                                        @if($instance->current_step)
                                            Step {{ $instance->current_step }}
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td class="small text-muted">
                                        @if($instance->expiry_date)
                                            @if($instance->expiry_date < now())
                                                <span class="text-danger"><strong>{{ $instance->expiry_date->format('d M Y') }}</strong> (Expired)</span>
                                            @else
                                                {{ $instance->expiry_date->format('d M Y') }}
                                            @endif
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="{{ route('approvals.instances.show', $instance->instance_id) }}" 
                                               class="btn btn-info text-white" title="View Details">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            @if($instance->status === 'PENDING' || $instance->status === 'IN_PROGRESS')
                                                <a href="{{ route('approvals.instances.show', $instance->instance_id) }}" 
                                                   class="btn btn-primary text-white" title="Process">
                                                    <i class="fas fa-arrow-right"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="text-muted small">
                        Showing {{ $instances->firstItem() }} to {{ $instances->lastItem() }} of {{ $instances->total() }} instances
                    </div>
                    <div>
                        {{ $instances->appends(request()->query())->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            @else
                <div class="alert alert-info text-center mb-0">
                    <i class="fas fa-info-circle mr-2"></i> No approval instances found.
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* SB Admin 2 Integration */
    .approvals-page .card {
        border-radius: 0.35rem; /* SB Admin standard */
    }

    .approvals-page .form-label {
        color: #5a5c69;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .approvals-page .form-control {
        border-color: #d1d3e2;
        border-radius: 0.35rem;
    }

    .approvals-page .form-control:focus {
        border-color: #bac8f3;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

    .approvals-table {
        margin-bottom: 0;
    }

    .approvals-table thead th {
        padding: 0.75rem;
        border-bottom: 2px solid #e3e6f0;
        color: #5a5c69;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .approvals-table tbody td {
        padding: 0.75rem;
        border-color: #e3e6f0;
        vertical-align: middle;
        color: #3a465b;
        font-size: 0.9rem;
    }

    .approvals-table tbody tr {
        transition: background 0.2s ease;
    }

    .approvals-table tbody tr:hover {
        background-color: #f8f9fc;
    }

    /* Consistent Badges */
    .badge {
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    
    /* Safe text colors for badges */
    .badge-warning { color: #212529 !important; }
    .badge-info { color: #ffffff !important; }
    .badge-success { color: #ffffff !important; }
    .badge-danger { color: #ffffff !important; }
    .badge-secondary { color: #ffffff !important; }
    .badge-dark { color: #ffffff !important; }

    /* Statistics Cards - Professional styling */
    .approvals-stat {
        border: 1px solid #e3e6f0;
        border-radius: 0.35rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .approvals-stat:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .approvals-stat .card-body {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem;
    }

    .approvals-stat__icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 0.35rem;
        font-size: 0.9rem;
    }

    .approvals-stat h3 {
        margin: 0;
        color: #5a5c69;
        font-size: 1.5rem;
        line-height: 1;
    }

    .approvals-stat p {
        margin: 0.25rem 0 0;
        color: #858796;
        font-size: 0.75rem;
        font-weight: 700;
    }

    /* Color Mappings */
    .approvals-stat--warning { border-left: 4px solid #f6c23e; }
    .approvals-stat--warning .approvals-stat__icon { color: #f6c23e; background: #fff4d7; }
    
    .approvals-stat--info { border-left: 4px solid #36b9cc; }
    .approvals-stat--info .approvals-stat__icon { color: #36b9cc; background: #def8fb; }
    
    .approvals-stat--success { border-left: 4px solid #1cc88a; }
    .approvals-stat--success .approvals-stat__icon { color: #1cc88a; background: #ddf8ed; }
    
    .approvals-stat--danger { border-left: 4px solid #e74a3b; }
    .approvals-stat--danger .approvals-stat__icon { color: #e74a3b; background: #ffebe7; }
    
    .approvals-stat--muted { border-left: 4px solid #858796; }
    .approvals-stat--muted .approvals-stat__icon { color: #858796; background: #eef0f4; }

    /* Pagination */
    .approvals-page .pagination {
        font-size: 0.9rem;
        margin-bottom: 0;
    }
</style>
@endpush