@extends('adminlte::page')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.css')}}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <style>
        .rowHeader{margin-bottom: 0px;
            border: 0px;
            border-right-color: black;
            border-style: solid;
            border-right-width: 1px;
            height: 20px;
            font-weight: bold;}
        .rowBody{
            border: 0px;
            border-style: solid;
            border-right-width: 1px;
        }
    </style>
@stop

@section('content')
    
@stop
@section('body')
    <div id="app">
        <div class="col-md-12" v-if="($gate.isAdmin() || $gate.isUser)">
            <div class="row" style="margin-left: 0px; padding-top: 5px; margin-bottom: 20px; border-left-width: 7px; padding-left: 0px;padding-right: 7px;height: 33px;">
                <search @click="loadClientes"></search>
                <div class="page-header-actions" style="align-self:center">
                    <a href="#"  @click="imprimirRelacao()" title="Imprimir relação de clientes">
                        <i class="fas fa-print fa-lg"></i>
                    </a>
                </div>
            </div>
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Lista de Clientes</h3>
                <div class="card-tools">
                    <button class="btn btn-success card-botton" @click="newModal()">Add New <i class="fas fa-user-plus fa-fw"></i></button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Cód</th>
                            <th>Nome</th>
                            <th>CNPJ</th>
                            <th>Telefone</th>
                            <th>Celular</th>
                            <th>Modify</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="cliente in clientes.data" :key="cliente.id">
                            <td>@{{cliente.idBox}}</td>
                            <td>@{{cliente.nome}}</td>
                            <td>@{{cliente.cnpj}}</td>
                            <td>@{{cliente.telefone}}</td>
                            <td>@{{cliente.celular}}</td>
                            <td>
                                <a href="#" @click="editModal(cliente)">
                                    <i class="fa fa-edit blue"></i>
                                </a>
                                
                                <a href="#" @click="deleteCliente(cliente.id)" v-show="($gate.isAdmin())">
                                    <i class="fa fa-trash red"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
              </div>
              <!-- /.card-body -->
              <div class="card-footer">
                  <pagination :data="clientes" :limit="limit" :align="align" :size="size" @pagination-change-page="getResults"></pagination>
              </div>
            </div>
        </div>
        <div v-if="(!$gate.isAdmin() || !$gate.isUser)">
            <not-found></not-found>
        </div>
        
        <!-- MODAL  CLIENTES-->
        <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addNewLabel"> @{{ this.caption }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- EXIBE O PDF -->
                    <div v-show="showPdf" class="modal-body">
                        <iframe name="_pdf" id="_pdf" height="500px" width="100%" frameborder="0">
                
                        </iframe>
                    </div>
                    <!-- EDIT / UPDATE -->
                    <div v-show="!showPdf" class="modal-body">
                        <form id="formCliente" @submit.prevent="editmode ? updateCliente() : createCliente()">
                            <div class="modal-body">
                                <ul class="nav nav-pills nav-fill">
                                    <li class="nav-item"><a class="nav-link active" id="cliDados-tab" data-toggle="tab" href="#cliDados" role="tab" aria-controls="cliDados" aria-selected="true"><span>EMPRESA</span></a></li>
                                    <li class="nav-item"><a class="nav-link" id="cliEndereco-tab" data-toggle="tab" href="#cliEndereco" role="tab" aria-controls="cliEndereco" aria-selected="false">ENDEREÇO</a></li>
                                    <li class="nav-item"><a class="nav-link" id="cliAtividade-tab" data-toggle="tab" href="#cliAtividade" role="tab" aria-controls="cliAtividade" aria-selected="true"><span>CNAE / HORÁRIO</span></a></li>
                                    <li class="nav-item"><a class="nav-link" id="cliResponsavel-tab" data-toggle="tab" href="#cliResponsavel" role="tab" aria-controls="cliResponsavel" aria-selected="false">RESPONSAVEL</a></li>
                                    <li class="nav-item" v-show="$gate.isAdmin()" ><a class="nav-link" id="cliObserv-tab" data-toggle="tab" href="#cliObserv" role="tab" aria-controls="cliObserv" aria-selected="false" >OBSERVAÇÕES</a></li> 
                                    <li class="nav-item" v-show="editmode" ><a class="nav-link" id="cliAlvara-tab" data-toggle="tab" href="#cliAlvara" role="tab" aria-controls="cliAlvara" aria-selected="false" >ALVARÁS</a></li>                            
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="cliDados" role="tabpanel" aria-labelledby="cliDados-tab">
                                        <div class="row">
                                            <div class="col-md-1 form-group">
                                                <label for="idBox" class="control-label">Box</label>
                                                <input v-model="form.idBox" v-mask="'####'" type="text" title="Número da caixa de arquivo" name="idBox" id="idBox" max-lenght="4"
                                                    placeholder="ID BOX"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('idBox') }">
                                                <has-error :form="form" field="idBox"></has-error>
                                            </div>
                                            <div class="col-md-5 form-group">
                                                <label for="nome" class="control-label">Nome</label>
                                                <input v-model="form.nome" type="text" name="nome" id="nome" max-lenght="50"
                                                    placeholder="RAZÃO SOCIAL DA EMPRESA"
                                                    class="form-control text-uppercase" :class="{ 'is-invalid': form.errors.has('nome') }">
                                                <has-error :form="form" field="nome"></has-error>
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="cnpj" class="control-label">CNPJ</label>
                                                <input v-model="form.cnpj" v-mask="['###.###.###-##', '##.###.###/####-##']" type="text" id="cnpj" name="cnpj"
                                                    placeholder="CNPJ/CPF"
                                                    @blur="valCnpjCpf(this)"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('cnpj')}">
                                                <has-error :form="form" field="cnpj"></has-error>
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="inscestadual" class="control-label">Insc Estadual</label>
                                                <input v-model="form.inscestadual" v-mask="'###.###.###.###'" type="text" id="inscestadual" name="inscestadual"
                                                    placeholder="INSC ESTADUAL"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('inscestadual')}">
                                                <has-error :form="form" field="inscestadual"></has-error>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2 form-group">
                                                <label for="inscmunicipal" class="control-label">Insc Municipal</label>
                                                <input v-model="form.inscmunicipal" v-mask="'###.###/#'" type="text" id="inscmunicipal" name="inscmunicipal"
                                                    placeholder="INSC MUNICIPAL"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('inscmunicipal')}">
                                                <has-error :form="form" field="inscmunicipal"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="honorario" class="control-label">Honorário</label>
                                                <money v-model="form.honorario" name="honorario" id="honorario" title="Informe o valor do honorário"
                                                        v-bind="money"
                                                        class="form-control text-right" :class="{ 'is-invalid': form.errors.has('honorario') }"> 
                                                </money>
                                                <has-error :form="form" field="honorario"></has-error>
                                            </div>
                                            <div class="col-md-1 form-group">
                                                <label for="diaVcto" class="control-label">Dia Vcto</label>
                                                <input v-model="form.diaVcto" v-mask="'##'"type="text" title="Dia para vencimento do boleto bancário" name="diaVcto" id="diaVcto" max-lenght="2"
                                                    placeholder="00"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('diaVcto') }">
                                                <has-error :form="form" field="diaVcto"></has-error>
                                            </div>
                                            <div class="col-md-1 form-group">
                                                <label for="protestar" class="control-label">Protestar</label>
                                                <input v-model="form.protestar" v-mask="'##'" type="text" title="Informe quantidade de dias para protesto. Zero para não protestar" name="protestar" id="protestar"
                                                    placeholder="00"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('protestar') }">
                                                <has-error :form="form" field="protestar"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group text-left">
                                                <label for="gerarBoleto" class="control-label">Gerar Boleto</label>
                                                <select name="gerarBoleto" v-model="form.gerarBoleto" id="gerarBoleto" 
                                                    @change="validarHonorario"
                                                    title="Se honorário do cliente é por boleto bancário" 
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('gerarBoleto') }">
                                                    <option value="1">Sim</option>
                                                    <option value="0">Não</option>
                                                </select> 
                                                <has-error :form="form" field="gerarBoleto"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group text-left">
                                                <label for="emailBoleto" class="control-label">Boleto via Email</label>
                                                <select name="emailBoleto" v-model="form.emailBoleto" id="emailBoleto" title="Se boleto bancário será enviado via email" class="form-control" :class="{ 'is-invalid': form.errors.has('emailBoleto') }">
                                                    <option value="1">Sim</option>
                                                    <option value="0">Não</option>
                                                </select>
                                                <has-error :form="form" field="emailBoleto"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="datajucesp" class="control-label">Inicio Atividade</label>
                                                <date-picker v-model="form.datajucesp"  v-mask="'##/##/####'" name="datajucesp"
                                                    class="form-control " :class="{ 'is-invalid': form.errors.has('datajucesp') }" 
                                                    :config="optionsDataJucesp">
                                                </date-picker>
                                                <has-error :form="form" field="datajucesp"></has-error>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2 form-group">
                                                <label for="telefone" class="control-label">Telefone</label>
                                                <input v-model="form.telefone" v-mask="'(##) ####-####'" type="text" name="telefone" id="telefone"
                                                    placeholder="(00) 0000-0000"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('telefone') }">
                                                <has-error :form="form" field="telefone"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="celular" class="control-label">Celular</label>
                                                <input v-model="form.celular" v-mask="'(##)#####-####'" type="text" name="celular" id="celular"
                                                    placeholder="(00)0000-0000"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('celular') }">
                                                <has-error :form="form" field="celular"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group text-left">
                                                <label for="whatsapp" class="control-label">Whatsapp</label>
                                                <select name="whatsapp" v-model="form.whatsapp" id="whatsapp" 
                                                    title="Informar qual campo é whatsapp, ou não tem" 
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('whatsapp') }">
                                                    <option value=0>Não possui</option>
                                                    <option value=1>Celular</option>
                                                    <option value=2>Fixo</option>
                                                    <option value=3>Celular e Fixo</option>
                                                </select> 
                                                <has-error :form="form" field="whatsapp"></has-error>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label for="email" class="control-label">Email</label>
                                                <input v-model="form.email" type="text" name="email" id="email"
                                                    placeholder="@"
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('email') }">
                                                <has-error :form="form" field="email"></has-error>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="cliEndereco" role="tabpanel" aria-labelledby="cliEndereco-tab">
                                        <div class="row">
                                            <div class="col-md-2 form-group">
                                                <label for="cep" class="control-label">Cep</label>
                                                <input v-model="form.cep" type="text" name="cep" id="cep"
                                                    v-mask="'#####-###'" 
                                                    placeholder="Cep"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('cep') }"
                                                    @change="getCep(this)">
                                                <has-error :form="form" field="cep"></has-error>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label for="endereco" class="control-label">Logradouro</label>
                                                <input v-model="form.endereco" type="text" name="endereco" id="endereco"
                                                    placeholder="Logradouro"
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('endereco') }">
                                                <has-error :form="form" field="endereco"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="numero" class="control-label">Número</label>
                                                <input v-model="form.numero" type="text" name="numero" id="numero"
                                                    placeholder="Nº"
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('numero') }">
                                                <has-error :form="form" field="numero"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="complemento" class="control-label">Bloco/Apt</label>
                                                <input v-model="form.complemento" type="text" name="complemento" id="complemento"
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('complemento') }">
                                                <has-error :form="form" field="complemento"></has-error>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label for="bairros_id" class="typo__label">Bairro</label>
                                                <multiselect v-model="form.bairro" 
                                                    :options="optionsBairros"
                                                    @input="onChangeBairro" 
                                                    placeholder="Selecione..."
                                                    id="bairros_id" 
                                                    label="nome" track-by="id"
                                                    :class="{ 'is-invalid': form.errors.has('bairros_id') }">
                                                </multiselect>
                                                <has-error :form="form" field="bairros_id"></has-error>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="typo__label">Cidade</label>
                                                <multiselect v-model="form.cidade" 
                                                    :options="optionsCidades" 
                                                    @input="onChangeCidade"
                                                    placeholder="Selecione..."
                                                    id="cidades_id" 
                                                    label="nome" track-by="id"
                                                    :class="{ 'is-invalid': form.errors.has('cidades_id') }">
                                                </multiselect>
                                                <has-error :form="form" field="cidades_id"></has-error>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="cliAtividade" role="tabpanel" aria-labelledby="cliAtividade-tab">
                                        <div class="row">
                                            <div class="col-md-12 form-group">
                                                <label for="cnaes_id" class="typo__label">CNAE</label>
                                                <multiselect v-model="form.cnae" 
                                                    :options="optionsCnae"
                                                    @input="onChangeCnae" 
                                                    placeholder="Selecione..."
                                                    id="cnaes_id" name="cnaes_id" 
                                                    label="descricao" track-by="id"
                                                    :class="{ 'is-invalid': form.errors.has('cnaes_id') }">
                                                </multiselect>
                                                <has-error :form="form" field="cnaes_id"></has-error>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 form-group">
                                                <label for="ramoatividade" class="control-label">Ramo de Atividade</label>
                                                <input v-model="form.ramoatividade" type="text" name="ramoatividade" id="ramoatividade" max-lenght="100"
                                                    placeholder="Ramo de atividade"
                                                    class="form-control text-uppercase" :class="{ 'is-invalid': form.errors.has('ramoatividade') }">
                                                <has-error :form="form" field="ramoatividade"></has-error>
                                            </div>
                                        </div>
                                        <div class="row" style="height: 20px;">
                                            <div class="col-md-4 form-group rowHeader">
                                                <span style="margin-bottom: 0px;">Segunda a Sexta</span>
                                            </div>
                                            <div class="col-md-4 form-group rowHeader">
                                                <span>Sábado</span>
                                            </div>
                                            <div class="col-md-4 form-group" style="font-weight: bold;">
                                                <span>Domingo</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2 form-group">
                                                <label for="extraSegSexInicio" class="control-label">Inicio</label>
                                                <input v-model="form.extraSegSexInicio" type="text" name="extraSegSexInicio" id="extraSegSexInicio"
                                                    v-mask="'##:##'" 
                                                    placeholder="00:00"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('extraSegSexInicio') }">
                                                <has-error :form="form" field="extraSegSexInicio"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group rowBody">
                                                <label for="extraSegSexTermino" class="control-label">Termino</label>
                                                <input v-model="form.extraSegSexTermino" type="text" name="extraSegSexTermino" id="extraSegSexTermino"
                                                    v-mask="'##:##'" 
                                                    placeholder="00:00"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('extraSegSexTermino') }">
                                                <has-error :form="form" field="extraSegSexTermino"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="extraSabInicio" class="control-label">Inicio</label>
                                                <input v-model="form.extraSabInicio" type="text" name="extraSabInicio" id="extraSabInicio"
                                                    v-mask="'##:##'" 
                                                    placeholder="00:00"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('extraSabInicio') }">
                                                <has-error :form="form" field="extraSabInicio"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group rowBody">
                                                <label for="extraSabTermino" class="control-label">Termino</label>
                                                <input v-model="form.extraSabTermino" type="text" name="extraSabTermino" id="extraSabTermino"
                                                    v-mask="'##:##'" 
                                                    placeholder="00:00"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('extraSabTermino') }">
                                                <has-error :form="form" field="extraSabTermino"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="extraDomInicio" class="control-label">Inicio</label>
                                                <input v-model="form.extraDomInicio" type="text" name="extraDomInicio" id="extraDomInicio"
                                                    v-mask="'##:##'" 
                                                    placeholder="00:00"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('extraDomInicio') }">
                                                <has-error :form="form" field="extraDomInicio"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="extraDomTermino" class="control-label">Termino</label>
                                                <input v-model="form.extraDomTermino" type="text" name="extraDomTermino" id="extraDomTermino"
                                                    v-mask="'##:##'" 
                                                    placeholder="00:00"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('extraDomTermino') }">
                                                <has-error :form="form" field="extraDomTermino"></has-error>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="cliResponsavel" role="tabpanel" aria-labelledby="cliResponsavel-tab">
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label for="respNome" class="control-label">Nome do Proprietário</label>
                                                <input v-model="form.respNome" type="text" name="respNome" id="respNome" max-lenght="50"
                                                    placeholder="Nome do Proprietário"
                                                    class="form-control text-uppercase" :class="{ 'is-invalid': form.errors.has('respNome') }">
                                                <has-error :form="form" field="respNome"></has-error>
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="respSexo" class="control-label">Sexo</label>
                                                <select name="respSexo" v-model="form.respSexo" id="respSexo" class="form-control" :class="{ 'is-invalid': form.errors.has('respSexo') }">
                                                    <option value="F">Feminino</option>
                                                    <option value="M">Masculino</option>
                                                </select>                                
                                            </div> 
                                            <div class="col-md-3 form-group">
                                                <label for="respCivil" class="control-label">Estado Civil</label>
                                                <select name="respCivil" v-model="form.respCivil" id="respCivil" class="form-control" :class="{ 'is-invalid': form.errors.has('respCivil') }">
                                                    <option value="C">Casado</option>
                                                    <option value="D">Divorciado</option>
                                                    <option value="P">Separado</option>
                                                    <option value="S">Solteiro</option>
                                                    <option value="V">Viúvo</option>
                                                </select>                                
                                            </div> 
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3 form-group">
                                                <label for="respRG" class="control-label">RG</label>
                                                <input v-model="form.respRG" v-mask="'##.###.###-##'" type="text" id="respRG" name="respRG"
                                                    placeholder="RG"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('respRG')}">
                                                <has-error :form="form" field="respRG"></has-error>
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="respCPF" class="control-label">CPF</label>
                                                <input v-model="form.respCPF" v-mask="'###.###.###-##'" type="text" id="respCPF" name="respCPF"
                                                    placeholder="CPF"
                                                    @blur="validaCPF('respCPF')"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('respCPF')}">
                                                <has-error :form="form" field="respCPF"></has-error>
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="respCelular" class="control-label">Celular</label>
                                                <input v-model="form.respCelular" v-mask="'(##)#####-####'" type="text" name="respCelular" id="respCelular"
                                                    placeholder="(00)0000-0000"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('respCelular') }">
                                                <has-error :form="form" field="respCelular"></has-error>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2 form-group">
                                                <label for="respCep" class="control-label">Cep</label>
                                                <input v-model="form.respCep" type="text" name="respCep" id="respCep"
                                                    v-mask="'#####-###'" 
                                                    placeholder="Cep"
                                                    class="form-control text-center" :class="{ 'is-invalid': form.errors.has('respCep') }"
                                                    @change="getRespCep(this)">
                                                <has-error :form="form" field="respCep"></has-error>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label for="respEndereco" class="control-label">Logradouro</label>
                                                <input v-model="form.respEndereco" type="text" name="respEndereco" id="respEndereco"
                                                    placeholder="Logradouro"
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('respEndereco') }">
                                                <has-error :form="form" field="respEndereco"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="respNumero" class="control-label">Número</label>
                                                <input v-model="form.respNumero" type="text" name="respNumero" id="respNumero"
                                                    placeholder="Nº"
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('respNumero') }">
                                                <has-error :form="form" field="respNumero"></has-error>
                                            </div>
                                            <div class="col-md-2 form-group">
                                                <label for="respComplemento" class="control-label">Bloco/Apt</label>
                                                <input v-model="form.respComplemento" type="text" name="respComplemento" id="respComplemento"
                                                    class="form-control" :class="{ 'is-invalid': form.errors.has('respComplemento') }">
                                                <has-error :form="form" field="respComplemento"></has-error>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label for="respBairros_id" class="typo__label">Bairro</label>
                                                <multiselect v-model="form.resp_bairro" 
                                                    :options="optionsRespBairros"
                                                    @input="onChangeRespBairro" 
                                                    placeholder="Selecione..."
                                                    id="respBairros_id" 
                                                    name="respBairros_id"
                                                    label="nome" track-by="id"
                                                    :class="{ 'is-invalid': form.errors.has('respBairros_id') }">
                                                </multiselect>
                                                <has-error :form="form" field="respBairros_id"></has-error>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="typo__label">Cidade</label>
                                                <multiselect v-model="form.resp_cidade" 
                                                    :options="optionsRespCidades" 
                                                    @input="onChangeRespCidade"
                                                    placeholder="Selecione..."
                                                    id="respCidades_id" 
                                                    label="nome" track-by="id"
                                                    :class="{ 'is-invalid': form.errors.has('respCidades_id') }">
                                                </multiselect>
                                                <has-error :form="form" field="respCidades_id"></has-error>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="cliObserv" role="tabpanel" aria-labelledby="cliObserv-tab" v-show="$gate.isAdmin()" >
                                        <div class="col-md-12 form-group">
                                            <label for="observacoes" class="control-label">Observações gerais</label>
                                            <textarea v-model="form.observacoes" class="form-control" :class="{ 'is-invalid': form.errors.has('observacoes') }"
                                                rows="4" id="observacoes" style="max-height:100px" placeholder="OBSERVAÇÕES" name="observacoes" cols="50"></textarea>
                                            <has-error :form="form" field="observacoes"></has-error>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="cliAlvara" role="tabpanel" aria-labelledby="cliAlvara-tab" v-show="editmode" >
                                        <div class="card-header" style="background-color: #dee2e6;color: #001f3f;">
                                            <h3 class="card-title">Lista de Alvarás</h3>
                                            <div class="card-tools">
                                                <button class="btn btn-primary btn-circle" title="Novo Alvará" @click.prevent="newAlvara()"><i class="fas fa-file-contract"></i></button>
                                            </div>
                                        </div>
                                        <template v-if="alvaras.length > 0">
                                            <div class="card-body table-responsive p-0">
                                                <table class="table table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th>Tipo</th>
                                                            <th>D. Solicitação</th>
                                                            <th>Vencimento</th>
                                                            <th>Modify</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr v-for="alvara in alvaras" :key="alvara.id">
                                                            <td>@{{alvara.nome}}</td>
                                                            <td>@{{alvara.datasolicitacao}}</td>
                                                            <td>@{{alvara.vencimento}}</td>
                                                            <td>
                                                                <a href="#" @click="editAlvara(alvara)">
                                                                    <i class="fa fa-edit blue"></i>
                                                                </a>
                                                                
                                                                <a href="#" @click="deleteAlvara(alvara.id)" v-show="($gate.isAdmin())">
                                                                    <i class="fa fa-trash red"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="col-md-12 form-group text-center">
                                                <p></p>
                                                <strong style="color: red; font-size: 1.5em">Não há registro de alvarás para este cliente</strong>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                <button v-show="editmode" type="submit" class="btn btn-success">Update</button>
                                <button v-show="!editmode" type="submit" class="btn btn-primary">Create</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- MODAL ALVARAS -->
        <div class="modal fade" id="addAlvara" tabindex="-1" role="dialog" aria-labelledby="addAlvaraLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" v-show="!editAlvaraMode" id="addAlvaraLabel">Add New Alvará</h5>
                        <h5 class="modal-title" v-show="editAlvaraMode" id="addAlvaraLabel">Update Alvará's Info</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="formAlvara">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label for="alvaraNome" class="control-label">Tipo de Alvará</label>
                                    <select name="alvaraNome" v-model="formAlvara.nome" id="alvaraNome" class="form-control" :class="{ 'is-invalid': form.errors.has('alvara.nome') }">
                                        <option value="">--Selecione--</option>
                                        <option value="Bombeiro">Bombeiro</option>
                                        <option value="Extraordinário">Extraordinário</option> 
                                        <option value="Funcionamento">Funcionamento</option>  
                                        <option value="Provisório">Provisório</option>                                      
                                        <option value="Vigilância">Vigilância</option>
                                    </select>                                
                                </div> 
                                <div class="col-md-4 form-group">
                                    <label for="datasolicitacao" class="control-label">Data Solicitação</label>
                                    <date-picker v-model="formAlvara.datasolicitacao"  v-mask="'##/##/####'" id="datasolicitacao" name="datasolicitacao"
                                        class="form-control " :class="{ 'is-invalid': form.errors.has('datasolicitacao') }" 
                                        :config="optionsDataSolic">
                                    </date-picker>
                                    <has-error :form="form" field="formAlvara.datasolicitacao"></has-error>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label for="vencimento" class="control-label">Vencimento</label>
                                    <date-picker v-model="formAlvara.vencimento"  v-mask="'##/##/####'" name="vencimento" id="vencimento"
                                        class="form-control " :class="{ 'is-invalid': form.errors.has('vencimento') }" 
                                        :config="optionsDataVenc">
                                    </date-picker>
                                    <has-error :form="form" field="formAlvara.vencimento"></has-error>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                            <button v-show="editAlvaraMode" type="submit" class="btn btn-success" @click.prevent="updateAlvara()">Update</button>
                            <button v-show="!editAlvaraMode" type="submit" class="btn btn-primary" @click.prevent="createAlvara()">Create</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> 
@stop

@section('js')
      
@stop

@section('adminlte_js')
    @auth
        <script>
            window.user = @json(auth()->user())
        </script>
    @endauth
    <script src="{{ asset('js/app.js')}}"></script> 
    <script src="{{ asset('js/apps/clientes.js')}}"></script> 
    <script src="{{ asset('js/blockClick.js') }}"></script>
@stop