@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 Conta Bancária |')

@section('content')
    @component('layouts.headers.auth')
        @component('layouts.headers.breadcrumbs')
            @slot('title')
			Conta Bancária
            @endslot
            <li class="breadcrumb-item"><a class="text-default" href="{{ route('bankaccounts.index') }}">Editar Conta Bancária</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 Conta Bancária</h3>
                            </div>
                            <div class="col-4 text-right">
                                <a href="{{ route('bankaccounts.index') }}" class="btn btn-sm btn-primary">Voltar</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('bankaccounts.update', $account->id) }}" autocomplete="off"
                            enctype="multipart/form-data">
                            @method('PUT')
                            @csrf

                            <h6 class="heading-small text-muted mb-4">Informações da Conta Bancária</h6>
								<div class="pl-lg-4">
									<div class="row">
										<div class="col-4">
											<div class="form-group{{ $errors->has('title') ? ' has-danger' : '' }}">
												<label class="form-control-label" for="input-kind">Nome da Conta</label>
												<input type="text" name="title" id="input-title" class="form-control{{ $errors->has('title') ? ' is-invalid' : '' }}" placeholder="Nome da Conta" value="{{ $account->title }}" required autofocus>
											</div>
										</div>
										<div class="col-4" id="first-name">
											<div class="form-group{{ $errors->has('agency') ? ' has-danger' : '' }}">
												<label class="form-control-label" id="label-name" for="input-name">Agência</label>
												<input type="text" name="agency" id="input-agency" class="form-control{{ $errors->has('agency') ? ' is-invalid' : '' }}" placeholder="Agência" value="{{ $account->agency }}" required autofocus>
												@include('alerts.feedback', ['field' => 'agency'])
											</div>
										</div>
										<div class="col-4" id="last-name">
											<div class="form-group{{ $errors->has('account_number') ? ' has-danger' : '' }}">
												<label class="form-control-label" for="input-account_number">Nº da Conta</label>
												<input type="text" name="account_number" id="input-account_number" class="form-control{{ $errors->has('account_number') ? ' is-invalid' : '' }}" placeholder="Nº da Conta" value="{{ $account->account_number }}" autofocus>
												@include('alerts.feedback', ['field' => 'account_number'])
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-4">
											<div class="form-group{{ $errors->has('cnpj') ? ' has-danger' : '' }}">
												<label class="form-control-label" for="input-balance">Saldo Inicial</label>
												<input type="text" name="balance" id="input-balance" class="form-control{{ $errors->has('balance') ? ' is-invalid' : '' }}" placeholder="Saldo Inicial" value="{{ $account->balance }}">
												@include('alerts.feedback', ['field' => 'balance'])
											</div>
										</div>
										<div class="col-4" >
											<div class="form-group{{ $errors->has('token') ? ' has-danger' : '' }}">
												<label class="form-control-label" for="input-token">Token</label>
												<input type="text" name="token" id="input-token" class="form-control{{ $errors->has('token') ? ' is-invalid' : '' }}" placeholder="Token" value="{{ $account->token }}">
												@include('alerts.feedback', ['field' => 'token'])
											</div>
										</div>
										<div class="col-4" >
											<div class="form-group{{ $errors->has('private_key') ? ' has-danger' : '' }}">
												<label class="form-control-label" for="input-private_key">Chave Privada</label>
												<input type="text" name="private_key" id="input-private_key" class="form-control{{ $errors->has('private_key') ? ' is-invalid' : '' }}" placeholder="Chave Privada" value="{{ $account->private_key }}"  autofocus>
											</div>
										</div>
									</div>
								</div>
								<br>
								<div class="text-center" style="float: right;">
									<button type="submit" class="btn btn-success btn-sm mt-4">Atualizar</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();
            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>
@endsection