@extends('painel.layout.menu')

@section('content')
    <div class="row ml-1 border-3 border-bottom border-info">
        <div class="text-uppercase">
            <h4>Novo Cliente</h4>
        </div>
        <div class="ml-auto mr-3">
            <a class="btn btn-sm btn-outline-primary" href="{{ route('clientes.index') }}" title="Voltar"><i
                    class="fas fa-arrow-left"></i>&nbsp; Voltar</a>
        </div>
    </div>

    <form action="{{ route('clientes.store') }}" method="POST">
        @csrf
        <div class="row d-flex justify-content-center mt-4">
            <div class="col-md-8 col-10">
                <input class="form-control" type="text" name="name" placeholder="Nome"
                    required>
            </div>
        </div>

        <div class="row d-flex justify-content-center mt-2">
            <div class="col-md-4 col-10">
                <input class="form-control" type="email" name="email"
                    placeholder="E-mail">
            </div>

            <div class="col-md-4 col-10">
                <input class="form-control" type="text" name="telefone"
                    placeholder="Telefone/Celular" required>
            </div>
        </div>

        <div class="row d-flex justify-content-center mt-2">
            <div class="col-md-6 col-10">
                <input class="form-control" type="text" name="rua"
                    placeholder="Rua">
            </div>

            <div class="col-md-2 col-10">
                <input class="form-control" type="text" name="numero"
                    placeholder="Número">
            </div>
        </div>

        <div class="row d-flex justify-content-center mt-2">
            <div class="col-md-6 col-10">
                <select name="bairro" class="form-control">
                    <option value="0">Selecione o bairro</option>
                    @foreach ($bairros as $bairro)
                        <option style="color: #000 !important;" value="{{ $bairro->id }}"
                            >
                            {{ $bairro->descricao }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2 col-10">
                <input class="form-control" type="text" name="complemento"
                     placeholder="Complemento">
            </div>
        </div>

        <div class="row d-flex justify-content-center mt-2">
            <div class="col-md-4 col-10">
                <input class="form-control" type="password" name="senha" placeholder="Senha" required>
            </div>

            <div class="col-md-4 col-10">
                <input class="form-control" type="password" name="conf_senha" placeholder="Confirmar Senha" required>
            </div>
        </div>

        <div class="row d-flex justify-content-center mt-4">
            <div class="col-md-8 col-10 text-center">
                <button class="btn btn-sm btn-success">Salvar</button>
            </div>
        </div>
    </form>
@endsection