@extends('layouts.app', [
    'title' => __('User Management'),
    'parentSection' => 'laravel',
    'elementName' => 'user-management'
])

@section('title', 'Adicionar Cliente |')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@section('content')
    @component('layouts.headers.auth')
        @component('layouts.headers.breadcrumbs')
            @slot('title')
               Clientes
            @endslot

            <li class="breadcrumb-item"><a class="text-default" href="{{ route('clients.index') }}">Cadastro de Novo Cliente</a></li>
        @endcomponent
    @endcomponent

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col-xl-12 order-xl-1">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">Cadastro de Novo Cliente</h3>
                            </div>
                            <div class="col-4 text-right">
                                <a href="{{ route('clients.index') }}" class="btn btn-sm btn-primary">Voltar</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('clients.store') }}" autocomplete="off"
                            enctype="multipart/form-data">
                            @csrf

                            <h6 class="heading-small text-muted mb-4">Informações do Cliente</h6>
                            <div class="pl-lg-4">
                                <div class="row">
                                    <div class="col-4" id="kind-div">
                                        <div class="form-group{{ $errors->has('kind') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-kind">Tipo</label>
                                            <select name="kind" id="kind" value="{{old('kind')}}" class="form-control" required @error('kind') is-invalid @enderror>
                                                <option value="PF">Pessoa Física</option>
                                                <option value="PJ">Pessoa Jurídica</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4" id="first-name">
                                        <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" id="label-name" for="input-name">Nome</label>
                                            <input type="text" name="first_name" id="input-name" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="Nome" value="{{ old('name') }}" required autofocus>
                                            @include('alerts.feedback', ['field' => 'name'])
                                        </div>
                                    </div>
                                    <div class="col-4" id="nome_fantasia" style="display: none">
                                        <div class="form-group{{ $errors->has('nome_fantasia') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" id="label-nome_fantasia" for="input-nome_fantasia">Nome Fantasia</label>
                                            <input type="text" name="nome_fantasia" id="input-nome_fantasia" class="form-control{{ $errors->has('nome_fantasia') ? ' is-invalid' : '' }}" placeholder="Nome Fantasia" value="{{ old('nome_fantasia') }}" autofocus>
                                            @include('alerts.feedback', ['field' => 'nome_fantasia'])
                                        </div>
                                    </div>
                                    <div class="col-4" id="last-name">
                                        <div class="form-group{{ $errors->has('last_name') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-name">Sobrenome</label>
                                            <input type="text" name="last_name" id="input-last_name" class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" placeholder="Sobrenome" value="{{ old('last_name') }}" autofocus>
                                            @include('alerts.feedback', ['field' => 'last_name'])
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-email">E-mail</label>
                                            <input type="email" name="email" id="input-email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="Email" value="{{ old('email') }}" required>
                                            @include('alerts.feedback', ['field' => 'email'])
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-control-label" id="birthdate">Data de Nascimento</label>
                                        <input type="date" name="birth_date" id="input-date" class="form-control{{ $errors->has('date') ? ' is-invalid' : '' }}" placeholder="Data de Nascimento" value="{{ old('birth_date') }}"  autofocus>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4" id="cnpj-div" style="display: none;">
                                        <div class="form-group{{ $errors->has('cnpj') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-email">CNPJ</label>
                                            <input type="text" name="cnpj" id="input-cnpj" class="form-control{{ $errors->has('cnpj') ? ' is-invalid' : '' }}" placeholder="CNPJ" value="{{ old('cnpj') }}">
                                            @include('alerts.feedback', ['field' => 'cnpj'])
                                        </div>
                                    </div>
                                    <div class="col-4" id="cpf-div">
                                        <div class="form-group{{ $errors->has('cpf') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-email">CPF</label>
                                            <input type="text" name="cpf" id="input-cpf" class="form-control{{ $errors->has('cpf') ? ' is-invalid' : '' }}" placeholder="CPF" value="{{ old('cpf') }}">
                                            @include('alerts.feedback', ['field' => 'cpf'])
                                        </div>
                                    </div>
                                    <div class="col-4" id="rg-div">
                                        <div class="form-group{{ $errors->has('cpf') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-email">RG</label>
                                            <input type="text" name="rg" id="input-rg" class="form-control{{ $errors->has('rg') ? ' is-invalid' : '' }}" placeholder="RG" value="{{ old('rg') }}">
                                            @include('alerts.feedback', ['field' => 'rg'])
                                        </div>
                                    </div>
                                    <div class="col-4" id="phone_number-div">
                                        <div class="form-group{{ $errors->has('phone_number') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-phone_number">Telefone</label>
                                            <input type="text" name="phone_number" id="input-phone_number" class="form-control{{ $errors->has('phone_number') ? ' is-invalid' : '' }}" placeholder="Telefone" value="{{ old('phone_number') }}"  autofocus>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6" id="zip_code-div">
                                        <div class="form-group{{ $errors->has('zip_code') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-zip_code">CEP</label>
                                            <input type="text" name="zip_code" id="zip_code" class="form-control{{ $errors->has('zip_code') ? ' is-invalid' : '' }}" placeholder="CEP" value="{{ old('zip_code') }}"  autofocus>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-control-label">Estado</label>
                                        <input type="text" name="state" id="state" class="form-control{{ $errors->has('state') ? ' is-invalid' : '' }}" placeholder="Estado" value="{{ old('state') }}"  autofocus>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <label class="form-control-label">Cidade</label>
                                        <input type="text" name="city" id="city" class="form-control{{ $errors->has('city') ? ' is-invalid' : '' }}" placeholder="Cidade" value="{{ old('city') }}"  autofocus>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-control-label" for="input-name">Bairro</label>
                                        <input type="text" name="neighborhood" id="neighborhood" class="form-control{{ $errors->has('neighborhood') ? ' is-invalid' : '' }}" placeholder="Bairro" value="{{ old('neighborhood') }}"  autofocus>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-6">
                                        <label class="form-control-label">Logradouro</label>
                                        <input type="text" name="address" id="address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="Logradouro" value="{{ old('address') }}"  autofocus>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-control-label">Complemento</label>
                                        <input type="text" name="complement" id="complement" class="form-control{{ $errors->has('complement') ? ' is-invalid' : '' }}" placeholder="Complemento" value="{{ old('complement') }}"  autofocus>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-6">
                                        <label class="form-control-label">Nº do Programa de Fidelidade</label>
                                        <input type="text" name="loyalty_number" id="input-date" class="form-control{{ $errors->has('date') ? ' is-invalid' : '' }}" placeholder="Nº do Programa de Fidelidade" value="{{ old('birth_date') }}"  autofocus>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-control-label" for="input-name">Preferência de Assento</label>
                                        <select name="seat_preference" id="seat_preference" value="{{old('seat_preference')}}" class="form-control" @error('seat_preference') is-invalid @enderror>
                                            <option value=""> -- Selecione --</option>
                                            <option value="Janela"> Janela</option>
                                            <option value="Corredor"> Corredor</option>
                                        </select>
                                    </div>
                                </div><br>
                                <div class="text-center" style="float: right;">
                                    <button type="submit" class="btn btn-success btn-sm mt-4">Cadastrar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth')
    </div>

<!-- Scripts Section -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"> </script>
<!-- CPF or CNPJ -->
<script>
    $(function(){
        $("#kind").change(function(){
            var kind = $("#kind option:selected").text();
            console.log(kind);
            if (kind == "Pessoa Jurídica") {
                $("#cpf-div").hide();
                $("#rg-div").hide();
                $("#last-name").hide();
                $("#first-name").show().toggleClass('col-3');
                $("#nome_fantasia").show().toggleClass('col-2');
                $("#kind-div").show().toggleClass('col-3');
                $("#label-name").text("Razão Social");
                $("#input-name").attr("Placeholder","Razão Social");
                $("#birthdate").text("Data de Abertura");
                $("#phone_number-div").toggleClass('col-6');
                $("#cnpj-div").show().toggleClass('col-6');
            } else {
                $("#cpf-div").show();
                $("#rg-div").show();
                $("#last-name").show();
                $("#first-name").show().toggleClass('col-6');
                $("#kind-div").show().toggleClass('col-6');
                $("#label-name").text("Nome");
                $("#input-name").attr("Placeholder","Nome");
                $("#birthdate").text("Data de Nascimento");
                $("#phone_number-div").toggleClass('col-6');
                $("#cnpj-div").hide();
            }
        });
    })
</script>
<!-- API States and City -->
{{-- <script>
    $.getJSON('https://servicodados.ibge.gov.br/api/v1/localidades/estados/', {id: 10, }, function (json) {

    var options = '<option value="">-- Selecione --</option>';

    for (var i = 0; i < json.length; i++) {

        options += '<option data-id="' + json[i].id + '" value="' + json[i].sigla + '" >' + json[i].nome + '</option>';

    }

    $("select[name='state']").html(options);

    });


    $("select[name='state']").change(function () {

    if ($(this).val()) {
        $.getJSON('https://servicodados.ibge.gov.br/api/v1/localidades/estados/'+$(this).find("option:selected").attr('data-id')+'/municipios', {id: $(this).find("option:selected").attr('data-id')}, function (json) {

            var options = '<option value="">-- Selecione --</option>';

            for (var i = 0; i < json.length; i++) {

                options += '<option value="' + json[i].nome + '" >' + json[i].nome + '</option>';

            }

            $("select[name='city']").html(options);

        });

    } else {

        $("select[name='city']").html('<option value="">-- Selecione --</option>');

    }

    });
</script> --}}
<!-- Get CEP -->
<!-- Adicionando JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>
<!-- Adicionando Javascript -->
<script>
    $(document).ready(function() {
        function limpa_formulário_cep() {
            // Limpa valores do formulário de cep.
            $("#address").val("");
            $("#neighborhood").val("");
            $("#city").val("");
            $("#state").val("");
        }

        //Quando o campo cep perde o foco.
        $("#zip_code").blur(function() {

            //Nova variável "cep" somente com dígitos.
            var cep = $(this).val().replace(/\D/g, '');

            //Verifica se campo cep possui valor informado.
            if (cep != "") {

                //Expressão regular para validar o CEP.
                var validacep = /^[0-9]{8}$/;

                //Valida o formato do CEP.
                if(validacep.test(cep)) {

                    //Preenche os campos com "..." enquanto consulta webservice.
                    $("#address").val("");
                    $("#neighborhood").val("");
                    $("#city").val("");
                    $("#state").val("");

                    //Consulta o webservice viacep.com.br/
                    $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {

                        if (!("erro" in dados)) {
                            console.log(dados);
                            //Atualiza os campos com os valores da consulta.
                            $("#address").val(dados.logradouro + " " + dados.complemento);
                            $("#neighborhood").val(dados.bairro);
                            $("#city").val(dados.localidade);
                            $("#state").val(dados.uf);
                        } //end if.
                        else {
                            //CEP pesquisado não foi encontrado.
                            limpa_formulário_cep();
                            alert("CEP não encontrado.");
                        }
                    });
                } //end if.
                else {
                    //cep é inválido.
                    limpa_formulário_cep();
                    alert("Formato de CEP inválido.");
                }
            } //end if.
            else {
                //cep sem valor, limpa formulário.
                limpa_formulário_cep();
            }
        });
    });
</script>
@endsection