@extends('layouts.portal.principal')

@section('css_custom')
  <link href="{{ asset('js/plugins/jquery.autocomplete/css/autocomplete.css') }}" rel="stylesheet">
  <link href="{{ asset('js/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
  <link href="{{ asset('css/portal/style-datetable.css') }}" rel="stylesheet">
  <link href="{{ asset('js/plugins/jquery.steps/jquery.steps.css') }}" rel="stylesheet">
  <style>
    .table th, .table td {
      padding: 0.45rem !important;
    }
    .table {
      font-size: 12px;
    }
    .font-head {
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      color: #343a40;
      letter-spacing: 0.5px;
    }
    .text-u {
      text-transform: uppercase !important;
    }
    .text-l {
      text-transform: lowercase !important;
    }
    .form-layout-6 .row > div, .form-layout-7 .row > div {
        border: 1px solid #ced4da;
        padding: 5px 10px;
    }
    .height25{
        height: 25px !important;
    }
    [aria-expanded=true] .fa-chevron-right {
        transition: .3s transform ease-in-out;
        transform: rotate(90deg);
    }
    .let div {
        text-transform: lowercase;
    }

    .let div:first-letter {
        text-transform: uppercase;
    }
    .text-suspension {
        color: #fff;
        background-color: #9C27B0;
    }
    .form-control, .dataTables_filter input {
        color: #000000;
    }
    .content.clearfix{
        border: 1px solid #e9ecef !important;
        background: #fff !important;
    }
    a[href="#finish"]{
        background: #043856 !important;
    }
    .hidden{
        display: none !important;
    }
  </style>
  <link href="{{ asset('js/plugins/bootstrap-fileinput/css/fileinput.min.css') }}" rel="stylesheet">
@endsection

@section('scripts_content')
    <script src="{{ asset('js/plugins/jquery.mask/jquery.maskedinput.js') }}"></script>
    <script src= "{{ asset('js/plugins/jquery.autocomplete/js/jquery.autocomplete.min.js') }}"></script>
    <script src= "{{ asset('js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script src= "{{ asset('js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js') }}"></script>
    <script src="{{ asset('js/plugins/bootstrap-fileinput/js/fileinput.min.js') }}"></script>
    <script src="{{ asset('js/plugins/bootstrap-fileinput/js/locales/es.js') }}"></script>
    <script src= "{{ asset('js/plugins/jquery.steps/jquery.steps.js') }}"></script>
    <script src="{{ asset('js/portal/officials/official-management/create.js') }}"></script>
@endsection

