@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        {{-- =============================================================== --}}
        {{-- BLOK LOGIKA UNTUK MENENTUKAN STATUS PENGUNCIAN (READ-ONLY)    --}}
        {{-- =============================================================== --}}
        @php
            $isLocked = $incident->isClosed();
            $readonly = $isLocked ? 'readonly' : '';
            $disabled = $isLocked ? 'disabled' : ''; 
            $formColor = $isLocked ? 'bg-light text-muted' : '';
        @endphp

        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Edit Incident: {{ $incident->incident_number }}</h5>
                @if($isLocked)
                    <span class="badge bg-warning text-dark fw-bold">
                        <i class="bi bi-lock-fill"></i> TERKUNCI (READ-ONLY)
                    </span>
                @endif
            </div>

            <div class="card-body">
                <form action="{{ route('incidents.update', $incident->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    {{-- Incident Number --}}
                    <div class="mb-3">
                        <label class="form-label fw-bold">Incident Number</label>
                        <input type="text" name="incident_number" class="form-control bg-light" value="{{ $incident->incident_number }}" readonly required>
                    </div>

                    {{-- Short Description --}}
                    <div class="mb-3">
                        <label class="form-label fw-bold">Short Description</label>
                        <input type="text" name="short_description" class="form-control {{ $formColor }} @error('short_description') is-invalid @enderror" value="{{ old('short_description', $incident->short_description) }}" required {{ $readonly }}>
                        @error('short_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Full Description --}}
                    <div class="mb-3">
                        <label class="form-label fw-bold">Description</label>
                        <textarea name="description" class="form-control {{ $formColor }} @error('description') is-invalid @enderror" rows="4" required {{ $readonly }}>{{ old('description', $incident->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        {{-- Category --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Category</label>
                            {{-- PERBAIKAN: Gunakan nama 'category' jika tidak terkunci --}}
                            <select name="{{ $isLocked ? 'category_display' : 'category' }}" class="form-control {{ $formColor }}" {{ $disabled }}>
                                <option value="Software" {{ old('category', $incident->category) == 'Software' ? 'selected' : '' }}>Software</option>
                                <option value="Hardware" {{ old('category', $incident->category) == 'Hardware' ? 'selected' : '' }}>Hardware</option>
                                <option value="Network" {{ old('category', $incident->category) == 'Network' ? 'selected' : '' }}>Network</option>
                                <option value="Security" {{ old('category', $incident->category) == 'Security' ? 'selected' : '' }}>Security</option>
                                <option value="Other" {{ old('category', $incident->category) == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @if($isLocked)
                                <input type="hidden" name="category" value="{{ $incident->category }}">
                            @endif
                        </div>

                        {{-- Priority --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Priority</label>
                            {{-- PERBAIKAN: Gunakan nama 'priority' jika tidak terkunci --}}
                            <select name="{{ $isLocked ? 'priority_display' : 'priority' }}" class="form-control {{ $formColor }}" {{ $disabled }}>
                                <option value="Low" {{ old('priority', $incident->priority) == 'Low' ? 'selected' : '' }}>Low</option>
                                <option value="Medium" {{ old('priority', $incident->priority) == 'Medium' ? 'selected' : '' }}>Medium</option>
                                <option value="High" {{ old('priority', $incident->priority) == 'High' ? 'selected' : '' }}>High</option>
                                <option value="Critical" {{ old('priority', $incident->priority) == 'Critical' ? 'selected' : '' }}>Critical</option>
                            </select>
                            @if($isLocked)
                                <input type="hidden" name="priority" value="{{ $incident->priority }}">
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        {{-- Subcategory --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Subcategory</label>
                            <input type="text" name="subcategory" class="form-control {{ $formColor }} @error('subcategory') is-invalid @enderror" value="{{ old('subcategory', $incident->subcategory) }}" {{ $readonly }}>
                            @error('subcategory')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- State --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">State (Status)</label>
                            {{-- PERBAIKAN UTAMA: Penamaan atribut name secara dinamis --}}
                            <select name="{{ $isLocked ? 'state_display' : 'state' }}" class="form-control {{ $formColor }} @error('state') is-invalid @enderror" id="incidentState" {{ $disabled }}>
                                <option value="New" {{ old('state', $incident->state) == 'New' ? 'selected' : '' }}>Open</option>
                                <option value="In Progress" {{ old('state', $incident->state) == 'In Progress' ? 'selected' : '' }}>In Progress</option>
                                <option value="Resolved" {{ old('state', $incident->state) == 'Resolved' ? 'selected' : '' }}>Resolved</option>
                                <option value="Closed" {{ old('state', $incident->state) == 'Closed' ? 'selected' : '' }}>Closed</option>
                            </select>
                            @if($isLocked)
                                <input type="hidden" name="state" value="Closed">
                            @endif
                            @error('state')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Closed Date Time --}}
                    <div class="mb-3" id="closedDateContainer" style="{{ (old('state', $incident->state) === 'Closed' || old('state', $incident->state) === 'Resolved') ? 'display:block;' : 'display:none;' }}">
                        <label class="form-label fw-bold">Closed Date Time</label>
                        <input type="datetime-local" name="closed_at" class="form-control {{ $formColor }} @error('closed_at') is-invalid @enderror" step="1" value="{{ $incident->closed_at ? $incident->closed_at->format('Y-m-d\TH:i:s') : old('closed_at') }}" {{ $readonly }}>
                        @if(!$isLocked)
                            <small class="text-muted">Tentukan waktu penutupan saat status menjadi Resolved/Closed.</small>
                        @endif
                        @error('closed_at')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Assigned To --}}
                    <div class="mb-4">
                        <label class="form-label fw-bold">Assigned To</label>
                        <input type="text" name="assigned_to" class="form-control {{ $formColor }} @error('assigned_to') is-invalid @enderror" value="{{ old('assigned_to', $incident->assigned_to) }}" {{ $readonly }}>
                        @error('assigned_to')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- FASE KEDB --}}
                    @if(!$isLocked)
                        <div class="card mb-4 border-info shadow-sm">
                            <div class="card-header bg-info text-white d-flex align-items-center">
                                <div class="form-check mb-0">
                                    <input class="form-check-input" type="checkbox" name="create_kedb" id="createKEDB" value="1" style="transform: scale(1.3); margin-top: 6px;" {{ old('create_kedb') == '1' ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold ms-2" for="createKEDB" style="cursor: pointer;">
                                        Buat KEDB Baru (Solusi) dari Insiden Ini
                                    </label>
                                </div>
                            </div>
                            
                            <div class="card-body bg-light" id="kedbForm" style="{{ (old('create_kedb') == '1' || $errors->has('kedb_root_cause') || $errors->has('kedb_workaround')) ? 'display: block;' : 'display: none;' }}">
                                <p class="small text-muted mb-3">Sistem akan meng-generate ID KEDB otomatis. Kolom dengan * wajib diisi.</p>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-bold">KEDB Title</label>
                                    <input type="text" name="kedb_title" class="form-control @error('kedb_title') is-invalid @enderror" value="{{ old('kedb_title', $incident->short_description) }}">
                                    @error('kedb_title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Root Cause (Akar Masalah) *</label>
                                    <textarea name="kedb_root_cause" class="form-control @error('kedb_root_cause') is-invalid @enderror" rows="2">{{ old('kedb_root_cause') }}</textarea>
                                    @error('kedb_root_cause')
                                        <div class="invalid-feedback fw-bold">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Workaround / Resolution (Solusi) *</label>
                                    <textarea name="kedb_workaround" class="form-control @error('kedb_workaround') is-invalid @enderror" rows="3">{{ old('kedb_workaround') }}</textarea>
                                    @error('kedb_workaround')
                                        <div class="invalid-feedback fw-bold">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="d-flex justify-content-between mt-3">
                        <a href="{{ route('incidents.index') }}" class="btn btn-secondary px-4">
                            <i class="bi bi-arrow-left"></i> Back
                        </a>
                        @if(!$isLocked)
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="bi bi-save"></i> Update Incident
                            </button>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    @if(!$isLocked)
        document.getElementById('createKEDB').addEventListener('change', function() {
            document.getElementById('kedbForm').style.display = this.checked ? 'block' : 'none';
        });

        document.getElementById('incidentState').addEventListener('change', function() {
            if(this.value === 'Closed' || this.value === 'Resolved') {
                document.getElementById('closedDateContainer').style.display = 'block';
            } else {
                document.getElementById('closedDateContainer').style.display = 'none';
            }
        });
    @endif
</script>
@endsection