@php
    switch ($pack->sitReg) {
        case 'A':
            $statusColor = 'bg-green-500';
            $statusIcon = 'fa-check-circle';
            $statusLabel = "Ativo";
            break;
        case 'I':
            $statusColor = 'bg-red-500';
            $statusIcon = 'fa-times-circle';
            $statusLabel = "Inativo";
            break;
        default:
            $statusColor = 'bg-yellow-500';
            $statusIcon = 'fa-warning';
            $statusLabel = "N/A";
            break;
    }
@endphp
<div class="bg-white rounded-lg shadow-md p-6 mb-4 hover:shadow-lg transition-shadow duration-300 ease-in-out">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
        <div class="flex-grow">
            <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ $pack->nomPack }}</h3>
            <div class="flex flex-wrap items-center text-sm text-gray-500">
                <div class="flex items-center {{ $statusColor }} text-white px-2 py-1 rounded-full mr-4" title="Situação">
                    <i class="fa {{ $statusIcon }} mr-1" aria-hidden="true"></i>
                    <span>{{ $statusLabel }}</span>
                </div>
                <div class="flex items-center mr-4 mb-2 md:mb-0" title="Data Geração">
                    <i class="fa fa-calendar-alt mr-2" aria-hidden="true"></i>
                    <span>{{ $pack->datGer }}</span>
                </div>
                <div class="flex items-center mr-4 mb-2 md:mb-0" title="Nome Usuário">
                    <i class="fa fa-user mr-2" aria-hidden="true"></i>
                    <span>{{ $pack->nomUsu }}</span>
                </div>
                <div class="flex items-center mr-4 mb-2 md:mb-0" title="Número OP">
                    <i class="fa-solid fa-tag mr-2" aria-hidden="true"></i>
                    <span>{{ $pack->numOrp }}</span>
                </div>
                <div class="flex items-center mr-4 mb-2 md:mb-0" title="Lote">
                    <i class="fa fa-box-archive mr-2" aria-hidden="true"></i>
                    <span>{{ $pack->codLot ?? '-' }}</span>
                </div>
                <div class="flex items-center mr-4 mb-2 md:mb-0" title="Data Fabricação">
                    <i class="fa-regular fa-calendar-plus mr-2"></i>
                    <span>{{ $pack->datFab ?? '-' }}</span>
                </div>
                <div class="flex items-center mr-4 mb-2 md:mb-0" title="Nome Operador">
                    <i class="fa-solid fa-person-digging mr-2" aria-hidden="true"></i>
                    <span>{{ $pack->nomOpe }}</span>
                </div>

            </div>
        </div>
        <div class="flex-grow justify-items-end mr-0">
            <div class="flex mb-2 md:mb-0 text-gray-500 text-sm" title="Nome Operador">
                @if($pack->habApt == 'S')
                    <span>{{ $pack->msgApt }}</span>
                @endif
            </div>

            <div class="flex mt-4 mr-0 md:mt-0">
                @isset($pack->itens)
                    <button onclick="toggleTable('{{ $pack->idPack }}')" class="bg-white hover:bg-gray-600 text-gray-500 hover:text-white font-bold py-2 px-3 rounded transition-colors duration-300">
                        <i class="fa fa-table" aria-hidden="true"></i>
                    </button>
                @endisset
                <a href="{{ route('toPrint.etq', ['idPack' => $pack->idPack, 'numOrp' => $pack->numOrp]) }}" target="_blank" rel="noopener" class="bg-white hover:bg-blue-600 text-blue-500 hover:text-white font-bold py-2 px-3 rounded mr-1 transition-colors duration-300" aria-label="Imprimir item">
                    <i class="fa fa-print"></i>
                </a>

                @if($pack->sitReg != 'I' && $pack->habApt == 'S')

                    <form action="{{ route('pack.apontar', $pack->idPack) }}" method="post">
                        @csrf
                        <button class="bg-white hover:bg-green-800 text-green-500 hover:text-white font-bold py-2 px-3 rounded transition-colors duration-300" aria-label="Iniciar item">
                            <i class="fa fa-play"></i>
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
    @isset($pack->itens)
        <div id="productTable-{{ $pack->idPack }}" class="mt-4 hidden">
            <table class="min-w-full bg-white">
                <thead>
                <tr>
                    <th class="px-4 py-2 border-b text-left">Produto</th>
                    <th class="px-4 py-2 border-b text-left">Derivação</th>
                    <th class="px-4 py-2 border-b text-left">Descrição</th>
                    <th class="px-4 py-2 border-b text-left">Quantidade</th>
                    <th class="px-4 py-2 border-b text-left">Unidade Medida</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="px-4 py-2 border-b text-left">{{$pack->itens['codPro']}}</td>
                    <td class="px-4 py-2 border-b text-left">{{$pack->itens['codDer']}}</td>
                    <td class="px-4 py-2 border-b text-left">{{$pack->itens['desPro']}}</td>
                    <td class="px-4 py-2 border-b text-left">{{$pack->itens['qtdIte']}}</td>
                    <td class="px-4 py-2 border-b text-left">{{$pack->itens['uniMed']}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    @endisset
</div>

<script>
    function toggleTable(id) {
        let table = document.getElementById('productTable-' + id);
        if (table.classList.contains('hidden')) {
            table.classList.remove('hidden');
        } else {
            table.classList.add('hidden');
        }
    }
</script>