@extends('layouts.app')

@section('title', 'Historial de Órdenes Entregadas — ' . \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 al Taller
        </a>
    </div>
    
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-archive" style="color: var(--text-muted);"></i>
                Historial de Entregados
            </h1>
        </div>
        <form method="GET" action="{{ route('work_orders.history') }}" class="header-search">
            <div class="search-box">
                <i class="ph ph-magnifying-glass"></i>
                <input type="text" name="search" class="form-control" placeholder="Buscar por número, cliente, serial..." value="{{ request('search') }}">
                @if(request('search'))
                    <a href="{{ route('work_orders.history') }}" class="btn btn-ghost text-muted">Limpiar</a>
                @endif
            </div>
        </form>
    </div>

    <div class="card" style="padding: 0; overflow: hidden;">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>N° Orden</th>
                        <th>Cliente / Empresa</th>
                        <th>Equipo</th>
                        <th>Técnico</th>
                        <th>Fecha Ingreso</th>
                        <th>Fecha Entrega</th>
                        <th style="text-align: right;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($workOrders as $order)
                    <tr class="align-middle">
                        <td>
                            <a href="{{ route('work_orders.show', $order) }}" style="font-weight: 700; color: var(--primary); text-decoration: none;">
                                {{ $order->order_number }}
                            </a>
                        </td>
                        <td>
                            @if($order->inventory_item_id)
                                <div style="font-weight: 600;"><i class="ph ph-buildings text-muted"></i> {{ optional($order->inventoryItem->branch->company)->name ?? 'Empresa' }}</div>
                            @else
                                <div style="font-weight: 600;"><i class="ph ph-user text-muted"></i> {{ $order->client_name }}</div>
                            @endif
                        </td>
                        <td>
                            @if($order->inventory_item_id)
                                <div>{{ $order->inventoryItem->name }}</div>
                                <div style="font-size: 0.8rem; color: var(--text-muted);">S/N: {{ $order->inventoryItem->serial_number }}</div>
                            @else
                                <div>{{ $order->device_type }} {{ $order->device_brand }} {{ $order->device_model }}</div>
                                <div style="font-size: 0.8rem; color: var(--text-muted);">S/N: {{ $order->device_serial }}</div>
                            @endif
                        </td>
                        <td>
                            @if($order->technician)
                                <span>{{ $order->technician->name }}</span>
                            @else
                                <span class="text-muted">N/A</span>
                            @endif
                        </td>
                        <td>{{ $order->created_at->format('d/m/Y') }}</td>
                        <td>
                            @if($order->delivered_at)
                                <span style="font-weight: 600;">{{ $order->delivered_at->format('d/m/Y') }}</span>
                            @else
                                <span class="text-muted">N/A</span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div class="d-flex" style="justify-content: flex-end; gap: 5px;">
                                <a href="{{ route('work_orders.show', $order) }}" class="btn btn-sm btn-ghost" title="Ver Detalles">
                                    <i class="ph ph-eye"></i>
                                </a>
                                <button type="button" onclick="openPdfModal('{{ route('work_orders.pdf', $order) }}', '{{ $order->order_number }}')" class="btn btn-sm btn-ghost text-primary" title="Imprimir Recibo">
                                    <i class="ph ph-printer"></i>
                                </button>
                                @if(auth()->user()->isAdmin())
                                <form action="{{ route('work_orders.destroy', $order) }}" method="POST" onsubmit="event.preventDefault(); Swal.fire({title: '¿Eliminar orden?', text: '¿Estás seguro de que deseas eliminar esta orden de servicio del historial?', icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar'}).then((result) => { if (result.isConfirmed) this.submit(); });" style="margin: 0; display: inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-ghost text-danger" title="Eliminar Orden">
                                        <i class="ph ph-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" style="text-align: center; padding: var(--space-xl) !important; color: var(--text-muted);">
                            <i class="ph ph-archive" style="font-size: 3rem; opacity: 0.5; margin-bottom: 10px; display: block;"></i>
                            No se encontraron órdenes de servicio entregadas.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($workOrders->hasPages())
        <div style="padding: var(--space-md); border-top: 1px solid var(--border-color);">
            {{ $workOrders->links('pagination::bootstrap-5') }}
        </div>
        @endif
    </div>

    <!-- 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;" id="pdfModalTitle">
                    <i class="ph ph-file-pdf" style="color: #ef4444; font-size: 1.2rem;"></i>
                    Recibo Orden
                </h3>
                <div style="display: flex; gap: var(--space-sm);">
                    <a href="#" id="pdfDownloadBtn" download 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>
    function openPdfModal(url, orderNumber) {
        const modal = document.getElementById('pdfModal');
        const iframe = document.getElementById('pdfIframe');
        
        document.getElementById('pdfModalTitle').innerHTML = '<i class="ph ph-file-pdf" style="color: #ef4444; font-size: 1.2rem;"></i> Recibo Orden #' + orderNumber;
        const dlBtn = document.getElementById('pdfDownloadBtn');
        dlBtn.href = url;
        dlBtn.download = 'Orden_' + orderNumber + '.pdf';
        
        iframe.src = url;
        
        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';
            document.getElementById('pdfIframe').src = 'about:blank';
        }, 300);
    }
</script>
@endpush