@extends('layouts.app')

@section('custom-styles')
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-store fa-xs"></i> {{ __('Locales') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item">Locales</li>
        <li class="breadcrumb-item active">Editar Local</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-6">
                
                <div class="card card-primary">

                  <div class="card-header">
                    <h3 class="card-title">Editando {{ $local->nombre }}</h3>
                    <a class="btn btn-default btn-sm float-right text-primary" data-toggle="modal" data-target="#modal-help" title="Ayuda" style="cursor:pointer;">
                        <i class="fas fa-info-circle"></i> Ayuda
                    </a>
                  </div>
                  <!-- /.card-header -->

                  <!-- form start -->
                    <form id="editForm" class="form-horizontal" action="{{ route('locales.update', $local->id) }}" method="POST" novalidate="novalidate">
                        @method('PUT')
                        @csrf
                    <div class="card-body">

                        <div class="form-group row">
                          <label for="descripcion" class="col-sm-2 col-form-label">Bloque</label>
                          <div class="col-sm-2">
                            <select name="bloque_id" id="bloque_id" class="form-control" required>
                                <option value="0" selected>Seleccione el bloque</option>
                                @foreach($bloques as $bloque )
                                  <option value="{{ $bloque->id }}" @selected($bloque->id === $local->bloque_id)>{{ $bloque->descripcion }}</option>
                                @endforeach
                            </select>
                            <span id="bloque_id-error" class="error invalid-feedback"></span>
                          </div>
                        </div>

                        <div class="form-group row">
                          <label for="numero" class="col-sm-2 col-form-label">Número</label>
                          <div class="col-sm-2">
                            <input type="number" name="numero" class="form-control @error('numero') is-invalid @enderror" id="numero" placeholder="Número del local" value="{{ $local->numero }}">
                            <span id="numero-error" class="error invalid-feedback"></span>
                            @error('numero')
                                <span class="error invalid-feedback is-invalid" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                          </div>
                        </div>

                        <div class="form-group row">
                          <label for="nombre" class="col-sm-2 col-form-label">Nombre</label>
                          <div class="col-sm-10">
                            <input type="text" name="nombre" class="form-control @error('nombre') is-invalid @enderror" id="nombre" placeholder="Nombre del local" value="{{ $local->nombre }}">
                            <span id="nombre-error" class="error invalid-feedback"></span>
                            @error('nombre')
                                <span class="error invalid-feedback is-invalid" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                          </div>
                        </div>
                        
                        <div class="form-group row">
                          <label for="estado_id" class="col-sm-2 col-form-label">Estado</label>
                          <div class="col-sm-3">
                            <select name="estado_id" id="estado_id" class="form-control" required>                              
                              @foreach(App\Enums\LocalEstadoEnum::cases() as $estado)
                                <option value="{{ $estado->value }}" @selected(($local->estado_id === $estado))>
                                  {{ $estado->label() }}
                              </option>
                              @endforeach
                            </select>                            
                            <span id="estado_id-error" class="error invalid-feedback"></span>
                          </div>
                        </div>                        

                        <div class="form-group row">
                            
                          <label for="estado_id" class="col-sm-2 col-form-label">Contrato</label>
                          <div class="col-sm-10">
                            @if ( !empty($local->contratos) )

                              @foreach($local->contratos as $contrato) 
                                <p>
                                  <span class="text-info font-weight-bold">Inquilino:</span> {{ $contrato->inquilino->nombres }} {{ $contrato->inquilino->apellidos }}<br/>
                                  <span class="text-info font-weight-bold">Fecha:</span> Desde el {{$contrato->fecha_inicio->format('d/m/Y')}} al {{$contrato->fecha_fin->format('d/m/Y')}} ({{ $contrato->plazo }} año/s)
                                </p>
                              @endforeach
                            
                            @else
                              <span class="badge badge-danger">No hay contrato vinculado</span> 
                            @endif
                          </div>

                        </div>

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

                    <div class="card-footer text-right">
                      <a href="{{ route('locales.index') }}" class="btn btn-default">Cancelar</a> &nbsp;
                      <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>

                  </form>

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

            </div>
            <!-- /.col-md-6 -->

            <div class="col-md-6">

              <div class="card">

                <div class="card-header p-2">
                  @if(!@empty(session('message')))
                      <hr class="hr hr-blurry" />
                      @switch(session('type'))
                          @case('OK')
                            <div class="alert alert-success alert-dismissible">
                              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                              <h5><i class="icon fas fa-check"></i> Listo!</h5>
                              {{ session('message') }}
                            </div>
                              @break
                          @default
                            <div class="alert alert-warning alert-dismissible">
                              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                              <h5><i class="icon fas fa-exclamation-triangle"></i> Atención!</h5>
                              {{ session('message') }}
                            </div>
                      @endswitch
                  @endif
                  <ul class="nav nav-pills">
                    <li class="nav-item"><a class="nav-link" href="#servicios" data-toggle="tab"><i class="nav-icon fas fa-building fa-xs"></i> &nbsp;Servicios asociados</a></li>
                  </ul>
                </div><!-- /.card-header -->

                <div class="card-body">

                  <div class="tab-content">                         

                    <div class="tab-pane active" id="servicios">

                      <a class="btn btn-warning btn-sm link-button float-right" data-toggle="modal" data-target="#modal-servicio" data-form-action="{{ route('local-servicios.store') }}" title="Agregar servicio" style="cursor:pointer;"><i class="fas fa-building"></i> Agregar servicio</a><br><br>

                      <table class="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th class="text-center">ID</th>
                            <th>Rubro</th>
                            <th>Identificador</th>
                            <th class="text-center">Estado</th>
                            <th class="text-center">Acciones</th>
                          </tr>
                        </thead>
                        <tbody>
                          @if (empty($local->servicios) || count($local->servicios) == 0)
                                <tr>
                                  <td colspan="5" class="text-center">No existen servicios registrados.</td>
                                </tr>
                            @endif
                            @foreach($local->servicios as $servicio)
                            <tr>
                                <td class="align-middle">{{ $servicio->id }}</td>
                                <td class="align-middle">{{ $servicio->concepto->descripcion }}</td>
                                <td class="align-middle">{{ $servicio->identificador }}</td>
                                <td class="text-center align-middle">
                                  @if ($servicio->estado_id == 1)
                                  Activo
                                  @else
                                  Inactivo
                                  @endif
                                </td>
                                <td class="text-center align-middle">
                                  <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-servicio-editar" data-form-action="{{ route('local-servicios.update', $servicio->id) }}" data-local-id="{{ $servicio->local_id }}" data-concepto-id="{{ $servicio->concepto_id }}" data-identificador="{{ $servicio->identificador }}" data-estado-id="{{ $servicio->estado_id }}" title="Editar Servicio">
                                    <i class="fas fa-edit"></i> Editar
                                  </a> 
                                  <a class="btn btn-danger btn-sm delete-button" data-toggle="modal" data-target="#modal-servicio-delete" data-form-action="{{ route('local-servicios.destroy', $servicio->id) }}" title="Eliminar Servicio">
                                    <i class="fas fa-trash-alt"></i> Borrar
                                  </a>   
                                </td>
                            </tr>                          
                            @endforeach
                        </tbody>
                      </table>
                      
                    </div>
                    <!-- /.tab-pane -->                    

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

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

            </div>
            <!-- /.col -->
        
        </div>

    </div>

    <div class="modal fade" id="modal-help" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fas fa-info-circle"></i> Ayuda</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                   <dl>
                        <dt>Bloque</dt>
                        <dd>Bloque donde se encuentra el Local.</dd>
                        <dt>Número</dt>
                        <dd>Número de local que identifica al Local.</dd>
                        <dt>Nombre</dt>
                        <dd>Nombre del comercio que funciona en el Local.</dd>
                        <dt>Estado</dt>
                        <dd>Estado del local.</dd>
                        <dd>Modificar este estado, puede provocar otras acciones.</dd>
                        <dt>Contrato</dt>
                        <dd>Información del contrato asociado al local.</dd>
                    </dl>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

  <div class="modal fade" id="modal-servicio" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="servicio-form" action="" method="POST">
          @csrf
          @method('POST')
          <input type="hidden" name="local_id" value="{{ $local->id }}">
          <div class="overlay">
            <i class="fas fa-2x fa-sync fa-spin"></i>
          </div>
          <div class="modal-header">
            <h4 class="modal-title"><i class="fas fa-users"></i> Agregar servicio</h4>
            <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-12">
                <div class="card">
                  <div class="card-body p-0">                    
                    <div class="form-group row">
                      <label for="concepto_id" class="col-sm-3 col-form-label">Rubro</label>
                      <div class="col-sm-9">
                        <select class="select2bs4" data-placeholder="Seleccione el rubro" name="concepto_id" id="concepto-list-dropdown"></select>
                        <span id="concepto_id-error" class="error invalid-feedback"></span>
                      </div>
                    </div>                    
                    <div class="form-group row">
                      <label for="identificador" class="col-sm-3 col-form-label">Identificador</label>
                      <div class="col-sm-9">
                        <input type="text" name="identificador" class="form-control" id="identificador" placeholder="identificador">
                        <span id="identificador-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <div class="offset-sm-3 col-sm-9">
                        <div class="form-check custom-control custom-checkbox">
                            <input type="checkbox" name="estado_id" class="custom-control-input" id="estado_id">
                            <label class="custom-control-label" for="estado_id"> ¿Activo?</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>              
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-primary">Agregar</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-servicio-editar" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="editar-servicio-form" action="" method="POST">
          @method('PUT')
          @csrf
          <input type="hidden" name="local_id" id="local_id_ed">
          <div class="overlay">
            <i class="fas fa-2x fa-sync fa-spin"></i>
          </div>
          <div class="modal-header">
            <h4 class="modal-title"><i class="fas fa-users"></i> Editar servicio</h4>
            <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-12">
                <div class="card">
                  <div class="card-body p-0">                    
                    <div class="form-group row">
                      <label for="concepto_id" class="col-sm-3 col-form-label">Rubro</label>
                      <div class="col-sm-9">
                        <select class="select2bs4" data-placeholder="Seleccione el rubro" name="concepto_id" id="concepto-list-dropdown-ed"></select>
                        <span id="concepto_id-error" class="error invalid-feedback"></span>
                      </div>
                    </div>                    
                    <div class="form-group row">
                      <label for="identificador" class="col-sm-3 col-form-label">Identificador</label>
                      <div class="col-sm-9">
                        <input type="text" name="identificador" class="form-control" id="identificador_ed" placeholder="identificador">
                        <span id="identificador-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <div class="offset-sm-3 col-sm-9">
                        <div class="form-check custom-control custom-checkbox">
                            <input type="checkbox" name="estado_id" class="custom-control-input" id="estado_id_ed">
                            <label class="custom-control-label" for="estado_id"> ¿Activo?</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>              
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-primary">Editar</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-servicio-delete" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="delete-servicio-form" action="" method="POST">
          @csrf
          @method('DELETE')
        <div class="modal-header">
          <h4 class="modal-title">Eliminar</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>¿Confirmas eliminar el servicio?</p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">Eliminar</button>
        </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>  

  </section>
  <!-- /.content -->
