@extends('layouts.app')

@section('title', 'Ingresar Incidencia - ERP LOGÍSTICO')
@section('header_title', 'Ingresar Nueva Incidencia (Ticket)')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0 text-dark fw-bold"><i class="bi bi-pencil-square text-danger me-2"></i>Formulario de Ingreso de Incidencia</h5>
            </div>
            
            <div class="card-body">
                <form action="{{ route('tickets.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <!-- Sucursal Selection -->
                    <div class="mb-4">
                        <label for="sucursal_id" class="form-label fw-semibold">1. Seleccione la Sucursal (Carnicería)</label>
                        <select class="form-select border-grey" id="sucursal_id" name="sucursal_id" required>
                            @if(count($sucursales) > 1)
                                <option value="" disabled selected>-- Seleccione Sucursal --</option>
                            @endif
                            @foreach($sucursales as $s)
                                <option value="{{ $s->id }}" {{ old('sucursal_id') == $s->id ? 'selected' : '' }}>{{ $s->nombre }} - {{ $s->direccion }}</option>
                            @endforeach
                        </select>
                        <div class="form-text text-muted">La incidencia quedará registrada bajo la sucursal seleccionada.</div>
                    </div>

                    <!-- Departamento Selection -->
                    <div class="mb-4">
                        <label for="departamento_id" class="form-label fw-semibold">2. Seleccione el Área o Departamento</label>
                        <select class="form-select border-grey" id="departamento_id" name="departamento_id" required>
                            <option value="" disabled selected>-- Seleccione Área --</option>
                            @foreach($departamentos as $d)
                                <option value="{{ $d->id }}" {{ old('departamento_id') == $d->id ? 'selected' : '' }}>{{ $d->nombre }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Problematica Selection (Filtered by Department via JS) -->
                    <div class="mb-4">
                        <label for="problematica_id" class="form-label fw-semibold">3. Seleccione la Problemática Específica</label>
                        <select class="form-select border-grey" id="problematica_id" name="problematica_id" required disabled>
                            <option value="" disabled selected>-- Seleccione Área primero --</option>
                            @foreach($problematicas as $p)
                                <option value="{{ $p->id }}" data-dept="{{ $p->departamento_id }}" {{ old('problematica_id') == $p->id ? 'selected' : '' }}>
                                    [{{ strtoupper($p->gravedad) }}] {{ $p->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <hr class="my-4">

                    <!-- Title -->
                    <div class="mb-4">
                        <label for="titulo" class="form-label fw-semibold">Título del Problema</label>
                        <input type="text" class="form-control" id="titulo" name="titulo" value="{{ old('titulo') }}" placeholder="Ej: Falla de balanza principal sección desposte" required>
                        <div class="form-text text-muted">Un resumen corto y explicativo de la falla.</div>
                    </div>

                    <!-- Description -->
                    <div class="mb-4">
                        <label for="descripcion" class="form-label fw-semibold">Descripción Detallada</label>
                        <textarea class="form-control" id="descripcion" name="descripcion" rows="5" placeholder="Detalle lo que ocurre, códigos de error en pantalla, número de máquina, impacto en la operación..." required>{{ old('descripcion') }}</textarea>
                    </div>

                    <!-- Image Attachment -->
                    <div class="mb-4">
                        <label for="imagen" class="form-label fw-semibold">Adjuntar Fotografía de la Falla (Opcional)</label>
                        <input type="file" class="form-control" id="imagen" name="imagen" accept="image/*">
                        <div class="form-text text-muted">Formatos permitidos: JPG, PNG, GIF. Máximo 5MB.</div>
                    </div>

                    <!-- Actions -->
                    <div class="d-flex justify-content-end gap-3 mt-5">
                        <a href="{{ route('tickets.index') }}" class="btn btn-light border px-4 py-2">Cancelar</a>
                        <button type="submit" class="btn btn-danger px-5 py-2 fw-semibold">
                            <i class="bi bi-send-fill me-2"></i> Enviar Requerimiento
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deptSelect = document.getElementById('departamento_id');
        const probSelect = document.getElementById('problematica_id');
        
        // Clone all options to preserve them
        const allOptions = Array.from(probSelect.options).slice(1); // skip placeholder

        function filterProblematics() {
            const selectedDeptId = deptSelect.value;
            
            // Clear current options except placeholder
            probSelect.innerHTML = '<option value="" disabled selected>-- Seleccione Problemática --</option>';
            
            if (selectedDeptId) {
                probSelect.disabled = false;
                
                // Filter matching options
                const filtered = allOptions.filter(opt => opt.getAttribute('data-dept') === selectedDeptId);
                
                filtered.forEach(opt => {
                    probSelect.appendChild(opt.cloneNode(true));
                });
            } else {
                probSelect.disabled = true;
            }
        }

        // Event listener
        deptSelect.addEventListener('change', filterProblematics);

        // Run initially in case of validation back redirections (old inputs)
        if (deptSelect.value) {
            filterProblematics();
            // Restore previous selection if exists
            const oldVal = "{{ old('problematica_id') }}";
            if (oldVal) {
                probSelect.value = oldVal;
            }
        }
    });
</script>
@endsection