@extends('layouts.app')

@section('title', 'Nuevo Equipo — TI Manager')

@section('content')
<div class="animate-fadeIn">
    {{-- Encabezado --}}
    <div class="page-header">
        <div class="page-header-top">
            <div class="d-flex align-center gap-md">
                <a href="{{ route('inventory.index') }}" class="btn btn-ghost btn-icon" title="Volver">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <h1 class="page-title">Nuevo Equipo</h1>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('inventory.store') }}" enctype="multipart/form-data" 
          x-data="{ 
              categoryId: '{{ old('category_id', '') }}',
              categories: {{ json_encode($categories->pluck('name', 'id')) }},
              get categoryName() { 
                  return this.categoryId && this.categories[this.categoryId] 
                      ? this.categories[this.categoryId].toLowerCase() 
                      : ''; 
              }
          }">
        @csrf

        {{-- Ubicación del equipo --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-map-pin" style="color: var(--primary);"></i>
                    Ubicación del equipo
                </h3>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="company_id">Empresa <span class="required">*</span></label>
                    <select id="create-company" name="company_id" class="form-control {{ $errors->has('company_id') ? 'is-invalid' : '' }}" required>
                        <option value="">Seleccionar empresa...</option>
                        @foreach($companies as $comp)
                            <option value="{{ $comp->id }}" {{ old('company_id', request('company_id')) == $comp->id ? 'selected' : '' }}>{{ $comp->name }}</option>
                        @endforeach
                    </select>
                    @error('company_id') <span class="form-error">{{ $message }}</span> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label" for="branch_id">Sede <span class="required">*</span></label>
                    <select id="create-branch" name="branch_id" class="form-control {{ $errors->has('branch_id') ? 'is-invalid' : '' }}" required>
                        <option value="">Seleccionar sede...</option>
                        @if(isset($branches))
                            @foreach($branches as $br)
                                <option value="{{ $br->id }}" {{ old('branch_id', request('branch_id')) == $br->id ? 'selected' : '' }}>
                                    {{ $br->name }}{{ $br->is_main ? ' (Principal)' : '' }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                    @error('branch_id') <span class="form-error">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        {{-- Información del equipo --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-desktop-tower" style="color: var(--secondary);"></i>
                    Información del equipo
                </h3>
            </div>

            <div class="form-group">
                <label class="form-label" for="name">Nombre del equipo <span class="required">*</span></label>
                <input type="text" id="name" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                       value="{{ old('name') }}" placeholder="Ej: Laptop Dell Latitude 5520" required>
                @error('name') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label class="form-label" for="category_id">Categoría</label>
                <select id="category_id" name="category_id" class="form-control" x-model="categoryId">
                    <option value="">Seleccionar categoría...</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="brand">Marca</label>
                    <input type="text" id="brand" name="brand" class="form-control"
                           value="{{ old('brand') }}" placeholder="Ej: Dell, HP, Lenovo">
                </div>
                <div class="form-group">
                    <label class="form-label" for="model">Modelo</label>
                    <input type="text" id="model" name="model" class="form-control"
                           value="{{ old('model') }}" placeholder="Ej: Latitude 5520">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="serial_number">Número de Serie</label>
                    <div style="display: flex; gap: var(--space-xs);">
                        <input type="text" id="serial_number" name="serial_number" class="form-control {{ $errors->has('serial_number') ? 'is-invalid' : '' }}"
                               value="{{ old('serial_number') }}" placeholder="Ej: ABC123XYZ" style="flex: 1;">
                        <button type="button" class="btn btn-outline btn-icon scan-btn" data-target="serial_number" data-label="Número de Serie" title="Escanear Código">
                            <i class="ph ph-qr-code"></i>
                        </button>
                    </div>
                    @error('serial_number') <span class="form-error">{{ $message }}</span> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label" for="asset_tag">Etiqueta de Activo</label>
                    <div style="display: flex; gap: var(--space-xs);">
                        <input type="text" id="asset_tag" name="asset_tag" class="form-control"
                               value="{{ old('asset_tag') }}" placeholder="Ej: TI-0001" style="flex: 1;">
                        <button type="button" class="btn btn-outline btn-icon scan-btn" data-target="asset_tag" data-label="Etiqueta de Activo" title="Escanear Código">
                            <i class="ph ph-qr-code"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="status">Estado</label>
                <select id="status" name="status" class="form-control">
                    <option value="activo" {{ old('status', 'activo') == 'activo' ? 'selected' : '' }}>Activo</option>
                    <option value="mantenimiento" {{ old('status') == 'mantenimiento' ? 'selected' : '' }}>En Mantenimiento</option>
                    <option value="dañado" {{ old('status') == 'dañado' ? 'selected' : '' }}>Dañado</option>
                    <option value="retirado" {{ old('status') == 'retirado' ? 'selected' : '' }}>Retirado</option>
                </select>
            </div>
        </div>

        {{-- Asignación y Red --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-user" style="color: var(--primary);"></i>
                    Asignación y Red
                </h3>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="assigned_to">Asignado a</label>
                    <input type="text" id="assigned_to" name="assigned_to" class="form-control"
                           value="{{ old('assigned_to') }}" placeholder="Nombre de quien usa el equipo">
                </div>
                <div class="form-group">
                    <label class="form-label" for="ip_address">Dirección IP</label>
                    <input type="text" id="ip_address" name="ip_address" class="form-control"
                           value="{{ old('ip_address') }}" placeholder="Ej: 192.168.1.50">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="mac_address">Dirección MAC</label>
                    <input type="text" id="mac_address" name="mac_address" class="form-control"
                           value="{{ old('mac_address') }}" placeholder="Ej: 00:1A:2B:3C:4D:5E">
                </div>
                <div class="form-group" x-show="categoryName.includes('monitor') || categoryName.includes('impresora') || categoryName.includes('cámara') || categoryName.includes('camara')">
                    <label class="form-label" for="parent_id">Dispositivo Asociado (PC, DVR, etc.)</label>
                    <select id="parent_id" name="parent_id" class="form-control">
                        <option value="">Seleccionar dispositivo principal...</option>
                        @foreach($parentItems ?? [] as $parent)
                            <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>
                                {{ $parent->name }} ({{ $parent->serial_number ?? 'Sin serial' }})
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        {{-- Fechas y Garantía --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-calendar" style="color: var(--warning);"></i>
                    Fechas y Garantía
                </h3>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="installation_date">Fecha de Instalación</label>
                    <input type="date" id="installation_date" name="installation_date" class="form-control"
                           value="{{ old('installation_date') }}">
                </div>
                <div class="form-group">
                    <label class="form-label" for="warranty_until">Fin de Garantía</label>
                    <input type="date" id="warranty_until" name="warranty_until" class="form-control"
                           value="{{ old('warranty_until') }}">
                </div>
            </div>
        </div>

        {{-- Características Técnicas Dinámicas --}}
        <div class="card mb-lg" x-show="categoryName !== ''">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-cpu" style="color: var(--primary);"></i>
                    Características Específicas
                </h3>
            </div>
            
            @include('inventory.partials.dynamic_features', ['inventory' => null])
        </div>

        {{-- Fotografías --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-camera" style="color: var(--primary);"></i>
                    Evidencia Fotográfica
                </h3>
            </div>

            <div class="form-group">
                  <label class="form-label">Fotografías del Equipo</label>
                  <div class="form-group mb-0">
                      <div style="display: flex; gap: 15px; margin-bottom: 20px;">
                          <div class="card-glass" style="flex: 1; cursor: pointer; text-align: center; padding: 20px; transition: all 0.3s ease; border: 2px dashed rgba(0,0,0,0.1); border-radius: var(--radius-md);" onclick="document.getElementById('photos').click()" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='rgba(0,0,0,0.1)'">
                              <i class="ph ph-images" style="font-size: 2.5rem; color: var(--primary); margin-bottom: 10px;"></i>
                              <h5 style="margin: 0; font-weight: 600;">Desde Galería</h5>
                              <p style="margin: 5px 0 0; font-size: 0.85rem; color: var(--text-muted);">Seleccionar varias</p>
                          </div>
                          
                          <div class="card-glass" style="flex: 1; cursor: pointer; text-align: center; padding: 20px; transition: all 0.3s ease; border: 2px dashed rgba(0,0,0,0.1); border-radius: var(--radius-md);" onclick="document.getElementById('camera_photo').click()" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='rgba(0,0,0,0.1)'">
                              <i class="ph ph-camera" style="font-size: 2.5rem; color: var(--primary); margin-bottom: 10px;"></i>
                              <h5 style="margin: 0; font-weight: 600;">Tomar Foto</h5>
                              <p style="margin: 5px 0 0; font-size: 0.85rem; color: var(--text-muted);">Usar cámara</p>
                          </div>
                      </div>
                      
                      <div id="photos-preview-container" style="display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;"></div>
                  </div>
                  <input type="file" id="photos" name="photos[]" multiple accept="image/*" style="display: none;" onchange="previewMultipleFiles(this, 'photos-preview-container')">
                  <input type="file" id="camera_photo" accept="image/*" capture="environment" style="display: none;" onchange="previewMultipleFiles(this, 'photos-preview-container')">
              </div>
        </div>

        {{-- Notas --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-note" style="color: var(--primary);"></i>
                    Notas
                </h3>
            </div>

            <div class="form-group">
                <label class="form-label" for="notes">Notas adicionales</label>
                <textarea id="notes" name="notes" class="form-control" rows="3"
                          placeholder="Observaciones, especificaciones técnicas adicionales, etc.">{{ old('notes') }}</textarea>
            </div>
        </div>

        {{-- Botones --}}
        <div class="d-flex gap-md" style="justify-content: flex-end;">
            <a href="{{ route('inventory.index') }}" class="btn btn-outline">
                <i class="ph ph-x"></i> Cancelar
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="ph ph-check"></i> Guardar Equipo
            </button>
        </div>
    </form>
</div>

{{-- Modal del Escáner --}}
<div id="scanner-modal" class="scanner-modal-overlay" x-cloak>
    <div class="scanner-modal-content">
        <div class="scanner-modal-header">
            <h3 id="scanner-modal-title">Escaneando Código</h3>
            <button type="button" id="close-scanner-btn" class="btn btn-ghost btn-icon btn-sm" style="font-size: 1.2rem; color: var(--text-muted);">&times;</button>
        </div>
        <div class="scanner-modal-body">
            <div id="scanner-container" class="scanner-viewfinder-container">
                <div class="scanner-laser"></div>
                <div id="scanner-preview"></div>
            </div>
            <p id="scanner-helper-text" class="text-muted text-sm text-center" style="margin: 0; padding: 0 10px;">Coloca el código de barras o QR dentro del visor para detectarlo.</p>
            <input type="file" id="scanner-file-input" accept="image/*" capture="environment" style="display: none;">
        </div>
        <div class="scanner-modal-footer" style="display: flex; gap: var(--space-xs); justify-content: center; flex-wrap: wrap;">
            <button type="button" id="switch-camera-btn" class="btn btn-outline btn-sm">
                <i class="ph ph-camera-rotate"></i> Cambiar Cámara
            </button>
            <button type="button" id="file-scan-btn" class="btn btn-outline btn-sm">
                <i class="ph ph-image"></i> Escanear Archivo
            </button>
            <button type="button" id="cancel-scanner-btn" class="btn btn-secondary btn-sm">Cancelar</button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
    // Select encadenado: cuando cambie empresa, cargar sedes
    document.getElementById('create-company')?.addEventListener('change', function() {
        const branchSelect = document.getElementById('create-branch');
        branchSelect.innerHTML = '<option value="">Seleccionar sede...</option>';
        if (this.value) {
            fetch('/api/branches?company_id=' + this.value)
                .then(r => r.json())
                .then(branches => {
                    branches.forEach(b => {
                        const opt = document.createElement('option');
                        opt.value = b.id;
                        opt.textContent = b.name + (b.is_main ? ' (Principal)' : '');
                        branchSelect.appendChild(opt);
                    });
                    // Si viene preseleccionada la sede, seleccionarla
                    const preselected = '{{ request('branch_id') }}';
                    if (preselected) {
                        branchSelect.value = preselected;
                    }
                });
        }
    });

    // Lógica para filtrar Dispositivos Asociados por sede
    @php
        $parentItemsJson = $parentItems->map(fn($item) => [
            'id' => $item->id, 
            'branch_id' => $item->branch_id, 
            'name' => $item->name, 
            'serial' => $item->serial_number ?? 'Sin serial'
        ]);
    @endphp
    const allParentItems = @json($parentItemsJson);
    
    document.getElementById('create-branch')?.addEventListener('change', function() {
        const parentSelect = document.getElementById('parent_id');
        if (!parentSelect) return;
        
        const selectedParentId = parentSelect.value;
        parentSelect.innerHTML = '<option value="">Seleccionar dispositivo principal...</option>';
        
        const branchId = this.value;
        if (branchId) {
            const filteredParents = allParentItems.filter(p => p.branch_id == branchId);
            filteredParents.forEach(p => {
                const opt = document.createElement('option');
                opt.value = p.id;
                opt.textContent = p.name + ' (' + p.serial + ')';
                if (p.id == selectedParentId) opt.selected = true;
                parentSelect.appendChild(opt);
            });
        }
    });

    // Si viene preseleccionada la empresa, disparar el evento change para cargar sedes
    document.addEventListener('DOMContentLoaded', function() {
        const companySelect = document.getElementById('create-company');
        if (companySelect && companySelect.value) {
            companySelect.dispatchEvent(new Event('change'));
        }
        
        const branchSelect = document.getElementById('create-branch');
        if (branchSelect && branchSelect.value) {
            branchSelect.dispatchEvent(new Event('change'));
        }
    });

    // ── Lógica del Escáner ──
    let html5QrCode = null;
    let currentScanTargetId = null;
    let cameraFacingMode = "environment"; // Por defecto cámara trasera

    const playBeep = () => {
        try {
            const context = new (window.AudioContext || window.webkitAudioContext)();
            const osc = context.createOscillator();
            const gain = context.createGain();
            osc.connect(gain);
            gain.connect(context.destination);
            osc.type = "sine";
            osc.frequency.value = 800; // Sonido tipo bip
            gain.gain.setValueAtTime(0.2, context.currentTime);
            osc.start();
            setTimeout(() => osc.stop(), 100);
        } catch (e) {
            console.error("No se pudo emitir el audio de confirmación:", e);
        }
    };

    const triggerVibration = () => {
        if (navigator.vibrate) {
            navigator.vibrate(100);
        }
    };

    const startScanner = (targetId, label) => {
        currentScanTargetId = targetId;
        document.getElementById('scanner-modal-title').textContent = 'Escaneando ' + label;
        
        const modal = document.getElementById('scanner-modal');
        modal.classList.add('active');
        
        const viewfinder = document.getElementById('scanner-container');
        viewfinder.classList.add('scanning');
        
        if (!html5QrCode) {
            html5QrCode = new Html5Qrcode("scanner-preview");
        }
        
        const config = { 
            fps: 10, 
            qrbox: (width, height) => {
                const min = Math.min(width, height);
                return { width: min * 0.75, height: min * 0.75 };
            }
        };

        const hasCameraSupport = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
        const isSecure = window.isSecureContext || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
        
        const switchBtn = document.getElementById('switch-camera-btn');
        const helperText = document.getElementById('scanner-helper-text');
        
        if (!hasCameraSupport || !isSecure) {
            if (switchBtn) switchBtn.style.display = 'none';
            if (helperText) helperText.style.display = 'none';
            
            document.getElementById('scanner-preview').innerHTML = `
                <div style="padding: var(--space-md); text-align: center; color: var(--text-muted); font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px;">
                    <i class="ph ph-shield-warning" style="font-size: 2.5rem; color: var(--warning);"></i>
                    <span style="font-weight: 600; color: #fff;">Cámara en vivo no disponible (HTTP)</span>
                    <span style="font-size: 0.8rem; line-height: 1.4; max-width: 240px; margin: 0 auto;">El navegador móvil requiere una conexión segura (HTTPS) para usar la cámara en vivo. Accede por HTTPS o usa la opción de abajo:</span>
                    <button type="button" id="scanner-direct-file-btn" class="btn btn-primary btn-sm" style="margin-top: 8px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px;">
                        <i class="ph ph-camera" style="font-size: 1.1rem;"></i> Usar Cámara / Subir Foto
                    </button>
                </div>
            `;
            return;
        }

        if (switchBtn) switchBtn.style.display = '';
        if (helperText) helperText.style.display = '';
        
        html5QrCode.start(
            { facingMode: cameraFacingMode }, 
            config,
            (decodedText, decodedResult) => {
                document.getElementById(currentScanTargetId).value = decodedText;
                playBeep();
                triggerVibration();
                stopScanner();
            },
            (errorMessage) => {
                // Errores continuos se ignoran de forma silenciosa durante el flujo del escáner
            }
        ).catch(err => {
            console.error("Error de cámara:", err);
            if (switchBtn) switchBtn.style.display = 'none';
            if (helperText) helperText.style.display = 'none';
            document.getElementById('scanner-preview').innerHTML = `
                <div style="padding: var(--space-md); text-align: center; color: var(--text-muted); font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px;">
                    <i class="ph ph-warning-circle" style="font-size: 2.5rem; color: var(--danger);"></i>
                    <span style="font-weight: 600; color: #fff;">Acceso Denegado o Error</span>
                    <span style="font-size: 0.8rem; line-height: 1.4; max-width: 240px; margin: 0 auto;">No se pudo conectar a la cámara (permiso bloqueado o en uso). Por favor concede permisos o usa la opción de abajo:</span>
                    <button type="button" id="scanner-direct-file-btn" class="btn btn-primary btn-sm" style="margin-top: 8px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px;">
                        <i class="ph ph-camera" style="font-size: 1.1rem;"></i> Usar Cámara / Subir Foto
                    </button>
                </div>
            `;
        });
    };

    const stopScanner = () => {
        const modal = document.getElementById('scanner-modal');
        modal.classList.remove('active');
        
        const viewfinder = document.getElementById('scanner-container');
        viewfinder.classList.remove('scanning');
        
        if (html5QrCode && html5QrCode.isScanning) {
            html5QrCode.stop().then(() => {
                document.getElementById('scanner-preview').innerHTML = '';
            }).catch(err => console.error("Error al apagar cámara:", err));
        }
    };

    // Registrar eventos
    document.querySelectorAll('.scan-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            startScanner(this.dataset.target, this.dataset.label);
        });
    });

    document.getElementById('close-scanner-btn').addEventListener('click', stopScanner);
    document.getElementById('cancel-scanner-btn').addEventListener('click', stopScanner);

    document.getElementById('switch-camera-btn').addEventListener('click', () => {
        cameraFacingMode = cameraFacingMode === "environment" ? "user" : "environment";
        if (html5QrCode && html5QrCode.isScanning) {
            html5QrCode.stop().then(() => {
                document.getElementById('scanner-preview').innerHTML = '';
                const label = document.getElementById('scanner-modal-title').textContent.replace('Escaneando ', '');
                startScanner(currentScanTargetId, label);
            }).catch(err => console.error("Error al rotar cámara:", err));
        }
    });

    // ── Lógica de Escaneo de Archivo ──
    document.getElementById('file-scan-btn')?.addEventListener('click', () => {
        document.getElementById('scanner-file-input').click();
    });

    // Delegar clic del botón directo dentro del visor
    document.addEventListener('click', function(e) {
        const directBtn = e.target.closest('#scanner-direct-file-btn');
        if (directBtn) {
            document.getElementById('scanner-file-input').click();
        }
    });

    document.getElementById('scanner-file-input')?.addEventListener('change', function(e) {
        if (this.files.length === 0) return;
        const file = this.files[0];
        
        if (!html5QrCode) {
            html5QrCode = new Html5Qrcode("scanner-preview");
        }

        const scanImageFile = () => {
            const previewEl = document.getElementById('scanner-preview');
            const originalContent = previewEl.innerHTML;
            
            previewEl.innerHTML = `
                <div style="padding: var(--space-md); text-align: center; color: var(--text-muted); font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px;">
                    <style>@keyframes spinner-spin { to { transform: rotate(360deg); } }</style>
                    <i class="ph ph-spinner-gap" style="font-size: 2.5rem; color: var(--primary); animation: spinner-spin 0.8s linear infinite;"></i>
                    <span style="font-weight: 600; color: #fff;">Procesando Imagen...</span>
                </div>
            `;

            html5QrCode.scanFile(file, true)
                .then(decodedText => {
                    document.getElementById(currentScanTargetId).value = decodedText;
                    playBeep();
                    triggerVibration();
                    stopScanner();
                })
                .catch(err => {
                    console.error("Error al escanear archivo:", err);
                    previewEl.innerHTML = originalContent;
                    Swal.fire({ title: 'Atención', text: "No se pudo detectar ningún código de barras o QR en la imagen. Intenta tomar una foto más nítida, de más de cerca y bien enfocada, o ingresa el dato manualmente.", icon: 'warning', confirmButtonText: 'Entendido' });
                });
        };

        if (html5QrCode.isScanning) {
            html5QrCode.stop().then(scanImageFile).catch(err => {
                console.error(err);
                scanImageFile();
            });
        } else {
            scanImageFile();
        }
    });

    // El previsualizador de imágenes ahora usa image_preview.js globalmente
</script>
@endpush