@php use Carbon\Carbon; @endphp
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            Apontamento Produção
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
            <a href="{{route('dashboard')}}"
               class="inline-flex items-center px-4 py-2 mb-3 border border-orange-500 text-sm font-medium rounded-md shadow-sm text-orange-500 bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 transition-all duration-200 transform hover:scale-105"
               aria-label="Create new item">
                <i class="fa fa-arrow-left mr-2" aria-hidden="true"></i>
                Voltar
            </a>

            <form method="post" action="{{ $selectedProductionOrder ? route('production-order.store', $selectedProductionOrder) : '#'}}" class="flex flex-col space-y-4">
                @csrf
                <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 space-x-4">
                        <div style="width: 50%">
                            <x-select-production-order
                                :productionOrders="$productionOrders"
                                :selectedProductionOrder="$selectedProductionOrder?->getAttribute('num_orp')">
                            </x-select-production-order>

                            <x-input-error :messages="$errors->get('production_order')" class="mt-2"/>
                            <script>
                                document.getElementById('production_order').addEventListener('change', function () {
                                    const resource = this.value;
                                    window.location.href = `/pack/create?production_order=${resource}`;
                                });
                            </script>
                        </div>
                        @isset($selectedProductionOrder)
                            <div>
                                <x-input-label for="data_lote" value="Data de fabricação"/>
                                <x-text-input id="data_lote" type="date" name="data_lote" :value="old('data_lote', Carbon::now()->toDateString())" required maxlength="50"/>
                                <x-input-error :messages="$errors->get('data_lote')" class="mt-2"/>
                            </div>

                            <div>
                                <x-input-label for="lote" value="Lote de fabricação"/>
                                <x-text-input id="lote" type="text" name="lote" :value="old('lote')" required/>
                                <x-input-error :messages="$errors->get('lote')" class="mt-2"/>
                            </div>
                        @endisset
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 mb-4 hover:shadow-lg transition-shadow duration-300 ease-in-out">
                    <h1 class="mb-2">Dados da OP</h1>
                    <div class="flex space-x-3">
                        <div class="flex-auto">
                            @php
                                $columns = [
                                       'codPro' => 'Produto',
                                       'codDer' => 'Derivação',
                                       'desPro' => 'Descrição Prod.',
                                       'qtdPrv' => 'Qtd. Prog. (UN)',
                                       'qtdPlt' => 'Qtd. Prog. Pallet(s)',
                                       'sldPlt' => 'Saldo Pallet',
                                       'qtdEmb' => 'Qtd. por Pallet',
                                       'qtd' => 'Qtd. de Pallet',
                                   ];
                            @endphp
                            <x-table :columns="$columns">
                                @forelse($productList as $row)
                                    <x-table-row>
                                        <x-table-col>
                                            {{$row['codPro']}}
                                        </x-table-col>
                                        <x-table-col>
                                            {{$row['codDer']}}
                                        </x-table-col>
                                        <x-table-col>
                                            {{$row['desPro']}}
                                        </x-table-col>
                                        <x-table-col>
                                            {{$row['qtdPrv']}}
                                        </x-table-col>
                                        <x-table-col>
                                            {{$row['qtdPlt']}}
                                        </x-table-col>
                                        <x-table-col>
                                            {{$row['sldPlt']}}
                                        </x-table-col>
                                        <x-table-col>
                                            <x-text-input
                                                id="qtdEmb"
                                                type="number"
                                                name="qtdEmb"
                                                :value="old('qtdEmb', $row['qtdEmb'])"
                                                required
                                                class="max-w-32 text-end py-1"/>
                                        </x-table-col>
                                        <x-table-col>
                                            <x-text-input
                                                id="qtd"
                                                type="number"
                                                name="qtd"
                                                :value="old('qtd', 1)"
                                                required
                                                class="max-w-32 text-end py-1"/>
                                        </x-table-col>
                                    </x-table-row>
                                @empty
                                    <x-table-row>
                                        <x-table-col colspan="{{count($columns)}}">
                                            Nenhuma informação disponível
                                        </x-table-col>
                                    </x-table-row>
                                @endforelse
                            </x-table>
                        </div>
                        @isset($selectedProductionOrder)
                            <div class="flex-none self-end">
                                <x-primary-button type="submit" class="h-12">Apontar</x-primary-button>
                            </div>
                        @endif
                    </div>

                </div>
                <div class="bg-white rounded-lg shadow-md p-6 mb-4 hover:shadow-lg transition-shadow duration-300 ease-in-out">
                    <h1 class="mb-2">Registros de apontamentos</h1>
                    @php
                        $columns = [
                               'idPack' => 'Id. Pallet',
                               'datApo' => 'Data Registro',
                               'horApo' => 'Hora Registro',
                               'datLot' => 'Data Fab.',
                               'codLot' => 'Lote',
                               'nomOpe' => 'Operador',
                               'turTrb' => 'Turno',
                               'codPro' => 'Produto',
                               'codDer' => 'Derivação',
                               'desPro' => 'Descrição',
                               'qtdPrd' => 'Qtd. (UN)',
                               'qtdPlt' => 'Qtd. Pallet(s)',
                           ];
                    @endphp

                    <div>
                        <!-- Tabela -->
                        <x-table :columns="$columns" :rows="$selectedProductionOrder->apontamentos ?? []"/>

                        @php
                            $collect = collect($selectedProductionOrder?->apontamentos ?? []);
                            $totalHoras = $collect->sum('qtdPrd');
                            $totalQuantidade = $collect->sum('qtdPlt');
                        @endphp

                        <div class="flex justify-end gap-12 mt-4">
                            <div class="text-center">
                                <h2 class="text-lg font-semibold text-gray-700 mb-1">Quantidade (UN)</h2>
                                <p class="text-2xl font-bold text-orange-600">
                                    {{ $totalHoras ?? '0' }}
                                </p>
                            </div>

                            <div class="text-center">
                                <h2 class="text-lg font-semibold text-gray-700 mb-1">Quantidade Pallet(s)</h2>
                                <p class="text-2xl font-bold text-orange-600">
                                    {{ $totalQuantidade ?? '0' }}
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
            @isset($selectedProductionOrder)
                <div class="text-right w-full mt-5">
                    <form action="{{route('production-order.finish', $selectedProductionOrder)}}" method="post">
                        @csrf
                        <x-success-button type="submit" class="h-12">Encerrar OP</x-success-button>
                    </form>
                </div>
            @endif
        </div>


    </div>


</x-app-layout>