@extends('layouts.app')

@section('title', 'Approval Instance #' . $instance->instance_id)

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4><i class="fas fa-check-circle me-2"></i>Approval Instance #{{ $instance->instance_id }}</h4>
        <a href="{{ route('approvals.instances.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Approvals
        </a>
    </div>

    @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="btn-close" data-bs-dismiss="alert" aria-label="Close"></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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-md-8">
            <!-- Instance Details -->
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-info-circle me-2"></i>Instance Details
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Record Type</label>
                            <p><strong>{{ $instance->record_type }}</strong></p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Record Number</label>
                            <p><strong>{{ $instance->record_number }}</strong></p>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="text-muted small">Record Title</label>
                            <p><strong>{{ $instance->record_title }}</strong></p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Status</label>
                            <p>
                                @if($instance->status == 'PENDING')
                                    <span class="badge bg-warning">Pending</span>
                                @elseif($instance->status == 'APPROVED')
                                    <span class="badge bg-success">Approved</span>
                                @elseif($instance->status == 'REJECTED')
                                    <span class="badge bg-danger">Rejected</span>
                                @elseif($instance->status == 'CANCELLED')
                                    <span class="badge bg-secondary">Cancelled</span>
                                @else
                                    <span class="badge bg-info">{{ $instance->status }}</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Current Step</label>
                            <p><strong>Step {{ $instance->current_step }}</strong></p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Initiated By</label>
                            <p><strong>{{ $instance->initiatedBy->name ?? 'Unknown' }}</strong></p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Initiated At</label>
                            <p><strong>{{ $instance->initiated_at ? $instance->initiated_at->format('M d, Y H:i') : 'N/A' }}</strong></p>
                        </div>
                        @if($instance->completed_at)
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Completed At</label>
                            <p><strong>{{ $instance->completed_at->format('M d, Y H:i') }}</strong></p>
                        </div>
                        @endif
                        @if($instance->final_decision)
                        <div class="col-md-6 mb-3">
                            <label class="text-muted small">Final Decision</label>
                            <p><strong>{{ $instance->final_decision }}</strong></p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Uploaded Document -->
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-file-alt me-2"></i>Uploaded Document
                </div>
                <div class="card-body">
                    @if(isset($document) && $document)
                        <div class="row">
                            <div class="col-md-12">
                                <div class="d-flex align-items-center mb-3">
                                    <i class="fas fa-file-pdf text-danger fa-2x me-3"></i>
                                    <div>
                                        <h6 class="mb-0">{{ $document->document_title ?? 'Document' }}</h6>
                                        <small class="text-muted">
                                            {{ $document->document_code ?? 'No Code' }} | 
                                            Version {{ $document->version_number ?? '1.0' }}
                                        </small>
                                    </div>
                                </div>
                                
                                @if($document->file_path)
                                    <div class="mb-3">
                                        <label class="text-muted small">Document File:</label>
                                        <div class="d-flex align-items-center">
                                            <a href="{{ asset('storage/' . $document->file_path) }}" 
                                               class="btn btn-sm btn-primary me-2" 
                                               target="_blank">
                                                <i class="fas fa-eye me-1"></i>View Document
                                            </a>
                                            <a href="{{ asset('storage/' . $document->file_path) }}" 
                                               class="btn btn-sm btn-success" 
                                               download>
                                                <i class="fas fa-download me-1"></i>Download
                                            </a>
                                        </div>
                                    </div>
                                    
                                    <!-- PDF Preview -->
                                    @if(pathinfo($document->file_path, PATHINFO_EXTENSION) == 'pdf')
                                        <div class="embed-responsive embed-responsive-16by9 mb-3">
                                            <iframe src="{{ asset('storage/' . $document->file_path) }}" 
                                                    style="width: 100%; height: 500px;" 
                                                    frameborder="0"></iframe>
                                        </div>
                                    @endif
                                @else
                                    <p class="text-muted">No file uploaded for this document.</p>
                                @endif
                            </div>
                        </div>
                    @elseif(isset($recordFile) && $recordFile)
                        <div class="row">
                            <div class="col-md-12">
                                <div class="d-flex align-items-center mb-3">
                                    <i class="fas fa-file-pdf text-danger fa-2x me-3"></i>
                                    <div>
                                        <h6 class="mb-0">{{ $recordFile->document_title ?? 'Document' }}</h6>
                                        <small class="text-muted">{{ $recordFile->document_code ?? 'No Code' }}</small>
                                    </div>
                                </div>
                                
                                @if($recordFile->file_path)
                                    <div class="mb-3">
                                        <label class="text-muted small">Document File:</label>
                                        <div class="d-flex align-items-center">
                                            <a href="{{ asset('storage/' . $recordFile->file_path) }}" 
                                               class="btn btn-sm btn-primary me-2" 
                                               target="_blank">
                                                <i class="fas fa-eye me-1"></i>View Document
                                            </a>
                                            <a href="{{ asset('storage/' . $recordFile->file_path) }}" 
                                               class="btn btn-sm btn-success" 
                                               download>
                                                <i class="fas fa-download me-1"></i>Download
                                            </a>
                                        </div>
                                    </div>
                                    
                                    @if(pathinfo($recordFile->file_path, PATHINFO_EXTENSION) == 'pdf')
                                        <div class="embed-responsive embed-responsive-16by9 mb-3">
                                            <iframe src="{{ asset('storage/' . $recordFile->file_path) }}" 
                                                    style="width: 100%; height: 500px;" 
                                                    frameborder="0"></iframe>
                                        </div>
                                    @endif
                                @else
                                    <p class="text-muted">No file uploaded for this document.</p>
                                @endif
                            </div>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-0">No document file available for this approval.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Workflow Steps -->
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-project-diagram me-2"></i>Workflow Steps
                </div>
                <div class="card-body">
                    @if(isset($workflowSteps) && $workflowSteps->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered">
                                <thead>
                                    <tr>
                                        <th>Step</th>
                                        <th>Name</th>
                                        <th>Approver</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($workflowSteps as $step)
                                        <tr>
                                            <td>{{ $step->step_order }}</td>
                                            <td>{{ $step->step_name }}</td>
                                            <td>
                                                @if($step->approver_type == 'USER')
                                                    {{ $step->approver->name ?? 'Not assigned' }}
                                                @elseif($step->approver_type == 'ROLE')
                                                    {{ $step->required_role ?? 'Any' }}
                                                @endif
                                            </td>
                                            <td>
                                                @if($step->step_order < $instance->current_step)
                                                    <span class="badge bg-success">Completed</span>
                                                @elseif($step->step_order == $instance->current_step && $instance->status == 'PENDING')
                                                    <span class="badge bg-warning">Current</span>
                                                @elseif($step->step_order == $instance->current_step && $instance->status != 'PENDING')
                                                    <span class="badge bg-info">Final</span>
                                                @else
                                                    <span class="badge bg-secondary">Pending</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted text-center">No workflow steps configured</p>
                    @endif
                </div>
            </div>

            <!-- Approval Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-list me-2"></i>Approval Actions
                </div>
                <div class="card-body">
                    @if(isset($actions) && $actions->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered">
                                <thead>
                                    <tr>
                                        <th>Approver</th>
                                        <th>Action</th>
                                        <th>Comment</th>
                                        <th>Signature</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($actions as $action)
                                        <tr>
                                            <td>{{ $action->approver->name ?? 'Unknown' }}</td>
                                            <td>
                                                @if($action->action == 'APPROVE')
                                                    <span class="badge bg-success">Approved</span>
                                                @elseif($action->action == 'REJECT')
                                                    <span class="badge bg-danger">Rejected</span>
                                                @elseif($action->action == 'COMMENT')
                                                    <span class="badge bg-info">Commented</span>
                                                @else
                                                    <span class="badge bg-secondary">{{ $action->action }}</span>
                                                @endif
                                            </td>
                                            <td>{{ $action->comment ?? '-' }}</td>
                                            <td>
                                                @if($action->signature_url)
                                                    <img src="{{ $action->signature_url }}" 
                                                         alt="Signature" 
                                                         style="max-height: 40px; max-width: 100px;"
                                                         class="img-fluid">
                                                @elseif(isset($employeeSignatures[$action->approver_user_id]))
                                                    <img src="{{ asset('storage/' . $employeeSignatures[$action->approver_user_id]) }}" 
                                                         alt="Signature" 
                                                         style="max-height: 40px; max-width: 100px;"
                                                         class="img-fluid">
                                                @else
                                                    <span class="text-muted">No signature</span>
                                                @endif
                                            </td>
                                            <td>{{ $action->created_at ? $action->created_at->format('M d, Y H:i') : 'N/A' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted text-center">No actions recorded yet</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Workflow Info -->
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-cogs me-2"></i>Workflow Information
                </div>
                <div class="card-body">
                    @if(isset($workflow))
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <strong>Workflow:</strong> {{ $workflow->workflow_name ?? 'Unknown' }}
                            </li>
                            <li class="list-group-item">
                                <strong>Code:</strong> {{ $workflow->workflow_code ?? 'N/A' }}
                            </li>
                            <li class="list-group-item">
                                <strong>Module:</strong> {{ $workflow->module_type ?? 'N/A' }}
                            </li>
                            <li class="list-group-item">
                                <strong>Description:</strong> {{ $workflow->description ?? 'N/A' }}
                            </li>
                        </ul>
                    @else
                        <p class="text-muted">Workflow information not available</p>
                    @endif
                </div>
            </div>

            <!-- Current User Signature -->
            @if(isset($currentUserSignature) && $currentUserSignature && $canApprove)
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-signature me-2"></i>Your Signature
                </div>
                <div class="card-body text-center">
                    <img src="{{ asset('storage/' . $currentUserSignature) }}" 
                         alt="Your Signature" 
                         style="max-height: 80px; max-width: 200px;"
                         class="img-fluid">
                    <p class="text-muted small mt-2 mb-0">This signature will be attached to your approval action</p>
                </div>
            </div>
            @endif

            <!-- Action Buttons -->
            @if(isset($canApprove) && $canApprove && $instance->status == 'PENDING')
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-gavel me-2"></i>Take Action
                </div>
                <div class="card-body">
                    <form action="{{ route('approvals.instances.act', $instance->instance_id) }}" method="POST">
                        @csrf
                        <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>
                        
                        @if(isset($currentUserSignature) && $currentUserSignature)
                        <div class="mb-3">
                            <div class="text-center">
                                <img src="{{ asset('storage/' . $currentUserSignature) }}" 
                                     alt="Your Signature" 
                                     style="max-height: 50px; max-width: 150px;"
                                     class="img-fluid border rounded p-2">
                                <small class="text-muted d-block">Your signature will be attached</small>
                            </div>
                        </div>
                        @endif
                        
                        <div class="d-grid gap-2">
                            <button type="submit" name="action" value="APPROVE" class="btn btn-success">
                                <i class="fas fa-check me-2"></i>Approve
                            </button>
                            <button type="submit" name="action" value="REJECT" class="btn btn-danger">
                                <i class="fas fa-times me-2"></i>Reject
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection