@extends('layouts.app', [
    'title' => __('User Management'),
    'parentSection' => 'laravel',
    'elementName' => 'user-management'
])
<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('title', 'Editar Cliente |')

@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') }}">Editar 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">Editar 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.update', $client->id) }}" autocomplete="off"
                            enctype="multipart/form-data">
                            @method('PUT')
                            @csrf

                            <h6 class="heading-small text-muted mb-4">Informações do Cliente</h6>
                            <div class="pl-lg-4">
                                @if ($client->kind == "PF")
                                    {{-- PF --}}
                                    <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')}}" readonly class="form-control" required @error('kind') is-invalid @enderror>
                                                    <option value="PF" selected>Pessoa Física</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="{{ $client->first_name }}" required autofocus>
                                                @include('alerts.feedback', ['field' => 'name'])
                                            </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="{{  $client->last_name }}" required 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="{{ $client->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="{{ $client->birth_date }}" autofocus>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <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="{{ $client->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="{{ $client->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="{{ $client->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="input-zip_code" class="form-control{{ $errors->has('zip_code') ? ' is-invalid' : '' }}" placeholder="CEP" value="{{ $client->zip_code }}"  autofocus>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-control-label">Estado</label>
                                            <input type="text" name="state" id="input-state" class="form-control{{ $errors->has('state') ? ' is-invalid' : '' }}" placeholder="Estado" value="{{ $client->state }}"  autofocus>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-control-label">Cidade</label>
                                            <input type="text" name="city" id="input-city" class="form-control{{ $errors->has('city') ? ' is-invalid' : '' }}" placeholder="Cidade" value="{{ $client->city }}"  autofocus>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-control-label" for="input-name">Bairro</label>
                                            <input type="text" name="neighborhood" id="input-neighborhood" class="form-control{{ $errors->has('neighborhood') ? ' is-invalid' : '' }}" placeholder="Bairro" value="{{ $client->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="input-address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="Logradouro" value="{{ $client->address }}"  autofocus>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-control-label">Complemento</label>
                                            <input type="text" name="complement" id="input-address" class="form-control{{ $errors->has('complement') ? ' is-invalid' : '' }}" placeholder="Complemento" value="{{ $client->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-loyalty_number" class="form-control{{ $errors->has('loyalty_number') ? ' is-invalid' : '' }}" placeholder="Nº do Programa de Fidelidade" value="{{ $client->loyalty_number }}" 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>
                                                @if(empty($client->seat_preference))
                                                <option value="" selected> -- Selecione --</option>
                                                <option value="Janela"> Janela</option>
                                                <option value="Corredor"> Corredor</option>
                                                @elseif($client->seat_preference == "Janela")
                                                <option value="Janela" selected> Janela</option>
                                                <option value="Corredor"> Corredor</option>
                                                @elseif($client->seat_preference == "Corredor")
                                                <option value="Janela" > Janela</option>
                                                <option value="Corredor"selected> Corredor</option>
                                                @else
                                                <option value="" selected> -- Selecione --</option>
                                                <option value="Janela"> Janela</option>
                                                <option value="Corredor"> Corredor</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div><br>
                                    <div class="text-center" style="float: right;">
                                        <button type="submit" class="btn btn-success btn-sm mt-4">Atualizar</button>
                                    </div>
                                @else
                                    {{-- PJ --}}
                                    <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')}}" readonly class="form-control" required @error('kind') is-invalid @enderror>
                                                    <option value="PJ" selected>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="{{ $client->first_name }}" required autofocus>
                                                @include('alerts.feedback', ['field' => 'name'])
                                            </div>
                                        </div>
                                        <div class="col-4" id="nome_fantasia">
                                            <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="{{ $client->nome_fantasia }}" required autofocus>
                                                @include('alerts.feedback', ['field' => 'nome_fantasia'])
                                            </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="{{ $client->email }}" required>
                                                @include('alerts.feedback', ['field' => 'email'])
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-control-label" id="birthdate">Data de Abertura</label>
                                            <input type="date" name="birth_date" id="input-date" class="form-control{{ $errors->has('date') ? ' is-invalid' : '' }}" placeholder="Data de Nascimento" value="{{ $client->birth_date }}" autofocus>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6" id="cnpj-div">
                                            <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="{{ $client->cnpj }}">
                                                @include('alerts.feedback', ['field' => 'cnpj'])
                                            </div>
                                        </div>
                                        <div class="col-6" 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="{{ $client->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="{{ $client->zip_code }}"  autofocus>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-control-label">Estado</label>
                                            <input type="text" name="state" id="input-state" class="form-control{{ $errors->has('state') ? ' is-invalid' : '' }}" placeholder="Estado" value="{{ $client->state }}"  autofocus>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-control-label">Cidade</label>
                                            <input type="text" name="city" id="input-city" class="form-control{{ $errors->has('city') ? ' is-invalid' : '' }}" placeholder="Cidade" value="{{ $client->city }}"  autofocus>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-control-label" for="input-name">Bairro</label>
                                            <input type="text" name="neighborhood" id="input-neighborhood" class="form-control{{ $errors->has('neighborhood') ? ' is-invalid' : '' }}" placeholder="Bairro" value="{{ $client->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="input-address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="Logradouro" value="{{ $client->address }}"  autofocus>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-control-label">Complemento</label>
                                            <input type="text" name="complement" id="input-address" class="form-control{{ $errors->has('complement') ? ' is-invalid' : '' }}" placeholder="Complemento" value="{{ $client->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-loyalty_number" class="form-control{{ $errors->has('loyalty_number') ? ' is-invalid' : '' }}" placeholder="Nº do Programa de Fidelidade" value="{{ $client->loyalty_number }}" 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>
                                                @if(empty($client->seat_preference))
                                                <option value="" selected> -- Selecione --</option>
                                                <option value="Janela"> Janela</option>
                                                <option value="Corredor"> Corredor</option>
                                                @elseif($client->seat_preference == "Janela")
                                                <option value="Janela" selected> Janela</option>
                                                <option value="Corredor"> Corredor</option>
                                                @elseif($client->seat_preference == "Corredor")
                                                <option value="Janela" > Janela</option>
                                                <option value="Corredor"selected> Corredor</option>
                                                @else
                                                <option value="" selected> -- Selecione --</option>
                                                <option value="Janela"> Janela</option>
                                                <option value="Corredor"> Corredor</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div><br>
                                    <div class="text-center" style="float: right;">
                                        <button type="submit" class="btn btn-success btn-sm mt-4">Atualizar</button>
                                    </div>
                                @endif
                            </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();
            if (kind != "PF") {
                $("#cpf-div").hide();
                $("#rg-div").hide();
                $("#last-name").hide();
                $("#first-name").show().toggleClass('col-6');
                $("#kind-div").show().toggleClass('col-6');
                $("#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');
            }
        });
        $("#kind").change(function(){
            var kind2 = $("#kind option:selected").val();
            if (kind2 != "PJ") {
                $("#cpf-div").show();
                $("#rg-div").show();
                $("#last-name").show();
                $("#label-name").text("Nome");
                $("#input-name").attr("Placeholder","Nome");
                $("#birthdate").text("Data de Nascimento");
                $("#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