@endsection

@section('custom-scripts')
  <!-- Select2 -->
  <script src="/plugins/select2/js/select2.full.min.js"></script>
  <!-- jquery-validation -->
  <script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
  <script src="/plugins/jquery-validation/additional-methods.min.js"></script>
  <script>

  $('#modal-servicio').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);    
    $('#servicio-form').attr('action', button.data('form-action'));
    $('.overlay').css("display", "none");
  });

  $('#modal-servicio-editar').on('show.bs.modal', function (event) {    

    var button = $(event.relatedTarget);    

    $('#editar-servicio-form').attr('action', button.data('form-action'));

    $('#local_id_ed').val(button.data('local-id')); 
    $('#concepto-list-dropdown-ed').val(button.data('concepto-id')).trigger('change');
    $('#identificador_ed').val(button.data('identificador')); 
    $('#estado_id_ed').prop('checked', button.data('estado-id') == "1" ? true : false);

    $('.overlay').css("display", "none");

  });

  $('#modal-servicio-delete').on('show.bs.modal', function (event) {    
    var button = $(event.relatedTarget);
    $('#delete-servicio-form').attr('action', button.data('form-action'));
    $('.overlay').css("display", "none");
  });
  
  function populateConceptoDropDown(dropdown, tipo)
  {

    dropdown.append($("<option />").val(0).text(''));

    var filtroTipo = typeof tipo !== "undefined" ? '/' + tipo : ''
    // var parameters = {apellidos:$apellidos};
    console.log(filtroTipo);

    $('.overlay').css("display", "flex");

    $.ajax({
        url:'/conceptos/obtener-por-tipo' + filtroTipo,
        type: 'GET',
        headers:{"content-type" : "application/json"},
        // data: JSON.stringify(parameters),
        success: function(response) {
        
          $.each(response, function(index, item) {
            dropdown.append($("<option />").val(item.id).text(item.descripcion));
          });

          $('.overlay').css("display", "none");
        },
        error: function(error) {
          $('.overlay').css("display", "none");
          console.error('Error fetching data:', error);
        }
    });            

  }

$(function () {
  //Initialize Select2 Elements
  $('.select2').select2()

  //Initialize Select2 Elements
  $('.select2bs4').select2({
    theme: 'bootstrap4'
  })
  
  $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg !== value;
  }, "Value must not equal arg.");
    
  $('#editForm').validate({
    rules: {
        bloque_id:{
            valueNotEquals: "0"
        },
      numero: {
        required: true,
      },
      nombre: {
        required: true,
      },
      estado_id:{
            valueNotEquals: "0"
        },
    },
    messages: {
        bloque_id:{
            valueNotEquals: "Por favor indica el Bloque",
        },
        numero: {
            required: "Por favor ingresa el número del Local",
        },
        nombre: {
            required: "Por favor ingresa el nombre del Local",
        },
        bloque_id:{
            valueNotEquals: "Por favor indica el Estado",
        },
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
      error.addClass('invalid-feedback');
      element.closest('.col-sm-10').append(error);
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    },
    submitHandler: function(form) {
        form.submit();
    }
  });

  populateConceptoDropDown($("#concepto-list-dropdown"), 6);
  populateConceptoDropDown($("#concepto-list-dropdown-ed"), 6);
  console.log("TODO: parametrizar tipo de Concepto");

});

  </script>
@endsection