@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/fullcalendar/css/fullcalendar.css">
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/fullcalendar/css/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css"/>

<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/bootstrap-multiselect/css/bootstrap-multiselect.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/multiselect/css/multi-select.css"/>

<style>
    .horarios{

    }

    .horarios div h5{
        height: 2.875rem;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice,.select2-selection__choice__remove {
    background-color: #00c88b!important;
    border: 1px solid #00c88b!important;
    font-family:'Poppins';
    font-weight:400;
    font-size:13px;
    color:#fff!important;
    margin-bottom: 5px;
}

#prueba_color{
    padding: 10px 0px 5px 0px;
    border-radius: 15px;
}

</style>
@endsection


@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-human-greeting menu-icon"></i>
        </span> colaboradores </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <a href="{!! URL('/empleados')!!}"><span>vista general</span></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <span>crear colaborador</span><i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">crear colaboradores</h4>
                </div>
                <div class="espacio_vertical"></div>
                @include('adminlte-templates::common.errors')
                @include('flash::message')
                <div>
                    {!! Form::open(['route' => 'empleados.store']) !!}

                    @include('empleados.fields')

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/multiselect/js/jquery.multi-select.js"></script>

<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/multiselect/js/jquery.multi-select.js"></script>

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

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


<script>
$(".txt_hora").inputmask({
    mask: "99:99"
});

$("#servicios_id").select2({
    placeholder: "Selecciona los servicios que desees vincular"
});

$("#estatus_salas").select2({
    placeholder: "Selecciona el estatus de la sala",
});


$('#color_letra').focusout(function(){
    var color = $(this).val();
    $('#prueba_color').css("color", '#'+color);
});


$('#color_fondo').focusout(function(){
    var color = $(this).val();
    $('#prueba_color').css("background-color", '#'+color);
});



</script>
@endsection