@extends('layouts.app')

@section('title', 'Create Deviation / Nonconformance')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0"><i class="fas fa-plus-circle mr-2"></i>Create New Record</h1>
        <a href="{{ route('deviations.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left mr-1"></i>Back
        </a>
    </div>

    @include('deviations.partials.alerts')

    <div class="card shadow">
        <form method="POST" action="{{ route('deviations.store') }}">
            @csrf
            <div class="card-body">

                {{-- Record kind --}}
                <div class="mb-4">
                    <label class="form-label font-weight-bold">Record Kind *</label>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check border rounded p-3">
                                <input class="form-check-input" type="radio" name="record_kind"
                                       id="kind_deviation" value="DEVIATION"
                                       @checked(old('record_kind', $recordKind ?? 'DEVIATION') === 'DEVIATION')>
                                <label class="form-check-label" for="kind_deviation">
                                    <strong>Deviation</strong>
                                    <small class="d-block text-muted">Departure from procedure / spec / standard</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check border rounded p-3">
                                <input class="form-check-input" type="radio" name="record_kind"
                                       id="kind_nc" value="NONCONFORMANCE"
                                       @checked(old('record_kind', $recordKind ?? '') === 'NONCONFORMANCE')>
                                <label class="form-check-label" for="kind_nc">
                                    <strong>Nonconformance</strong>
                                    <small class="d-block text-muted">Product / material not meeting requirements</small>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label class="form-label">Title *</label>
                            <input type="text" name="title" value="{{ old('title') }}"
                                   class="form-control @error('title') is-invalid @enderror"
                                   maxlength="255" required>
                            @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Category *</label>
                            <select name="deviation_category" class="form-control" required>
                                <option value="">Select…</option>
                                <option value="PLANNED" @selected(old('deviation_category') === 'PLANNED')>Planned</option>
                                <option value="UNPLANNED" @selected(old('deviation_category') === 'UNPLANNED')>Unplanned</option>
                            </select>
                            @error('deviation_category') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description *</label>
                    <textarea name="description" rows="4"
                              class="form-control @error('description') is-invalid @enderror"
                              required minlength="20">{{ old('description') }}</textarea>
                    @error('description') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    <small class="text-muted">Minimum 20 characters. Describe what happened, where, and when.</small>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Type *</label>
                            <select name="deviation_type" id="deviation_type"
                                    class="form-control @error('deviation_type') is-invalid @enderror" required>
                                <option value="">Select kind first…</option>
                            </select>
                            @error('deviation_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Department *</label>
                            <select name="department_id" class="form-control" required>
                                <option value="">Select…</option>
                                @foreach(\App\Models\Department::orderBy('department_name')->get() as $dept)
                                    <option value="{{ $dept->department_id }}"
                                            @selected(old('department_id') == $dept->department_id)>
                                        {{ $dept->department_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Emergency?</label>
                            <div class="custom-control custom-switch mt-2">
                                <input class="custom-control-input" type="checkbox" name="is_emergency"
                                       id="is_emergency" value="1" @checked(old('is_emergency'))>
                                <label class="custom-control-label" for="is_emergency">
                                    Flag as emergency
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Location *</label>
                            <input type="text" name="location" value="{{ old('location') }}"
                                   class="form-control" required maxlength="255">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Process Step</label>
                            <input type="text" name="process_step" value="{{ old('process_step') }}"
                                   class="form-control" maxlength="255">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Discovered By *</label>
                            <select name="discovered_by" class="form-control" required>
                                <option value="">Select…</option>
                                @foreach(\App\Models\User::orderBy('name')->get() as $u)
                                    <option value="{{ $u->id }}" @selected(old('discovered_by') == $u->id)>
                                        {{ $u->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label">Discovered At *</label>
                            <input type="datetime-local" name="discovered_date"
                                   value="{{ old('discovered_date', now()->format('Y-m-d\TH:i')) }}"
                                   class="form-control" required>
                        </div>
                    </div>
                    <div class="col-md-4 planned-field" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Planned Start</label>
                            <input type="date" name="planned_start_date" value="{{ old('planned_start_date') }}"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="col-md-4 planned-field" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Planned End</label>
                            <input type="date" name="planned_end_date" value="{{ old('planned_end_date') }}"
                                   class="form-control">
                        </div>
                    </div>
                </div>

                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    After creating this record, you'll be taken to the Phase 1 view where you can add
                    affected items, containment actions, and progress through the 5-phase lifecycle.
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="{{ route('deviations.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Cancel
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Create Record
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const typeMap = {
        DEVIATION: ['PROCESS', 'EQUIPMENT', 'DOCUMENTATION', 'PERSONNEL', 'MATERIAL', 'ENVIRONMENTAL', 'SYSTEM', 'OTHER'],
        NONCONFORMANCE: ['INCOMING_MATERIAL', 'IN_PROCESS', 'FINAL_PRODUCT', 'PACKAGING', 'LABELLING', 'SHIPPING', 'OTHER'],
    };

    function refreshTypes() {
        const kind = document.querySelector('input[name="record_kind"]:checked')?.value || 'DEVIATION';
        const sel = document.getElementById('deviation_type');
        const old = @json(old('deviation_type'));
        sel.innerHTML = '<option value="">Select…</option>';
        (typeMap[kind] || []).forEach(t => {
            const o = document.createElement('option');
            o.value = t;
            o.textContent = t.replace(/_/g, ' ');
            if (t === old) o.selected = true;
            sel.appendChild(o);
        });
    }

    function togglePlanned() {
        const cat = document.querySelector('[name="deviation_category"]').value;
        document.querySelectorAll('.planned-field').forEach(el => {
            el.style.display = cat === 'PLANNED' ? '' : 'none';
        });
    }

    document.querySelectorAll('input[name="record_kind"]').forEach(r => r.addEventListener('change', refreshTypes));
    document.querySelector('[name="deviation_category"]').addEventListener('change', togglePlanned);

    refreshTypes();
    togglePlanned();
</script>
@endpush