@extends('template.layoutAdmin', ['activeButton'=>'inventario'])

@section('style')
  <style media="screen">
  .pagination{
    display:inline-block;
    padding-left:0;
    margin: 10px 0 -10px 0;
  }
  .pagination>li{
    display:inline
  }
  .pagination li a,.pagination li span{
    position:relative;
    float:left;
    padding:6px 12px;
    margin: 0 -1px 0 -1px;
    line-height:1.42857143;
    color:#337ab7;
    text-decoration:none;
    background-color:#fff;
    border:1px solid #ddd
  }
  .pagination li:first-child a,.pagination li:first-child span{
    margin-left:0;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px
  }
  .pagination li:last-child a,.pagination li:last-child span{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px
  }
  .pagination li a:focus,.pagination li a:hover,.pagination li span:focus,.pagination li span:hover{
    z-index:2;
    color:#23527c;
    background-color:#eee!important;
    border-color:#eee;
  }
  .pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{
    z-index:3;
    color:#fff;
    cursor:default;
    background-color:#337ab7!important;
    border-color:#337ab7;
  }
  .pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{
    color:#777;
    cursor:not-allowed;
    background-color:#fff;
    border-color:#ddd
  }
  .pagination-lg li a,.pagination-lg li span{
    padding:10px 16px;
    font-size:18px;
    line-height:1.3333333
  }
  .pagination-lg li:first-child>a,.pagination-lg li:first-child span{
    border-top-left-radius:6px;
    border-bottom-left-radius:6px
  }
  .pagination-lg li:last-child a,.pagination-lg li:last-child span{
    border-top-right-radius:6px;
    border-bottom-right-radius:6px
  }
  </style>
@endsection

@section('title')
{{  trans('unidad.tituloUnidad') }}
@endsection

@section('cabecera')

    <h1>
        {{ trans('unidad.tituloUnidad') }}
        <small>{{ trans('unidad.mensajeAyuda') }}</small>
    </h1>
@endsection

@section('contenido')
    <div class="row">
        <div class="col-12">
            @if(Session::has('message'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😉 {{Session::get('message')}} 😉
                </div>
            @endif
            @if(Session::has('message_error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😓 {{Session::get('message_error')}} 😒
                </div>
            @endif
        </div>
        <div class="col-12">
            <div class="box">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="box-title"> {{  trans('unidad.listaUnidades') }} </h3>
                        </div>
                        <div class="col-md-6 text-right">
                         {{-- <a class="btn btn-info" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                         <i class="fa fa-filter" aria-hidden="true"></i>---}}
                            </a>
                            <a href="javascript:;" data-toggle="modal" data-target="#crearUnidad" class="btn btn-info" data-toggle="tooltip" title="Agregar Unidad"><i class="fa fa-plus"></i></a>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <div class="col-12">
                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <form action="" method="get">
                                    <div class="row">
                                        <div class="col-2"></div>
                                        <div class="col-4">
                                            <div class="form-group">
                                                <label for="fechaInicio"> {{  trans('unidad.fechaInicio') }} </label>
                                                <input type="text"
                                                    name="fechaInicio"
                                                    class="form-control"
                                                    id="fechaInicio"
                                                    autocomplete="off"
                                                    placeholder=" {{  trans('unidad.rangoFecha') }} ">
                                            </div>
                                        </div>
                                        <div class="col-4">
                                          <div class="form-group">
                                              <label for="fechaFinal"> {{  trans('unidad.fechaFinal') }} </label>
                                              <input type="text"
                                                  name="fechaFinal"
                                                  class="form-control"
                                                  id="fechaFinal"
                                                  autocomplete="off"
                                                  placeholder=" {{  trans('unidad.rangoFecha') }} ">
                                          </div>
                                        </div>
                                        <div class="col-2"></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-2"></div>
                                        <div class="col-4">
                                            <div class="form-group">
                                                <label for="nombre"> {{  trans('unidad.nombre') }} </label>
                                                <input type="text"
                                                    name="nombre"
                                                    class="form-control"
                                                    autocomplete="off"
                                                    placeholder="{{  trans('unidad.nombre') }}">
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group">
                                                <label for="idTipoT"> {{  trans('unidad.tipoPedido') }}	</label>
                                                <select name="idTipoT" id="idTipoT"  class="form-control">
                                                    <option value=""> {{  trans('unidad.seleccionar') }} </option>
                                                    {{-- @foreach($tipoPedidos as $tipoPedido)
                                                      <option value="{{$tipoPedido->idValorParametro}}">{{$tipoPedido->nombre}}</option>
                                                    @endforeach --}}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-2"></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <input type="submit" class="btn btn-info btn-sm" value="Buscar">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <table class="table table-bordered table-responsive" id="tbActualizar">
                        <thead>
                          <tr>
                            <th class="text-center"> {{  trans('unidad.id') }} </th>
                            <th class="text-center"> {{  trans('unidad.nombre') }} </th>
                            <th class="text-center"> {{  trans('unidad.descripcion') }}	</th>
                            <th class="text-center"> {{  trans('unidad.estado') }} </th>
                            <th class="text-center"> {{  trans('unidad.opciones') }}</th>
                          </tr>
                        </thead>
                        <tbody>
                            @if(count($unidades)> 0)
                                @foreach($unidades as $unidad)
                                <tr>
                                    <td class="text-center">{{$unidad->idUnidad}}</td>
                                    <td class="text-center">{{$unidad->nombre}}</td>
                                    <td class="text-center">{{$unidad->descripcion}}</td>
                                    <td class="text-center">
                                        @if ($unidad->state == 1)
                                        <a href="javascript:;" onclick="estadoUnidad(0,{{$unidad->idUnidad}})"><span class="badge badge-info"> {{  trans('unidad.activo') }}</span></a>
                                        @else
                                            <a href="javascript:;" onclick="estadoUnidad(1,{{$unidad->idUnidad}})"><span class="badge badge-danger"> {{  trans('unidad.inactivo') }} </span></a>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <a href="javascript:;" onclick="editarUnidad({{$unidad->idUnidad}})" class="btn btn-sm btn-info"><i class="fa fa-pencil-square-o"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td class="text-center" colspan="5"> {{  trans('unidad.sinRegistro') }} </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {{-- Crear Unidad --}}
    <div class="modal fade" id="crearUnidad" tabindex="-1" role="dialog" aria-labelledby="crearUnidadLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="crearUnidadLabel"> {{  trans('unidad.crearUnidad') }} </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formUnidad" action="post">
                        <small class="small">{{ trans('template.camposcon') }} (<span class="text-danger">*</span>) {{ trans('template.obligatorios') }}</small>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nombre"> {{  trans('unidad.nombre') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="nombre" id="nombre" class="form-control" required onkeyup="slugCat(this.value, 2)" placeholder=" {{  trans('unidad.nombre') }}	">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="descripcion"> {{  trans('unidad.descripcion') }} </label>
                                    <input type="text" name="descripcion" class="form-control" id="descripcion" required autocomplete="off" placeholder=" {{  trans('unidad.descripcion') }} ">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"> {{  trans('unidad.cerrar') }}	</button>
                    <button onclick="crearUnidad()" type="button" class="btn" style="background: #DB3920;color:#FFF;" > {{  trans('unidad.guardar') }} </button>
                </div>
            </div>
        </div>
    </div>
    {{-- Editar Unidad --}}
    <div class="modal fade" id="editarUnidad" tabindex="-1" role="dialog" aria-labelledby="editarUnidadLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editarUnidadLabel"> {{  trans('unidad.editarUnidad') }}	</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formUnidadE" action="post">
                        <small class="small">{{ trans('template.camposcon') }} (<span class="text-danger">*</span>) {{ trans('template.obligatorios') }}</small>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nombreE"> {{  trans('unidad.nombre') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="nombreE" id="nombreE" class="form-control" required onkeyup="slugCat(this.value, 2)" placeholder=" {{  trans('unidad.nombre') }} ">
                                    <input type="hidden" name="idUnidad" id="idUnidad">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="descripcionE"> {{  trans('unidad.descripcion') }} </label>
                                    <input type="text" name="descripcionE" class="form-control" id="descripcionE" required autocomplete="off" placeholder=" {{  trans('unidad.descripcion') }} ">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"> {{  trans('unidad.cerrar') }}	</button>
                    <button onclick="actualizarUnidad()" type="button" class="btn" style="background: #DB3920;color:#FFF;" > {{  trans('unidad.guardar') }} </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
  <script type="text/javascript">
    $( document ).ready(function() {
      $( "#fechaInicio" ).datepicker({format: 'dd/mm/yyyy'});
      //$("#fechaInicio").datepicker
      $( "#fechaFinal" ).datepicker({format: 'dd/mm/yyyy'});
    });
    function crearUnidad()
        {
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            var formData = new FormData(document.getElementById("formUnidad"));
            $.ajax({
                url: UrlHost_+"/administrator/unidades/ajax/store",
                data: formData,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    swal({
                        title: " {{  trans('unidad.cargando') }} ",
                        text: " {{  trans('unidad.espereUnMomento') }} ",
                        showConfirmButton: false
                    });
                },
                success: function(response){
                    if (response.code == 200) {
                        swal.close();
                        $("#formUnidad")[0].reset();
                        $("#tbActualizar").load(location.href+" #tbActualizar>*","");
                        $("#crearUnidad").modal('hide');
                    }else{
                        swal("Info!", response.message, "info");
                    }
                },
                error: function(xhr){
                    swal("Error!", " {{  trans('unidad.ErrorMessage') }} ", "error");
                }
            });
        }
        function editarUnidad(idUnidad)
        {
            var data = {
                "idUnidad": idUnidad
            }
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            $.ajax({
                url: UrlHost_+"/administrator/unidades/ajax/editar",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    swal({
                        title: " {{  trans('unidad.cargando') }} ",
                        text: " {{  trans('unidad.espereUnMomento') }} ",
                        showConfirmButton: false
                    });
                },
                success: function(response){
                    
                    if (response.code == 200) {
                        swal.close();
                        $("#idUnidad").val(idUnidad);
                        $("#editarUnidad").modal('show');
                        $("#nombreE").val(response.data.nombre);
                        $("#descripcionE").val(response.data.descripcion);
                    }else{
                        swal("Info!", response.message, "info");
                    }
                },
                error: function(xhr){
                    swal("Error!", " {{  trans('unidad.ErrorMessage') }} ", "error");
                }
            });
        }
        function actualizarUnidad()
        {
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            if($("#nombreE").val() != ''){
                var formData = new FormData(document.getElementById("formUnidadE"));
                $.ajax({
                    url: UrlHost_+"/administrator/unidades/ajax/update",
                    data: formData,
                    type: 'post',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    cache: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        swal({
                            title: " {{  trans('unidad.cargando') }} ",
                            text: " {{  trans('unidad.espereUnMomento') }} ",
                            showConfirmButton: false
                        });
                    },
                    success: function(response){
                        if (response.code == 200) {
                            swal.close();
                            $("#formUnidadE")[0].reset();
                            $("#tbActualizar").load(location.href+" #tbActualizar>*","");
                            $("#editarUnidad").modal('hide');
                        }else{
                            swal("Info!", response.message, "info");
                        }
                    },
                    error: function(xhr){
                        swal("Error!", " {{  trans('unidad.ErrorMessage') }} ", "error");
                    }
                });
            }else{
                swal("Info!", " {{  trans('unidad.camposVacios') }} ", "info");
            }
        }
        function estadoUnidad(estado,idUnidad)
        {
            var data = {
                "idUnidad": idUnidad,
                "estado": estado
            }
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            $.ajax({
                url: UrlHost_+"/administrator/unidades/ajax/changeEstado",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    swal({
                        title: " {{  trans('unidad.cargando') }} ",
                        text: " {{  trans('unidad.espereUnMomento') }} ",
                        showConfirmButton: false
                    });
                },
                success: function(response){
                    if (response.code == 200) {
                        swal.close();
                        $("#tbActualizar").load(location.href+" #tbActualizar>*","");
                    }else{
                        swal("Info!", response.message, "info");
                    }
                },
                error: function(xhr){
                    swal("Error!", "H {{  trans('unidad.ErrorMessage') }} ", "error");
                }
            });
        }
  </script>
@endsection