@extends('layouts.app')
@section('title', isset($bug) ? 'Edit Intelligence Failure' : 'Architect Bug Report')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .form-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 24px;
    }
    @media (max-width: 1024px) {
        .form-grid { grid-template-columns: 1fr; }
    }
    .history-timeline {
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .history-node {
        padding: 16px;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        position: relative;
    }
    .history-node::before {
        content: '';
        position: absolute;
        left: -12px;
        top: 24px;
        width: 12px;
        height: 1px;
        background: var(--border-color);
    }
</style>
@endpush

@section('content')

@include('components.page-header', [
    'title' => isset($bug) ? 'Modify Defect Intelligence' : 'Report Structural Failure',
    'description' => 'Document technical anomalies, reproduction steps, and environmental telemetry for engineering resolution.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Bug Tracking' => route('bugs.index'), 'Editor' => '#'],
    'actions' => '<a href="'.route('bugs.index').'" class="final-btn final-btn-secondary"><i class="bi bi-arrow-left"></i> Back to Fleet</a>'
])

<form method="POST" enctype="multipart/form-data" action="{{ isset($bug) ? route('bugs.update',$bug) : route('bugs.store') }}" class="form-grid">
    @csrf 
    @if(isset($bug)) @method('PUT') @endif

    <div class="main-column">
        <div class="final-card">
            <h3 class="final-card-title"><i class="bi bi-info-circle"></i> Technical Specification</h3>
            
            <div style="margin-bottom: 24px;">
                <label class="final-stat-label">Failure Title</label>
                <input type="text" name="title" value="{{ old('title',$bug->title ?? '') }}" class="final-input" style="font-size: 18px; font-weight: 800;" placeholder="E.g., Authentication handshake timeout on high-latency nodes" required>
            </div>

            <div style="margin-bottom: 24px;">
                <label class="final-stat-label">Detailed Intelligence Description</label>
                <textarea name="description" class="final-textarea" placeholder="Provide reproduction steps, expected vs actual behavior, and error logs..." required>{{ old('description',$bug->description ?? '') }}</textarea>
            </div>

            <div class="final-row final-row-3" style="margin-top: 32px;">
                <div>
                    <label class="final-stat-label">Operating System</label>
                    <input type="text" name="os" value="{{ old('os',$bug->os ?? '') }}" class="final-input" placeholder="Windows 11, macOS Sequoia...">
                </div>
                <div>
                    <label class="final-stat-label">Browser / Engine</label>
                    <input type="text" name="browser" value="{{ old('browser',$bug->browser ?? '') }}" class="final-input" placeholder="Chrome 124, Safari 18...">
                </div>
                <div>
                    <label class="final-stat-label">Hardware Device</label>
                    <input type="text" name="device" value="{{ old('device',$bug->device ?? '') }}" class="final-input" placeholder="MacBook Pro, iPhone 15...">
                </div>
            </div>

            <div style="margin-top: 32px;">
                <label class="final-stat-label">Visual Telemetry (Screenshot Attachment)</label>
                <div style="margin-top: 12px; border: 2px dashed var(--border-color); border-radius: 16px; padding: 40px; text-align: center;">
                    <i class="bi bi-cloud-arrow-up" style="font-size: 32px; color: var(--accent-color); display: block; margin-bottom: 12px;"></i>
                    <input type="file" name="screenshot" class="final-input" style="width: auto; background: transparent; border: none;">
                    <p class="final-secondary-text" style="margin-top: 12px; font-size: 11px;">PNG, JPG, OR HEIC UP TO 5MB.</p>
                </div>
                @if(isset($bug) && $bug->screenshot_path)
                    <div style="margin-top: 16px;">
                        <label class="final-stat-label">Current Attachment</label>
                        <img src="{{ asset('storage/' . $bug->screenshot_path) }}" style="width: 200px; border-radius: 12px; border: 1px solid var(--border-color);">
                    </div>
                @endif
            </div>
        </div>

        @if(isset($bug))
        <div class="final-card" style="margin-top: 24px;">
            <h3 class="final-card-title"><i class="bi bi-clock-history"></i> Failure History Timeline</h3>
            <div class="history-timeline">
                @forelse($bug->histories()->with('actor')->latest()->get() as $h)
                <div class="history-node">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                        <span style="font-size: 12px; font-weight: 800; color: var(--accent-color);">{{ strtoupper(str_replace('_',' ',$h->action)) }}</span>
                        <span style="font-size: 10px; color: var(--text-secondary); font-weight: 700;">{{ $h->created_at->format('M d, Y • H:i') }}</span>
                    </div>
                    <div style="font-size: 13px; font-weight: 600;">
                        {{ $h->actor?->name ?? 'System' }} transitioned from 
                        <span style="color: var(--text-secondary);">{{ $h->from_status ?? 'INITIAL' }}</span> → 
                        <span style="color: var(--text-primary);">{{ strtoupper($h->to_status) }}</span>
                    </div>
                    @if($h->comment)
                        <div style="margin-top: 10px; font-size: 12px; color: var(--text-secondary); font-style: italic;">"{{ $h->comment }}"</div>
                    @endif
                </div>
                @empty
                <div class="final-empty-state">
                    <i class="bi bi-slash-circle"></i>
                    <p>No historical anomalies recorded.</p>
                </div>
                @endforelse
            </div>
        </div>
        @endif
    </div>

    <div class="side-column">
        <div class="final-card">
            <h3 class="final-card-title"><i class="bi bi-shield-lock"></i> Governance</h3>
            
            <div style="margin-bottom: 24px;">
                <label class="final-stat-label">Structural Project</label>
                <select name="project_id" class="final-select" required>
                    <option value="">Select Project</option>
                    @foreach($projects as $p) <option value="{{ $p->id }}" @selected(old('project_id',$bug->project_id ?? '')==$p->id)>{{ $p->name }}</option> @endforeach
                </select>
            </div>

            <div style="margin-bottom: 24px;">
                <label class="final-stat-label">Target Module</label>
                <select name="module_id" class="final-select">
                    <option value="">Select Module (Optional)</option>
                    @foreach($modules as $m) <option value="{{ $m->id }}" @selected(old('module_id',$bug->module_id ?? '')==$m->id)>{{ $m->name }}</option> @endforeach
                </select>
            </div>

            <div style="margin-bottom: 24px;">
                <label class="final-stat-label">Linked Task Intelligence</label>
                <select name="task_id" class="final-select">
                    <option value="">N/A</option>
                    @foreach($tasks as $t) <option value="{{ $t->id }}" @selected(old('task_id',$bug->task_id ?? '')==$t->id)>{{ $t->title }}</option> @endforeach
                </select>
            </div>

            <div style="margin-bottom: 24px;">
                <label class="final-stat-label">Severity Level</label>
                <select name="severity" class="final-select">
                    @foreach(['low','medium','high','critical'] as $s)
                        <option value="{{ $s }}" @selected(old('severity',$bug->severity ?? 'medium')==$s)>{{ ucfirst($s) }}</option>
                    @endforeach
                </select>
            </div>

            <div style="margin-bottom: 24px;">
                <label class="final-stat-label">Resolution Status</label>
                <select name="status" class="final-select">
                    @foreach(['open','in_progress','resolved','qa_approved','qa_rejected','reopened','closed'] as $st)
                        <option value="{{ $st }}" @selected(old('status',$bug->status ?? 'open')==$st)>{{ ucfirst(str_replace('_',' ',$st)) }}</option>
                    @endforeach
                </select>
            </div>

            <div style="margin-bottom: 24px;">
                <label class="final-stat-label">Assigned Engineer</label>
                <select name="assigned_to" class="final-select">
                    <option value="">Select Engineer</option>
                    @foreach($employees as $dev) <option value="{{ $dev->id }}" @selected(old('assigned_to',$bug->assigned_to ?? '')==$dev->id)>{{ $dev->name }}</option> @endforeach
                </select>
            </div>

            <div style="margin-bottom: 32px;">
                <label class="final-stat-label">Target Resolution Date</label>
                <input type="date" name="target_fix_date" value="{{ old('target_fix_date', isset($bug->target_fix_date) ? $bug->target_fix_date->format('Y-m-d') : '') }}" class="final-input">
            </div>

            <button type="submit" class="final-btn final-btn-primary" style="width: 100%; justify-content: center;">
                <i class="bi bi-cloud-check"></i> {{ isset($bug) ? 'Update Intelligence' : 'Submit Bug Report' }}
            </button>
        </div>
    </div>
</form>

@endsection