@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-users fa-xs"></i> {{ __('Inquilinos') }}</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">Inquilinos</li>
        <li class="breadcrumb-item active">Detalle</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

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

    <div class="container-fluid">

      <div class="row">

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

          <!-- Profile Image -->
          <div class="card card-primary card-outline">
            <div class="card-body box-profile">
              <div class="text-center">
                <img class="profile-user-img img-fluid img-circle" src="/img/user.png" alt="User profile picture">
              </div>
              <h3 class="profile-username text-center">{{ $inquilino->apellidos }}, {{ $inquilino->nombres }}</h3>
              <p class="text-muted text-center"></p>              
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->

          <div class="card card-primary">

            <div class="card-header">
              <h3 class="card-title">Datos personales</h3>
            </div>
            <!-- /.card-header -->

            <div class="card-body">
              <strong><i class="fas fa-birthday-cake mr-1"></i> Fecha de nacimiento</strong>

              <p class="text-muted">
                @if ($inquilino->fecha_nacimiento != null)
                {{ $inquilino->fecha_nacimiento->format('d/m/Y') }} ({{ \Carbon\Carbon::parse($inquilino->fecha_nacimiento)->age }} años)
                @endif
              </p>
              <hr>

              <strong><i class="fas fa-id-card mr-1"></i> Documento de identidad</strong>
              <p class="text-muted">
                @if (!empty($inquilino->documento_identidad))
                {{ Number::format((int)Str::substr($inquilino->documento_identidad, 0, Str::length($inquilino->documento_identidad) - 1), locale: 'de') }}-{{ Str::substr($inquilino->documento_identidad, Str::length($inquilino->documento_identidad) - 1, 1) }}                
                @endif
              </p>
              <hr>

              <strong><i class="fas fa-address-book mr-1"></i> Contacto</strong>
              <p class="text-muted">
                Dirección: 
                @if (empty($inquilino->contratos) || count($inquilino->contratos) == 0)
                  <span class="badge badge-danger">No hay contratos registrados.</span>
                @else
                    @foreach($inquilino->contratos as $contrato)
                        <span>{{ $contrato->local->bloque->descripcion }}-{{ $contrato->local->numero }}: {{ $contrato->local->nombre }}</span>
                    @endforeach
                @endif
              </p>
              <p class="text-muted">
                Teléfono: @if (empty($inquilino->telefono)) Ninguno @else <a href="tel:{{ $inquilino->telefono }}" target="_blank">{{ $inquilino->telefono }}</a> @endif
              </p>
              <p class="text-muted">
                E-Mail: @if (empty($inquilino->email)) Ninguno @else <a href="mailto:{{ $inquilino->email }}" target="_blank">{{ $inquilino->email }}</a> @endif
              </p>
              <hr>

              <strong><i class="far fa-file-alt mr-1"></i> Notas</strong>

              <p class="text-muted">@if (empty($inquilino->notas)) Ninguna @else {{ $inquilino->notas }} @endif</p>
            </div>
            <!-- /.card-body -->

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

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

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

          <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 active" href="#garantias" data-toggle="tab"><i class="nav-icon fas fa-file-signature fa-xs"></i> &nbsp;Garantías asociadas</a></li>
                <li class="nav-item"><a class="nav-link" href="#movimientos" data-toggle="tab"><i class="nav-icon fas fa-dollar-sign fa-xs"></i> &nbsp;Últimos movimientos</a></li>
              </ul>
            </div>
            <!-- /.card-header -->

            <div class="card-body">

              <div class="tab-content">      
                       
                <!-- /.tab-pane -->
                <div class="tab-pane active" id="garantias">

                  <table class="table table-hover text-nowrap">
                    <thead>
                      <tr>
                        <th class="text-center">ID</th>
                        <th>Tipo</th>
                        <th>Fecha venc.</th>
                        <th>Nota</th>
                        <th class="text-center">Estado</th>
                        {{-- <th class="text-center">Acciones</th> --}}
                      </tr>
                    </thead>
                    <tbody>
                      @if (empty($inquilino->garantias) || count($inquilino->garantias) == 0)
                            <tr>
                              <td colspan="5" class="text-center">No existen garantias registradas.</td>
                            </tr>
                        @endif
                        @foreach($inquilino->garantias as $garantia)
                        <tr>
                            <td class="align-middle">{{ $garantia->id }}</td>
                            <td class="align-middle">{{ $garantia->tipo->descripcion }}</td>
                            <td class="text-center align-middle">{{ $garantia->fecha_vencimiento->format('d/m/Y H:m') }}</td>
                            <td class="align-middle">{{ $garantia->nota }}</td>
                            <td class="text-center align-middle"> 
                                <span class="badge bg-information">{{ $garantia->estado_id->label() }}</span>
                            </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('socio-servicios.update', $garantia->id) }}" data-socio-id="{{ $garantia->socio_id }}" data-concepto-id="{{ $garantia->concepto_id }}" data-identificador="{{ $garantia->identificador }}" data-estado-id="{{ $garantia->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('socio-servicios.destroy', $garantia->id) }}" title="Eliminar Servicio">
                                <i class="fas fa-trash-alt"></i> Borrar
                              </a>   
                            </td> --}}
                        </tr>                          
                        @endforeach
                    </tbody>
                  </table>
                  
                </div>
                <!-- /.tab-pane -->

                <div class="tab-pane" id="movimientos">

                  <table class="table table-hover text-nowrap">
                    <thead>
                      <tr>
                        <th class="text-center">ID</th>
                        <th>Descripción</th>
                        <th>Rubro</th>
                        <th>Importe</th>
                        <th class="text-center">Fecha venc.</th>
                        <th class="text-center">Estado</th>
                      </tr>
                    </thead>
                    <tbody>
                      @if (empty($inquilino->movimientos) || count($inquilino->movimientos) == 0)
                            <tr>
                              <td colspan="6" class="text-center">No existen movimientos registrados.</td>
                            </tr>
                        @endif
                        @foreach($inquilino->movimientos as $movimiento)
                        <tr>
                            <td class="align-middle">{{ $movimiento->id }}</td>
                            <td class="align-middle">{{ $movimiento->descripcion }}</td>
                            <td class="align-middle">{{ $movimiento->concepto->descripcion }}</td>
                            <td class="align-middle">{{ $movimiento->moneda->simbolo }} {{ number_format($movimiento->importe, 2) }}</td>
                            <td class="text-center align-middle">{{ $movimiento->fecha_vencimiento->format('d/m/Y') }}</td>
                            <td class="text-center align-middle">{{ $movimiento->estado_id->label() }}</td>
                        </tr>                          
                        @endforeach
                    </tbody>
                  </table>
                  
                </div>
                <!-- /.tab-pane -->

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

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

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

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

      </div>
      <!-- /.row -->

    </div><!-- /.container-fluid -->

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

  <div class="modal fade" id="modal-link" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="link-form" action="" method="POST">
          @csrf
          @method('POST')

          <div class="overlay">
            <i class="fas fa-2x fa-sync fa-spin"></i>
          </div>
          <div class="modal-header">
            <h4 class="modal-title">Vincular Unidad</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">
                    <select class="select2bs4" data-placeholder="Seleccione la Unidad" name="unidad_id" id="unidad-list-dropdown"></select>
                  </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">Vincular</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-unlink" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="unlink-form" action="" method="POST">
          @csrf
          @method('POST')
        <div class="modal-header">
          <h4 class="modal-title">Desvincular</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 desvincular el Socio?</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">Desvincular</button>
        </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-nucleo" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="vinculo-form" action="" method="POST">
          @csrf
          @method('POST')
          <input type="hidden" name="socio_id" value="{{ $inquilino->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 integrante</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="nombres" class="col-sm-3 col-form-label">Nombres</label>
                      <div class="col-sm-9">
                        <input type="text" name="nombres" class="form-control" id="nombres" placeholder="Indica el/los nombre/s" required>
                        <span id="nombres-error" class="error invalid-feedback"></span>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="apellidos" class="col-sm-3 col-form-label">Apellidos</label>
                      <div class="col-sm-9">
                        <input type="text" name="apellidos" class="form-control" id="apellidos" placeholder="Indica el/los apellido/s" required>
                        <span id="apellidos-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <label for="documento_identidad" class="col-sm-3 col-form-label">Documento</label>
                      <div class="col-sm-9">
                        <input type="text" name="documento_identidad" class="form-control" id="documento_identidad" placeholder="Indica el documento" required>
                        <span id="documento_identidad-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <label for="parentesco_id" class="col-sm-3 col-form-label">Parentesco</label>
                      <div class="col-sm-9">
                        <select class="select2bs4" data-placeholder="Seleccione el parentesco" name="parentesco_id" id="parentesco-list-dropdown">
                          @foreach(App\Enums\ParentescoEnum::cases() as $parentesco)
                            <option value="{{ $parentesco->value }}">
                              {{ $parentesco->label() }}
                          </option>
                          @endforeach
                        </select>
                        <span id="parentesco_id-error" class="error invalid-feedback"></span>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="nota" class="col-sm-3 col-form-label">Nota</label>
                      <div class="col-sm-9">
                        <input type="text" name="nota" class="form-control" id="nota" placeholder="Nota">
                        <span id="nota-error" class="error invalid-feedback"></span>
                      </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-nucleo-editar" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="editar-vinculo-form" action="" method="POST">
          @method('PUT')
          @csrf
          <input type="hidden" name="socio_id" id="socio_id_nucleo_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 integrante</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="nombres" class="col-sm-3 col-form-label">Nombres</label>
                      <div class="col-sm-9">
                        <input type="text" name="nombres" class="form-control" id="nombres_ed" placeholder="Indica el/los nombre/s" required>
                        <span id="nombres-error" class="error invalid-feedback"></span>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="apellidos" class="col-sm-3 col-form-label">Apellidos</label>
                      <div class="col-sm-9">
                        <input type="text" name="apellidos" class="form-control" id="apellidos_ed" placeholder="Indica el/los apellido/s" required>
                        <span id="apellidos-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <label for="documento_identidad" class="col-sm-3 col-form-label">Documento</label>
                      <div class="col-sm-9">
                        <input type="text" name="documento_identidad" class="form-control" id="documento_identidad_ed" placeholder="Indica el documento" required>
                        <span id="documento_identidad-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <label for="parentesco_id" class="col-sm-3 col-form-label">Parentesco</label>
                      <div class="col-sm-9">
                        <select class="select2bs4" data-placeholder="Seleccione el parentesco" name="parentesco_id" id="parentesco_id_ed">
                          @foreach(App\Enums\ParentescoEnum::cases() as $parentesco)
                            <option value="{{ $parentesco->value }}">
                              {{ $parentesco->label() }}
                          </option>
                          @endforeach
                        </select>
                        <span id="parentesco_id-error" class="error invalid-feedback"></span>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="nota" class="col-sm-3 col-form-label">Nota</label>
                      <div class="col-sm-9">
                        <input type="text" name="nota" class="form-control" id="nota_ed" placeholder="Nota">
                        <span id="nota-error" class="error invalid-feedback"></span>
                      </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-nucleo-delete" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="delete-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 integrante?</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>

  <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="socio_id" value="{{ $inquilino->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="socio_id" id="socio_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 integrante</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 integrante?</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>

@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>
    <!-- InputMask -->
    <script src="/plugins/moment/moment.min.js"></script>
    <script src="/plugins/inputmask/jquery.inputmask.min.js"></script>
  <script>

  $('#modal-link').on('show.bs.modal', function (event) {
    
    var button = $(event.relatedTarget);
    $('#link-form').attr('action', button.data('form-action'));
    populateUnidadDropDown();
  
  });

  $('#modal-unlink').on('show.bs.modal', function (event) {
    
    var button = $(event.relatedTarget);
    $('#unlink-form').attr('action', button.data('form-action'));
  });

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

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

    var button = $(event.relatedTarget);
    
    $('#editar-vinculo-form').attr('action', button.data('form-action'));
    
    $('#socio_id_nucleo_ed').val(button.data('socio-id')); 
    $('#nombres_ed').val(button.data('nombres')); 
    $('#apellidos_ed').val(button.data('apellidos')); 
    $('#documento_identidad_ed').val(button.data('documento-identidad')); 
    $('#parentesco_id_ed').val(button.data('parentesco-id')).trigger('change');
    $('#nota_ed').val(button.data('nota')); 
    
    $('.overlay').css("display", "none");

  });

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

  $('#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'));

    $('#socio_id_ed').val(button.data('socio-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 populateUnidadDropDown(dropdown){

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

    // var parameters = {apellidos:$apellidos};

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

    $.ajax({
        url:'/unidades/obtener-no-vinculadas',
        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.bloque.descripcion + ' - ' + item.numero.toString().padStart(3, '0')));
          });

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

  }

  function populateConceptoDropDown(dropdown, tipo){

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

    var filtroTipo = typeof tipo !== "undefined" ? '/' + tipo : ''
    // var parameters = {apellidos:$apellidos};

    $('.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'
    })

    moment.locale('es');

    //Datemask dd/mm/yyyy
    // $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })

    $('[data-mask]').inputmask()

    //Date picker
    $('#fecha').datetimepicker({
        format: 'DD/MM/YYYY',
        autoclose:true,
        language: 'es',
    });

    $('#editForm').validate({
        rules: {
        descripcion: {
            required: true,
            maxlength: 20,
        },
        simbolo: {
            required: true,
            maxlength: 5
        },
        },
        messages: {
            descripcion: {
                required: "Por favor ingresa el identificador de la moneda",
                maxlength: "El largo máximo es de 20."
            },
            simbolo: {
                required: "Por favor ingresa el símbolo de la moneda",
                maxlength: "El largo máximo es 5."
            },
        },
        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"), 2);
    populateConceptoDropDown($("#concepto-list-dropdown-ed"), 2);
    console.log("TODO: parametrizar tipo de Concepto");
  });

  </script>
@endsection