@extends('layouts.app')

@section('title', 'Create Incident')

@section('content')
<div class="container" style="max-width: 800px;">
    <h4 class="mb-4">Create New Incident</h4>

    <form method="POST" action="{{ route('incidents.store') }}">
        @csrf

        {{-- Incident Number --}}
        <div class="mb-3">
            <label class="form-label">Incident Number</label>
            <input class="form-control" value="Auto Generated" disabled>
        </div>

        {{-- Raised By --}}
        <div class="mb-3">
            <label class="form-label">Incident Raised By</label>
            <input type="text" name="raised_by" class="form-control">
        </div>

        {{-- Location --}}
        <div class="mb-3">
            <label class="form-label">Location</label>
            <input type="text" name="location" class="form-control">
        </div>

        {{-- Major & SLA --}}
        <div class="row mb-3">
            <div class="col">
                <div class="form-check">
                    <input type="checkbox" name="is_major" value="1" class="form-check-input">
                    <label class="form-check-label">Major Incident</label>
                </div>
            </div>
        </div>

        {{-- Date & Time --}}
        <div class="row mb-3">
            <div class="col">
                <label class="form-label">Incident Date</label>
                <input type="date" name="incident_date" class="form-control">
            </div>
            <div class="col">
                <label class="form-label">Incident Time</label>
                {{-- Menambahkan step="1" agar input waktu lebih presisi --}}
                <input type="time" name="incident_time" class="form-control" step="1">
            </div>
        </div>

        {{-- Category --}}
        <div class="mb-3">
            <label class="form-label">Category *</label>
            <select id="category" name="category" class="form-control" required>
                <option value="">Select category</option>
                <option value="Network">Network</option>
                <option value="Software">Software</option>
                <option value="Hardware">Hardware</option>
                <option value="Security">Security</option>
                <option value="Other">Other</option>
            </select>
        </div>

        {{-- Subcategory --}}
        <div class="mb-3" id="subcategory-wrapper">
            <label class="form-label">Subcategory</label>
            <select id="subcategory" name="subcategory" class="form-control" disabled>
                <option value="">Select subcategory</option>
            </select>
        </div>

        {{-- Manual Input --}}
        <div class="mb-3" id="manual-input-wrapper" style="display: none;">
            <label class="form-label">Specify Subcategory *</label>
            <input type="text" id="manual_subcategory" name="manual_subcategory" class="form-control" placeholder="Enter subcategory manually">
        </div>

        {{-- Priority --}}
        <div class="mb-3">
            <label class="form-label">Priority *</label>
            <select class="form-control" name="priority" required>
                <option value="">Select Priority</option>
                <option value="Low">Low</option>
                <option value="Medium">Medium</option>
                <option value="High">High</option>
                <option value="Critical">Critical</option>
            </select>
        </div>

        {{-- State --}}
        <div class="mb-3">
            <label class="form-label">State *</label>
            <select class="form-control" name="state" required>
                {{-- value diubah menjadi "New" agar sesuai dengan IncidentController@store --}}
                <option value="New">Open</option>
                <option value="In Progress">In Progress</option>
                <option value="Resolved">Resolved</option>
                <option value="Closed">Closed</option>
            </select>
        </div>

        {{-- Description --}}
        <div class="mb-4">
            <label class="form-label">Description</label>
            <textarea name="description" rows="4" class="form-control"></textarea>
        </div>

        <button class="btn btn-primary w-100">Save Incident</button>
    </form>
</div>

{{-- Subcategory Script --}}
<script>
const subcategories = {
    Network: ['VPN', 'WiFi', 'Internet', 'LAN', 'Other'],
    Software: ['Application', 'Operating System', 'License', 'Bug', 'Other'],
    Hardware: ['Laptop', 'PC', 'Printer', 'Peripheral', 'Other'],
    Security: ['Access', 'Firewall', 'Malware', 'Phishing', 'Other'],
};

const categoryEl = document.getElementById('category');
const subcategoryEl = document.getElementById('subcategory');
const subWrapper = document.getElementById('subcategory-wrapper');
const manualWrapper = document.getElementById('manual-input-wrapper');
const manualInput = document.getElementById('manual_subcategory');

function toggleManualInput(show) {
    if (show) {
        manualWrapper.style.display = 'block';
        manualInput.required = true;
    } else {
        manualWrapper.style.display = 'none';
        manualInput.required = false;
        manualInput.value = '';
    }
}

categoryEl.addEventListener('change', function () {
    const val = this.value;
    
    subcategoryEl.innerHTML = '<option value="">Select subcategory</option>';
    
    if (val === 'Other') {
        subWrapper.style.display = 'none';
        subcategoryEl.required = false;
        toggleManualInput(true);
    } else {
        subWrapper.style.display = 'block';
        subcategoryEl.disabled = true;
        toggleManualInput(false);

        if (subcategories[val]) {
            subcategories[val].forEach(item => {
                const opt = document.createElement('option');
                opt.value = item;
                opt.textContent = item;
                subcategoryEl.appendChild(opt);
            });
            subcategoryEl.disabled = false;
            subcategoryEl.required = true;
        }
    }
});

subcategoryEl.addEventListener('change', function() {
    if (this.value === 'Other') {
        toggleManualInput(true);
    } else if (categoryEl.value !== 'Other') {
        toggleManualInput(false);
    }
});
</script>
@endsection