@extends('layouts.main')

@section('title', 'Detalhes do Pedido #' . $pedido->id)

@section('content')
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <h1 class="mb-4">Detalhes do Pedido #{{ $pedido->id }}</h1>
            
            <p>
                <strong>Tipo de Venda:</strong> {{ ucfirst($pedido->tipo_venda) }}
                @if ($pedido->mesa)
                    <br><strong>Mesa:</strong> {{ $pedido->mesa->numero }}
                @elseif ($pedido->cliente)
                    <br><strong>Cliente:</strong> {{ $pedido->cliente->nome }}
                @endif
            </p>

            <h3 class="mt-4">Itens do Pedido</h3>
            <ul class="list-group">
                {{-- CORREÇÃO: Itera sobre a nova relação 'itens' --}}
                @forelse ($pedido->itens as $item)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            {{-- Acessa os dados diretamente do item --}}
                            <strong>1x</strong> {{ $item->produto->nome }}
                            <br>
                            <span class="text-muted">R$ {{ number_format($item->preco_unitario, 2, ',', '.') }} cada</span>
                        </div>
                        <div>
                            @php
                                $status = $item->status_item;
                            @endphp
                            
                            @if ($status == 'novo')
                                <span class="badge bg-secondary">Novo</span>
                            @elseif ($status == 'em_preparo')
                                <span class="badge bg-info text-dark">Em Preparo</span>
                            @elseif ($status == 'pronto')
                                <span class="badge bg-warning text-dark">Pronto</span>
                            @elseif ($status == 'entregue')
                                <span class="badge bg-success">Entregue</span>
                            @endif

                            {{-- Botão para marcar como entregue --}}
                            @if ($status == 'pronto')
                                {{-- CORREÇÃO: Passa o ID do item específico --}}
                                <button class="btn btn-sm btn-success marcar-entregue" 
                                        data-item-id="{{ $item->id }}">Marcar como Entregue</button>
                            @endif
                        </div>
                    </li>
                @empty
                    <li class="list-group-item">Nenhum item neste pedido.</li>
                @endforelse
            </ul>
        </div>
        <div class="col-md-4">
            <h3 class="mt-4">Resumo do Pedido</h3>
            <p><strong>Total:</strong> R$ {{ number_format($pedido->total, 2, ',', '.') }}</p>
            <p><strong>Taxa de Serviço:</strong> R$ {{ number_format($pedido->taxa_servico, 2, ',', '.') }}</p>
            <p><strong>Status do Pedido:</strong> <span class="badge bg-primary">{{ ucfirst($pedido->status) }}</span></p>

            <a href="{{ route('pedidos.abertos') }}" class="btn btn-secondary mt-3">Voltar</a>
            
            {{-- O botão de fechar pedido deve estar na página da comanda, dentro do modal --}}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const botoesMarcarEntregue = document.querySelectorAll('.marcar-entregue');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    botoesMarcarEntregue.forEach(botao => {
        botao.addEventListener('click', function (event) {
            event.preventDefault();

            // CORREÇÃO: Pega o ID do item do atributo data
            const itemId = this.getAttribute('data-item-id');
            const url = `/pedido-itens/${itemId}/marcar-entregue`;

            fetch(url, {
                // CORREÇÃO: O método deve ser PUT, conforme definimos na rota
                method: 'PUT', 
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const parentDiv = this.parentElement;
                    const badgeExistente = parentDiv.querySelector('.badge');
                    
                    // Atualiza o badge de status
                    if (badgeExistente) {
                        badgeExistente.classList.remove('bg-warning', 'text-dark');
                        badgeExistente.classList.add('bg-success');
                        badgeExistente.textContent = 'Entregue';
                    }
                    
                    // Remove o botão "Marcar como Entregue"
                    this.remove();
                } else {
                    alert('Erro ao marcar item como entregue. Tente novamente.');
                }
            })
            .catch(error => {
                console.error('Erro de rede:', error);
                alert('Erro de rede. Tente novamente.');
            });
        });
    });
});
</script>
@endpush