@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" />


<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/touchspin/css/touchspin.min.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;
    }
    @media only screen and (max-width: 480px) {
        .card .card-body {
            padding: 2.5rem 1.5rem;
        }
    }    
</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-brush menu-icon"></i>
        </span> servicicos </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <a href="{!! route('servicios.index') !!}"><span>vista general</span></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <span>crear servicio
                </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 servicio</h4>
                </div>
                <div class="espacio_vertical"></div>
                @include('adminlte-templates::common.errors')
                <div>
                    {!! Form::open(['route' => 'servicios.store']) !!}

                    @include('servicios.fields')

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

@section('scripts')
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="{!! asset('files_custom/bower_components/touchspin/js/TouchSpin.js') !!}"></script>
<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 src="{!! asset('/librerias/inputmask/inputmask.js') !!}"></script>

<script>
    $("#costo").blur(function() {
        $("#costo").val(numeral($("#costo").val()).format('0,0.0'));
    });
    var vspinTrue = $(".vertical-spin").TouchSpin({
        verticalbuttons: true,
        postfix: 'minutos &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
    });
    if (vspinTrue) {
        $('.vertical-spin').prev('.bootstrap-touchspin-prefix').remove();
    }

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

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

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

    $("#categoria").select2({
        placeholder: "Selecciona la categoría ",
    });

    $("#checkPromocion").change(function(){
        if($("#checkPromocion").prop('checked') == true)
        {
            $("#divCostoPromocional").show();
            $("#divTotalPromocion").show();            
        }
        else{
            $("#divCostoPromocional").hide();
            $("#divTotalPromocion").hide();
        }
    });
    $("#cantidad_promocional").blur(function() {
        $("#cantidad_promocional").val(numeral($("#cantidad_promocional").val()).format('0,0.0'));        
        var total = parseFloat(numeral($("#costo").val()).value()) - parseFloat(numeral($("#cantidad_promocional").val()).value());        
        if(total > 0)
        {
            $("#costo_promocion_text").text(numeral(total.toFixed(2)).format('0,0.0'));
            $("#costo_promocion").val(total.toFixed(2));
        }
        else{
            $("#costo_promocion_text").text('0.0');
            $("#costo_promocion").val(0);
        }
    });
    $("#porcentaje_promocional").blur(function() {
        $("#porcentaje_promocional").val(numeral($("#porcentaje_promocional").val()).format('0,0.0'));        
        var porcentaje =  parseFloat(numeral($("#porcentaje_promocional").val()).value());
        var costo_aux = parseFloat(numeral($("#costo").val()).value());
        var total = ((1 - (porcentaje / 100)) * costo_aux);        
        if(total > 0)
        {
            $("#costo_promocion_text").text(numeral(total.toFixed(2)).format('0,0.0'));
            $("#costo_promocion").val(total.toFixed(2));
        }
        else{
            $("#costo_promocion_text").text('0.0');
            $("#costo_promocion").val(0);
        }
    });

    $("#cantidad_promocional").focus(function() {
        $("#porcentaje_promocional").val(numeral(0).format('0,0.0'));
    });
    $("#porcentaje_promocional").focus(function() {
        $("#cantidad_promocional").val(numeral(0).format('0,0.0'));
    });
    $("#costo").change(function(){
        $("#porcentaje_promocional").val(numeral(0).format('0,0.0'));
        $("#cantidad_promocional").val(numeral(0).format('0,0.0'));
        var costo_aux = parseFloat(numeral($("#costo").val()).value());        
        
        $("#costo_promocion_text").text(numeral(costo_aux).format('0,0.0'));
        $("#costo_promocion").val(costo_aux);
    });
</script>
@endsection