@extends('layouts.admin')

@section('title', 'Application Step Navigation')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Step Navigation Analysis</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('admin.applications.show', $application) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Application
            </a>
        </div>
    </div>

    <!-- Application Info -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Application Information</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <p><strong>Application Number:</strong> {{ $application->application_number }}</p>
                    <p><strong>Applicant:</strong> {{ $application->personalInformation->full_name ?? 'N/A' }}</p>
                    <p><strong>Status:</strong> <span class="badge bg-{{ $application->status_color }}">{{ ucfirst($application->status) }}</span></p>
                </div>
                <div class="col-md-6">
                    <p><strong>Position:</strong> {{ $application->advertisement->title ?? 'N/A' }}</p>
                    <p><strong>Department:</strong> {{ $application->advertisement->department->name ?? 'N/A' }}</p>
                    <p><strong>Created:</strong> {{ $application->created_at->format('M d, Y h:i A') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Step Navigation Status -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Step Navigation Status</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th>Order</th>
                            <th>Step Name</th>
                            <th>Status</th>
                            <th>Accessible</th>
                            <th>Has Data</th>
                            <th>Is Skipped</th>
                            <th>Records Count</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($activeSteps as $step)
                            @php
                                $stepInfo = $accessibleSteps[$step->slug] ?? null;
                                $status = $stepInfo ? $stepInfo['status'] : 'unknown';
                                $accessible = $stepInfo ? $stepInfo['accessible'] : false;
                                $hasData = $application->hasStepData($step->slug);
                                $isSkipped = $application->isStepSkipped($step->slug);
                                $recordsCount = $application->getStepRecordsCount($step->slug);
                            @endphp
                            <tr>
                                <td>{{ $step->order_index }}</td>
                                <td>{{ $step->name }}</td>
                                <td>
                                    @if($status === 'completed')
                                        <span class="badge bg-success">Completed</span>
                                    @elseif($status === 'skipped')
                                        <span class="badge bg-warning">Skipped</span>
                                    @elseif($status === 'locked')
                                        <span class="badge bg-secondary">Locked</span>
                                    @else
                                        <span class="badge bg-light text-dark">{{ ucfirst($status) }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($accessible)
                                        <span class="text-success"><i class="fas fa-check"></i> Yes</span>
                                    @else
                                        <span class="text-danger"><i class="fas fa-times"></i> No</span>
                                    @endif
                                </td>
                                <td>
                                    @if($hasData)
                                        <span class="text-success"><i class="fas fa-check"></i> Yes</span>
                                    @else
                                        <span class="text-muted"><i class="fas fa-minus"></i> No</span>
                                    @endif
                                </td>
                                <td>
                                    @if($isSkipped)
                                        <span class="text-warning"><i class="fas fa-forward"></i> Yes</span>
                                    @else
                                        <span class="text-muted"><i class="fas fa-minus"></i> No</span>
                                    @endif
                                </td>
                                <td>
                                    @if($recordsCount > 0)
                                        <span class="badge bg-info">{{ $recordsCount }}</span>
                                    @else
                                        <span class="text-muted">0</span>
                                    @endif
                                </td>
                                <td>
                                    @if($accessible)
                                        <a href="{{ route('applicant.applications.step', [$application, $step->slug]) }}" 
                                           class="btn btn-sm btn-outline-primary" target="_blank" title="View Step">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    @else
                                        <span class="text-muted">Not Accessible</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Step Statistics -->
    <div class="row">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body text-center">
                    <div class="h4 text-primary">{{ $statistics['total'] }}</div>
                    <div class="small text-muted">Total Steps</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body text-center">
                    <div class="h4 text-success">{{ $statistics['completed'] }}</div>
                    <div class="small text-muted">Completed Steps</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body text-center">
                    <div class="h4 text-warning">{{ $statistics['skipped'] }}</div>
                    <div class="small text-muted">Skipped Steps</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-secondary">
                <div class="card-body text-center">
                    <div class="h4 text-secondary">{{ $statistics['locked'] }}</div>
                    <div class="small text-muted">Locked Steps</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Flow -->
    <div class="card shadow mt-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Navigation Flow</h6>
        </div>
        <div class="card-body">
            <div class="alert alert-info">
                <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Navigation Rules</h6>
                <ul class="mb-0">
                    <li><strong>Accessible Steps:</strong> Steps with data, skipped steps, or current/previous steps</li>
                    <li><strong>Completed Steps:</strong> Steps that have data entries</li>
                    <li><strong>Skipped Steps:</strong> Steps marked as not applicable by the user</li>
                    <li><strong>Locked Steps:</strong> Steps that cannot be accessed until prerequisites are met</li>
                </ul>
            </div>
            
            <div class="mt-3">
                <h6>First Accessible Step: 
                    <span class="badge bg-primary">{{ $firstAccessibleStep ?? 'None' }}</span>
                </h6>
                <p class="text-muted">This is where users will be redirected if they try to access an inaccessible step.</p>
            </div>
        </div>
    </div>
</div>
@endsection