@extends('layouts.app')

@section('title', $deviation->deviation_number . ' — ' . $deviation->title)

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

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">
            <span class="badge badge-{{ $deviation->record_kind->badge() }} mr-2">
                {{ $deviation->record_kind->label() }}
            </span>
            {{ $deviation->deviation_number }}
            @if($deviation->is_emergency)
                <span class="badge badge-danger">
                    <i class="fas fa-bolt"></i> EMERGENCY
                </span>
            @endif
        </h1>
        <div class="no-print">
            <a href="{{ route('deviations.compliance.show', $deviation) }}"
               class="btn btn-success btn-sm">
                <i class="fas fa-certificate mr-1"></i>QMS-001 Evidence
            </a>
            <a href="{{ route('deviations.edit', $deviation) }}" class="btn btn-primary btn-sm">
                <i class="fas fa-edit mr-1"></i>Edit
            </a>
            <a href="{{ route('deviations.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left mr-1"></i>Back
            </a>
        </div>
    </div>

    @include('deviations.partials.alerts')

    {{-- Header --}}
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ $deviation->title }}</h6>
        </div>

        <div class="card-body">
            {{-- Status row --}}
            <div class="row">
                <div class="col-md-3">
                    <strong>Status:</strong>
                    <span class="badge badge-{{ $deviation->status->badge() }}">
                        {{ $deviation->status->label() }}
                    </span>
                </div>
                <div class="col-md-3">
                    <strong>Phase:</strong> {{ $currentPhase }} of 5
                </div>
                <div class="col-md-3">
                    <strong>Department:</strong> {{ $deviation->department?->department_name }}
                </div>
                <div class="col-md-3">
                    <strong>Discovered:</strong>
                    {{ $deviation->discovered_date?->format('M j, Y H:i') }}
                    by {{ $deviation->discoveredByUser?->name }}
                </div>
            </div>
        </div>
    </div>

    {{-- Progress bar --}}
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between mb-2">
                <strong>Overall Progress</strong>
                <strong>{{ round($progress) }}%</strong>
            </div>
            <div class="progress" style="height: 18px;">
                <div class="progress-bar bg-success" style="width: {{ $progress }}%">
                    {{ round($progress) }}%
                </div>
            </div>
        </div>
    </div>

    {{-- Phase Timeline --}}
    @php
        $phases = [
            1 => ['name' => 'Initiation & Containment', 'icon' => 'fa-flag'],
            2 => ['name' => 'Risk Assessment',          'icon' => 'fa-clipboard-check'],
            3 => ['name' => 'Investigation',            'icon' => 'fa-search'],
            4 => ['name' => 'Impact & CAPA',            'icon' => 'fa-tasks'],
            5 => ['name' => 'Effectiveness & Closure',  'icon' => 'fa-lock'],
        ];
    @endphp
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row text-center">
                @foreach($phases as $num => $p)
                    @php
                        $phaseColor = $num < $currentPhase ? 'success' : ($num == $currentPhase ? 'primary' : 'secondary');
                    @endphp
                    <div class="col">
                        <span class="badge badge-{{ $phaseColor }} p-2" style="font-size: 1rem;">
                            @if($num < $currentPhase)
                                <i class="fas fa-check"></i>
                            @else
                                <i class="fas {{ $p['icon'] }}"></i>
                            @endif
                        </span>
                        <div class="font-weight-bold mt-1">Phase {{ $num }}</div>
                        <div class="text-xs text-muted">{{ $p['name'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Gate Action --}}
    @if($currentPhase < 5)
        <div class="card border-{{ $gateStatus['passed'] ? 'success' : 'warning' }} mb-4">
            <div class="card-header bg-{{ $gateStatus['passed'] ? 'success' : 'warning' }} text-white">
                <h5 class="mb-0">
                    <i class="fas fa-{{ $gateStatus['passed'] ? 'check-circle' : 'hourglass-half' }}"></i>
                    Gate {{ $currentPhase }}: {{ $gateStatus['gate'] }}
                </h5>
            </div>
            <div class="card-body">
                @if($gateStatus['passed'])
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i>
                        <strong>All prerequisites met.</strong>
                        You may advance to Phase {{ $currentPhase + 1 }}.
                    </div>
                    <form method="POST" action="{{ route('deviations.advance-phase', $deviation) }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Comments / Justification *</label>
                            <textarea name="comments" rows="3" class="form-control" required
                                      placeholder="Provide justification for advancing...">{{ old('comments') }}</textarea>
                        </div>
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fas fa-arrow-right"></i>
                            Advance to Phase {{ $currentPhase + 1 }}
                        </button>
                    </form>
                @else
                    <div class="alert alert-warning mb-3">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Prerequisites not met:</strong>
                        <ul class="mb-0 mt-2">
                            @foreach($gateStatus['missing'] as $m)
                                <li>{{ $m }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <button class="btn btn-secondary" disabled>
                        <i class="fas fa-lock"></i> Complete prerequisites to advance
                    </button>
                @endif
            </div>
        </div>
    @endif
@include('record-links._tab', ['record' => $deviation])
    {{-- Tab Navigation --}}
    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item">
            <a class="nav-link {{ $currentPhase == 1 ? 'active' : '' }}"
               data-toggle="tab" href="#phase1">
                <span class="badge badge-info mr-1">1</span> Containment
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $currentPhase == 2 ? 'active' : '' }}"
               data-toggle="tab" href="#phase2">
                <span class="badge badge-info mr-1">2</span> Risk
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $currentPhase == 3 ? 'active' : '' }}"
               data-toggle="tab" href="#phase3">
                <span class="badge badge-info mr-1">3</span> Investigation
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $currentPhase == 4 ? 'active' : '' }}"
               data-toggle="tab" href="#phase4">
                <span class="badge badge-info mr-1">4</span> CAPA
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $currentPhase == 5 ? 'active' : '' }}"
               data-toggle="tab" href="#phase5">
                <span class="badge badge-info mr-1">5</span> Closure
            </a>
        </li>
    </ul>

    {{-- Tab Content --}}
    <div class="tab-content">
        <div class="tab-pane fade {{ $currentPhase == 1 ? 'show active' : '' }}" id="phase1">
            @include('deviations.partials.phase1', ['deviation' => $deviation])
        </div>
        <div class="tab-pane fade {{ $currentPhase == 2 ? 'show active' : '' }}" id="phase2">
            @include('deviations.partials.phase2', ['deviation' => $deviation])
        </div>
        <div class="tab-pane fade {{ $currentPhase == 3 ? 'show active' : '' }}" id="phase3">
            @include('deviations.partials.phase3', ['deviation' => $deviation])
        </div>
        <div class="tab-pane fade {{ $currentPhase == 4 ? 'show active' : '' }}" id="phase4">
            @include('deviations.partials.phase4', ['deviation' => $deviation])
        </div>
        <div class="tab-pane fade {{ $currentPhase == 5 ? 'show active' : '' }}" id="phase5">
            @include('deviations.partials.phase5', ['deviation' => $deviation])
        </div>
    </div>

    {{-- Evidence --}}
    <div class="card shadow mt-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-paperclip mr-1"></i>Supporting Evidence</h6>
            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#uploadEvidenceModal">
                <i class="fas fa-upload mr-1"></i>Upload
            </button>
        </div>
        <div class="card-body">
            @include('deviations.partials.evidence-list', ['deviation' => $deviation])
        </div>
    </div>

    {{-- Audit Trail --}}
    <div class="card shadow mt-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-history mr-1"></i>Audit Trail</h6>
        </div>
        <div class="card-body">
            @include('deviations.partials.audit-trail', ['deviation' => $deviation])
        </div>
    </div>
</div>

{{-- Upload Evidence Modal --}}
<div class="modal fade" id="uploadEvidenceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('deviations.evidence.store', $deviation) }}"
                  enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Upload Evidence</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Evidence Type *</label>
                        <select name="evidence_type" class="form-control" required>
                            <option value="">Select…</option>
                            <option value="PHOTO">Photo</option>
                            <option value="VIDEO">Video</option>
                            <option value="DATA_PRINTOUT">Data Printout</option>
                            <option value="EQUIPMENT_LOG">Equipment Log</option>
                            <option value="BATCH_RECORD">Batch Record</option>
                            <option value="EMAIL">Email</option>
                            <option value="OTHER">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">File *</label>
                        <input type="file" name="file" class="form-control" required>
                        <small class="text-muted">Max 20MB.</small>
                    </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">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection