@extends('layouts.app')

@section('content')
<div class="container">
    <h1 style="font-size:1.5rem;font-weight:bold;color:#FF9800;margin-bottom:1rem;">Ventas</h1>
    <style>
        .actions-row { display:flex; gap:6px; justify-content:center; align-items:center; }
        .action-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; text-decoration:none; color:#fff; transition:transform .12s ease, box-shadow .12s ease; }
        .action-btn svg { width:18px; height:18px; }
        .btn-pdf { background: linear-gradient(135deg,#ff6b6b,#e53935); box-shadow:0 4px 8px rgba(229,57,53,0.18); }
        .btn-xls { background: linear-gradient(135deg,#66bb6a,#2e7d32); box-shadow:0 4px 8px rgba(46,125,50,0.18); }
        .action-btn:hover { transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,0.12); }
        .btn-view { background:#2196f3;color:#fff;padding:6px 8px;border-radius:6px;text-decoration:none; }
        .btn-delete { background:#ef5350;color:#fff;padding:6px 8px;border-radius:6px;border:none; }
    </style>
    <div style="box-shadow:0 2px 8px #eee;border-radius:10px;background:#fff;padding:1rem;overflow-x:auto;">
        <table class="table table-bordered" style="border-radius:8px;overflow:hidden;width:100%;background:#fff;min-width:900px;">
            <thead style="background:#FF9800;color:#fff;">
                <tr>
                    <th style="text-align:center;min-width:40px;">ID</th>
                    <th style="min-width:140px;">Vendedor</th>
                    <th style="min-width:120px;">Cliente</th>
                    <th style="min-width:120px;">Empresa</th>
                    <th style="min-width:100px;">RIF</th>
                    <th style="min-width:100px;">Ruta</th>
                    <th style="min-width:180px;">Productos</th>
                    <th style="min-width:140px;">Fecha</th>
                    <th style="min-width:90px;text-align:center;">Acción</th>
                </tr>
            </thead>
            <tbody>
                @foreach($ventas as $venta)
                    <tr style="font-size:1.05em;">
                        <td style="text-align:center;">{{ $venta->id }}</td>
                        <td>{{ $venta->vendedor->nombre_completo ?? '-' }}</td>
                        <td>{{ $venta->cliente->nombre ?? $venta->cliente_id }}</td>
                        <td>{{ $venta->cliente->empresa ?? '-' }}</td>
                        <td>{{ $venta->cliente->rif ?? '-' }}</td>
                        <td>{{ $venta->cliente->ruta ?? '-' }}</td>
                        <td>
                            <span class="badge bg-primary">{{ $venta->items->count() }} producto(s)</span>
                        </td>
                        <td>{{ \Carbon\Carbon::parse($venta->created_at)->format('d/m/Y H:i') }}</td>
                        <td style="text-align:center;">
                                <div class="actions-row">
                                    <a href="{{ url('/ventas/' . $venta->id) }}" class="btn-view" title="Ver venta">Ver</a>
                                    <a href="{{ url('/ventas/' . $venta->id . '/orden-carga/pdf') }}" class="action-btn btn-pdf" target="_blank" title="Descargar Orden (PDF)">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                            <polyline points="14 2 14 8 20 8"></polyline>
                                            <path d="M9 15h6"></path>
                                            <path d="M9 19h6"></path>
                                        </svg>
                                    </a>
                                    <a href="{{ url('/ventas/' . $venta->id . '/orden-carga/excel') }}" class="action-btn btn-xls" target="_blank" title="Descargar Orden (Excel)">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                            <path d="M8 7v10"></path>
                                            <path d="M16 7v10"></path>
                                            <path d="M4 11h16"></path>
                                        </svg>
                                    </a>

                                    <form action="{{ url('/ventas/' . $venta->id) }}" method="POST" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-delete" onclick="return confirm('¿Seguro que deseas eliminar esta venta?')">Eliminar</button>
                                    </form>
                                </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection