@extends('layouts.main', ['activePage' => 'users', 'titlePage' => 'Nuevo usuario'])
@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">

          <div class="card">
            <div class="card-header card-header-info">
              <h4 class="card-title">Usuario</h4>
              <p class="card-category">Ingresar datos</p>
            </div>
            <div class="card-body">
              <form action="{{ route('users.store') }}" method="post" class="form-horizontal">
                @csrf

                <div class="card card-danger">

                  <div class="card-body">
                    <div class="row">
                      <p class="text-center text-danger">Todos los campos son requeridos*</p>
                      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="form-group">
                          <label for="ci">Número de identidad</label>
                          <div class="input-group">
                            <span class="input-group-addon">V-</span>
                            <input id="ci" name="ci" type="text" class="form-control numeric-input"
                              placeholder="CÉDULA DE IDENTIDAD">
                          </div>
                          @if ($errors->has('ci'))
                            <span class="error text-danger" for="input-ci">{{ $errors->first('ci') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label for="firstname">Primer nombre</label>
                          <input id="firstname" name="firstname" type="text" class="form-control">
                          @if ($errors->has('firstname'))
                            <span class="error text-danger" for="input-firstname">{{ $errors->first('firstname') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label for="middlename">Segundo nombre</label>
                          <input id="middlename" name="middlename" type="text" class="form-control">
                        </div>
                        <div class="form-group">
                          <label for="primary_lastname">Primer apellido</label>
                          <input id="primary_lastname" name="primary_lastname" type="text" class="form-control">
                          @if ($errors->has('primary_lastname'))
                            <span class="error text-danger"
                              for="input-primary_lastname">{{ $errors->first('primary_lastname') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label for="second_lastname">Segundo apellido</label>
                          <input id="second_lastname" name="second_lastname" type="text" class="form-control">
                        </div>
                        <div class="form-group">
                          <label for="date_birth">Fecha de nacimiento</label>
                          <div class="input-group">
                            <span class="input-group-addon"><i class="input-group input-group-static my-3"></i></span>
                            <input id="date_birth" name="date_birth" type="date" class="form-control date-default">
                          </div>
                          @if ($errors->has('date_birth'))
                            <span class="error text-danger"
                              for="input-date_birth">{{ $errors->first('date_birth') }}</span>
                          @endif
                        </div>
                      </div>



                      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="form-group">
                          <label for="address">Dirección</label>
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                            <input id="address" name="address" type="text" class="form-control"
                              placeholder="Dirección">
                          </div>
                          @if ($errors->has('address'))
                            <span class="error text-danger" for="input-address">{{ $errors->first('address') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label for="state">Estado</label>
                          <select id="state" name="state" class="form-control address-select" style="width:100%;">
                            @if ($states)
                              @foreach ($states as $state)
                                <option data-id="{{ $state->id }}" value="{{ $state->id }}">{{ $state->state }}
                                </option>
                              @endforeach
                            @endif
                          </select>
                          @if ($errors->has('state'))
                            <span class="error text-danger" for="input-state">{{ $errors->first('state') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label for="province">Municipio</label>
                          <select id="province" name="province" class="form-control address-select" style="width:100%;">
                          </select>
                          @if ($errors->has('province'))
                            <span class="error text-danger" for="input-province">{{ $errors->first('province') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label for="locality">Parroquia</label>
                          <select id="locality" name="locality" class="form-control address-select"
                            style="width:100%;">
                          </select>
                          @if ($errors->has('locality'))
                            <span class="error text-danger"
                              for="input-locality">{{ $errors->first('locality') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label for="email">Correo electrónico</label>
                          <input id="email" name="email" type="email" class="form-control lowercase-style"
                            placeholder="CORREO ELECTRÓNICO">
                          @if ($errors->has('email'))
                            <span class="error text-danger" for="input-email">{{ $errors->first('email') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label for="phones">
                            Teléfono(s)
                            &nbsp;
                            <span>
                              <a href="#!" id="plus-phone" data-toggle="tooltip" data-container="body"
                                data-title="Añadir teléfono" data-placement="top">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </span>
                          </label>
                          <div id="element-phone" class="element-phone">
                            <div class="input-group">
                              <span class="input-group-addon"><i class="fa fa-location-arrow"></i></span>
                              <select name="codes[]" type="text" class="form-control code">
                                @if ($area_codes)
                                  @foreach ($area_codes as $code)
                                    <option value="{{ $code->id }}">{{ $code->code }}</option>
                                  @endforeach
                                @endif
                              </select>
                              <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                              <input id="phones" name="phones[]" type="text"
                                class="form-control phone numeric-input" maxlength="7"
                                placeholder="Número de teléfono">
                            </div>
                            @if ($errors->has('phones'))
                              <span class="error text-danger" for="input-phones">{{ $errors->first('phones') }}</span>
                            @endif
                          </div>
                          <div class="optional-plus-phones"></div>
                        </div>
                      </div>
                      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="form-group">
                          <label for="sede_id">Institutos</label>
                          @if (isset($sedes))
                            {{ Form::select('sede_id', $sedes, null, ['class' => 'form-control', 'placeholder' => '.:Seleccione:.', 'id' => 'sede_id']) }}
                          @endif
                          @if ($errors->has('sede_id'))
                            <span class="error text-danger" for="input-sede_id">{{ $errors->first('sede_id') }}</span>
                          @endif
                        </div>

                        <!-- <div class="form-group">
                                                <label for="speciality">Especialidad</label>

                                                @if (isset($especialidades))
  {{ Form::select('speciality', $especialidades, null, ['class' => 'form-control speciality-select', 'placeholder' => '.:Seleccione:.', 'id' => 'speciality']) }}
  @endif
                                                  @if ($errors->has('speciality'))
  <span class="error text-danger" for="input-speciality">{{ $errors->first('speciality') }}</span>
  @endif
                                            </div>-->

                        <div class="form-group">
                          <label for="role_id">Rol del usuario</label>
                          @if (isset($roles))
                            {{ Form::select('role_id', $roles, null, ['class' => 'form-control', 'placeholder' => '.:Seleccione:.', 'id' => 'role_id']) }}
                          @endif

                          @if ($errors->has('role_id'))
                            <span class="error text-danger" for="input-role_id">{{ $errors->first('role_id') }}</span>
                          @endif
                        </div>


                        <div class="form-group">
                          <label for="password">Asignar contraseña</label>
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                            <input id="password" name="password" type="password" class="form-control"
                              placeholder="Contraseña">
                            <input id="show-password" type="text" class="form-control" value=""
                              placeholder="Contraseña" readonly>
                            <span id="toggle-password" class="input-group-addon" data-toggle="tooltip"
                              data-container="body" data-title="Mostrar u Ocultar"><i class="fa fa-eye"></i></span>
                            <span id="generate-password" class="input-group-addon" data-toggle="tooltip"
                              data-container="body" data-title="Generar contraseña"><i
                                class="fa fa-keyboard-o"></i></span>
                          </div>
                          @if ($errors->has('password'))
                            <span class="error text-danger"
                              for="input-password">{{ $errors->first('password') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label>Status del usuario</label>
                          <div class="radio">
                            <label for="active">
                              <input id="active" class="square_radio" name="status" type="radio" value="0"
                                checked>
                              Activo
                            </label>
                          </div>
                          <div class="radio">
                            <label for="pending">
                              <input id="pending" class="square_radio" name="status" type="radio"
                                value="1">
                              Pendiente
                            </label>
                          </div>
                          @if ($errors->has('status'))
                            <span class="error text-danger" for="input-status">{{ $errors->first('status') }}</span>
                          @endif
                        </div>
                        <div class="form-group">
                          <label>Género</label>
                          <div class="radio">
                            <label for="woman">
                              <input id="woman" class="square_radio" name="gender" type="radio" value="0"
                                checked>
                              Femenino
                            </label>
                          </div>
                          <div class="radio">
                            <label for="man">
                              <input id="man" class="square_radio" name="gender" type="radio"
                                value="1">
                              Masculino
                            </label>
                          </div>
                          @if ($errors->has('gender'))
                            <span class="error text-danger" for="input-gender">{{ $errors->first('gender') }}</span>
                          @endif
                        </div>
                      </div>
                    </div>


                    <div style="text-align: center">
                      <button type="submit" class="btn btn-info">Guardar</button>
                    </div>


                    <!-- /.card-body -->
                  </div>



                </div>
              </form>
              <!--Footer-->

              <!--End footer-->
            </div>

          </div>
        </div>
      </div>
    </div>
  @endsection
  @section('scripts')
    <script type="text/javascript">
      $(document).ready(function() {
        $('.select2').select2();
      });


      $(function() {
        $('#state').change(function() {
          var valor = $(this).val();
          // console.log(valor);
          $("#province").empty();
          axios.get('{{ route('get-Municipios') }}', {
            params: {
              valor: valor

            }
          }).then(response => {
            $('#province').append('<option>--Seleccione--</option>');
            response.data.forEach(provinces => {
              $('#province').append('<option value="' + provinces.id + '">' + provinces.province +
                '</option>');
              //console.log(response.data);
            });

          });
        });

        $('#province').change(function() {
          var valor = $(this).val();
          $("#locality").empty();
          axios.get('{{ route('get-Parroquias') }}', {
            params: {
              valor: valor
            }
          }).then(response => {
            $('#locality').append('<option>--Seleccione--</option>');
            response.data.forEach(localities => {
              $('#locality').append('<option value="' + localities.id + '">' + localities.locality +
                '</option>');
            });
          });
        });
      });
    </script>
  @endsection