@extends('layouts.app')

@section('title', 'Orden de Servicio ' . $workOrder->order_number . ' — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn">
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title" style="display: flex; align-items: center; gap: 10px;">
                <i class="ph ph-receipt" style="color: var(--primary);"></i>
                {{ $workOrder->order_number }}
                @php
                    $statusColor = 'var(--text-muted)';
                    if(in_array($workOrder->status, ['Entregado'])) $statusColor = 'var(--success)';
                    if(in_array($workOrder->status, ['Esperando Repuesto', 'En Revisión'])) $statusColor = 'var(--warning)';
                    if(in_array($workOrder->status, ['Reparado'])) $statusColor = 'var(--info)';
                    if(in_array($workOrder->status, ['Irreparable'])) $statusColor = '#ef4444';
                @endphp
                <span class="badge" style="background: color-mix(in srgb, {{ $statusColor }} 15%, transparent); color: {{ $statusColor }};">
                    {{ $workOrder->status }}
                </span>
            </h1>
            <div class="d-flex gap-sm">
                <button type="button" onclick="openPdfModal()" class="btn btn-outline">
                    <i class="ph ph-printer"></i> Imprimir Recibo
                </button>
                <a href="{{ route('work_orders.edit', $workOrder) }}" class="btn btn-primary">
                    <i class="ph ph-pencil-simple"></i> Editar Orden
                </a>
                @if(auth()->user()->isAdmin())
                <form action="{{ route('work_orders.destroy', $workOrder) }}" method="POST" onsubmit="event.preventDefault(); Swal.fire({title: '¿Eliminar orden?', text: '¿Estás seguro de que deseas eliminar esta orden de servicio?', icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar'}).then((result) => { if (result.isConfirmed) this.submit(); });" style="margin: 0;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-outline text-danger" title="Eliminar Orden" style="border-color: #ef4444; color: #ef4444;">
                        <i class="ph ph-trash"></i>
                    </button>
                </form>
                @endif
            </div>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            <i class="ph ph-check-circle" style="font-size: 1.5rem;"></i>
            {{ session('success') }}
        </div>
    @endif

    @if (session('warning'))
        <div class="alert alert-warning" style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #b45309; padding: 1rem; border-radius: var(--radius-md); margin-bottom: var(--space-lg); display: flex; align-items: center; gap: 10px;">
            <i class="ph ph-warning-circle" style="font-size: 1.5rem;"></i>
            {{ session('warning') }}
        </div>
    @endif

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-lg);">
        
        {{-- Datos Generales --}}
        <div class="card" style="margin-bottom: 0;">
            <div style="display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-sm); margin-bottom: var(--space-md);">
                <h3 class="h5" style="margin: 0; color: var(--text-secondary);">
                    @if($workOrder->inventory_item_id)
                        <i class="ph ph-buildings"></i> Equipo Corporativo
                    @else
                        <i class="ph ph-user"></i> Cliente Particular
                    @endif
                </h3>
            </div>
            
            <div class="info-group">
                @if($workOrder->inventory_item_id)
                    <div class="info-row">
                        <span class="info-label">Empresa</span>
                        <span class="info-value">{{ optional($workOrder->inventoryItem->branch->company)->name ?? 'N/A' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Equipo</span>
                        <span class="info-value">
                            <a href="{{ route('inventory.show', $workOrder->inventoryItem) }}" style="color: var(--primary); text-decoration: none; font-weight: 600;">
                                {{ $workOrder->inventoryItem->name }}
                            </a>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Serial</span>
                        <span class="info-value">{{ $workOrder->inventoryItem->serial_number }}</span>
                    </div>
                @else
                    <div class="info-row">
                        <span class="info-label">Cliente</span>
                        <span class="info-value" style="font-weight: 600;">{{ $workOrder->client_name }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Teléfono</span>
                        <span class="info-value">{{ $workOrder->client_phone ?? 'N/A' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Correo</span>
                        <span class="info-value">{{ $workOrder->client_email ?? 'N/A' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Equipo</span>
                        <span class="info-value">{{ $workOrder->device_type }} {{ $workOrder->device_brand }} {{ $workOrder->device_model }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Serial</span>
                        <span class="info-value">{{ $workOrder->device_serial ?? 'N/A' }}</span>
                    </div>
                @endif
            </div>

            <div style="border-top: 1px solid var(--border-color); padding-top: var(--space-md); margin-top: var(--space-md);">
                <div class="info-row">
                    <span class="info-label">Recepción</span>
                    <span class="info-value">{{ $workOrder->received_at->format('d/m/Y h:i A') }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Técnico Asignado</span>
                    <span class="info-value">
                        @if($workOrder->technician)
                            <div style="display: flex; align-items: center; gap: 6px;">
                                <div class="avatar avatar-sm">{{ substr($workOrder->technician->name, 0, 1) }}</div>
                                {{ $workOrder->technician->name }}
                            </div>
                        @else
                            <span class="badge badge-warning">Sin Asignar</span>
                        @endif
                    </span>
                </div>
            </div>
        </div>

        {{-- Recepción Física --}}
        <div class="card" style="margin-bottom: 0;">
            <h3 class="h5" style="border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); color: var(--text-secondary);">
                <i class="ph ph-clipboard-text"></i> Detalles de Ingreso
            </h3>
            
            <div style="margin-bottom: var(--space-md);">
                <label style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Motivo / Falla</label>
                <div style="background: var(--bg-body); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin-top: 4px; font-size: 0.95rem;">
                    {!! nl2br(e($workOrder->issue_description)) !!}
                </div>
            </div>

            <div style="margin-bottom: var(--space-md);">
                <label style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Condición Física</label>
                <div style="background: var(--bg-body); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin-top: 4px; font-size: 0.95rem; color: {{ $workOrder->physical_condition ? 'var(--text-primary)' : 'var(--text-muted)' }};">
                    {{ $workOrder->physical_condition ?: 'No se registraron detalles textuales.' }}
                </div>
            </div>

            @if(!empty($workOrder->photos) && count($workOrder->photos) > 0)
            <div style="margin-bottom: var(--space-md);">
                <label style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Evidencia Fotográfica</label>
                <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;">
                    @foreach($workOrder->photos as $photo)
                        @if(is_string($photo) && !empty($photo))
                        <a href="{{ Storage::url($photo) }}" target="_blank" style="display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); width: 120px; height: 120px; flex-shrink: 0;">
                            <img src="{{ Storage::url($photo) }}" alt="Evidencia" style="width: 100%; height: 100%; object-fit: cover;">
                        </a>
                        @endif
                    @endforeach
                </div>
            </div>
            @endif

            @php
                $hasMarkersOrStrokes = false;
                if ($workOrder->device_markers) {
                    if (isset($workOrder->device_markers['markers']) || isset($workOrder->device_markers['strokes'])) {
                        $hasMarkersOrStrokes = count($workOrder->device_markers['markers'] ?? []) > 0 || count($workOrder->device_markers['strokes'] ?? []) > 0;
                    } else {
                        $hasMarkersOrStrokes = count($workOrder->device_markers) > 0;
                    }
                }
            @endphp
            @if($hasMarkersOrStrokes)
            <div style="margin-bottom: var(--space-md);">
                <label style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Mapa de Daños Gráfico</label>
                <div style="margin-top: 4px;">
                    <x-device-mapper :markers="json_encode($workOrder->device_markers)" :readonly="true" />
                </div>
            </div>
            @endif

            <div>
                <label style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Accesorios</label>
                <div style="background: var(--bg-body); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin-top: 4px; font-size: 0.95rem; color: {{ $workOrder->accessories_included ? 'var(--text-primary)' : 'var(--text-muted)' }};">
                    {{ $workOrder->accessories_included ?: 'No se dejaron accesorios.' }}
                </div>
            </div>
        </div>

        {{-- Proceso Técnico y Finanzas --}}
        <div class="card" style="margin-bottom: 0;">
            <h3 class="h5" style="border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); color: var(--text-secondary);">
                <i class="ph ph-gear"></i> Intervención Técnica
            </h3>
            
            <div style="margin-bottom: var(--space-md);">
                <label style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Diagnóstico</label>
                <div style="background: rgba(59, 130, 246, 0.05); padding: 12px; border-radius: var(--radius-sm); border: 1px solid rgba(59, 130, 246, 0.2); margin-top: 4px; font-size: 0.95rem; min-height: 60px;">
                    {!! nl2br(e($workOrder->diagnostic ?: 'Pendiente...')) !!}
                </div>
            </div>

            <div style="margin-bottom: var(--space-md);">
                <label style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase;">Solución Aplicada</label>
                <div style="background: rgba(16, 185, 129, 0.05); padding: 12px; border-radius: var(--radius-sm); border: 1px solid rgba(16, 185, 129, 0.2); margin-top: 4px; font-size: 0.95rem; min-height: 60px;">
                    {!! nl2br(e($workOrder->solution ?: 'Pendiente...')) !!}
                </div>
            </div>

            <div style="border-top: 1px solid var(--border-color); padding-top: var(--space-md); margin-top: var(--space-md);">
                <div class="info-row">
                    <span class="info-label">Costo Estimado</span>
                    <span class="info-value">${{ number_format($workOrder->estimated_cost, 0) }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Costo Final</span>
                    <span class="info-value" style="font-weight: 700; font-size: 1.1rem; color: var(--primary);">
                        ${{ number_format($workOrder->final_cost, 0) }}
                    </span>
                </div>
                @if($workOrder->warranty_days > 0)
                <div class="info-row" style="margin-top: 10px; background: rgba(16, 185, 129, 0.1); padding: 8px 12px; border-radius: 6px;">
                    <span class="info-label" style="color: #059669; font-weight: 600;"><i class="ph ph-shield-check"></i> Garantía</span>
                    <span class="info-value" style="color: #059669;">{{ $workOrder->warranty_days }} días</span>
                </div>
                @endif
            </div>
        </div>

    </div>

    {{-- Firmas del Cliente --}}
    <div class="card" style="margin-bottom: var(--space-lg);">
        <h3 class="h5" style="border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); color: var(--text-secondary);">
            <i class="ph ph-signature"></i> Firmas del Cliente
        </h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg);">
            {{-- Firma Recepción --}}
            <div style="border: 1px dashed var(--border-color); padding: var(--space-md); border-radius: var(--radius-md); text-align: center; background: {{ $workOrder->reception_signature ? 'var(--bg-body)' : 'rgba(245, 158, 11, 0.05)' }};">
                <h4 class="h6" style="margin-bottom: var(--space-sm);">Firma de Recepción</h4>
                <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>
                
                @if($workOrder->reception_signature)
                    <div style="background: white; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px; margin: 0 auto; max-width: 250px;">
                        <img src="{{ $workOrder->reception_signature }}" alt="Firma de Recepción" style="width: 100%; height: auto; max-height: 100px; object-fit: contain;">
                    </div>
                    <span class="badge badge-success mt-sm"><i class="ph ph-check-circle"></i> Firmado</span>
                @else
                    <button type="button" class="btn btn-primary" onclick="openSignatureModal('reception', '{{ route('work_orders.sign_reception', $workOrder) }}')">
                        <i class="ph ph-pen-nib"></i> Firmar Ingreso
                    </button>
                @endif
            </div>

            {{-- Firma Entrega --}}
            <div style="border: 1px dashed var(--border-color); padding: var(--space-md); border-radius: var(--radius-md); text-align: center; background: {{ $workOrder->delivery_signature ? 'var(--bg-body)' : 'rgba(59, 130, 246, 0.05)' }};">
                <h4 class="h6" style="margin-bottom: var(--space-sm);">Firma de Entrega</h4>
                <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: var(--space-md);">Conformidad con la reparación, entrega del equipo y aceptación de garantía.</p>
                
                @if($workOrder->delivery_signature)
                    <div style="background: white; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px; margin: 0 auto; max-width: 250px;">
                        <img src="{{ $workOrder->delivery_signature }}" alt="Firma de Entrega" style="width: 100%; height: auto; max-height: 100px; object-fit: contain;">
                    </div>
                    <span class="badge badge-success mt-sm"><i class="ph ph-check-circle"></i> Firmado</span>
                @else
                    @if(in_array($workOrder->status, ['Reparado', 'Entregado']))
                        <button type="button" class="btn btn-info text-white" onclick="openSignatureModal('delivery', '{{ route('work_orders.sign_delivery', $workOrder) }}')">
                            <i class="ph ph-pen-nib"></i> Firmar Entrega
                        </button>
                    @else
                        <div class="text-muted" style="font-size: 0.85rem; font-style: italic;">
                            <i class="ph ph-info"></i> Disponible cuando el equipo esté reparado o listo para entrega.
                        </div>
                    @endif
                @endif
            </div>
        </div>
    </div>

    <!-- Modal de Firma -->
    <div class="modal-overlay" id="signatureModal" style="opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.3s ease, visibility 0.3s ease; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);">
        <div class="modal-content" style="background: var(--bg-card); padding: var(--space-xl); border-radius: var(--radius-lg); width: 100%; max-width: 600px; box-shadow: var(--shadow-xl); transform: translateY(20px); transition: transform 0.3s ease;">
            <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-md); margin-bottom: var(--space-lg);">
                <h3 class="h4 m-0" id="signatureModalTitle">Firmar Documento</h3>
                <button type="button" class="btn-close" onclick="closeSignatureModal()"><i class="ph ph-x"></i></button>
            </div>
            
            <form id="signatureForm" method="POST" action="">
                @csrf
                <input type="hidden" name="signature" id="signatureInput">
                
                <p id="signatureModalText" style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: var(--space-md); padding: 10px; background: var(--bg-body); border-radius: var(--radius-sm); border-left: 4px solid var(--primary);"></p>

                {{-- Campos de facturación (solo visibles en entrega) --}}
                <div id="billingFields" style="display: none; background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.2); padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-lg);">
                    <h4 style="margin-top: 0; margin-bottom: var(--space-sm); font-size: 0.95rem; color: var(--text-secondary);">
                        <i class="ph ph-currency-dollar"></i> Control de Facturación y Pago
                    </h4>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);">
                        <div>
                            <label class="form-label" style="font-size: 0.85rem;">Estado del Pago</label>
                            <select name="billing_status" class="form-control form-control-sm">
                                <option value="Pendiente de Pago">Pendiente de Pago</option>
                                <option value="Pagado">Pagado</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label" style="font-size: 0.85rem;">Estado de Facturación</label>
                            <select name="invoice_status" class="form-control form-control-sm">
                                <option value="Pendiente de Enviar">Pendiente de Enviar Factura</option>
                                <option value="Enviada">Factura Enviada</option>
                                <option value="No Requiere">No Requiere Factura</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div style="margin-bottom: var(--space-lg);">
                    <div style="border: 2px dashed var(--border-color); border-radius: var(--radius-md); background: #fff; overflow: hidden; position: relative;">
                        <canvas id="signatureCanvas" 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="signaturePad.clear()" style="position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.8);">
                            <i class="ph ph-eraser"></i> Limpiar
                        </button>
                    </div>
                </div>

                <div style="display: flex; justify-content: flex-end; gap: var(--space-sm);">
                    <button type="button" class="btn btn-outline" onclick="closeSignatureModal()">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="submitSignature()">Guardar Firma</button>
                </div>
            </form>
        </div>
    </div>

    @if(Auth::user()->isAdmin())
    <div style="text-align: right; margin-top: var(--space-xl);">
        <form action="{{ route('work_orders.destroy', $workOrder) }}" method="POST" onsubmit="event.preventDefault(); Swal.fire({title: '¿Eliminar orden?', text: '¿Está seguro de eliminar esta orden? Esta acción no se puede deshacer.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar'}).then((result) => { if (result.isConfirmed) this.submit(); });">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-ghost text-danger">
                <i class="ph ph-trash"></i> Eliminar Orden
            </button>
        </form>
    </div>
    @endif

    <!-- Modal del Visor PDF -->
    <div class="modal-overlay" id="pdfModal" style="opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; z-index: 10000; transition: opacity 0.3s ease, visibility 0.3s ease; position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);">
        <div class="modal-content" style="background: var(--bg-card); padding: 0; border-radius: var(--radius-lg); width: 100%; max-width: 900px; height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); transform: translateY(20px); transition: transform 0.3s ease; overflow: hidden;">
            <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding: var(--space-md) var(--space-lg); background: var(--bg-body);">
                <h3 class="h5 m-0" style="display: flex; align-items: center; gap: 8px;">
                    <i class="ph ph-file-pdf" style="color: #ef4444; font-size: 1.2rem;"></i>
                    Recibo Orden #{{ $workOrder->order_number }}
                </h3>
                <div style="display: flex; gap: var(--space-sm);">
                    <a href="{{ route('work_orders.pdf', $workOrder) }}" download="Orden_{{ $workOrder->order_number }}.pdf" class="btn btn-sm btn-outline">
                        <i class="ph ph-download-simple"></i> Descargar
                    </a>
                    <button type="button" class="btn-close" onclick="closePdfModal()"><i class="ph ph-x"></i></button>
                </div>
            </div>
            
            <div style="flex-grow: 1; position: relative;">
                <iframe id="pdfIframe" src="" style="width: 100%; height: 100%; border: none; background: #525659;"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script>
    window.loadedDeviceType = '{{ $workOrder->device_type_for_mapper }}';

    let signaturePad;

    document.addEventListener('DOMContentLoaded', function() {
        const canvas = document.getElementById('signatureCanvas');
        if (canvas) {
            // Inicializar el pad
            signaturePad = new SignaturePad(canvas, {
                backgroundColor: 'rgb(255, 255, 255)'
            });
            
            // Redimensionar canvas correctamente (solución a problemas de coordenadas HDPI)
            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);
                signaturePad.clear(); // otherwise signature will be stretched
            }
            window.addEventListener("resize", resizeCanvas);
            resizeCanvas();
        }
    });

    function openSignatureModal(type, actionUrl) {
        document.getElementById('signatureForm').action = actionUrl;
        const modal = document.getElementById('signatureModal');
        const title = document.getElementById('signatureModalTitle');
        const text = document.getElementById('signatureModalText');
        const billingFields = document.getElementById('billingFields');
        
        if (type === 'reception') {
            title.innerText = 'Firma de Recepción';
            text.innerHTML = '<strong>Al firmar este documento acepto:</strong> Las condiciones físicas del equipo tal como se registran en este documento, el presupuesto de revisión y los términos del servicio técnico. Toda pérdida de información o daño oculto no evidenciado en el ingreso será responsabilidad del estado en el que ingresa el dispositivo.';
            billingFields.style.display = 'none';
        } else {
            title.innerText = 'Firma de Entrega';
            text.innerHTML = '<strong>Al firmar este documento certifico que:</strong> Recibo el equipo detallado a entera satisfacción. He validado su correcto funcionamiento de acuerdo al servicio solicitado y acepto el tiempo de garantía especificado.';
            billingFields.style.display = 'block';
        }
        
        signaturePad.clear();
        modal.style.visibility = 'visible';
        modal.style.opacity = '1';
        modal.querySelector('.modal-content').style.transform = 'translateY(0)';
    }

    function closeSignatureModal() {
        const modal = document.getElementById('signatureModal');
        modal.style.opacity = '0';
        modal.querySelector('.modal-content').style.transform = 'translateY(20px)';
        setTimeout(() => {
            modal.style.visibility = 'hidden';
        }, 300);
    }

    function openPdfModal() {
        const modal = document.getElementById('pdfModal');
        const iframe = document.getElementById('pdfIframe');
        
        // Asignar el src dinámicamente si está vacío o en about:blank
        if (!iframe.src || iframe.src === window.location.href || iframe.src === 'about:blank') {
            iframe.src = '{{ route('work_orders.pdf', $workOrder) }}';
        }
        
        modal.style.visibility = 'visible';
        modal.style.opacity = '1';
        modal.querySelector('.modal-content').style.transform = 'translateY(0)';
    }

    function closePdfModal() {
        const modal = document.getElementById('pdfModal');
        modal.style.opacity = '0';
        modal.querySelector('.modal-content').style.transform = 'translateY(20px)';
        setTimeout(() => {
            modal.style.visibility = 'hidden';
        }, 300);
    }

    function submitSignature() {
        if (signaturePad.isEmpty()) {
            Swal.fire({icon: 'warning', title: 'Firma requerida', text: 'Por favor, dibuje su firma antes de guardar.'});
            return;
        }
        
        document.getElementById('signatureInput').value = signaturePad.toDataURL('image/png');
        document.getElementById('signatureForm').submit();
    }

    @if(request('action') === 'sign_delivery' && !$workOrder->delivery_signature)
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                openSignatureModal('delivery', '{{ route('work_orders.sign_delivery', $workOrder) }}');
            }, 600);
        });
    @endif
</script>
@endpush