@extends('plantilla.header')

@section('titulo')

@stop

@section('js')
<script type="text/javascript">
    function cedulado() {
        $("#modal-cedulado").modal({
            show: false,
            keyboard: false,
            backdrop: 'static'
        });
        $("#modal-cedulado").modal("show");
    }

    function nocedulado() {
        $("#modal-nocedulado").modal({
            show: false,
            keyboard: false,
            backdrop: 'static'
        });

        $("#modal-nocedulado").modal("show");
    }

    function eliminar_familia(n, jf, f) {

        $("#id_mensaje_eliminar").empty();
        $("#id_mensaje_eliminar").append('<h5 class="modal-title">Eliminar a '+n+'</h5>');

        $("#mensaje_elim").empty();
        $("#mensaje_elim").append('<h6 class="modal-title">Estas seguro que desea eliminar a '+n+'?</h6><input type="hidden" name="i_fa" id="i_fa" value="" required><input type="hidden" name="i_per" id="i_per" value="" required>');

        $("#i_fa").val(jf);
        $("#i_per").val(f);

        $("#modal-eliminar").modal({
            show: false,
            keyboard: false,
            backdrop: 'static'
        });

        $("#modal-eliminar").modal("show");
    }

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

</script>
@stop

@section('contenido')
<div class="col-12 col-xl-12">
    <div class="card card-body bg-white border-light shadow-sm mb-4">
        <h3 class="h5 mb-4">Grupo familiar</h3>
    </div>
</div>


<div class="col-12 col-xl-12">
    <div class="card card-body bg-white border-light shadow-sm mb-4">
        <div class="row">
            <div class="col-md-6 mb-3">
            </div>
            <div class="col-md-6 mb-3" style="text-align: right;">
                @if (!@empty($jefe[0]))
                <div class="dropdown">
                    <button class="btn btn-dark dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Agregar Familiar
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
                      <li><a class="dropdown-item" onclick="cedulado()" href="#">Cedulado</a></li>
                      <li><a class="dropdown-item" onclick="nocedulado()" href="#">No Cedulado</a></li>
                    </ul>
                </div>
                @else
                {!!Form::open(['url' => route('grupo_familiar'), 'method' => 'POST', 'class' => 'login-form'])!!}
                    <button type="submit" class="btn btn-dark btn-sm">Soy jefe de grupo de familia</button>
                {!! Form::close() !!}
                @endif
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 mb-3 table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Cédula</th>
                        <th scope="col">Nombre</th>
                        <th scope="col">Parentesco</th>
                        <th scope="col"></th>
                      </tr>
                    </thead>
                    <tbody>
                        @if (!@empty($jefe))
                            @foreach ($jefe as $i => $d)
                                <tr>
                                    <th scope="row">{{$i+1}}</th>
                                    <td>{{$d->cedula}}</td>
                                    <td>{{$d->nombre}}</td>

                                    @if ($d->jefe == 1)
                                        <td><span class="badge bg-success">JEFE DE GRUPO FAMILIAR</span></td>
                                        <td></td>
                                    @else
                                        <td>@php echo app('App\Http\Controllers\configController')->parentesco($d->relacion); @endphp</td>
                                        <td><a onclick="eliminar_familia('{{$d->nombre}}', {{$d->id_familia}}, {{$d->id_persona}})" class="btn btn-outline-danger" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;"><i class="fa fa-eraser" aria-hidden="true" data-bs-toggle="tooltip" data-bs-title="Eliminar Familia"></i>
                                        </a></td>
                                    @endif
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="5" style="text-align: center"><label>Sin Registro</label></td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-cedulado" tabindex="-1" role="dialog" aria-labelledby="modal-load" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar familia (Cedulado)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {!!Form::open(['url' => route('grupo_familiar_cedulado'), 'method' => 'POST', 'class' => 'login-form'])!!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 col-xl-12">
                        <div class="card card-body bg-white border-light shadow-sm mb-4">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="city">Cédula</label>
                                        <input class="form-control" type="text" name="usuario" id="usuario" value="" autocomplete="off" required maxlength="12"> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <a onclick="cerrar('modal-cedulado')" class="btn btn-danger">Cerrar</a>
                <button class="btn btn-dark">Aceptar</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="modal-nocedulado" tabindex="-1" role="dialog" aria-labelledby="modal-load" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar familia (No Cedulado)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {!!Form::open(['url' => route('grupo_familiar_nocedulado'), 'method' => 'POST', 'class' => 'login-form'])!!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 col-xl-12">
                        <div class="card card-body bg-white border-light shadow-sm mb-4">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="city">Cédula de la madre</label>
                                        <input class="form-control" type="text" name="usuario2" id="usuario2" value="" autocomplete="off" required maxlength="12"> 
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="city">N° del Hijo</label>
                                        <select class="form-select" id="nhijos" name="nhijos" required>
                                        <option selected value="">SELECCIONE</option>

                                        @for ($i = 1; $i < 26; $i++)
                                            <option value="{{$i}}">{{$i}}</option>
                                        @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <a onclick="cerrar('modal-nocedulado')" class="btn btn-danger">Cerrar</a>
                <button class="btn btn-dark">Aceptar</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="modal-eliminar" tabindex="-1" role="dialog" aria-labelledby="modal-load" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" id="id_mensaje_eliminar">
                
            </div>
            {!!Form::open(['url' => route('Eliminar_familia'), 'method' => 'POST', 'class' => 'login-form'])!!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 col-xl-12">
                        <div class="card card-body bg-white border-light shadow-sm mb-4">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group" style="text-align: center;" id="mensaje_elim">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <a onclick="cerrar('modal-eliminar')" class="btn btn-danger">Cerrar</a>
                <button class="btn btn-dark">Eliminar</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@stop