{{-- Modal --}}
<div class="modal fade text-left modal-primary" id="add_user" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Adicionar usuário </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="users-form" enctype="multipart/form-data">
                <div class="modal-body">
                    <h4 class="card-title">Dados Comuns</h4>
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12">
                            <label>E-mail: <span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <div class="form-group">
                                <input type="email" class="form-control" id="email" name="email" placeholder="E-mail" autofocus required>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12">
                            <label>Nome: <span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <div class="form-group">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Nome" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label>RG: </label>
                            <div class="form-group">
                                <input type="number" class="form-control" id="rg" name="rg" placeholder="RG">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label>CPF: </label>
                            <div class="form-group">
                                <input type="text" class="form-control" id="cpf" name="cpf" placeholder="CPF">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label>Perfil: <span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <div class="form-group">
                                <select data-placeholder="Selecione o perfil" class="select2 form-control" id="role" name="role" required>
                                    <option value=""></option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                            <label>Unidades: <span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <select data-placeholder="Selecione a unidade" class="select2 form-control" id="units" name="units" multiple="multiple" required>
                                @foreach($units as $unity)
                                    <option value="{{$unity->id}}">{{$unity->unity_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 ">
                            <label>Senha: <span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <div class="form-group">
                                <input type="password" class="form-control" id="password" name="password" value="pacsmed" placeholder="Senha" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                            <div class="d-flex justify-content-between">
                                <label class="mb-1" for="active">Ativo <span style="color: rgba(255,0,0,0.47)">*</span></label>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" checked class="custom-control-input" name="active" id="active">
                                    <label class="custom-control-label" for="active"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="doctor_data_block">
                        <h4 class="card-title">Dados do Médico</h4>
                        <div class="row">
                            <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                <label>Nome Fantasia: <span class="badge badge-pill badge-dark text-capitalized" data-tooltip="tooltip" data-placement="top"
                                    data-original-title="Este é o nome de referência do médico que será utilizado em todo o sistema. Este nome deve ser único para cada médico do sistema! Obrigatório para o cadastro do médico.">?</span>
                                </label>
                                <div class="form-group">
                                    <input type="text" class="form-control" onfocusout="checkNameFantasy(this)" id="name_fantasy" name="name_fantasy" placeholder="Nome fantasia">
                                    <small class="msg-check-user-name-fantasy" style="color: red; font-weight: bold;"></small>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                <label>Especialidade: </label>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="spec" name="spec" placeholder="Especialidade">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label>CRM: </label>
                                <div class="form-group">
                                    <input type="number" class="form-control" id="crm" name="crm" placeholder="CRM">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label>CRM/UF: </label>
                                <div class="form-group">
                                    <select data-placeholder="CRM/UF" class="select2 form-control" id="crm_uf" name="crm_uf">
                                        <option value=""></option>
                                        @foreach($states as $state)
                                            <option value="{{ $state }}">{{ $state }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label>RQE: </label>
                                <div class="form-group">
                                    <input type="number" class="form-control" id="rqe" name="rqe" placeholder="RQE">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                <label>Assinatura: </label>
                                <label for="photo_signature"><small>(.png)</small></label>
                                <input type="file" name="photo_signature" id="photo_signature" class="form-control">
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                <div class="d-flex justify-content-between">
                                    <label class="mb-1" for="save_report_auto">Salvar laudo automaticamente <span class="badge badge-pill badge-dark text-capitalized" data-tooltip="tooltip" data-placement="top"
                                        data-original-title="Com essa opção ativada, enquanto o médico estiver realizando um laudo o seu conteúdo será salvo automaticamente a cada 10 segundos na base de dados, evitando qualquer perca de informação!">?</span></label>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" name="save_report_auto" id="save_report_auto"/>
                                        <label class="custom-control-label" for="save_report_auto"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                <div class="d-flex justify-content-between">
                                    <label class="mb-1" for="use_template_iot">Utiliza template OIT <span class="badge badge-pill badge-dark text-capitalized" data-tooltip="tooltip" data-placement="top"
                                        data-original-title="Indica que o médico utiliza a estrutura de template OIT. OBS: Entrar em contato com o suporte da PacsMed para viabilidade desta opção!">?</span></label>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" name="use_template_iot" id="use_template_iot"/>
                                        <label class="custom-control-label" for="use_template_iot"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span id="user-form-errors"></span>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Adicionar</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal De Alteração de Senha --}}
<div class="modal fade text-left modal-primary" id="change_password" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Alterar senha </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="change-password-form">
                <input type="hidden" id="id_change_password_user_modal" name="user_id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <label>Nova Senha: <small class="text-muted">Mínimo 8 carateres.</small><span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <div class="form-group">
                                <input type="password" class="form-control" id="new-password" name="new-password" placeholder="Nova Senha" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name="reset-access-user" id="reset-access-user">
                                <label class="custom-control-label" for="reset-access-user">Resetar acesso do usuário para os dados do cadastro padrão.</label>
                            </div>
                        </div>
                    </div>
                    <span id="user-change-password-form-errors"></span>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Adicionar</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal Edição dos dados do usuário--}}
