@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-house-user fa-xs"></i> {{ __('Socios') }}</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">Unidades</li>
        <li class="breadcrumb-item">Socios</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">{{ $socio->apellidos }}, {{ $socio->nombres }}</h3>
              <p class="text-muted text-center"></p>              
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->

          <!-- About Me Box -->
          <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 ($socio->fecha_nacimiento != null)
                {{ $socio->fecha_nacimiento->format('d/m/Y') }} ({{ \Carbon\Carbon::parse($socio->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($socio->documento_identidad))
                {{ Number::format((int)Str::substr($socio->documento_identidad, 0, Str::length($socio->documento_identidad) - 1), locale: 'de') }}-{{ Str::substr($socio->documento_identidad, Str::length($socio->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($socio->unidades) || count($socio->unidades) == 0)

                  <span class="badge badge-danger">No hay unidades vinculados</span> 

                  <a class="btn btn-primary btn-xs link-button" data-toggle="modal" data-target="#modal-link" data-form-action="{{ route('socios.link', $socio->id) }}" title="Vincular socio" style="cursor:pointer;">
                    <i class="fas fa-handshake"></i> Vincular
                  </a>

                @else
                    @foreach($socio->unidades as $vinculo)
                        <span>{{ $vinculo->unidad->bloque->descripcion }}-{{ $vinculo->unidad->numero }}</span> <a class="btn btn-warning btn-xs link-button" data-toggle="modal" data-target="#modal-unlink" data-form-action="{{ route('socios.unlink', $vinculo->id) }}" title="Desvincular socio" style="cursor:pointer;"><i class="fas fa-handshake-slash"></i> Desvincular</a>
                    @endforeach
                @endif
              </p>
              <p class="text-muted">
                Teléfono: @if (empty($socio->telefono)) Ninguno @else <a href="tel:{{ $socio->telefono }}" target="_blank">{{ $socio->telefono }}</a> @endif
              </p>
              <p class="text-muted">
                E-Mail: @if (empty($socio->email)) Ninguno @else <a href="mailto:{{ $socio->email }}" target="_blank">{{ $socio->email }}</a> @endif
              </p>
              <hr>
              <strong><i class="far fa-file-alt mr-1"></i> Otros</strong>
              <p class="text-muted">Aporte a biblioteca: $ {{ $socio->aporte_biblioteca }}</p>
              <p class="text-muted">Utiliza cochera?: @if ($socio->utiliza_cochera) <span class="badge badge-success">Sí</span> @else <span class="badge badge-danger">No</span> @endif</p>
              <hr>
              <strong><i class="far fa-file-alt mr-1"></i> Notas</strong>
              <p class="text-muted">@if (empty($socio->notas)) Ninguna @else {{ $socio->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="#nucleo" data-toggle="tab"><i class="nav-icon fas fa-users fa-xs"></i> &nbsp;Núcleo familiar</a></li>
                {{-- <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> --}}
                <li class="nav-item"><a class="nav-link" href="#vehiculos" data-toggle="tab"><i class="nav-icon fas fa-car fa-xs"></i> &nbsp;Vehículos</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>
                {{-- <li class="nav-item"><a class="nav-link" href="#unidades" data-toggle="tab">Unidades asociadas</a></li> --}}
              </ul>
            </div><!-- /.card-header -->
            <div class="card-body">
              <div class="tab-content">      
                <!-- .tab-pane -->
                <div class="tab-pane active" id="nucleo">

                  <a class="btn btn-warning btn-sm link-button float-right" data-toggle="modal" data-target="#modal-nucleo" data-form-action="{{ route('socio-nucleos.store') }}" title="Agregar integrante" style="cursor:pointer;"><i class="fas fa-users"></i> Agregar integrante</a><br><br>
                  
                  <table class="table table-hover text-nowrap">
                    <thead>
                      <tr>
                        <th class="text-center d-none">ID</th>
                        <th>Apellidos</th>
                        <th>Nombres</th>
                        <th class="text-center">Documento</th>
                        <th class="text-center">Parentesco</th>
                        <th>Nota</th>
                        <th class="text-center">Acciones</th>
                      </tr>
                    </thead>
                    <tbody>
                      @if (empty($socio->nucleo) || count($socio->nucleo) == 0)
                            <tr>
                              <td colspan="7" class="text-center">No existen integrantes del núcleo familiar registrados.</td>
                            </tr>
                        @endif
                        @foreach($socio->nucleo as $integrante)
                        <tr>
                            <td class="text-center align-middle d-none">{{ $integrante->id }}</td>
                            <td class="align-middle">{{ $integrante->apellidos }}</td>
                            <td class="align-middle">{{ $integrante->nombres }}</td>
                            <td class="text-center align-middle">{{ $integrante->documento_identidad }}</td>
                            <td class="text-center align-middle">{{ $integrante->parentesco_id->label() }}</td>
                            <td class="align-middle">{{ $integrante->nota }}</td>
                            <td class="text-center align-middle">
                              <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-nucleo-editar" data-form-action="{{ route('socio-nucleos.update', $integrante->id) }}" data-socio-id="{{ $integrante->socio_id }}" data-nombres="{{ $integrante->nombres }}" data-apellidos="{{ $integrante->apellidos }}" data-documento-identidad="{{ $integrante->documento_identidad }}" data-parentesco-id="{{ $integrante->parentesco_id }}" data-nota="{{ $integrante->nota }}" title="Editar Integrante">
                                <i class="fas fa-edit"></i> Editar
                              </a> 
                              <a class="btn btn-danger btn-sm delete-button" data-toggle="modal" data-target="#modal-nucleo-delete" data-form-action="{{ route('socio-nucleos.destroy', $integrante->id) }}" title="Eliminar Integrante">
                                <i class="fas fa-trash-alt"></i> Borrar
                              </a>   
                            </td>
                        </tr>                          
                        @endforeach
                    </tbody>
                  </table>

                </div>
                <!-- .tab-pane -->          
                <!-- .tab-pane -->
                {{-- <div class="tab-pane " id="servicios">

                  <a class="btn btn-warning btn-sm link-button float-right" data-toggle="modal" data-target="#modal-servicio" data-form-action="{{ route('socio-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($socio->servicios) || count($socio->servicios) == 0)
                            <tr>
                              <td colspan="5" class="text-center">No existen servicios registrados.</td>
                            </tr>
                        @endif
                        @foreach($socio->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('socio-servicios.update', $servicio->id) }}" data-socio-id="{{ $servicio->socio_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('socio-servicios.destroy', $servicio->id) }}" title="Eliminar Servicio">
                                <i class="fas fa-trash-alt"></i> Borrar
                              </a>   
                            </td>
                        </tr>                          
                        @endforeach
                    </tbody>
                  </table>
                  
                </div> --}}
                <!-- /.tab-pane -->
                <!-- .tab-pane -->
                <div class="tab-pane" id="vehiculos">

                  <a class="btn btn-warning btn-sm link-button float-right" data-toggle="modal" data-target="#modal-vehiculo" data-form-action="{{ route('socio-vehiculos.store') }}" title="Agregar vehículo" style="cursor:pointer;"><i class="fas fa-car"></i> Agregar vehículo</a><br><br>
                  
                  <table class="table table-hover text-nowrap">
                    <thead>
                      <tr>
                        <th class="text-center d-none">ID</th>
                        <th class="text-center align-middle">Tipo</th>
                        <th class="text-center align-middle">Matrícula</th>
                        <th class="text-center align-middle">Marca</th>
                        <th class="text-center align-middle">Modelo</th>
                        <th class="text-center align-middle">Estado</th>
                        <th class="text-center">Acciones</th>
                      </tr>
                    </thead>
                    <tbody>
                      @if (empty($socio->vehiculos) || count($socio->vehiculos) == 0)
                          <tr>
                            <td colspan="5" class="text-center">No existen vehículos registrados.</td>
                          </tr>
                      @endif
                      @foreach($socio->vehiculos as $vehiculo)
                      <tr>
                          <td class="text-center align-middle d-none">{{ $vehiculo->id }}</td>
                          <td class="text-center align-middle">{!! $vehiculo->tipo_id->icon() !!}</td>
                          <td class="text-center align-middle">{{ $vehiculo->matricula }}</td>
                          <td class="text-center align-middle">{{ $vehiculo->marca }}</td>
                          <td class="text-center align-middle">{{ $vehiculo->modelo }}</td>
                          <td class="text-center align-middle">
                            @if( $vehiculo->estado_id === 1)                                    
                                <i class="fas fa-check-circle text-success"></i>
                            @else
                                <i class="fas fa-times-circle text-danger"></i>
                            @endif
                          </td>
                          <td class="text-center align-middle">
                            <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-vehiculo-editar" data-form-action="{{ route('socio-vehiculos.update', $vehiculo->id) }}" data-socio-id="{{ $vehiculo->socio_id }}" data-tipo-id="{{ $vehiculo->tipo_id }}" data-matricula="{{ $vehiculo->matricula }}" data-marca="{{ $vehiculo->marca }}" data-modelo="{{ $vehiculo->modelo }}" data-estado-id="{{ $vehiculo->estado_id }}" title="Editar Vehículo">
                              <i class="fas fa-edit"></i> Editar
                            </a> 
                            <a class="btn btn-danger btn-sm delete-button" data-toggle="modal" data-target="#modal-vehiculo-delete" data-form-action="{{ route('socio-vehiculos.destroy', $vehiculo->id) }}" title="Eliminar Vehículo">
                              <i class="fas fa-trash-alt"></i> Borrar
                            </a>   
                          </td>
                      </tr>                          
                      @endforeach
                    </tbody>
                  </table>
                </div>
                <!-- /.tab-pane -->
                <!-- .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($socio->movimientos) || count($socio->movimientos) == 0)
                            <tr>
                              <td colspan="6" class="text-center">No existen movimientos registrados.</td>
                            </tr>
                        @endif
                        @foreach($socio->movimientos as $movimiento)
                        <tr>
                            <td class="text-center align-middle">{{ $movimiento->id }}</td>
                            <td class="align-middle">{{ $movimiento->descripcion }}</td>
                            <td class="align-middle">{{ $movimiento->concepto->descripcion }}</td>
                            <td class="text-right 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="{{ $socio->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="{{ $socio->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>

  <div class="modal fade" id="modal-vehiculo" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="vehiculo-form" action="" method="POST">
          @csrf
          @method('POST')
          <input type="hidden" name="socio_id" value="{{ $socio->id }}">
          <input type="hidden" name="estado_id" value="1">
          <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-car"></i> Agregar vehiculo</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="tipo_id" class="col-sm-3 col-form-label">Tipo</label>
                      <div class="col-sm-9">
                        <select class="select2bs4" data-placeholder="Seleccione el tipo de vehiculo" name="tipo_id" id="tipo-list-dropdown">
                          @foreach(App\Enums\VehiculoTipoEnum::cases() as $tipo)
                            <option value="{{ $tipo->value }}">
                              {{ $tipo->label() }}
                          </option>
                          @endforeach
                        </select>
                        <span id="tipo_id-error" class="error invalid-feedback"></span>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="marca" class="col-sm-3 col-form-label">Marca</label>
                      <div class="col-sm-9">
                        <input type="text" name="marca" class="form-control" id="marca" placeholder="Indica la marca">
                        <span id="marca-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <label for="modelo" class="col-sm-3 col-form-label">Modelo</label>
                      <div class="col-sm-9">
                        <input type="text" name="modelo" class="form-control" id="modelo" placeholder="Indica el documento">
                        <span id="modelo-error" class="error invalid-feedback"></span>
                      </div>
                    </div>                     
                    <div class="form-group row">
                      <label for="matricula" class="col-sm-3 col-form-label">Matricula</label>
                      <div class="col-sm-9">
                        <input type="text" name="matricula" class="form-control" id="matricula" placeholder="matricula">
                        <span id="matricula-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-vehiculo-editar" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="editar-vehiculo-form" action="" method="POST">
          @method('PUT')
          @csrf
          <input type="hidden" name="socio_id" id="socio_id_vehiculo_ed">
          <input type="hidden" name="estado_id" id="estado_id_vehiculo_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-car"></i> Editar vehiculo</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="tipo_id" class="col-sm-3 col-form-label">Tipo</label>
                      <div class="col-sm-9">
                        <select class="select2bs4" data-placeholder="Seleccione el tipo de vehiculo" name="tipo_id" id="tipo-list-dropdown-ed">
                          @foreach(App\Enums\VehiculoTipoEnum::cases() as $tipo)
                            <option value="{{ $tipo->value }}">
                              {{ $tipo->label() }}
                          </option>
                          @endforeach
                        </select>
                        <span id="tipo_id-error" class="error invalid-feedback"></span>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="marca" class="col-sm-3 col-form-label">Marca</label>
                      <div class="col-sm-9">
                        <input type="text" name="marca" class="form-control" id="marca_ed" placeholder="Indica la marca">
                        <span id="marca-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <label for="modelo" class="col-sm-3 col-form-label">Modelo</label>
                      <div class="col-sm-9">
                        <input type="text" name="modelo" class="form-control" id="modelo_ed" placeholder="Indica el modelo">
                        <span id="modelo-error" class="error invalid-feedback"></span>
                      </div>
                    </div>                     
                    <div class="form-group row">
                      <label for="matricula" class="col-sm-3 col-form-label">Matricula</label>
                      <div class="col-sm-9">
                        <input type="text" name="matricula" class="form-control" id="matricula_ed" placeholder="matricula">
                        <span id="matricula-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-vehiculo-delete" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="vehiculo-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 vehículo?</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");
  }); 

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

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

    var button = $(event.relatedTarget);
    
    $('#editar-vehiculo-form').attr('action', button.data('form-action'));
    
    $('#socio_id_vehiculo_ed').val(button.data('socio-id')); 
    $('#tipo-list-dropdown-ed').val(button.data('tipo-id')).trigger('change');
    $('#marca_ed').val(button.data('marca')); 
    $('#modelo_ed').val(button.data('modelo')); 
    $('#matricula_ed').val(button.data('matricula')); 
    $('#estado_id_ed').prop('checked', button.data('estado-id') == "1" ? true : false);
    
    $('.overlay').css("display", "none");

  });

  $('#modal-vehiculo-delete').on('show.bs.modal', function (event) {    
    var button = $(event.relatedTarget);
    $('#vehiculo-delete-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};
    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'
    })

    moment.locale('es');

    //Money Euro
    $('[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"), 6);
    populateConceptoDropDown($("#concepto-list-dropdown-ed"), 6);
    console.log("TODO: parametrizar tipo de Concepto");
  });

  </script>
@endsection