@extends('system.administrator.config.index')

@section('subcontent')
<div class="row mt-1 mr-3 ml-3">
    <div class="col p-0">
        <div class="card shadow">
            <div class="card-header border-0">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h3 class="mb-0">Descuentos de los domiciliarios</h3>
                    </div>
                    <div class="col-4 text-right">
                        <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#idModalCrearRegla">Añadir</button>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table align-items-center table-flush">
                    <thead class="thead-light text-center">
                        <tr>
                          <th>Nombre</th>
                          <th>Valor</th>
                          <th>Estado</th>
                          <th></th>
                        </tr>
                    </thead>
                    <tbody class="text-center">
                      @foreach($discounts as $discount)
                      <tr>
                        <td> <strong>{{$discount->name}}</strong> </td>
                        <td>{{$discount->extra}}%</td>
                        <td>
                          <strong class="text-{{Config::get('const.states')[$discount->state]['type']}} text-uppercase">{{Config::get('const.states')[$discount->state]['name']}}</strong>
                        </td>
                        <td>
                          <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#idModalEditarRegla_{{$discount->id}}"><i class="fas fa-pencil-alt"></i></button>
                        </td>
                      </tr>
                      {{-- <div class="modal fade" id="modalEditRegla_{{$hora->id}}" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
                          <form action="/administrator/configuracion/edit/horaPico/{{$hora->id}}" method="post">
                              @csrf
                              <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
                                  <div class="modal-content modal-sm">
                                      <div class="modal-header">
                                          <h6 class="modal-title" id="modal-title-default">Crear regla</h6>
                                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                              <span aria-hidden="true">×</span>
                                          </button>
                                      </div>
                                      <div class="modal-body">
                                          <div class="row">
                                              <div class="col">
                                                  <div class="from-group mb-1">
                                                      <label>Hora inicial</label>
                                                      <input required type="text" class="form-control timePicker" name="init_hour" value="{{$hora->init_hour}}">
                                                  </div>
                                              </div>
                                              <div class="col">
                                                  <div class="from-group mb-1">
                                                      <label>Hora final</label>
                                                      <input required type="text" class="form-control timePicker" name="fin_hour" value="{{$hora->fin_hour}}">
                                                  </div>
                                              </div>
                                          </div>
                                          <div class="form-group mb-1">
                                              <label>Recargo</label>
                                              <div class="input-group">
                                                  <div class="input-group-prepend">
                                                      <span class="input-group-text">$</span>
                                                  </div>
                                                  <input required type="number" class="form-control" name="recargo" value="{{$hora->value}}">
                                              </div>
                                          </div>
                                          <div class="form-group mb-1">
                                              <label>Estado</label>
                                              <select name="state" class="form-control">
                                                  <option value="1" {{$hora->state == 1 ? 'selected' : ''}}>Activo</option>
                                                  <option value="2" {{$hora->state == 2 ? 'selected' : ''}}>Inactivo</option>
                                                  <option value="3" {{$hora->state == 3 ? 'selected' : ''}}>Papelera</option>
                                              </select>
                                          </div>
                                      </div>
                                      <div class="modal-footer">
                                          <button type="submit" class="btn btn-success">Guardar</button>
                                          <button type="button" class="btn btn-link  ml-auto" data-dismiss="modal">Cerrar</button>
                                      </div>
                                  </div>
                              </div>
                          </form>
                      </div> --}}

                      <div class="modal fade" id="idModalEditarRegla_{{$discount->id}}" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Editar</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <form action="{{route('administrator.discount.update', [$discount->id])}}" method="post">
                              @method('PUT')
                              @csrf
                              <div class="modal-body">
                                <div class="row">
                                  <div class="col-md-12">
                                    <div class="form-group">
                                      <label for="idNameEdit" class="control-label">Nombre *</label>
                                      <input type="text" id="idNameEdit" name="name" placeholder="Nombre" autocomplete="off" class="form-control" value="{{$discount->name}}" required>
                                    </div>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-md-12">
                                    <div class="form-group">
                                      <label for="idValueEdit" class="control-label">Valor *</label>
                                      <input type="text" id="idValueEdit" name="value" placeholder="Valor" autocomplete="off" class="form-control input-number" value="{{$discount->extra}}" required>
                                    </div>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-md-12">
                                    <div class="form-group">
                                      <label for="idStateEdit" class="control-label">Estado *</label>
                                      <select class="form-control" id="idStateEdit" name="state">
                                        @foreach (Config::get('const.states') as $key => $state)
                                          @if ($key == $discount->state)
                                            <option value="{{$key}}" selected>{{$state['name']}}</option>
                                          @else
                                            <option value="{{$key}}">{{$state['name']}}</option>
                                          @endif
                                        @endforeach
                                      </select>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                <button type="submit" class="btn btn-success"><i class="fas fa-check"></i> Guardar cambios</button>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                      @endforeach
                    </tbody>
                </table>
            </div>
            <div class="card-footer py-4">
                <nav class="d-flex justify-content-end" aria-label="...">
                    {!! $discounts->appends(Request::all())->render() !!}
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="idModalCrearRegla" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Crear</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{route('administrator.discount.store')}}" method="post">
        @csrf
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="idName" class="control-label">Nombre *</label>
                <input type="text" id="idName" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="idValue" class="control-label">Valor *</label>
                <input type="text" id="idValue" name="value" placeholder="Valor" autocomplete="off" class="form-control input-number" required>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-success"><i class="fas fa-check"></i> Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('js')
<script>
  $( document ).ready(function() {
    $('.input-number').on('input', function () {
      var valueNumber = this.value.replace(/[^0-9.]/g,'');

      var num = valueNumber;
      var max = 100;
      var min = 0;

      this.value = isNaN(num) ? min : num > max ? max : num < min ? min : num;
    });
  });
</script>
@endsection