{{-- resources/views/approvals/instances/show.blade.php --}}
@extends('layouts.app')

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

@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-clipboard-check mr-2 text-primary"></i>Approval Details
    </h1>
    <div class="d-flex gap-2">
        <a href="{{ route('approvals.instances.index') }}" class="d-none d-sm-inline-block btn btn-sm btn-secondary shadow-sm">
            <i class="fas fa-arrow-left fa-sm text-white-50"></i> Back
        </a>
    </div>
</div>
@endsection

@section('content')
@php
    // Helper function to safely format dates
    $formatDate = function($date) {
        if (!$date) return 'N/A';
        if ($date instanceof \DateTime) return $date->format('M d, Y H:i');
        if (is_string($date)) return date('M d, Y H:i', strtotime($date));
        return 'N/A';
    };
    
    // ============================================================
    // GET DOCUMENT STATUS FROM DOCUMENTS TABLE (ENUM only)
    // ============================================================
    $documentStatus = 'Draft';
    $documentStatusColor = 'secondary';
    $document = null;
    $documentId = null;
    
    if (isset($instance)) {
        if ($instance->record_type === 'DOCUMENT') {
            $document = \App\Models\Document::where('document_id', $instance->record_id)->first();
            if ($document) {
                $documentId = $document->document_id;
            }
        } elseif ($instance->record_type === 'sop') {
            $document = \App\Models\Document::where('source_id', $instance->record_id)
                ->where('source_type', 'sop')
                ->first();
            if ($document) {
                $documentId = $document->document_id;
            }
        }
        
        if ($document) {
            // Only use ENUM values from documents table
            $documentStatus = $document->document_status ?? 'Draft';
            
            // Map document status to badge color (ENUM values only)
            $documentStatusColor = match($documentStatus) {
                'Approved' => 'success',
                'Under Review' => 'warning',
                'Draft' => 'secondary',
                'Rejected' => 'danger',
                'Archived' => 'dark',
                'Request_Changes' => 'info',
                default => 'secondary'
            };
        }
    }
    
    // ============================================================
    // GET APPROVAL STATUS (from universal_approval_instances)
    // ============================================================
    $approvalStatus = $instance->status ?? 'PENDING';
    $approvalStatusColor = match($approvalStatus) {
        'APPROVED' => 'success',
        'REJECTED' => 'danger',
        'IN_PROGRESS' => 'info',
        'PENDING' => 'warning',
        'CANCELLED' => 'secondary',
        default => 'secondary'
    };
    
    // ============================================================
    // CALCULATE WORKFLOW PROGRESS
    // ============================================================
    $totalSteps = $steps->count();
    $completedSteps = $instance->actions->where('action', '!=', 'PENDING')->count();
    $progress = $totalSteps > 0 ? ($completedSteps / $totalSteps) * 100 : 0;
    
    // ============================================================
    // CHECK IF USER CAN APPROVE
    // ============================================================
    $canApprove = false;
    $currentStep = $steps->firstWhere('step_order', $instance->current_step);
    $userId = auth()->id();
    $commentsAllowed = (bool) ($currentStep?->allow_comments ?? false);
    $attachmentsAllowed = (bool) ($currentStep?->allow_attachments ?? false);
    $signatureRequired = (bool) ($currentStep?->require_esignature ?? false);
    $signatureUser = $currentStep?->approver_type === 'USER' && $currentStep->approver_user_id
        ? \App\Models\User::with('employee')->find($currentStep->approver_user_id)
        : auth()->user();
    $employeeSignature = $signatureUser?->employee?->employee_signature;
    $employeeSignaturePath = $employeeSignature ? str_replace('\\', '/', $employeeSignature) : null;
    $employeeSignaturePath = $employeeSignaturePath
        ? preg_replace('#^(?:.*?/)?storage/app/public/|^public/storage/#i', '', ltrim($employeeSignaturePath, '/'))
        : null;
    $employeeSignatureUrl = $employeeSignature
        ? (str_starts_with($employeeSignature, 'http')
            ? $employeeSignature
            : asset('storage/' . ltrim($employeeSignaturePath, '/')))
        : null;
    
    // Debug information
    $debugInfo = [
        'user_id' => $userId,
        'approval_status' => $approvalStatus,
        'document_status' => $documentStatus,
        'current_step' => $instance->current_step,
        'step_approver_user_id' => $currentStep ? $currentStep->approver_user_id : null,
        'step_approver_type' => $currentStep ? $currentStep->approver_type : null,
        'step_required_role' => $currentStep ? $currentStep->required_role : null,
    ];
    
    // Check if user can approve based on:
    // 1. Approval status is PENDING or IN_PROGRESS (from universal_approval_instances)
    // 2. Document status is NOT Approved, Rejected, or Archived (from documents table)
    // 3. User is the approver for the current step
    if ($currentStep && in_array($approvalStatus, ['PENDING', 'IN_PROGRESS']) && 
        !in_array($documentStatus, ['Approved', 'Rejected', 'Archived'])) {
        
        // Check if the user is the direct approver for this step (USER type)
        if ($currentStep->approver_type == 'USER' && $currentStep->approver_user_id == $userId) {
            $canApprove = true;
        } 
        // Check if the user has the required role (ROLE type)
        elseif ($currentStep->approver_type == 'ROLE' && !empty($currentStep->required_role)) {
            if (auth()->user()->hasRole($currentStep->required_role)) {
                $canApprove = true;
            }
        }
    }
    
    // Check if user has already acted on THIS INSTANCE for this step
    $hasActed = false;
    if ($currentStep) {
        $hasActed = $instance->actions
            ->where('step_id', $currentStep->step_id)
            ->where('approver_user_id', $userId)
            ->where('action', '!=', 'PENDING')
            ->isNotEmpty();
    }
    
    // Get the action for the current step (if any)
    $currentStepAction = null;
    if ($currentStep) {
        $currentStepAction = $instance->actions
            ->where('step_id', $currentStep->step_id)
            ->where('action', '!=', 'PENDING')
            ->first();
    }
    
    // ============================================================
    // DETERMINE IF DOCUMENT IS COMPLETED (based on document status)
    // ============================================================
    $isFullyApproved = $documentStatus == 'Approved';
    $isRejected = $documentStatus == 'Rejected';
    $isArchived = $documentStatus == 'Archived';
    $isUnderReview = $documentStatus == 'Under Review';
    $isDraft = $documentStatus == 'Draft';
    $isRequestChanges = $documentStatus == 'Request_Changes';
    
    // Check if user is the approver for the current step
    $isUserApprover = false;
    if ($currentStep) {
        if ($currentStep->approver_type == 'USER' && $currentStep->approver_user_id == $userId) {
            $isUserApprover = true;
        } elseif ($currentStep->approver_type == 'ROLE' && !empty($currentStep->required_role)) {
            $isUserApprover = auth()->user()->hasRole($currentStep->required_role);
        }
    }
