@extends('layouts.app')

@section('css')
<style>
    .bootstrap-touchspin-up {
        background-color: #00c88b !important;
        border-color: #00c88b !important;
    }

    .bootstrap-touchspin-down {
        background-color: #67666a !important;
        border-color: #67666a !important;
    }

    .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;
    }

    .form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before{
        background: #00c88b !important;
        border-width: 0 !important;
        border: solid #00c88b !important;
        border-color: #00c88b !important;
    }
    .form-check-primary.form-check label input[type="checkbox"] + .input-helper:before, .form-check-primary.form-check label input[type="radio"] + .input-helper:before{
        border-color: #00c88b !important;
    }
</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-wrench menu-icon"></i>
        </span> configuración </h3>
    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>vista general <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">
                <h4 class="card-title text-uppercase">configuraciones del establecimiento</h4>
                @include('flash::message')
                {!! Form::model($configuracion, ['route' => ['configuracion.update', $configuracion->id], 'method' => 'patch']) !!}

                <div class="form-group row">
                    <div class="col-xs-12 col-sm-6">
                        <label>hora de apertura del negocio</label>
                        {!! Form::text('hora_entrada', null, ['class' => 'form-control','placeholder' => 'apertura del negocio','id' => 'hora_entrada']) !!}
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <label>hora de cierre del negocio</label>
                        {!! Form::text('hora_salida', null, ['class' => 'form-control','placeholder' => 'hora de cierre','id' => 'hora_salida']) !!}
                    </div>

                    <div class="col-xs-12 col-sm-6 mt-3">
                        <label>código para ventas mostrador</label>
                        {!! Form::text('codigo_venta_mostrador', null, ['class' => 'form-control','placeholder' => 'Código para ventas mostrador','id' => 'codigo_venta_mostrador']) !!}
                    </div>

                    <div class="col-xs-12 col-sm-6 mt-3">
                        <label>intervalo de minutos en el calendario de citas</label>
                        {!! Form::select('intervalo_calendario', $intervalos, $configuracion->intervalo_calendario, ['class' => 'form-control']) !!}
                    </div>

                    <div class="col-xs-12 col-sm-6 mt-3">
                        <label>número de horas atras en las que se pueden crear citas</label>
                        <div class="row">
                            <div class="form-group col-sm-3">
                                <div class="form-check form-check-primary">
                                    <label class="form-check-label">
                                        {!! Form::checkbox('tiempo_atras_mode', null, $configuracion->tiempo_atras_mode == 'SI' ? 'checked' : '', ['class' => 'form-check-input','id' => 'tiempo_atras_mode']) !!}
                                        <i class="input-helper"></i>
                                        <span id="text_tiempo_atras_mode">{{ $configuracion->tiempo_atras_mode == 'SI' ? 'Activo' : 'Desactivado' }}</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group col-sm-9">
                                {!! Form::select('intervalos_atras', $intervalos_atras, $configuracion->tiempo_atras, ['class' => 'form-control','id' => 'intervalos_atras','style' => $configuracion->tiempo_atras_mode == 'SI' ? '' : 'display:none']) !!}
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-6 mt-3">
                        <label>días que se muestran en el calendario</label>
                        {!! Form::select('mostrar_dias_calendario', $numero_dias, $configuracion->mostrar_dias_calendario, ['class' => 'form-control']) !!}
                    </div>

                    {{-- minimos_referidos
                    porcentaje_ventas_socialjr --}}
                </div>

                <!-- Submit Field -->
                <div class="form-group col-sm-12">
                    <button type="submit" class="btn btn-primary_local" id="btnCrearEmployees">guardar</button>
                </div>

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

@section('scripts')
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script>
    $("#horas_extra").blur(function() {
        $("#horas_extra").val(numeral($("#horas_extra").val()).format('0,0.0'));
    });
    $("#comision").blur(function() {
        $("#comision").val(numeral($("#comision").val()).format('0,0.0'));
    });

    $("#tiempo_atras_mode").change(function(){
        if($("#tiempo_atras_mode").prop('checked') == true)
        {
            $("#text_tiempo_atras_mode").text('Activo');
            $("#intervalos_atras").show();
        }
        else{
            $("#text_tiempo_atras_mode").text('Desactivado');
            $("#intervalos_atras").hide();
        }
    });
</script>
@endsection