@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css" />

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet" />

<link rel="stylesheet" href="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
<!-- <link rel="stylesheet" href="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/vendors/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<!-- <link rel="stylesheet" href="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/css/demo_1/style.css"> -->
<!-- <link rel="stylesheet" href="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/css/demo_1/style.css"> -->

<link href="{!! asset('css'); !!}/styles.css" rel="stylesheet" />
<link href="{!! asset('css'); !!}/locales.css" rel="stylesheet" />

<style>
    .select2-dropdown {
        z-index: 999999999 !important;
    }
</style>
@endsection
@section('content')
<div class="page-header">
    <h3 class="page-title">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-receipt menu-icon"></i>
        </span> nominas </h3>
    <nav aria-label="breadcrumb">
        <ul class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">
                <span><a href="{!! URL('/nominaGenerales')!!}">vista general </a> / crear nomina <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i></span>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">creación de nomina</h4>
                <p class="card-description"> Llena todos los campos requeridos</p>
                @include('adminlte-templates::common.errors')

                {!! Form::open(['route' => 'nominaGenerales.store','id' => 'form_nomina']) !!}

                @include('nomina_generales.fields')

                <div class="espacio_vertical"></div>
                <h4 class="card-title">Selecciona de usuarios </h4>
                <p class="card-description"> Selecciona los usuarios a los que quieres calcular su nomina </p>


                @include('nomina_generales.table_usuarios')

                <div class="espacio_vertical"></div>

                <!-- Submit Field -->
                <div class="form-group col-sm-12">
                    {!! Form::submit('guardar', ['class' => 'btn btn-primary_local', 'id' => 'btn_guardar']) !!}
                    <a href="{!! route('nominaGenerales.index') !!}" class="btn btn-secondary">cancelar</a>
                </div>

                {!! Form::close() !!}

            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/moment/js/moment.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>

<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<!-- <script src="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script> -->
<script type="text/javascript" src="{!! asset('librerias') !!}/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>


<!-- <script src="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/vendors/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>

<script src="{!! asset('/librerias/inputmask/inputmask.js') !!}"></script>

<script>
    $('.datepicker-popup').datepicker({
    format: 'dd/mm/yyyy'
 });

    $(".js-example-data-array").select2();

    var url_dinamica = "{!! URL::to('/') !!}";


    var dateToday = new Date();

    $("#dropper-border").change(function() {
        var updatedDate = $(this).val();
        var instance = $(this).data("datepicker");
        var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

        if (date < dateToday) {
            $(this).datepicker("setDate", dateToday);
        }
    });

    $("#hora").inputmask({
        mask: "99:99"
    });

    $(document).ready(function() {
        $('#selectServicio').change(function() {
            var servicio_id = $(this).val();

            console.log('entra');
            $('#loader_cliente').show();
            $('#selectSalaDiv').hide();
            $.ajax({
                url: url_dinamica + "/api/citas/obtener/" + servicio_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#selectSala').empty().append();
                    $('#selectSala').append('<option value="Seleccina una opción">Seleccina una opción</option>');

                    $.each(data.data, function(key, value) {
                        $('#selectSala').append(
                            '<option value="' + value.sala_id + '">' + value.nombre + '</option>'
                        );
                    });

                    $('#loader_cliente').hide();
                    $('#selectSalaDiv').show();
                },
                error: function(xhr, estado, error) {
                    console.log(xhr);
                    console.log(estado);
                    console.log(error);
                }
            });
        });

        $('#form_nomina').submit(function(event) {
            event.preventDefault();
            $('.error_validacion').hide();
            var validacion = true;
            //reglas para validar fecha
            var pattern = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;

            var nombre = $('#nombre').val();
            if (nombre.length < 3) {
                $('#nombre_validacion').show();
                validacion = false;
            }

            //Validación fecha uno
            var fecha_inicio = $('#fecha_inicio').val();
            if (!pattern.test(fecha_inicio)) {
                $('#fecha_inicio_validacion').show();
                validacion = false;
            }

            //Validación fecha dos
            var fecha_fin = $('#fecha_fin').val();
            if (!pattern.test(fecha_fin)) {
                $('#fecha_fin_validacion').show();
                validacion = false;
            }

            if(validacion){
                event.currentTarget.submit();
            }


            return false;
        });
    });
</script>
@endsection