@section('content')
    <div class="br-mainpanel">

        @include('includes/mensaje')
        @include('includes/form-error')
        <div class="br-pageheader pd-y-15 pd-l-20">
            <nav class="breadcrumb pd-0 mg-0 tx-12">
            <a class="breadcrumb-item" href="#">Gestión recurso humano</a>
            <a class="breadcrumb-item" href="{{ route('official-management.index') }}">Gestión funcionarios</a>
            <span class="breadcrumb-item active"><strong>{{ $person->name }}</strong></span>
            </nav>
        </div><!-- br-pageheader -->

        <div class="br-pagebody">

            <div class="br-section-wrapper">


                <div id="message-error">
                </div>
                <div class="table-wrapper">
                    <div class="row mg-b-25">
                        <div class="col-sm-12 col-lg-12">
                            <div class="card shadow-base bd-0 mb-4 person-contract" style="display: none;">
                                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                    <h6 class="card-title tx-uppercase tx-12 mg-b-0 text-white"><i class="fa fa-user mr-4" aria-hidden="true"></i>FUNCIONARIO</h6>
                                    <span class="tx-12 tx-uppercase"></span>
                                </div><!-- card-header -->
                                <div class="card-body">
                                    {!! Form::open([
                                        'id' => 'funcionario-create'
                                    ]) !!}
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    {!! Form::label('type_document_id', "Tipo identificación: <span class='tx-danger'>*</span>", ['class' => 'form-control-label'], false) !!}
                                                    {!! Form::select('type_document_id',$type_documents,null, array('class' => 'form-control form-control-sm height25','id'=>'type_document_id', 'placeholder' => 'Seleccione..', 'required'=>'required')) !!}
                                                    <input type="hidden" name="id" id="id">
                                                </div>
                                            </div><!-- col-4 -->
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    {!! Form::label('document_number', "Número de identificación: <span class='tx-danger'>*</span>", ['class' => 'form-control-label'], false) !!}
                                                    {!! Form::text('document_number', $person->document_number ?? null, ['class' => 'form-control form-control-sm height25', 'id' => 'document_number', 'required' => 'required']) !!}
                                                </div>
                                            </div><!-- col-4 -->
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    {!! Form::label('expedition_date', "Fecha de expedición:", ['class' => 'form-control-label valid_date'], false) !!}
                                                    {!! Form::text('expedition_date', null, ['class' => 'form-control form-control-sm typedate height25', 'placeholder' =>'dd/mm/yyyy', 'id' => 'expedition_date']) !!}
                                                </div>
                                            </div><!-- col-4 -->
                                            <div class="col-lg-3">
                                                <div class="form-group mg-b-10-force">
                                                    {!! Form::label('first_name', "Primer nombre: <span class='tx-danger'>*</span>", ['class' => 'form-control-label'], false) !!}
                                                    {!! Form::text('first_name', null, ['class' => 'form-control form-control-sm uppercase height25', 'id' => 'first_name', 'required' => 'required']) !!}
                                                </div>
                                            </div><!-- col-4 -->
                                            <div class="col-lg-3">
                                                <div class="form-group mg-b-10-force">
                                                    {!! Form::label('second_name', "Segundo nombre:", ['class' => 'form-control-label'], false) !!}
                                                    {!! Form::text('second_name', null, ['class' => 'form-control form-control-sm uppercase height25', 'id' => 'second_name']) !!}
                                                </div>
                                            </div><!-- col-4 -->
                                            <div class="col-lg-3">
                                                <div class="form-group mg-b-10-force">
                                                    {!! Form::label('first_surname', "Primer apellido: <span class='tx-danger'>*</span>", ['class' => 'form-control-label'], false) !!}
                                                    {!! Form::text('first_surname', null, ['class' => 'form-control form-control-sm uppercase height25', 'id' => 'first_surname', 'required' => 'required']) !!}
                                                </div>
                                            </div><!-- col-4 -->
                                            <div class="col-lg-3">
                                                <div class="form-group mg-b-10-force">
                                                    {!! Form::label('second_surname', "Segundo apellido:", ['class' => 'form-control-label'], false) !!}
                                                    {!! Form::text('second_surname', null, ['class' => 'form-control form-control-sm uppercase height25', 'id' => 'second_surname']) !!}
                                                </div>
                                            </div><!-- col-4 -->
                                        </div>
                                        <div class="row row-vinculacion" style="display: none;">
                                            <div class="col text-center pt-4">
                                                <a href="javascript:void(0);" class="btn btn-success btn-with-icon btn-sm" id="btn-relationship">
                                                    <div class="ht-30 justify-content-between">
                                                        <span class="pd-x-15">Vinculación</span>
                                                        <span class="icon wd-40"><i class="fa fa-compress"></i></span>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    {!! Form::close() !!}
                                </div><!-- card-body -->
                            </div><!-- card -->

                            <div class="form-layout form-layout-6 pb-4 person-basic" style="display: none;">
                                <div class="row no-gutters">
                                  <div class="col-5 col-sm-4">
                                    Nombre:
                                  </div><!-- col-4 -->
                                  <div class="col-7 col-sm-8 text-uppercase" id="nombre_alt"></div><!-- col-8 -->
                                </div><!-- row -->
                                <div class="row no-gutters">
                                  <div class="col-5 col-sm-4">
                                    Tipo documento:
                                  </div><!-- col-4 -->
                                  <div class="col-7 col-sm-8 text-uppercase" id="tipdoc_alt"></div><!-- col-8 -->
                                </div><!-- row -->
                                <div class="row no-gutters">
                                    <div class="col-5 col-sm-4">
                                      Número documento:
                                    </div><!-- col-4 -->
                                    <div class="col-7 col-sm-8 text-uppercase" id="numdoc_alt"></div><!-- col-8 -->
                                  </div><!-- row -->
                            </div>

                            <div class="row mg-b-25 person-basic" style="margin-top: 20px; display: none;">
                                <div class="col-sm-12 col-lg-12">
                                    <h6 class="tx-gray-800 text-primary"><i class="fa fa-user mr-4" aria-hidden="true"></i>Información personal </h6>
                                    <div class="card-body table-responsive p-0 mb-4">
                                        <table class="table table-hover width60" id="tabla-data-person">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Información</th>
                                                    <th>Fecha creación</th>
                                                    <th>Fecha ult act</th>
                                                    <th>Estado</th>
                                                    <th class="text-center">Actión</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                    <h6 class="tx-gray-800 text-primary"><i class="fa fa-compress mr-4" aria-hidden="true"></i>Vinculaciones</h6>
                                    <div class="card-body table-responsive p-0">
                                        <table class="table table-hover width60" id="tabla-data-contracts">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th style="width: 30%">Empresa</th>
                                                    <th>t. contrato</th>
                                                    <th>t. colaborador</th>
                                                    <th>Perfil</th>
                                                    <th>fecha inicial</th>
                                                    <th>Fecha finalizacion</th>
                                                    <th>Estado</th>
                                                    <th class="text-center">Actión</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div><!-- card -->
                    </div>
                </div>
                <div class="table-wrapper"></div>
            </div>
        </div>
    </div>

    {{--modal for view detail --}}
    <div class="modal fade" id="modal" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg" role="document" style="width:1000px !important;max-width: 800px !important;">
            <div class="modal-content">
                <div class="modal-header text-white bg-primary text-uppercase" style="height: 40px;">
                    <h6 class="modal-title" id="exampleModalLabel"><i class="fa fa-database mr-4" aria-hidden="true"></i><span class="title-form"></span></h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modal-body"></div>
            </div>
        </div>
    </div>

    @include ('Officials.official-management.contract')

    @include ('Officials.official-management.person')

    <div id="modal-end-contract" class="modal fade" aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="width:800px !important;max-width: 1200px !important;">
          <div class="modal-content tx-size-sm">
            <div class="modal-header text-white bg-primary text-uppercase">
              <h6 class="modal-title"><i class="fa fa-sticky-note mr-2" aria-hidden="true"></i>Cambiar estado a vinculación</h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body pd-10">
                {!! Form::open(['id' => 'form-end-contract']) !!}
                <div class="row">
                    <div class="col-sm-10 ml-5">
                      <div class="form-group">
                        <label class="form-control-label">Nuevo estado: <span class="tx-danger">*</span></label>
                        {!! Form::select('state', ['I' => 'Terminar vinculacion', 'S' => 'Suspención temporal', 'A' => 'Activación vinculación' ] ,null, array('class' => 'form-control form-control-sm height25','id'=>'state', 'placeholder' => 'Seleccione..', 'required'=>'required')) !!}
                      </div>
                    </div>
                </div>
                <div class="row" style="display: none;" id="div-reason">
                    <div class="col-sm-10 ml-5">
                      <div class="form-group">
                        <label class="form-control-label">Motivo de la suspención: <span class="tx-danger">*</span></label>
                        {!! Form::select('reason_suspension_id', $motsupvin,null, array('class' => 'form-control form-control-sm height25','id'=>'reason_suspension_id', 'placeholder' => 'Seleccione..')) !!}
                      </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-10 ml-5">
                      <div class="form-group">
                        <label class="form-control-label">Fecha cambio: <span class="tx-danger">*</span></label>
                        <input class="form-control form-control-sm height25" type="date" name="retirement_date" id="retirement_date" placeholder="YYYY-MM-DD" required="required">
                        <input type="hidden" name="id" id="id">
                      </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-10 ml-5">
                        <div class="form-group">
                            <label class="form-control-label">Observación: </label>
                            <textarea rows="3" class="form-control" id="observation" name="observation" required></textarea>
                        </div>
                    </div>
                </div>
                {!! Form::close() !!}
            </div><!-- modal-body -->
            <div class="modal-footer">
              <button type="button" class="btn btn-sm btn-secondary tx-size-xs" data-dismiss="modal">Cerrar</button>
              <button type="button" class="btn btn-sm btn-primary tx-size-xs" id='btn-end-contract'>Aceptar</button>
            </div>
          </div>
        </div><!-- modal-dialog -->
    </div>

    <div id="modal-new-family" class="modal fade" aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="width:800px !important;max-width: 1200px !important;">
          <div class="modal-content tx-size-sm">
            <div class="modal-header text-white bg-primary" style="height: 40px;">
                <h6 class="modal-title" id="exampleModalLabel"><i class="fa fa-users mr-2" aria-hidden="true"></i>Nuevo integrante</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pd-10">
                {!! Form::open([
                    'route' => 'save.family',
                    'method'=>'POST',
                    'autocomplete'=>'off',
                    'class' => 'form-horizontal',
                    'files' => true,
                    'onsubmit' => "submitButton.disabled = true",
                    'id' => 'form-family'
                ]) !!}

                {!! Form::hidden('id', null, ['id' => 'id']) !!}

                <div class="form-group">
                    {!! Form::label('name', 'Nombre integrante <span class="tx-danger">*</span>', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::text('name', null, ['class' => 'form-control form-control-sm uppercase height25', 'required'=>'required' ]) !!}
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('relationship_id', 'Parentesco <span class="tx-danger">*</span>', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::select('relationship_id', $parentesco, 'H', ['class' => 'form-control form-control-sm height25', 'placeholder' => 'Seleccione...', 'required'=>'required' ]) !!}
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('gender_id', 'Genero <span class="tx-danger">*</span>', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::select('gender_id', $gender, null, ['class' => 'form-control form-control-sm height25', 'placeholder' => 'Seleccione...', 'required'=>'required' ]) !!}
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('birth_date', 'Fecha de nacimiento <span class="tx-danger">*</span>', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::text('birth_date', null, ['class' => 'form-control form-control-sm typedate valid_date height25', 'required' => 'required']) !!}
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('disability', 'Presenta discapacidad <span class="tx-danger">*</span>', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::select('disability', ['S' => 'Si', 'N' => 'No'], null, ['class' => 'form-control form-control-sm height25', 'placeholder' => 'Seleccione...', 'required'=>'required' ]) !!}
                    </div>
                </div>

                <div class="form-group div-disability" style="display: none;">
                    {!! Form::label('disability_text', 'Descripción discapacidad <span class="tx-danger">*</span>', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::text('disability_text', null, ['class' => 'form-control form-control-sm height25']) !!}
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('school_grade_id', 'Grado de escolaridad', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::select('school_grade_id', $gradoescolaridad, null, ['class' => 'form-control form-control-sm height25', 'placeholder' => 'Seleccione...', 'required'=>'required' ]) !!}
                    </div>
                </div>

                {!! Form::close() !!}
            </div><!-- modal-body -->
            <div class="modal-footer">
              <button type="button" class="btn btn-sm btn-secondary tx-size-xs" data-dismiss="modal">Cerrar</button>
              <button type="button" class="btn btn-sm btn-primary tx-size-xs" id='btn-save-family'>Guardar</button>
            </div>
          </div>
        </div><!-- modal-dialog -->
    </div>

    <div id="modal-support" class="modal fade" aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="width:800px !important;max-width: 1200px !important;">
          <div class="modal-content tx-size-sm">
            <div class="modal-header pd-x-10 bg-primary">
              <h6 class="tx-14 mg-b-0 tx-uppercase tx-inverse text-white"><i class="fa fa-users mr-2" aria-hidden="true"></i>SOPORTE CAPACITACION Y/O CONSTANCIA DE ENTRENAMIENTO</h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body pd-10">
                {!! Form::open([
                    'route' => 'store.support',
                    'method'=>'POST',
                    'autocomplete'=>'off',
                    'class' => 'form-horizontal',
                    'files' => true,
                    'onsubmit' => "submitButton.disabled = true",
                    'id' => 'form-support'
                ]) !!}

                {!! Form::hidden('id', null, ['id' => 'id']) !!}
                {!! Form::hidden('hrm_academic_training_id', null, ['id' => 'hrm_academic_training_id']) !!}

                <div class="form-group">
                    {!! Form::label('name', 'Soporte capacitación y/o constancia de entrenamiento', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::text('hrm_academic_training_name', null, ['class' => 'form-control form-control-sm height25', 'id'=>'hrm_academic_training_name', 'readonly' => 'readonly']) !!}
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('accreditation_date', 'Fecha de la costancia <span class="tx-danger">*</span>', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::date('accreditation_date', null, ['class' => 'form-control form-control-sm height25', 'id'=>'accreditation_date', 'required' => 'required']) !!}
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('expiration_date', 'Fecha expiración', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::date('expiration_date', null, ['class' => 'form-control form-control-sm height25', 'id'=>'expiration_date']) !!}
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label('observation_support', 'Observaciones', ['class' => 'col-md-12 control-label'], false) !!}
                    <div class="col-md-12">
                        {!! Form::textarea('observation_support', null, ['class' => 'form-control form-control-sm', 'id' => 'observation_support']) !!}
                    </div>
                </div>

                {!! Form::close() !!}
            </div><!-- modal-body -->
            <div class="modal-footer">
              <button type="button" class="btn btn-sm btn-secondary tx-size-xs" data-dismiss="modal">Cerrar</button>
              <button type="button" class="btn btn-sm btn-primary tx-size-xs" id='btn-save-support'>Guardar</button>
            </div>
          </div>
        </div><!-- modal-dialog -->
    </div>

    <div id="modal-upload-support" class="modal fade" aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="width:800px !important;max-width: 1200px !important;">
          <div class="modal-content tx-size-sm">
            <div class="modal-header pd-x-10 bg-primary">
              <h6 class="tx-14 mg-b-0 tx-uppercase tx-inverse text-white"><i class="fa fa-cloud-upload mr-2" aria-hidden="true"></i>CARGAR SOPORTE CAPACITACION Y/O CONSTANCIA DE ENTRENAMIENTO</h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body pd-10">
                {!! Form::open([
                    'route' => 'store.support',
                    'method'=>'POST',
                    'autocomplete'=>'off',
                    'class' => 'form-horizontal',
                    'files' => true,
                    'onsubmit' => "submitButton.disabled = true",
                    'id' => 'form-upload-support'
                ]) !!}

                {!! Form::hidden('id', null, ['id' => 'id']) !!}
                {!! Form::hidden('hrm_academic_training_id', null, ['id' => 'hrm_academic_training_id']) !!}

                <div class="form-group mb-4">
                    {!! Form::label('name', 'Soporte capacitación y/o constancia de entrenamiento', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::text('hrm_academic_training_name', null, ['class' => 'form-control form-control-sm height25', 'id'=>'hrm_academic_training_name', 'readonly' => 'readonly']) !!}
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <input id="file-es" name="file" type="file" multiple>
                    </div>
                </div>
                {!! Form::close() !!}
            </div><!-- modal-body -->
            <div class="modal-footer">
            </div>
          </div>
        </div><!-- modal-dialog -->
    </div>


    <div id="modal-upload-formal-academic" class="modal fade" aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="width:800px !important;max-width: 1200px !important;">
          <div class="modal-content tx-size-sm">
            <div class="modal-header pd-x-10 bg-primary">
              <h6 class="tx-14 mg-b-0 tx-uppercase tx-inverse text-white"><i class="fa fa-graduation-cap mr-2" aria-hidden="true"></i>CARGAR SOPORTES FORMACIÓN ACADEMICA</h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body pd-10">
                {!! Form::open([
                    'route' => 'store.support',
                    'method'=>'POST',
                    'autocomplete'=>'off',
                    'class' => 'form-horizontal',
                    'files' => true,
                    'onsubmit' => "submitButton.disabled = true",
                    'id' => 'form-upload-formal-academic'
                ]) !!}

                {!! Form::hidden('id', null, ['id' => 'id']) !!}
                <div class="form-group mb-4">
                    {!! Form::label('academic_training', 'Soporte capacitación y/o constancia de entrenamiento', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::text('academic_training', null, ['class' => 'form-control form-control-sm height25', 'id'=>'academic_training', 'readonly' => 'readonly']) !!}
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <input id="file-academic_training" name="file" type="file" multiple>
                    </div>
                </div>
                {!! Form::close() !!}
            </div><!-- modal-body -->
            <div class="modal-footer">
            </div>
          </div>
        </div><!-- modal-dialog -->
    </div>


    <div id="modal-dowload-support" class="modal fade" aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="width:800px !important;max-width: 1200px !important;">
          <div class="modal-content tx-size-sm">
            <div class="modal-header pd-x-10 bg-primary">
              <h6 class="tx-14 mg-b-0 tx-uppercase tx-inverse text-white"><i class="fa fa-cloud-upload mr-2" aria-hidden="true"></i>DESCARGAR SOPORTE CAPACITACION Y/O CONSTANCIA DE ENTRENAMIENTO</h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body pd-10">
                {!! Form::open([
                    'route' => 'store.support',
                    'method'=>'POST',
                    'autocomplete'=>'off',
                    'class' => 'form-horizontal',
                    'files' => true,
                    'onsubmit' => "submitButton.disabled = true",
                    'id' => 'form-upload-support'
                ]) !!}

                {!! Form::hidden('id', null, ['id' => 'id']) !!}
                {!! Form::hidden('hrm_academic_training_id', null, ['id' => 'hrm_academic_training_id']) !!}

                <div class="form-group mb-4">
                    {!! Form::label('hrm_academic_training_name', 'Soporte capacitación y/o constancia de entrenamiento', ['class' => 'col-md-12 control-label tx-gray-800'], false) !!}
                    <div class="col-md-12">
                        {!! Form::text('hrm_academic_training_name', null, ['class' => 'form-control form-control-sm height25', 'readonly' => 'readonly']) !!}
                    </div>
                </div>

                <div class="bd bd-gray-300 rounded table-responsive">
                    <table class="table mg-b-0" id="tbl-details">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Nombre archivo</th>
                          <th>Usuario registra</th>
                          <th>Fecha registra</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                      </tbody>
                    </table>
                </div>
                {!! Form::close() !!}
            </div><!-- modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cerrar</button>
            </div>
          </div>
        </div><!-- modal-dialog -->
    </div>

    <div id="modal-view-suspensions" class="modal fade" aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="width:800px !important;max-width: 1200px !important;">
          <div class="modal-content tx-size-sm">
            <div class="modal-header pd-x-10 bg-primary">
              <h6 class="tx-14 mg-b-0 tx-uppercase tx-inverse text-white"><i class="fa fa-cloud-upload mr-2" aria-hidden="true"></i>TRAZABILIDAD DE SUSPENCIONES</h6>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body pd-10">
                <div class="bd bd-gray-300 rounded table-responsive">
                    <table class="table mg-b-0" id="tbl-details-suspensions">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Fecha inicio</th>
                          <th>Fecha finalización</th>
                          <th>Motivo suspención</th>
                          <th>Observación</th>
                        </tr>
                      </thead>
                      <tbody>
                      </tbody>
                    </table>
                </div>
                {!! Form::close() !!}
            </div><!-- modal-body -->
            <div class="modal-footer">
            </div>
          </div>
        </div><!-- modal-dialog -->
    </div>

    @include('manthra::include.flash_message')

@endsection

@push('js')
<script>
    window.addEventListener('load', (event) => {
        const el = document.getElementById('detail')
        el.addEventListener('click', (event) => {
            event.preventDefault()
            const url = el.href

            alert('pruebas');

            const modalBody = document.getElementById('modal-body')

            fetch(url)
                .then(res => res.text())
                .then(payload => modalBody.innerHTML = payload)
                .catch(err => console.log(err))

            $('#modal').appendTo("body").modal('show')
        })
        alert('Datos cargados');
    });

</script>
@endpush