@if($items->count() == 0)
    <div class="text-center">
        <div class="inline-flex items-center px-8 py-8 font-bold text-indigo-500 text-2xl">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
            </svg>
            Orden vacia
        </div>
    </div>

@else
    <!-- list -->
    <div class="mt-2 h-60 overflow-y-auto">
        <table class="min-w-full leading-normal">
            <thead>
            <th class="py-2 sticky top-0 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">#</th>
            <th class="py-2 sticky top-0 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">Código</th>
            <th class="py-2 sticky top-0 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">descripción</th>
            <th class="py-2 sticky top-0 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">cant.</th>
            <th class="py-2 sticky top-0 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">P. unit</th>
            </thead>
            <tbody>
            @foreach ($items as $item)
                <tr>
                    <td class="text-center px-3 py-5 border-b border-gray-200 text-sm">
                        <a href="{{ URL::route('orderdeleteitem', ['id' => $item->id_item]) }}">
                            <button aria-label="Borrar" data-balloon-pos="right" class="tooltip-gral mr-2">
                                <svg class="h-5 w-5 cursor-pointer hover:text-indigo-700"
                                     xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </a>
                    </td>
                    <td class="text-center px-3 py-5 border-b border-gray-200 text-sm"><pre>{{ $item->id_product }}</pre></td>
                    <td class="text-center px-3 py-5 border-b border-gray-200 text-sm">{{ $item->description }}</td>
                    <td class="text-center px-3 py-5 border-b border-gray-200 text-sm">{{ $item->quantity }}</td>
                    <td class="text-center px-3 py-5 border-b border-gray-200 text-sm">${{ $item->cost }}</td>
                </tr>
            @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5" class="py-2 sticky bottom-0 bg-gray-100
                                            text-center md:text-right lg:text-right
                                            text-xl font-semibold text-gray-600 uppercase pr-2">Total: ${{$total}}</th>
                </tr>
            </tfoot>
        </table>
    </div>
@endif
<style>
    .tooltip-gral {
        --balloon-color: #444444;
        --balloon-font-size: 14px;
        --balloon-move: 20px;
    }
</style>