@extends('plantilla.master')
@section('scripts')
    <link rel="stylesheet" href="{{asset('plugins/datatables/data/css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/datatables/data/css/dataTables.bootstrap4.min.css')}}">
@endsection
@section('title',"Seguro Social")
@section('contenido_title',"Seguro Social")
@section('contenido')
<div class="row" style="margin-bottom:15px;">
    <div class="col-sm-12 col-md-6">
        <label for="empresa"><strong>Cliente</strong></label>
        <select class="selectpicker" data-live-search="true" name="empresa" id="empresa">
            @foreach ($empresas as $empresa)
                <option value="{{$empresa->CNEMPRESA}}">{{$empresa->DXEMPRESA}}</option>
            @endforeach
        </select>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <label>Seleccione una Nómina</label>
            <div id="resultado" class="align-middle text-center">
                <div class="spinner-border text-success " role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>
<table class="table table-hover transform" id="table_datos">
    <thead>
        <tr>
            <th scope="col">Empleados</th>
            <th scope="col" class="text-center" style="width:150px;">Acciones</th>
        </tr>
    </thead>
    <tbody id="tbody_generados">
    </tbody>
</table>

<!--Modal editar nominas-->
<div class="modal fade" id="modal_nominaedit" tabindex="-1" role="dialog" aria-labelledby="modal_label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_label">Editar nomina</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="" id="form_segsoc" method="post">
        {{ csrf_field() }}
        <div class="modal-body" style="padding: 0px!important;">
        <div id="cargando_modal"></div>
            <div class="col-12 text-center">
                <strong>Seguro Social</strong>
            </div>
            <div id="empleado"></div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="inputEmail4">Descripción</label>
                    <select class="form-control" name="segsoc" id="segsoc">
                        @foreach ($segurosocial as $ss)
                            <option value="{{$ss->cnsegsoc}}">{{$ss->dxsegsoc}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label for="monto">Monto</label>
                    <input type="text" class="form-control" id="monto" name="monto" placeholder="$0.00" required>
                </div>
            </div>
            <table class="table table-hover transform" id="segsoc_table">
                <thead>
                    <tr>
                        <th scope="col">Concepto</th>
                        <th scope="col">Monto</th>
                        <th scope="col" class="text-center" style="width:150px;">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tbody_segsoc">
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success btn-block" data-placement="bottom" title="Agregar">
                <i class="fas fa-check"></i> Agregar
            </button>
            <button type="button" class="btn btn-secondary btn-block" style="margin-top:0px;" data-dismiss="modal">
                <i class="fas fa-ban"></i> Cancelar
            </button>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection
<style>
    #table_datos tbody tr th, tbody tr td:nth-child(2){
        text-align: center;
        vertical-align: middle!important;
    }
    #table_datos tbody tr th, tbody tr td:nth-child(1){
        vertical-align: middle!important;
    }

    #segsoc_table tbody tr th, tbody tr td:nth-child(3){
        text-align: center!important;
        vertical-align: middle!important;
    }
    #segsoc_table tbody tr th, #segsoc_table tbody tr td:nth-child(1){
        vertical-align: middle!important;
    }
    #segsoc_table tbody tr th, #segsoc_table tbody tr td:nth-child(2){
        text-align: left;
    }
</style>
@section('endscript')
    <script>
        var select = document.getElementById('empresa');
        var nomina;
        var ban_reload = true;
        var table_datos;
        var select = document.getElementById('empresa');
        select.addEventListener('change', function () {
            getPeriodo(false);
        });
        var tiponomina=4;
    </script>
    <script src="{{ asset('plugins/datatables/data/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables/data/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/sweetalert/sweetalert.min.js') }}"></script>
    <script src="{{asset('js/functionss.js')}}"></script>
    <script src="{{asset('js/getnominas.js')}}"></script>
    <script>
        getPeriodo(false);
    </script>
@endsection