@extends('layout.administrator.index')
@section('title', 'Roles y perfiles')

@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      {{-- <h1>
        Roles y perfiles
      </h1> --}}
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('administrator.dashboard')}}"><i class="fa fa-dashboard"></i> Inicio</a></li>
        <li class="breadcrumb-item active">Roles y perfiles</li>
      </ol>
    </section>

    <section class="content">
      <div class="box">
        <div class="box-header with-border">
          <div class="row align-items-center">
            <div class="col-6">
              <h4 class="box-title">Roles y perfiles</h4>
            </div>
            <div class="col-6">
              <div class="box-controls pull-right">
                <div class="box-header-actions">
                  <a href="javascript:;" onclick="create()" class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Agregar</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-body">
          <table class="table table-sm table-hover table-responsive">
            <thead>
              <tr>
                <th class="text-center">Nombre</th>
                <th class="text-center">Estado</th>
                <th class="text-center">Opciones</th>
              </tr>
            </thead>
            <tbody class="text-center">
              @if (count($roles)>0)
                @foreach ($roles as $role)
                  <tr>
                    <td style="vertical-align:middle;">
                      <b class="font-weight-bold">{{$role->name}}</b>
                    </td>
                    <td>
                      <span class="badge badge-{{Config::get('constants.states')[$role->state]['type']}}">{{Config::get('constants.states')[$role->state]['name']}}</span>
                    </td>
                    <td>
                      <a href="javascript:;" onclick="edit({{$role->id}}, '{{$role->name}}', {{$role->unique}}, '{{$role->state}}')" class="btn btn-info btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                      @if ($role->unique==2)
                        <a href="javascript:;" onclick="openDelete({{$role->id}}, '{{$role->name}}')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>
                      @endif
                    </td>
                  </tr>
                @endforeach
              @else
                <tr>
                  <td colspan="4">No se encontraron roles</td>
                </tr>
              @endif
            </tbody>
          </table>
        </div>
        <div class="box-footer clearfix">
          <div class="row">
            <div class="col-md-12">
              @if (count($roles) > 0)
                {!! $roles->appends(Request::all())->render() !!}
              @endif
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- MODAL -->
  <div class="modal fade" id="idModalCreate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Agregar rol</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form id="formCreate" method="post">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="idCreateName" class="control-label">Nombre *</label>
                  <input type="text" id="idCreateName" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
                  <small class="text-danger msgCreate" id="create_name"></small>
                </div>
              </div>
            </div>
          </form>
          <br>
          <div class="row">
            <div class="col-md-12">
              <button type="button" onclick="store()" class="btn btn_admin btn-block"><i class="fa fa-floppy-o"></i> Guardar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="idModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">Editar rol</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="fa fa-times"></i>
          </button>
				</div>
        <div class="modal-body">
          <form id="formEdit" method="post">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="idEditName" class="control-label">Nombre *</label>
                  <input type="text" id="idEditName" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
                  <small class="text-danger msgEdit" id="edit_name"></small>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="idEditState" class="control-label">Estado *</label>
                  <select class="form-control hg_select select2" id="idEditState" name="state">
                    @foreach (Config::get('constants.active') as $key => $state)
                      <option value="{{$key}}">{{$state['name']}}</option>
                    @endforeach
                  </select>
                  <small class="text-danger msgEdit" id="edit_state"></small>
                </div>
              </div>
            </div>
          </form>
          <br>
          <div class="row">
            <div class="col-md-12">
              <button type="button" onclick="update()" class="btn btn_admin btn-block"><i class="fa fa-floppy-o"></i> Guardar cambios</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
  <script type="text/javascript">
    function create() {
      $(".msgCreate").empty();
      $("#idModalCreate").modal();
    }

    function store() {
      var formData = new FormData(document.getElementById("formCreate"));

      $.ajax({
        type: 'POST',
        url: "/administrator/roles/store",
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){
          $(".content_loading").fadeIn("slow");
        },
        success:function(response){
          $(".content_loading").fadeOut("slow");
          if (response.state == 1) {
            swal({
              title: "Bien!",
              text: response.message,
              type: "success",
            }, function(){
              $(".content_loading").fadeIn("slow");
              location.reload();
            });
          }else if (response.state == 2) {
            swal("Oops!", response.message, "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        },
        error: function(xhr){
          $(".content_loading").fadeOut("slow");
          if (xhr.responseJSON.errors) {
            $.each(xhr.responseJSON.errors, function( index, value ){
              $("#create_"+index).html(value[0]);
            });

            swal("Oops!", "Debe enviar el nombre correctamente", "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        }
      });
    }

    var idRole = null;
    function edit(id, name, unique, state) {
      $("#idEditState").prop("disabled", false);

      $(".msgEdit").empty();

      idRole = id;

      $("#idEditName").val(name);
      if (unique==1) {
        $("#idEditState").prop("disabled", true);
      }
      $("#idEditState").val(state).trigger('change.select2');

      $("#idModalEdit").modal();
    }

    function update() {
      var formData = new FormData(document.getElementById("formEdit"));
      formData.append('id', idRole);

      $.ajax({
        type: 'POST',
        url: "/administrator/roles/update",
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){
          $(".content_loading").fadeIn("slow");
        },
        success:function(response){
          $(".content_loading").fadeOut("slow");
          if (response.state == 1) {
            swal({
              title: "Bien!",
              text: response.message,
              type: "success",
            }, function(){
              $(".content_loading").fadeIn("slow");
              location.reload();
            });
          }else if (response.state == 2) {
            swal("Oops!", response.message, "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        },
        error: function(xhr){
          $(".content_loading").fadeOut("slow");
          if (xhr.responseJSON.errors) {
            $.each(xhr.responseJSON.errors, function( index, value ){
              $("#edit_"+index).html(value[0]);
            });

            swal("Oops!", "Debe enviar los datos correctamente", "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        }
      });
    }

    function openDelete(id, name) {
      swal({
          title: "Estás seguro?",
          text: "El rol " + name + " sera eliminado!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Si, Eliminar!",
          closeOnConfirm: false
      }, function(){
        deleteRole(id);
      });
    }

    function deleteRole(id) {
      $.ajax({
        type: 'POST',
        url: "/administrator/roles/delete",
        data: {
          "id": id
        },
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){
          $(".content_loading").fadeIn("slow");
        },
        success:function(response){
          $(".content_loading").fadeOut("slow");
          if (response.state == 1) {
            swal({
                title: "Eliminado!",
                text: response.message,
                type: "success",
            }, function(){
              location.reload();
            });
          }else if (response.state == 2) {
            swal("Oops!", response.message, "warning");
          }else{
            swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
          }
        },
        error: function(xhr){
          $(".content_loading").fadeOut("slow");
          swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
        }
      });
    }

  </script>
@endsection