<div class="modal fade text-left modal-primary" id="modal_edit_user" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Editar usuário </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="users-form-edit" enctype="multipart/form-data">
                <input type="hidden" name="user_id_edit" id="user_id_edit">
                {{ csrf_field() }}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label>E-mail: <span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <div class="form-group">
                                <input type="email" class="form-control" id="email_edit" name="email_edit" placeholder="E-mail" autofocus required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label>Nome: <span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <div class="form-group">
                                <input type="text" class="form-control" id="name_edit" name="name_edit" placeholder="Nome" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label>Perfil: <span style="color: rgba(255,0,0,0.47)">*</span></label>
                            <div class="form-group">
                                <select data-placeholder="Selecione o perfil" class="select2 form-control" id="role_edit" name="role_edit" required>
                                    <option value=""></option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label>RG: </label>
                            <div class="form-group">
                                <input type="number" class="form-control" id="rg_edit" name="rg_edit" placeholder="RG">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label>CPF: </label>
                            <div class="form-group">
                                <input type="text" class="form-control" id="cpf_edit" name="cpf_edit" placeholder="CPF">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label>CRM: </label>
                            <div class="form-group">
                                <input type="number" class="form-control" id="crm_edit" name="crm_edit" placeholder="CRM">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label>CRM/UF: </label>
                            <div class="form-group">
                                <select data-placeholder="CRM/UF" class="select2 form-control" id="crm_uf_edit" name="crm_uf_edit">
                                    <option value=""></option>
                                    @foreach($states as $state)
                                        <option value="{{ $state }}">{{ $state }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label>Especialidade: </label>
                            <div class="form-group">
                                <input type="text" class="form-control" id="spec_edit" name="spec_edit" placeholder="Especialidade">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label>RQE: </label>
                            <div class="form-group">
                                <input type="number" class="form-control" id="rqe_edit" name="rqe_edit" placeholder="RQE">
                            </div>
                        </div>
                    </div>
                    <span id="user-edit-form-errors"></span>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary" id="user-edit-btn">Atualizar</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal De Alteração da assinatura --}}
<div class="modal fade text-left modal-primary" id="modal_signature_user" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Alterar assinatura </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="change-signature-form" enctype="multipart/form-data">
                <input type="hidden" id="id_change_signature_user_modal" name="id_change_signature_user_modal">
                <div class="modal-body">
                    <div class="container">
                        <div class="row justify-content-center align-items-center" id="signature"></div>
                        <div class="col-lg-12 col-md-12 form-group">
                            <label for="new_photo_signature">Escolher nova assinatura <small>(.png)</small></label>
                            <input type="file" name="new_photo_signature" class="form-control" id="new_photo_signature">
                        </div>
                    </div>
                    <span id="user-change-signature-form-errors"></span>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Alterar</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal de associação de unidades --}}
<div class="modal fade text-left modal-primary" id="modal_units" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Alterar unidades </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="" id="change-units-form">
                <input type="hidden" name="user_unity_id_edit" id="user_unity_id_edit">
                <div class="modal-body" style="max-height: 500px;">
                    <div id="list-units">
                        @foreach ($units as $unity)
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name="units[]" value="{{ $unity->id }}" id="{{$unity->id}}">
                                <label class="custom-control-label" for="{{$unity->id}}">{{ $unity->unity_name }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary" id="user-units-btn">Associar</button>
                </div>
            </form>
        </div>
    </div>
</div>