@extends('layouts.app')
@section('titulo','Usuario - '.config('app.name'))
@section('header','Usuario')

@section('breadcrumb')
<ol class="breadcrumb float-sm-right">
  <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
  <li class="breadcrumb-item active">Crear Usuario</li>
</ol>
@endsection

@section('style')
<!-- Select2 -->
<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

@endsection
@section('content')
<div class="row">
  <div class="col-md-12">
    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title">Registrar Usuario</h3>
      </div>
      <div class="card-body">
          <form action="{{ route('user.store') }}" method="POST">
              @csrf
              <div class="row">
                <div class="input-group mb-3 col-md-5">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                  </div>
                  <input type="number" class="form-control {{ $errors->has('identificacion') ? ' is-invalid' : '' }}" name="identificacion" placeholder="Identificacion" value="{{ old('identificacion') }}">
                </div>

                <div class="input-group mb-3 col-md-7">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                  </div>
                  <input type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" placeholder="Email" value="{{ old('email') }}" required="">
                </div>

                {{-- <div class="input-group mb-3 col-md-6">
                  <select class="form-control select2"  style="width: 100%;" id="departamentos" name="departamento_id" required="">
                    <option value="">Departamentos...</option>
                    @foreach(departamentos() as $d)
                        <option value="{{ $d->id_departamento }}">{{ $d->departamento }}</option>
                      @endforeach
                  </select>
                </div>
               
                <div class="input-group mb-3 col-md-6">
                  <select class="form-control select2" style="width: 100%;" id="municipios" name="municipio_id" disabled="" required="">
                    <option value="">Municipios...</option>
                    
                  </select>
                </div>
 --}}
                <div class="input-group mb-3 col-md-6">
                  <select class="form-control select2 {{ $errors->has('sede') ? ' is-invalid' : '' }}"  style="width: 100%;" id="sede" name="sede" required="">
                    <option value="">Sede...</option>
                    <option value="Barrancabermeja">Barrancabermeja</option>
                    <option value="Arauca">Arauca</option>
                    <option value="Teca">Teca</option>
                    <option value="Libre">Libre</option>
                  </select>
                </div>

                <div class="input-group mb-3 col-md-6">
                  <select class="form-control select2"  style="width: 100%;" id="rol" name="rol" required="">
                    <option value="">Rol...</option>
                    <option value="0">Administrador</option>
                    <option value="1">Empleado</option>
                  </select>
                </div>
              </div>
          </div> <!-- /.card-body -->
          @if(count($errors) > 0)
            <div class="form-group">
              <div class="text-danger">
                <ul class="m-0">
                  @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                  @endforeach
                </ul>
              </div>
            </div>
          @endif
          <div class="card-footer">
            <button type="submit" class="btn btn-info">Registrar</button>
            <a href="{{ route('user.index') }}" class="btn btn-link float-right">volver</a>
          </div>
        </form>
      </div>
    </div>
  </div> <!-- col-md -->
</div>
<!-- /row -->
@endsection

@section('scripts')
<!-- Select2 -->
<script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>

<script type="text/javascript">
  $(document).ready(function() {

    $('.select2').select2({
      theme: 'bootstrap4'
    })


    $("#departamentos").change(function(event) {
      event.preventDefault();
      $.ajax({
      url: '{{ route('departamentos.municipios') }}',
      type: 'POST',
      dataType: 'JSON',
      data: {_token: '{{ csrf_token() }}',departamento : $(this).val()},
      })
      .done(function(data) {
        $("#municipios").html(data).attr('disabled',false);
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
    });
    
  });
</script>

@endsection