{{-- PHASE 1: INITIATION & CONTAINMENT --}}
<section class="phase-section" data-phase="1">

    {{-- Basic Info --}}
    <div class="card mb-3">
        <div class="card-header">
            <h4><span class="badge badge-info mr-1">1</span> Basic Information</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-sm">
                        <tr><th width="40%">Number</th><td>{{ $deviation->deviation_number }}</td></tr>
                        <tr><th>Kind</th><td>
                            <span class="badge badge-{{ $deviation->record_kind->badge() }}">
                                {{ $deviation->record_kind->label() }}
                            </span>
                        </td></tr>
                        <tr><th>Type</th><td>{{ $deviation->deviation_type }}</td></tr>
                        <tr><th>Category</th><td>{{ $deviation->deviation_category }}</td></tr>
                        <tr><th>Department</th><td>{{ $deviation->department?->department_name }}</td></tr>
                        <tr><th>Location</th><td>{{ $deviation->location }}</td></tr>
                        <tr><th>Process Step</th><td>{{ $deviation->process_step ?? '—' }}</td></tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <strong>Description:</strong>
                    <div class="border rounded p-3 bg-light mt-2">
                        {!! nl2br(e($deviation->description)) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Affected Items --}}
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between">
            <h5 class="mb-0"><i class="fas fa-boxes"></i> Affected Items / Batches</h5>
            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addAffectedModal">
                <i class="fas fa-plus"></i> Add Item
            </button>
        </div>
        <div class="card-body">
            @if($deviation->affectedItems->isEmpty())
                <div class="alert alert-info mb-0">
                    No affected items recorded yet. Add at least one to pass Gate 1.
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead class="thead-light">
                            <tr>
                                <th>Batch #</th>
                                <th>Product Code</th>
                                <th>Quantity</th>
                                <th>Disposition</th>
                                <th>Disposition Date</th>
                                <th class="no-print">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($deviation->affectedItems as $item)
                                <tr>
                                    <td>{{ $item->batch_number ?? '—' }}</td>
                                    <td>{{ $item->product_code ?? '—' }}</td>
                                    <td>
                                        @if($item->quantity_affected)
                                            {{ number_format($item->quantity_affected, 3) }}
                                            {{ $item->unit_of_measure }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-{{ match($item->disposition) {
                                            'RELEASED' => 'success',
                                            'REJECTED' => 'danger',
                                            'REWORK' => 'warning',
                                            'HOLD' => 'info',
                                            default => 'secondary',
                                        } }}">{{ $item->disposition }}</span>
                                    </td>
                                    <td>{{ $item->disposition_date?->format('M j, Y') ?? '—' }}</td>
                                    <td class="no-print">
                                        <form method="POST"
                                              action="{{ route('deviations.affected-items.destroy', $item) }}"
                                              onsubmit="return confirm('Remove item?')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-sm btn-danger">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Containment --}}
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between">
            <h5 class="mb-0"><i class="fas fa-shield-alt"></i> Containment Actions</h5>
            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addContainmentModal">
                <i class="fas fa-plus"></i> Add Containment
            </button>
        </div>
        <div class="card-body">
            @if($deviation->containments->isEmpty())
                <div class="alert alert-info mb-0">
                    No containment actions recorded. Add at least one to pass Gate 1.
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead class="thead-light">
                            <tr>
                                <th>Type</th>
                                <th>Description</th>
                                <th>Taken By</th>
                                <th>Date</th>
                                <th>Effectiveness</th>
                                <th class="no-print">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($deviation->containments as $c)
                                <tr>
                                    <td>
                                        <span class="badge badge-{{ match($c->action_type) {
                                            'IMMEDIATE_CORRECTION' => 'success',
                                            'CONTAINMENT' => 'warning',
                                            'ISOLATION' => 'info',
                                            'PROCESS_STOP' => 'danger',
                                            default => 'secondary',
                                        } }}">{{ str_replace('_', ' ', $c->action_type) }}</span>
                                    </td>
                                    <td>{{ Str::limit($c->action_description, 80) }}</td>
                                    <td>{{ $c->takenByUser?->name ?? '—' }}</td>
                                    <td>{{ $c->action_date?->format('M j, Y') }}</td>
                                    <td>
                                        <span class="badge badge-{{ match($c->effectiveness) {
                                            'FULLY_EFFECTIVE' => 'success',
                                            'PARTIALLY_EFFECTIVE' => 'warning',
                                            'NOT_EFFECTIVE' => 'danger',
                                            default => 'secondary',
                                        } }}">{{ str_replace('_', ' ', $c->effectiveness) }}</span>
                                    </td>
                                    <td class="no-print">
                                        <form method="POST"
                                              action="{{ route('deviations.containments.destroy', $c) }}"
                                              onsubmit="return confirm('Delete containment?')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-sm btn-danger">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</section>

{{-- Add Affected Item Modal --}}
<div class="modal fade" id="addAffectedModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('deviations.affected-items.store', $deviation) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Affected Item</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="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Batch Number</label>
                            <input type="text" name="batch_number" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Product Code</label>
                            <input type="text" name="product_code" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Quantity</label>
                            <input type="number" step="0.001" name="quantity_affected" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Unit</label>
                            <input type="text" name="unit_of_measure" class="form-control" placeholder="kg, L, units">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Disposition *</label>
                            <select name="disposition" class="form-control" required>
                                <option value="QUARANTINE">Quarantine</option>
                                <option value="HOLD">Hold</option>
                                <option value="RELEASED">Released</option>
                                <option value="REJECTED">Rejected</option>
                                <option value="REWORK">Rework</option>
                            </select>
                        </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">Add Item</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Add Containment Modal --}}
<div class="modal fade" id="addContainmentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('deviations.containments.store', $deviation) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Containment Action</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">Action Type *</label>
                        <select name="action_type" class="form-control" required>
                            <option value="IMMEDIATE_CORRECTION">Immediate Correction</option>
                            <option value="CONTAINMENT">Containment</option>
                            <option value="ISOLATION">Isolation</option>
                            <option value="PROCESS_STOP">Process Stop</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description *</label>
                        <textarea name="action_description" rows="3" class="form-control" required minlength="10"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Action Date *</label>
                        <input type="datetime-local" name="action_date"
                               value="{{ now()->format('Y-m-d\TH:i') }}"
                               class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Effectiveness *</label>
                        <select name="effectiveness" class="form-control" required>
                            <option value="FULLY_EFFECTIVE">Fully Effective</option>
                            <option value="PARTIALLY_EFFECTIVE">Partially Effective</option>
                            <option value="NOT_EFFECTIVE">Not Effective</option>
                        </select>
                    </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">Add Action</button>
                </div>
            </form>
        </div>
    </div>
</div>