@extends('layouts.app')

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

@section('content')
<div class="container-fluid">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap">
        <h1 class="h3 mb-0">
            <i class="fas fa-tasks mr-1 text-primary"></i> Approval Instances
        </h1>
        <div>
            <button class="btn btn-primary" data-toggle="modal" data-target="#filterModal">
                <i class="fas fa-filter mr-1"></i> Filter
            </button>
            <a href="{{ route('workflows.approvals.index') }}" class="btn btn-secondary">
                <i class="fas fa-sync-alt mr-1"></i> Reset
            </a>
        </div>
    </div>

    {{-- Stats --}}
    <div class="row mb-3">
        @php
            $total = array_sum($statusCounts);
            $cards = [
                ['Total',       $total,                                   'primary'],
                ['Pending',     $statusCounts['PENDING'] ?? 0,            'warning'],
                ['In Progress', $statusCounts['IN_PROGRESS'] ?? 0,        'info'],
                ['Approved',    $statusCounts['APPROVED'] ?? 0,           'success'],
                ['Rejected',    $statusCounts['REJECTED'] ?? 0,           'danger'],
            ];
        @endphp
        @foreach($cards as [$label, $value, $color])
            <div class="col-md-2 col-6 mb-2">
                <div class="card border-left-{{ $color }} shadow h-100 py-2">
                    <div class="card-body py-2">
                        <div class="text-xs text-uppercase text-{{ $color }} font-weight-bold">
                            {{ $label }}
                        </div>
                        <div class="h5 mb-0 font-weight-bold">{{ number_format($value) }}</div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Table --}}
    <div class="card shadow">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="approvalsTable" style="width:100%">
                    <thead class="thead-light">
                        <tr>
                            <th>ID</th>
                            <th>Record</th>
                            <th>Workflow</th>
                            <th>Module</th>
                            <th>Initiator</th>
                            <th>Initiated</th>
                            <th>Current Step</th>
                            <th>Status</th>
                            <th>Completed</th>
                            <th class="text-center" width="120">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($instances as $instance)
                            <tr>
                                <td>#{{ $instance->instance_id }}</td>
                                <td>
                                    <a href="{{ route('workflows.approvals.show', $instance->instance_id) }}"
                                       class="font-weight-bold">
                                        {{ $instance->record_number ?: '#' . $instance->record_id }}
                                    </a>
                                    <br>
                                    <small class="text-muted">
                                        {{ Str::limit($instance->record_title ?: $instance->record_type, 50) }}
                                    </small>
                                </td>
                                <td>{{ $instance->workflow?->workflow_name }}</td>
                                <td>
                                    <span class="badge badge-secondary">
                                        {{ $instance->record_type }}
                                    </span>
                                </td>
                                <td>{{ $instance->initiator?->name ?? '—' }}</td>
                                <td data-order="{{ $instance->initiated_at?->timestamp }}">
                                    {{ $instance->initiated_at?->format('M j, Y H:i') }}
                                </td>
                                <td>
                                    @if(in_array($instance->status, ['PENDING', 'IN_PROGRESS'], true))
                                        <span class="badge badge-info">
                                            Step {{ $instance->current_step }}
                                        </span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge badge-{{
                                        match($instance->status) {
                                            'PENDING'     => 'warning',
                                            'IN_PROGRESS' => 'info',
                                            'APPROVED'    => 'success',
                                            'REJECTED'    => 'danger',
                                            'CANCELLED'   => 'secondary',
                                            default       => 'secondary',
                                        }
                                    }}">{{ $instance->status }}</span>
                                </td>
                                <td data-order="{{ $instance->completed_at?->timestamp ?? 0 }}">
                                    @if($instance->completed_at)
                                        {{ $instance->completed_at->format('M j, Y') }}
                                        <br>
                                        <small>{{ $instance->finalDecisionBy?->name }}</small>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('workflows.approvals.show', $instance->instance_id) }}"
                                       class="btn btn-sm btn-info" title="View">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @if(in_array($instance->status, ['PENDING', 'IN_PROGRESS'], true))
                                        <a href="{{ route('workflows.approvals.action-form', $instance->instance_id) }}"
                                           class="btn btn-sm btn-success" title="Take Action">
                                            <i class="fas fa-check"></i>
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center text-muted py-4">
                                    No approval instances found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $instances->withQueryString()->links() }}
            </div>
        </div>
    </div>
</div>

{{-- Filter modal --}}
<div class="modal fade" id="filterModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="GET" action="{{ route('workflows.approvals.index') }}">
                <div class="modal-header">
                    <h5 class="modal-title">Filter Approval Instances</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Workflow</label>
                            <select name="workflow_id" class="form-control">
                                <option value="">All Workflows</option>
                                @foreach($workflows as $wf)
                                    <option value="{{ $wf->workflow_id }}"
                                        @selected(request('workflow_id') == $wf->workflow_id)>
                                        {{ $wf->workflow_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Status</label>
                            <select name="status" class="form-control">
                                <option value="">All Statuses</option>
                                @foreach(['PENDING', 'IN_PROGRESS', 'APPROVED', 'REJECTED', 'CANCELLED'] as $s)
                                    <option value="{{ $s }}" @selected(request('status') === $s)>{{ $s }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Record Type</label>
                            <select name="record_type" class="form-control">
                                <option value="">All Types</option>
                                @foreach($recordTypes as $type)
                                    <option value="{{ $type }}" @selected(request('record_type') === $type)>
                                        {{ $type }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Date Range</label>
                            <div class="d-flex">
                                <input type="date" name="date_from" class="form-control mr-1"
                                       value="{{ request('date_from') }}">
                                <input type="date" name="date_to" class="form-control"
                                       value="{{ request('date_to') }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Apply Filters</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    if ($.fn.DataTable) {
        $('#approvalsTable').DataTable({
            order: [[0, 'desc']],
            pageLength: 25,
            responsive: true,
            language: {
                emptyTable: 'No approval instances found',
                search: 'Search:',
            },
        });
    }
});
</script>
@endpush