@extends('layouts.main')

@section('title', 'Abrir Pedido Delivery')

@section('content')

<h1 class="h3">Abrir Pedido de Delivery</h1>

<div class="card shadow-sm mt-4">
    <div class="card-body">
        <form action="{{ route('pedidos.delivery.abrir') }}" method="POST">
            @csrf

            <div class="mb-3">
                <label for="cliente_select" class="form-label">Selecione o Cliente Existente:</label>
                <select class="form-select" id="cliente_select" name="cliente_id">
                    <option value="" selected>-- Selecione um Cliente --</option>
                    @foreach ($clientes as $cliente)
                        <option value="{{ $cliente->id }}">
                            {{ $cliente->nome }} (Tel: {{ $cliente->telefone }})
                        </option>
                    @endforeach
                </select>
                <small class="form-text text-muted">Selecione um cliente da lista ou preencha os campos abaixo para um **novo cliente**.</small>
            </div>

            <div id="novoClienteForm">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="nome" class="form-label">Nome *</label>
                        <input type="text" class="form-control" id="nome" name="nome" required>
                    </div>
                    <div class="col-md-6">
                        <label for="telefone" class="form-label">Telefone *</label>
                        <input type="text" class="form-control" id="telefone" name="telefone" required>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="cep" class="form-label">CEP</label>
                        <input type="text" class="form-control" id="cep" name="cep">
                    </div>
                    <div class="col-md-6">
                        <label for="rua" class="form-label">Rua</label>
                        <input type="text" class="form-control" id="rua" name="rua">
                    </div>
                    <div class="col-md-3">
                        <label for="numero" class="form-label">Número</label>
                        <input type="text" class="form-control" id="numero" name="numero">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="bairro" class="form-label">Bairro</label>
                        <input type="text" class="form-control" id="bairro" name="bairro">
                    </div>
                    <div class="col-md-6">
                        <label for="complemento" class="form-label">Complemento</label>
                        <input type="text" class="form-control" id="complemento" name="complemento">
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Abrir Pedido</button>
        </form>
    </div>
</div>

<script>
    document.getElementById('cliente_select').addEventListener('change', function(e) {
        const selectedId = e.target.value;
        const novoClienteForm = document.getElementById('novoClienteForm');
        const novoClienteInputs = novoClienteForm.querySelectorAll('input');

        // Limpa e desabilita todos os campos do formulário de novo cliente por padrão
        novoClienteInputs.forEach(input => {
            input.value = '';
            input.disabled = true;
            input.removeAttribute('required');
        });

        // Se um cliente for selecionado, busca os dados e preenche os campos
        if (selectedId) {
            // URL da nova rota para buscar o cliente
            const url = `{{ route('clientes.get_json', ['cliente' => 'ID_PLACEHOLDER']) }}`.replace('ID_PLACEHOLDER', selectedId);
            
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Erro na resposta da rede: ' + response.statusText);
                    }
                    return response.json();
                })
                .then(cliente => {
                    document.getElementById('nome').value = cliente.nome;
                    document.getElementById('telefone').value = cliente.telefone;
                    document.getElementById('cep').value = cliente.cep || '';
                    document.getElementById('rua').value = cliente.rua || '';
                    document.getElementById('numero').value = cliente.numero || '';
                    document.getElementById('bairro').value = cliente.bairro || '';
                    document.getElementById('complemento').value = cliente.complemento || '';
                })
                .catch(error => {
                    console.error('Erro ao buscar dados do cliente:', error);
                    alert('Ocorreu um erro ao carregar os dados do cliente.');
                });
        } else {
            // Se "Selecione um Cliente" for escolhido, reativa os campos de novo cliente
            novoClienteInputs.forEach(input => {
                input.disabled = false;
                if (input.name === 'nome' || input.name === 'telefone') {
                    input.setAttribute('required', 'required');
                }
            });
        }
    });
</script>

@endsection