@endphp

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<div class="row">
    <!-- Left Column - Document Preview -->
    <div class="col-lg-8">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-file-alt mr-2"></i>Document Preview
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <strong>{{ $instance->record_type }}</strong> - {{ $instance->record_number }}
                        </div>
                        <div>
                            <span class="badge bg-{{ $documentStatusColor }}">
                                {{ $documentStatus }}
                            </span>
                        </div>
                    </div>
                    <div class="mt-2">
                        <div><strong>Title:</strong> {{ $instance->record_title }}</div>
                        <div><strong>Initiator:</strong> {{ $instance->initiator->name ?? 'N/A' }} on {{ $formatDate($instance->initiated_at) }}</div>
                        <div>
                            <strong>Document Status:</strong> 
                            <span class="badge bg-{{ $documentStatusColor }}">
                                {{ $documentStatus }}
                            </span>
                        </div>
                        <div>
                            <strong>Approval Status:</strong> 
                            <span class="badge badge-{{ $approvalStatusColor }}">
                                {{ $approvalStatus }}
                            </span>
                            @if($approvalStatus == 'IN_PROGRESS')
                                <span class="badge badge-info">Step {{ $instance->current_step }} of {{ $totalSteps }}</span>
                            @endif
                        </div>
                        <div class="mt-1">
                            <small class="text-muted">
                                <strong>Instance ID:</strong> #{{ $instance->instance_id }}
                                @if($documentId)
                                    | <strong>Document ID:</strong> #{{ $documentId }}
                                @endif
                            </small>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <h6>Workflow Progress</h6>
                    <div class="progress mb-3" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped bg-success" 
                             style="width: {{ $progress }}%">
                            {{ number_format($progress, 0) }}% Complete
                        </div>
                    </div>
                    <small class="text-muted">
                        Step {{ $instance->current_step }} of {{ $totalSteps }}
                    </small>
                </div>
            </div>
        </div>

        <!-- Approval Timeline -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-history mr-2"></i>Approval Timeline
                </h6>
            </div>
            <div class="card-body">
                <div class="timeline">
                    @foreach($steps as $step)
                        @php
                            $stepActions = $instance->actions->where('step_id', $step->step_id);
                            $action = $stepActions->first(function ($stepAction) {
                                return $stepAction->action !== 'PENDING';
                            }) ?? $stepActions->first();
                            $isCompleted = $action !== null && $action->action != 'PENDING';
                            $isCurrent = $step->step_order == $instance->current_step && !$isCompleted;
                            
                            // Check if current user is approver for this step
                            $isUserApproverForStep = false;
                            if ($step->approver_type == 'USER' && $step->approver_user_id == $userId) {
                                $isUserApproverForStep = true;
                            } elseif ($step->approver_type == 'ROLE' && !empty($step->required_role)) {
                                $isUserApproverForStep = auth()->user()->hasRole($step->required_role);
                            }
                        @endphp
                        <div class="timeline-item {{ $isCompleted ? 'completed' : ($isCurrent ? 'current' : 'pending') }}">
                            <div class="timeline-marker">
                                <i class="fas fa-{{ $isCompleted ? 'check' : ($isCurrent ? 'clock' : 'circle') }}"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="d-flex justify-content-between">
                                    <h6>Step {{ $step->step_order }}: {{ $step->step_name }}</h6>
                                    <span class="badge badge-{{ $isCompleted ? 'success' : ($isCurrent ? 'primary' : 'secondary') }}">
                                        {{ $isCompleted ? 'Completed' : ($isCurrent ? 'In Progress' : 'Pending') }}
                                    </span>
                                </div>
                                
                                @if($action && $action->action != 'PENDING')
                                    <div class="mt-2 p-2 bg-light rounded">
                                        <div class="d-flex justify-content-between">
                                            <strong>{{ $action->approver->name ?? 'N/A' }}</strong>
                                            <span class="badge badge-{{ $action->action_type == 'APPROVE' ? 'success' : 'danger' }}">
                                                {{ $action->action_type == 'APPROVE' && $step->step_order < $totalSteps ? 'REVIEWED' : $action->action_type }}
                                            </span>
                                        </div>
                                        @if($action->comments)
                                            <p class="small mb-0 text-muted">{{ $action->comments }}</p>
                                        @endif
                                        <small class="text-muted">{{ $formatDate($action->action_date) }}</small>
                                    </div>
                                @elseif($isCurrent)
                                    <div class="mt-2">
                                        @if($isUserApproverForStep)
                                            <span class="badge badge-warning">Your Action Required</span>
                                        @else
                                            <span class="text-muted">
                                                <i class="fas fa-hourglass-half mr-1"></i>
                                                Waiting for approver
                                            </span>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Actions History -->
        @if($instance->actions->count() > 0)
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-list mr-2"></i>Actions History
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Date/Time</th>
                                    <th>Step</th>
                                    <th>Approver</th>
                                    <th>Action</th>
                                    <th>Comments</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($instance->actions->where('action', '!=', 'PENDING') as $action)
                                    <tr>
                                        <td>{{ $formatDate($action->action_date) }}</td>
                                        <td>{{ $action->step->step_name ?? 'N/A' }}</td>
                                        <td>{{ $action->approver->name ?? 'N/A' }}</td>
                                        <td>
                                            <span class="badge badge-{{ $action->action_type == 'APPROVE' ? 'success' : 'danger' }}">
                                                {{ $action->action_type }}
                                            </span>
                                        </td>
                                        <td>{{ $action->comments ?: '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif

        <!-- Debug Information -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 bg-warning">
                <h6 class="m-0 font-weight-bold text-dark">
                    <i class="fas fa-bug mr-2"></i>Debug Information
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <strong>Current User ID:</strong> {{ $userId }}<br>
                        <strong>Approval Status:</strong> {{ $approvalStatus }}<br>
                        <strong>Document Status:</strong> {{ $documentStatus }}<br>
                        <strong>Current Step:</strong> {{ $instance->current_step }}<br>
                        <strong>Step Approver User ID:</strong> {{ $currentStep ? $currentStep->approver_user_id : 'N/A' }}<br>
                        <strong>Step Approver Type:</strong> {{ $currentStep ? $currentStep->approver_type : 'N/A' }}<br>
                        <strong>Required Role:</strong> {{ $currentStep ? $currentStep->required_role : 'N/A' }}<br>
                    </div>
                    <div class="col-md-6">
                        <strong>Is User Approver:</strong> {{ $isUserApprover ? '✅ YES' : '❌ NO' }}<br>
                        <strong>Has Acted:</strong> {{ $hasActed ? '✅ YES' : '❌ NO' }}<br>
                        <strong>Can Approve:</strong> {{ $canApprove ? '✅ YES' : '❌ NO' }}<br>
                        <strong>Document Status (ENUM):</strong> {{ $documentStatus }}<br>
                        <strong>Is Fully Approved:</strong> {{ $isFullyApproved ? 'YES' : 'NO' }}<br>
                        <strong>Is Rejected:</strong> {{ $isRejected ? 'YES' : 'NO' }}<br>
                        <strong>Is Archived:</strong> {{ $isArchived ? 'YES' : 'NO' }}<br>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column - Details & Actions -->
    <div class="col-lg-4">
        <!-- Instance Details -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-info-circle mr-2"></i>Details
                </h6>
            </div>
            <div class="card-body">
                <div class="info-item">
                    <label>Instance ID</label>
                    <div class="value">#{{ $instance->instance_id }}</div>
                </div>
                <div class="info-item">
                    <label>Workflow</label>
                    <div class="value">{{ $instance->workflow->workflow_name }}</div>
                </div>
                <div class="info-item">
                    <label>Module Type</label>
                    <div class="value">{{ $instance->workflow->module_type }}</div>
                </div>
                <div class="info-item">
                    <label>Initiator</label>
                    <div class="value">{{ $instance->initiator->name ?? 'N/A' }}</div>
                </div>
                <div class="info-item">
                    <label>Initiated</label>
                    <div class="value">{{ $formatDate($instance->initiated_at) }}</div>
                </div>
                <div class="info-item">
                    <label>Document Status</label>
                    <div class="value">
                        <span class="badge bg-{{ $documentStatusColor }}">
                            {{ $documentStatus }}
                        </span>
                    </div>
                </div>
                <div class="info-item">
                    <label>Approval Status</label>
                    <div class="value">
                        <span class="badge badge-{{ $approvalStatusColor }}">
                            {{ $approvalStatus }}
                        </span>
                        @if($approvalStatus == 'IN_PROGRESS')
                            <span class="badge badge-info">Step {{ $instance->current_step }}</span>
                        @endif
                    </div>
                </div>
                <div class="info-item">
                    <label>Current Step</label>
                    <div class="value">{{ $currentStep?->step_name ?? 'N/A' }}</div>
                </div>
                @if($instance->completed_at)
                    <div class="info-item">
                        <label>Completed</label>
                        <div class="value">{{ $formatDate($instance->completed_at) }}</div>
                    </div>
                    @if($instance->final_decision_by)
                        <div class="info-item">
                            <label>Decision By</label>
                            <div class="value">{{ $instance->finalDecisionBy->name ?? 'N/A' }}</div>
                        </div>
                    @endif
                @endif
            </div>
        </div>

        @if($signatureRequired || $employeeSignatureUrl)
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-signature mr-2"></i>Employee Signature
                    </h6>
                </div>
                <div class="card-body text-center">
                    @if($employeeSignatureUrl)
                        <div class="approval-signature-preview">
                            <div class="approval-signature-preview__label">
                                <i class="fas fa-certificate mr-1"></i>Registered electronic signature
                            </div>
                            <div class="approval-signature-preview__canvas">
                                <img src="{{ $employeeSignatureUrl }}" alt="Electronic signature of {{ $signatureUser?->name ?? 'assigned approver' }}">
                            </div>
                            <div class="approval-signature-preview__name">
                                {{ $signatureUser?->name ?? 'Assigned approver' }}
                            </div>
                            <div class="small text-success mt-1">
                                <i class="fas fa-check-circle mr-1"></i>Available for this approval step
                            </div>
                        </div>
                    @else
                        <div class="approval-signature-empty">
                            <i class="fas fa-signature"></i>
                            <div class="text-danger mt-2">No employee signature is registered.</div>
                        </div>
                    @endif
                    @if($signatureRequired)
                        <div class="alert alert-warning small mt-3 mb-0">
                            E-signature confirmation is required before this step can be submitted.
                        </div>
                    @endif
                </div>
            </div>
        @endif

        <!-- Take Action Card -->
        @if($canApprove && !$hasActed && !$isFullyApproved && !$isRejected && !$isArchived)
        <div class="card shadow mb-4 border-primary">
            <div class="card-header bg-primary text-white">
                <h6 class="m-0 font-weight-bold">
                    <i class="fas fa-gavel mr-2"></i>Take Action
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info small">
                    <i class="fas fa-info-circle me-1"></i>
                    <strong>Instance #{{ $instance->instance_id }}</strong><br>
                    You are the approver for <strong>Step {{ $currentStep->step_order }}: {{ $currentStep->step_name }}</strong>
                    @if($currentStep->required_role)
                        <br><small class="text-muted">Role: {{ $currentStep->required_role }}</small>
                    @endif
                    <br><small class="text-muted">Document Status: <span class="badge bg-{{ $documentStatusColor }}">{{ $documentStatus }}</span></small>
                    <br><small class="text-muted">Approval Status: <span class="badge badge-{{ $approvalStatusColor }}">{{ $approvalStatus }}</span></small>
                </div>
                <form action="{{ route('approvals.instances.act', $instance->instance_id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if($commentsAllowed)
                        <div class="mb-3">
                            <label for="comment" class="form-label">Comment</label>
                            <textarea class="form-control" id="comment" name="comment" rows="3"
                                      placeholder="Enter your comment (optional)"></textarea>
                        </div>
                    @endif

                    @if($attachmentsAllowed)
                        <div class="mb-3">
                            <label for="attachments" class="form-label">Attachments</label>
                            <input type="file" class="form-control" id="attachments" name="attachments[]"
                                   accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg" multiple>
                            <small class="form-text text-muted">Maximum 10 MB per file.</small>
                        </div>
                    @endif

                    @if($signatureRequired)
                        <div class="alert alert-warning small">
                            <i class="fas fa-signature me-1"></i>
                            An electronic signature is required for this step.
                            @if($employeeSignatureUrl)
                                <div class="mt-2">
                                    <div class="text-muted mb-1">Signature to be applied:</div>
                                    <img src="{{ $employeeSignatureUrl }}" alt="Employee signature"
                                         class="img-thumbnail" style="max-height: 80px; max-width: 240px;">
                                </div>
                            @else
                                <div class="text-danger mt-2">
                                    No employee signature is registered for your account.
                                </div>
                            @endif
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" id="signature_confirmation"
                                       name="signature_confirmation" value="1"
                                       {{ old('signature_confirmation') ? 'checked' : '' }} required>
                                <label class="form-check-label" for="signature_confirmation">
                                    I confirm this action will be electronically signed.
                                </label>
                                @error('signature_confirmation')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    @endif
                    <div class="d-grid gap-2">
                        @if($currentStep->step_order < $totalSteps)
                            <button type="submit" name="action" value="APPROVE" class="btn btn-info btn-lg">
                                <i class="fas fa-clipboard-check me-2"></i>Mark as Reviewed
                            </button>
                        @endif
                        <button type="submit" name="action" value="APPROVE" class="btn btn-success btn-lg">
                            <i class="fas fa-check me-2"></i>Approve
                        </button>
                        <button type="submit" name="action" value="REJECT" class="btn btn-danger btn-lg">
                            <i class="fas fa-times me-2"></i>Reject
                        </button>
                    </div>
                    <div class="mt-2 text-muted small">
                        <i class="fas fa-lock me-1"></i>
                        Your action will be recorded with electronic signature
                    </div>
                </form>
            </div>
        </div>
        @elseif($hasActed && !$isFullyApproved && !$isRejected && !$isArchived)
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-check-circle mr-2"></i>Action Taken
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>You have already acted on this step for Instance #{{ $instance->instance_id }}.</strong>
                    <p class="mb-0 mt-2">
                        <i class="fas fa-clock me-1"></i>
                        Please wait for the next approver to take action.
                    </p>
                    <p class="mb-0 mt-1">
                        <small class="text-muted">
                            Document Status: <span class="badge bg-{{ $documentStatusColor }}">{{ $documentStatus }}</span>
                        </small>
                    </p>
                    @if($currentStepAction)
                        <hr class="my-2">
                        <small>
                            <strong>Your action:</strong> {{ $currentStepAction->action_type }}
                            @if($currentStepAction->comments)
                                <br><strong>Comment:</strong> {{ $currentStepAction->comments }}
                            @endif
                        </small>
                    @endif
                </div>
            </div>
        </div>
        @elseif($isFullyApproved)
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-success">
                    <i class="fas fa-check-circle mr-2"></i>Approved
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-success mb-0">
                    <i class="fas fa-check-circle me-2"></i>
                    <strong>This document has been fully approved.</strong>
                    <p class="mb-0 mt-2">
                        Document Status: <span class="badge bg-success">Approved</span><br>
                        @if($instance->completed_at)
                            Approved on: {{ $formatDate($instance->completed_at) }}
                        @endif
                    </p>
                </div>
            </div>
        </div>
        @elseif($isRejected)
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-danger">
                    <i class="fas fa-times-circle mr-2"></i>Rejected
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-danger mb-0">
                    <i class="fas fa-times-circle me-2"></i>
                    <strong>This document has been rejected.</strong>
                    <p class="mb-0 mt-2">
                        Document Status: <span class="badge bg-danger">Rejected</span><br>
                        @if($instance->completed_at)
                            Rejected on: {{ $formatDate($instance->completed_at) }}
                        @endif
                    </p>
                </div>
            </div>
        </div>
        @elseif($isArchived)
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-secondary">
                    <i class="fas fa-archive mr-2"></i>Archived
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-secondary mb-0">
                    <i class="fas fa-archive me-2"></i>
                    <strong>This document has been archived.</strong>
                    <p class="mb-0 mt-2">
                        Document Status: <span class="badge bg-secondary">Archived</span>
                    </p>
                </div>
            </div>
        </div>
        @elseif(!$canApprove && !$isFullyApproved && !$isRejected && !$isArchived)
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-secondary">
                    <i class="fas fa-lock mr-2"></i>Waiting for Approver
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-secondary mb-0">
                    <i class="fas fa-hourglass-half me-2"></i>
                    <strong>You are not the approver for this step.</strong>
                    <p class="mb-0 mt-2">
                        <small>
                            Current Step: <strong>{{ $currentStep?->step_name ?? 'Unknown' }}</strong><br>
                            Document Status: <span class="badge bg-{{ $documentStatusColor }}">{{ $documentStatus }}</span><br>
                            Approval Status: <span class="badge badge-{{ $approvalStatusColor }}">{{ $approvalStatus }}</span><br>
                            This instance (#{{ $instance->instance_id }}) is awaiting action from the designated approver.
                            @if($currentStep && $currentStep->approver_user_id)
                                <br>Approver: User ID {{ $currentStep->approver_user_id }}
                            @endif
                            @if($currentStep && $currentStep->required_role)
                                <br>Required Role: {{ $currentStep->required_role }}
                            @endif
                        </small>
                    </p>
                </div>
            </div>
        </div>
        @endif

        <!-- Quick Actions -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-tools mr-2"></i>Quick Actions
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('approvals.instances.index') }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-list mr-2"></i>View All Approvals
                    </a>
                    @if($instance->record_type == 'DOCUMENT' && isset($instance->record_id))
                        <a href="{{ route('documents.show', $instance->record_id) }}" class="btn btn-info btn-sm">
                            <i class="fas fa-file-alt mr-2"></i>View Document
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}
.timeline-item {
    position: relative;
    padding-bottom: 25px;
    padding-left: 25px;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}
.timeline-item:last-child::before {
    display: none;
}
.timeline-marker {
    position: absolute;
    left: -8px;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.timeline-item.completed .timeline-marker {
    background: #1cc88a;
    border-color: #1cc88a;
    color: white;
}
.timeline-item.current .timeline-marker {
    background: #4e73df;
    border-color: #4e73df;
    color: white;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(78,115,223,0.4); }
    70% { box-shadow: 0 0 0 10px rgba(78,115,223,0); }
    100% { box-shadow: 0 0 0 0 rgba(78,115,223,0); }
}
.timeline-content {
    background: #f8f9fc;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #e3e6f0;
}
.timeline-item.completed .timeline-content {
    border-left-color: #1cc88a;
}
.timeline-item.current .timeline-content {
    border-left-color: #4e73df;
    background: #e7f1ff;
}
.info-item {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3e6f0;
}
.info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.info-item label {
    display: block;
    font-size: 0.85rem;
    color: #858796;
    margin-bottom: 2px;
}
.info-item .value {
    font-weight: 600;
    color: #5a5c69;
}
.border-primary {
    border-color: #4e73df !important;
}
.approval-signature-preview {
    padding: 12px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #f8fbff;
}
.approval-signature-preview__label {
    color: #1f5eff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.approval-signature-preview__canvas {
    min-height: 125px;
    margin-top: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #b9c9dc;
    border-radius: 8px;
    background: #fff;
}
.approval-signature-preview__canvas img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: 92px;
    object-fit: contain;
}
.approval-signature-preview__name {
    margin-top: 9px;
    color: #17233c;
    font-weight: 700;
}
.approval-signature-empty {
    padding: 20px 10px;
    border: 1px dashed #f0b8b8;
    border-radius: 10px;
    background: #fff8f8;
}
.approval-signature-empty > i {
    color: #d9534f;
    font-size: 2rem;
}
</style>
@endpush

@push('scripts')
<script>
    const signatureConfirmation = document.getElementById('signature_confirmation');
    const signatureConfirmationKey = 'approval-signature-confirmed-{{ $instance->instance_id }}';

    if (signatureConfirmation) {
        signatureConfirmation.checked = localStorage.getItem(signatureConfirmationKey) === '1';
        signatureConfirmation.addEventListener('change', function() {
            localStorage.setItem(signatureConfirmationKey, this.checked ? '1' : '0');
        });
    }

    // Auto-dismiss alerts after 5 seconds
    setTimeout(function() {
        $('.alert').fadeOut('slow', function() {
            $(this).remove();
        });
    }, 5000);

    // Confirm before reject
    $('button[value="REJECT"]').on('click', function(e) {
        var comment = $('#comment').val();
        var message = 'Are you sure you want to REJECT this document?';
        if (comment) {
            message += '\n\nComment: ' + comment;
        }
        if (!confirm(message)) {
            e.preventDefault();
            return false;
        }
    });
</script>
@endpush