@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="fas fa-clipboard-list me-2 text-primary"></i>Approval Instances</h1>
        <a href="{{ route('approvals.pending') }}" class="btn btn-warning">
            <i class="fas fa-clock me-2"></i>Pending Approvals
        </a>
    </div>

    <div class="card mb-4">
        <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-select">
                        <option value="">All Workflows</option>
                        @foreach($workflows as $workflow)
                            <option value="{{ $workflow->workflow_id }}" {{ request('workflow_id') == $workflow->workflow_id ? 'selected' : '' }}>
                                {{ $workflow->workflow_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <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>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Search</label>
                    <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="Record number or title">
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i> Filter
                    </button>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <a href="{{ route('approvals.instances.index') }}" class="btn btn-secondary w-100">
                        <i class="fas fa-redo"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <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">{{ $instances->total() }}</h3>
                    <p class="text-muted mb-0">Total Records</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-light">
                <div class="card-body">
                    <h3 class="text-warning">{{ $instances->where('status', 'PENDING')->count() }}</h3>
                    <p class="text-muted mb-0">Pending</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-light">
                <div class="card-body">
                    <h3 class="text-success">{{ $instances->where('status', 'APPROVED')->count() }}</h3>
                    <p class="text-muted mb-0">Approved</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-light">
                <div class="card-body">
                    <h3 class="text-danger">{{ $instances->where('status', 'REJECTED')->count() }}</h3>
                    <p class="text-muted mb-0">Rejected</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            @if($instances->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Reference</th>
                                <th>Workflow</th>
                                <th>Initiated By</th>
                                <th>Status</th>
                                <th>Current Step</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($instances as $index => $instance)
                                <tr>
                                    <td>{{ $instances->firstItem() + $index }}</td>
                                    <td>
                                        <strong>{{ $instance->record_number ?? 'N/A' }}</strong>
                                        <div class="small text-muted">{{ $instance->record_title ?? 'Untitled' }}</div>
                                    </td>
                                    <td>
                                        @if($instance->workflow)
                                            <span class="badge bg-info">{{ $instance->workflow->workflow_name }}</span>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </td>
                                    <td>
                                        {{ $instance->initiatedBy->name ?? 'System' }}
                                    </td>
                                    <td>
                                        @switch($instance->status)
                                            @case('PENDING')
                                                <span class="badge bg-warning text-dark">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-secondary">{{ $instance->status }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        @if($instance->current_step)
                                            Step {{ $instance->current_step }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="small text-muted">
                                        {{ $instance->created_at ? $instance->created_at->format('d M Y H:i') : 'N/A' }}
                                    </td>
                                    <td>
                                        <a href="{{ route('approvals.instances.show', $instance->instance_id) }}" class="btn btn-sm btn-primary">
                                            <i class="fas fa-eye"></i> View
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

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