@extends('layouts.app')

@section('title', 'Editar Orden ' . $workOrder->order_number . ' — ' . \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.show', $workOrder) }}" class="btn btn-ghost" style="padding-left: 0; color: var(--text-muted);">
            <i class="ph ph-arrow-left"></i> Volver a la Orden
        </a>
    </div>
    <div class="page-header" style="margin-bottom: var(--space-lg);">
        <h1 class="page-title">
            <i class="ph ph-pencil-simple" style="color: var(--primary);"></i>
            Editar Orden {{ $workOrder->order_number }}
        </h1>
    </div>

    <form method="POST" action="{{ route('work_orders.update', $workOrder) }}" class="card" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div style="margin-bottom: var(--space-xl);">
            <h3 class="h4" style="margin-bottom: var(--space-md); border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">Estado y Asignación</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">Estado de la Orden <span class="text-danger">*</span></label>
                    <select name="status" class="form-control" required>
                        <option value="Ingresado" {{ $workOrder->status === 'Ingresado' ? 'selected' : '' }}>Ingresado</option>
                        <option value="En Revisión" {{ $workOrder->status === 'En Revisión' ? 'selected' : '' }}>En Revisión</option>
                        <option value="Esperando Repuesto" {{ $workOrder->status === 'Esperando Repuesto' ? 'selected' : '' }}>Esperando Repuesto</option>
                        <option value="Reparado" {{ $workOrder->status === 'Reparado' ? 'selected' : '' }}>Reparado</option>
                        <option value="Irreparable" {{ $workOrder->status === 'Irreparable' ? 'selected' : '' }}>Irreparable</option>
                        <option value="Entregado" {{ $workOrder->status === 'Entregado' ? 'selected' : '' }}>Entregado</option>
                        <option value="Cancelado" {{ $workOrder->status === 'Cancelado' ? 'selected' : '' }}>Cancelado</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Prioridad</label>
                    <select name="priority" class="form-control">
                        <option value="Baja" {{ $workOrder->priority === 'Baja' ? 'selected' : '' }}>Baja</option>
                        <option value="Media" {{ $workOrder->priority === 'Media' ? 'selected' : '' }}>Media</option>
                        <option value="Alta" {{ $workOrder->priority === 'Alta' ? 'selected' : '' }}>Alta</option>
                        <option value="Urgente" {{ $workOrder->priority === 'Urgente' ? 'selected' : '' }}>Urgente</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Asignado A</label>
                    <select name="technician_id" class="form-control">
                        <option value="">Sin asignar</option>
                        @foreach($technicians as $tech)
                            <option value="{{ $tech->id }}" {{ $workOrder->technician_id == $tech->id ? 'selected' : '' }}>{{ $tech->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <div style="margin-bottom: var(--space-xl);">
            <x-device-mapper :markers="$workOrder->device_markers ? json_encode($workOrder->device_markers) : '[]'" />
        </div>

        <div style="margin-bottom: var(--space-xl);">
            <h3 class="h4" style="margin-bottom: var(--space-md); border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">Trabajo Técnico</h3>
            <div class="form-group" style="margin-bottom: var(--space-md);">
                <label class="form-label">Diagnóstico</label>
                <textarea name="diagnostic" class="form-control" rows="4" placeholder="Qué se encontró al revisar el equipo...">{{ $workOrder->diagnostic }}</textarea>
            </div>
            <div class="form-group">
                <label class="form-label">Solución Aplicada</label>
                <textarea name="solution" class="form-control" rows="4" placeholder="Qué procedimientos y repuestos se utilizaron...">{{ $workOrder->solution }}</textarea>
            </div>
        </div>

        <div style="margin-bottom: var(--space-lg);">
            <h3 class="h4" style="margin-bottom: var(--space-md); border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">Finanzas y Garantía</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">Costo Estimado ($)</label>
                    <input type="number" step="0.01" name="estimated_cost" class="form-control" value="{{ $workOrder->estimated_cost }}">
                </div>
                <div class="form-group">
                    <label class="form-label">Costo Final ($)</label>
                    <input type="number" step="0.01" name="final_cost" class="form-control" value="{{ $workOrder->final_cost }}">
                </div>
                <div class="form-group">
                    <label class="form-label">Días de Garantía</label>
                    <input type="number" name="warranty_days" class="form-control" value="{{ $workOrder->warranty_days }}">
                </div>
            </div>
            
            <div class="form-group" style="margin-bottom: var(--space-lg); border-top: 1px solid var(--border-color); padding-top: var(--space-md);">
                <label class="form-label">Evidencia Fotográfica (Múltiple)</label>
                
                @if(!empty($workOrder->photos) && count($workOrder->photos) > 0)
                    <div style="margin-bottom: 20px;">
                        <h6 style="margin-bottom: 10px; font-weight: 500; font-size: 0.9rem;">Fotos Actuales</h6>
                        <div style="display: flex; flex-wrap: wrap; gap: 12px;">
                            @foreach($workOrder->photos as $photo)
                                @if(is_string($photo) && !empty($photo))
                                <div style="position: relative; display: inline-block; width: 100px; height: 100px;">
                                    <img src="{{ Storage::url($photo) }}" alt="Evidencia" style="display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color);">
                                    @if(auth()->user()->isAdmin() || auth()->user()->isTechnician())
                                        <button type="button" class="delete-photo-btn" data-photo="{{ $photo }}" style="position: absolute !important; top: -6px !important; right: -6px !important; width: 24px; height: 24px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; background-color: var(--danger, #ef4444); color: white; border: none; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10;" title="Eliminar foto">
                                            <i class="ph ph-x" style="font-size: 14px; font-weight: bold;"></i>
                                        </button>
                                    @endif
                                </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif

                <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);">Añadir nuevas</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>
        </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);">
            <a href="{{ route('work_orders.show', $workOrder) }}" class="btn btn-ghost">Cancelar</a>
            <button type="submit" class="btn btn-primary">
                <i class="ph ph-floppy-disk"></i> Guardar Cambios
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    window.loadedDeviceType = '{{ $workOrder->device_type_for_mapper }}';

    // Lógica de Eliminación de Fotos (AJAX)
    document.querySelectorAll('.delete-photo-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const photoPath = this.getAttribute('data-photo');
            const photoCard = this.closest('div[style*="position: relative"]');
            
            Swal.fire({
                title: '¿Eliminar fotografía?',
                text: "Esta acción no se puede deshacer.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                customClass: {
                    confirmButton: 'btn btn-danger',
                    cancelButton: 'btn btn-outline'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading
                    Swal.fire({
                        title: 'Eliminando...',
                        allowOutsideClick: false,
                        didOpen: () => { Swal.showLoading(); }
                    });
                    
                    fetch("{{ route('work_orders.photo.destroy', $workOrder) }}", {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({ photo: photoPath })
                    })
                    .then(response => response.json().then(data => ({ ok: response.ok, data })))
                    .then(({ ok, data }) => {
                        Swal.close();
                        if (ok && data.success) {
                            // Remove the photo card from DOM immediately
                            if (photoCard) {
                                photoCard.style.transition = 'all 0.3s ease';
                                photoCard.style.opacity = '0';
                                photoCard.style.transform = 'scale(0.5)';
                                setTimeout(() => photoCard.remove(), 300);
                            }
                            Swal.fire({
                                icon: 'success',
                                title: '¡Eliminada!',
                                text: 'La fotografía fue eliminada correctamente.',
                                timer: 1500,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire('Error', 'No se pudo eliminar la fotografía.', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.close();
                        Swal.fire('Error', 'Hubo un problema de conexión.', 'error');
                    });
                }
            });
        });
    });
</script>
@endpush