@extends('layouts.app')

@section('title', 'Nueva Orden de Servicio — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn">
    <div style="margin-bottom: var(--space-sm);">
        <a href="{{ route('work_orders.index') }}" class="btn btn-ghost" style="padding-left: 0; color: var(--text-muted);">
            <i class="ph ph-arrow-left"></i> Volver a Órdenes
        </a>
    </div>
    <div class="page-header" style="margin-bottom: var(--space-lg);">
        <h1 class="page-title">
            <i class="ph ph-plus-circle" style="color: var(--primary);"></i>
            Nueva Orden de Servicio
        </h1>
    </div>

    <form method="POST" action="{{ route('work_orders.store') }}" class="card" x-data="workOrderForm()" onsubmit="return validateAndSubmitForm(event)" enctype="multipart/form-data">
        @csrf
        
        <div style="margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-color);">
            <h3 class="h4" style="margin-bottom: var(--space-md);">1. Tipo de Servicio</h3>
            <style>
                .type-selector-card {
                    display: flex !important;
                    flex-direction: row !important;
                    align-items: center !important;
                    justify-content: flex-start !important;
                    padding: 1.25rem 1.5rem !important;
                    border: 2px solid;
                    border-radius: var(--radius-md);
                    cursor: pointer;
                    text-align: left;
                    transition: all 0.2s ease;
                    gap: 15px;
                    height: 100%;
                }
                .type-selector-card i {
                    font-size: 2.2rem;
                    margin-bottom: 0 !important;
                    display: block !important;
                    color: inherit;
                }
                .type-selector-card .text-content {
                    display: flex;
                    flex-direction: column;
                }
                .type-selector-card .title {
                    font-weight: 700;
                    font-size: 1.05rem;
                }
                .type-selector-card .desc {
                    font-size: 0.85rem;
                    opacity: 0.8;
                    margin-top: 4px;
                }
                
                /* Adaptaciones para móviles en 2 columnas */
                @media (max-width: 768px) {
                    .type-selector-card {
                        flex-direction: column !important;
                        text-align: center !important;
                        padding: 1rem 0.5rem !important;
                        gap: 8px;
                    }
                    .type-selector-card .text-content {
                        align-items: center;
                    }
                    .type-selector-card .title {
                        font-size: 0.95rem;
                    }
                    .type-selector-card .desc {
                        font-size: 0.75rem;
                    }
                }
            </style>
            <div style="display: grid; grid-template-columns: repeat({{ auth()->user()->isAdmin() ? '2' : '1' }}, 1fr); gap: var(--space-md);">
                <label class="type-selector-card"
                       :style="type === 'corporate' ? 'border-color: var(--primary); background: var(--primary-light); color: var(--primary);' : 'border-color: var(--border-color); background: var(--bg-card); color: var(--text-primary);'">
                    <input type="radio" name="type" value="corporate" x-model="type" style="display: none;">
                    <i class="ph ph-buildings"></i>
                    <div class="text-content">
                        <div class="title">Equipo Corporativo</div>
                        <div class="desc">Ya está registrado en el inventario.</div>
                    </div>
                </label>

                @if(auth()->user()->isAdmin())
                <label class="type-selector-card"
                       :style="type === 'particular' ? 'border-color: var(--primary); background: var(--primary-light); color: var(--primary);' : 'border-color: var(--border-color); background: var(--bg-card); color: var(--text-primary);'">
                    <input type="radio" name="type" value="particular" x-model="type" style="display: none;">
                    <i class="ph ph-user"></i>
                    <div class="text-content">
                        <div class="title">Cliente Particular</div>
                        <div class="desc">Equipo externo o de paso.</div>
                    </div>
                </label>
                @endif
            </div>
        </div>

        <div x-show="type === 'corporate'" x-transition style="margin-bottom: var(--space-xl);">
            <h3 class="h4" style="margin-bottom: var(--space-md);">Selección de Equipo Corporativo</h3>
            <div class="form-group" style="position: relative;" @click.outside="showDropdown = false">
                <label class="form-label">Buscar en Inventario</label>
                <input type="hidden" name="inventory_item_id" :value="selectedInventoryId">
                <div style="position: relative;">
                    <i class="ph ph-magnifying-glass" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted);"></i>
                    <input type="text" x-model="searchQuery" 
                           @input="selectedIndex = -1; selectedInventoryId = ''" 
                           @focus="showDropdown = true" 
                           @keydown.arrow-down.prevent="navigateDropdown(1)" 
                           @keydown.arrow-up.prevent="navigateDropdown(-1)" 
                           @keydown.enter.prevent="selectHighlighted()" 
                           class="form-control" placeholder="Buscar por equipo, serial o nombre de la empresa..." 
                           style="width: 100%; padding: 10px 10px 10px 35px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);"
                           :required="type === 'corporate'">
                </div>
                
                <div x-show="showDropdown && filteredItems.length > 0" style="position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 100; max-height: 250px; overflow-y: auto; padding: 8px; margin-top: 4px;">
                    <template x-for="(item, index) in filteredItems" :key="item.id">
                        <div @click="selectItem(item)" 
                             :style="{ background: selectedIndex === index ? 'rgba(0,0,0,0.03)' : 'transparent' }"
                             style="padding: 10px 15px; cursor: pointer; border-radius: var(--radius-sm); margin-bottom: 4px; transition: background 0.2s;" 
                             @mouseover="selectedIndex = index"
                             @mouseout="selectedIndex = -1">
                            <div style="font-weight: 600;" x-text="item.name"></div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">
                                <span x-show="item.serial_number" x-text="'S/N: ' + item.serial_number + ' • '"></span>
                                <span x-show="item.asset_tag" x-text="'Etiqueta: ' + item.asset_tag + ' • '"></span>
                                <span style="color: var(--primary); font-weight: 600;" x-text="item.company_name"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <div x-show="type === 'particular'" x-transition style="margin-bottom: var(--space-xl);">
            <h3 class="h4" style="margin-bottom: var(--space-md);">Datos del Cliente Particular y Equipo</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md);">
                <div class="form-group" style="position: relative;" @click.outside="if(activeCustomerInput === 'document') showCustomerDropdown = false">
                    <label for="client_document" class="form-label">Cédula / NIT <span class="text-danger">*</span></label>
                    <input type="text" name="client_document" id="client_document" class="form-control" x-model="clientDocument" placeholder="Ej: 123456789" :required="type === 'particular'" @input="fetchCustomers(clientDocument)" @focus="activeCustomerInput = 'document'; if(customerSearchResults.length > 0) showCustomerDropdown = true" @keydown.arrow-down.prevent="navigateCustomerDropdown(1)" @keydown.arrow-up.prevent="navigateCustomerDropdown(-1)" @keydown.enter.prevent="selectCustomerHighlighted()" autocomplete="off">
                    
                    <div x-show="showCustomerDropdown && activeCustomerInput === 'document' && customerSearchResults.length > 0" style="position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 100; max-height: 200px; overflow-y: auto; padding: 4px; margin-top: 4px;" x-cloak>
                        <template x-for="(c, index) in customerSearchResults" :key="c.id">
                            <div @click="selectCustomer(c)" :style="{ background: selectedCustomerIndex === index ? 'rgba(0,0,0,0.03)' : 'transparent' }" @mouseover="selectedCustomerIndex = index" @mouseout="selectedCustomerIndex = -1" style="padding: 8px 12px; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.2s;">
                                <div style="font-weight: 600;" x-text="c.name"></div>
                                <div style="font-size: 0.8rem; color: var(--text-muted);" x-text="'Cédula/NIT: ' + c.document"></div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="form-group" style="position: relative;" @click.outside="if(activeCustomerInput === 'name') showCustomerDropdown = false">
                    <label for="client_name" class="form-label">Nombre del Cliente <span class="text-danger">*</span></label>
                    <input type="text" name="client_name" id="client_name" class="form-control" x-model="clientName" :required="type === 'particular'" @input="fetchCustomers(clientName)" @focus="activeCustomerInput = 'name'; if(customerSearchResults.length > 0) showCustomerDropdown = true" @keydown.arrow-down.prevent="navigateCustomerDropdown(1)" @keydown.arrow-up.prevent="navigateCustomerDropdown(-1)" @keydown.enter.prevent="selectCustomerHighlighted()" autocomplete="off">
                    
                    <div x-show="showCustomerDropdown && activeCustomerInput === 'name' && customerSearchResults.length > 0" style="position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 100; max-height: 200px; overflow-y: auto; padding: 4px; margin-top: 4px;" x-cloak>
                        <template x-for="(c, index) in customerSearchResults" :key="c.id">
                            <div @click="selectCustomer(c)" :style="{ background: selectedCustomerIndex === index ? 'rgba(0,0,0,0.03)' : 'transparent' }" @mouseover="selectedCustomerIndex = index" @mouseout="selectedCustomerIndex = -1" style="padding: 8px 12px; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.2s;">
                                <div style="font-weight: 600;" x-text="c.name"></div>
                                <div style="font-size: 0.8rem; color: var(--text-muted);" x-text="'Cédula/NIT: ' + c.document"></div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Teléfono</label>
                    <input type="text" name="client_phone" class="form-control" x-model="clientPhone" placeholder="Ej. +57 300 000 0000">
                </div>
                <div class="form-group">
                    <label class="form-label">Correo Electrónico</label>
                    <input type="email" name="client_email" class="form-control" x-model="clientEmail" placeholder="Ej. juan@correo.com">
                </div>
            </div>
            
            <h4 class="h5 mt-md" style="margin-bottom: var(--space-sm);">Detalles del Equipo</h4>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md);">
                <div class="form-group">
                    <label class="form-label">Tipo de Equipo <span class="text-danger">*</span></label>
                    <select name="device_type" class="form-control" :required="type === 'particular'">
                        <option value="">Seleccione...</option>
                        <option value="Laptop">Laptop / Portátil</option>
                        <option value="Desktop">PC de Escritorio</option>
                        <option value="All-in-One">All-in-One</option>
                        <option value="Impresora">Impresora</option>
                        <option value="Servidor">Servidor</option>
                        <option value="Otro">Otro</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Marca</label>
                    <input type="text" name="device_brand" class="form-control" placeholder="Ej. HP, Dell, Lenovo">
                </div>
                <div class="form-group">
                    <label class="form-label">Modelo</label>
                    <input type="text" name="device_model" class="form-control" placeholder="Ej. ProBook 440">
                </div>
                <div class="form-group">
                    <label class="form-label">Número de Serie</label>
                    <input type="text" name="device_serial" class="form-control" placeholder="S/N o Service Tag">
                </div>
            </div>
        </div>

        <div style="margin-bottom: var(--space-xl);">
            <h3 class="h4" style="margin-bottom: var(--space-md);">2. Estado de Recepción</h3>
            
            <div class="form-group" style="margin-bottom: var(--space-md);">
                <label class="form-label">Motivo de Ingreso / Falla Reportada <span class="text-danger">*</span></label>
                <textarea name="issue_description" class="form-control" rows="3" required placeholder="Describe por qué ingresa el equipo al taller..."></textarea>
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg);">
                <div class="form-group">
                    <label class="form-label">Estado Físico al Recibir (Texto)</label>
                    <textarea name="physical_condition" class="form-control" rows="2" placeholder="Ej. Pantalla rayada, sin tornillos, golpe en la esquina..."></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">Accesorios Incluidos</label>
                    <textarea name="accessories_included" class="form-control" rows="2" placeholder="Ej. Cargador original, estuche, mouse..."></textarea>
                </div>
            </div>

            <div class="form-group" style="margin-bottom: var(--space-lg);">
                <label class="form-label">Evidencia Fotográfica (Múltiple)</label>
                <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>
                
                <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>

            <!-- Mapa Gráfico de Daños -->
            <x-device-mapper />
        </div>

        <div style="margin-bottom: var(--space-xl);">
            <h3 class="h4" style="margin-bottom: var(--space-md);">3. Control Interno</h3>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md);">
                <div class="form-group">
                    <label class="form-label">Prioridad</label>
                    <select name="priority" class="form-control">
                        <option value="Baja">Baja</option>
                        <option value="Media" selected>Media</option>
                        <option value="Alta">Alta</option>
                        <option value="Urgente">Urgente</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Asignar a Técnico</label>
                    <select name="technician_id" class="form-control">
                        <option value="">Sin asignar (Seleccionar luego)</option>
                        @foreach($technicians as $tech)
                            <option value="{{ $tech->id }}">{{ $tech->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <div style="margin-bottom: var(--space-xl);">
            <h3 class="h4" style="margin-bottom: var(--space-md);">4. Firma de Recepción <span class="text-danger">*</span></h3>
            
            <div style="border: 1px dashed var(--border-color); padding: var(--space-md); border-radius: var(--radius-md); text-align: center; background: rgba(59, 130, 246, 0.05);">
                <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: var(--space-md);">Aceptación de estado físico y condiciones del servicio al ingresar el equipo.</p>
                <div style="border: 2px dashed var(--border-color); border-radius: var(--radius-md); background: #fff; overflow: hidden; position: relative; max-width: 600px; margin: 0 auto;">
                    <canvas id="createSignatureCanvas" style="width: 100%; height: 250px; cursor: crosshair; touch-action: none;"></canvas>
                    <div style="position: absolute; bottom: 10px; left: 10px; opacity: 0.5; font-size: 0.8rem; pointer-events: none;">Firme aquí (Cliente)</div>
                    <button type="button" class="btn btn-sm btn-ghost" onclick="createSignaturePad.clear()" style="position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.8);">
                        <i class="ph ph-eraser"></i> Limpiar
                    </button>
                </div>
                <input type="hidden" name="reception_signature" id="reception_signature_input">
            </div>
        </div>

        <div style="display: flex; justify-content: flex-end; gap: var(--space-sm); border-top: 1px solid var(--border-color); padding-top: var(--space-lg);">
            <button type="button" onclick="window.location.href='{{ route('work_orders.index') }}'" class="btn btn-ghost">Cancelar</button>
            <button type="submit" class="btn btn-primary">
                <i class="ph ph-floppy-disk"></i> Crear Orden
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
@php
    $formattedItems = $inventoryItems->map(function($item) {
        return [
            'id' => $item->id,
            'name' => $item->name,
            'serial_number' => $item->serial_number,
            'asset_tag' => $item->asset_tag,
            'company_name' => optional(optional($item->branch)->company)->name ?? 'Empresa'
        ];
    })->values()->all();
@endphp
<script>
    let createSignaturePad;
    document.addEventListener('DOMContentLoaded', function() {
        const canvas = document.getElementById('createSignatureCanvas');
        if (canvas) {
            createSignaturePad = new SignaturePad(canvas, {
                backgroundColor: 'rgb(255, 255, 255)'
            });
            function resizeCanvas() {
                const ratio =  Math.max(window.devicePixelRatio || 1, 1);
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
                createSignaturePad.clear();
            }
            window.addEventListener("resize", resizeCanvas);
            resizeCanvas();
        }
    });

    function validateAndSubmitForm(event) {
        if (createSignaturePad.isEmpty()) {
            event.preventDefault();
            Swal.fire({icon: 'warning', title: 'Firma requerida', text: 'El cliente debe firmar la orden en el recuadro indicado antes de poder guardarla.'});
            return false;
        }
        document.getElementById('reception_signature_input').value = createSignaturePad.toDataURL('image/png');
        return true;
    }

    document.addEventListener('alpine:init', () => {
        Alpine.data('workOrderForm', () => ({
            type: 'corporate',
            inventoryItems: @json($formattedItems),
            searchQuery: '',
            showDropdown: false,
            selectedIndex: -1,
            selectedInventoryId: '',
            
            clientDocument: '{{ old("client_document") }}',
            clientName: '{{ old("client_name") }}',
            clientPhone: '{{ old("client_phone") }}',
            clientEmail: '{{ old("client_email") }}',
            
            customerSearchResults: [],
            showCustomerDropdown: false,
            activeCustomerInput: '', // 'document' or 'name'
            selectedCustomerIndex: -1,
            
            async fetchCustomers(query) {
                if (!query || query.length < 2) {
                    this.customerSearchResults = [];
                    this.showCustomerDropdown = false;
                    return;
                }
                try {
                    const response = await fetch(`/api/customers/search?q=${encodeURIComponent(query)}`);
                    if (response.ok) {
                        const result = await response.json();
                        if (result.success) {
                            this.customerSearchResults = result.data;
                            this.showCustomerDropdown = true;
                        }
                    }
                } catch (e) {
                    console.error('Error fetching customers', e);
                }
            },
            
            selectCustomer(customer) {
                this.clientDocument = customer.document;
                this.clientName = customer.name;
                this.clientPhone = customer.phone || '';
                this.clientEmail = customer.email || '';
                this.showCustomerDropdown = false;
                this.customerSearchResults = [];
                this.selectedCustomerIndex = -1;
            },
            
            navigateCustomerDropdown(direction) {
                if (!this.showCustomerDropdown) {
                    this.showCustomerDropdown = true;
                    return;
                }
                const max = this.customerSearchResults.length - 1;
                if (max < 0) return;
                
                this.selectedCustomerIndex += direction;
                if (this.selectedCustomerIndex < 0) this.selectedCustomerIndex = 0;
                if (this.selectedCustomerIndex > max) this.selectedCustomerIndex = max;
            },
            
            selectCustomerHighlighted() {
                if (this.showCustomerDropdown && this.selectedCustomerIndex >= 0 && this.customerSearchResults[this.selectedCustomerIndex]) {
                    this.selectCustomer(this.customerSearchResults[this.selectedCustomerIndex]);
                }
            },
            
            get filteredItems() {
                const query = this.searchQuery.trim().toLowerCase();
                if (query.length === 0) return this.inventoryItems.slice(0, 10);
                
                return this.inventoryItems.filter(i => 
                    i.name.toLowerCase().includes(query) || 
                    (i.serial_number && i.serial_number.toLowerCase().includes(query)) ||
                    (i.asset_tag && i.asset_tag.toLowerCase().includes(query)) ||
                    (i.company_name && i.company_name.toLowerCase().includes(query))
                ).slice(0, 10);
            },
            
            selectItem(item) {
                this.selectedInventoryId = item.id;
                let tagStr = item.asset_tag ? ` - Etiqueta: ${item.asset_tag}` : '';
                let snStr = item.serial_number ? ` - S/N: ${item.serial_number}` : '';
                this.searchQuery = `[${item.company_name}] ${item.name}${snStr}${tagStr}`;
                this.showDropdown = false;
                this.selectedIndex = -1;
                
                // Disparar evento para que el mapa gráfico se actualice
                window.dispatchEvent(new CustomEvent('device-type-selected', { detail: item.name }));
            },
            
            navigateDropdown(direction) {
                if (!this.showDropdown) {
                    this.showDropdown = true;
                    return;
                }
                const max = this.filteredItems.length - 1;
                if (max < 0) return;
                
                this.selectedIndex += direction;
                if (this.selectedIndex < 0) this.selectedIndex = 0;
                if (this.selectedIndex > max) this.selectedIndex = max;
            },
            
            selectHighlighted() {
                if (this.showDropdown && this.selectedIndex >= 0 && this.filteredItems[this.selectedIndex]) {
                    this.selectItem(this.filteredItems[this.selectedIndex]);
                }
            }
        }));
    });
</script>
@endpush
@endsection