@extends('layouts.app')

@section('css')
<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>
    .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;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice,.select2-selection__choice__remove {
        background-color: #00c88b!important;
        border: 1px solid #00c88b!important;
        font-family: "Fixture ebold", sans-serif;
        font-weight:400;
        font-size:13px;
        color:#fff!important;
        margin-bottom: 5px;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected]{
        background-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-receipt menu-icon"></i>
        </span> productos </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <a href="{!! URL('/productos')!!}"><span>vista general</span></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <span>editar producto</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">editar producto </h4>
                </div>
                <div class="espacio_vertical"></div>
                @include('adminlte-templates::common.errors')
                <div>
                    {!! Form::model($producto, ['files' => 'true', 'route' => ['productos.update', $producto->id], 'method' => 'patch']) !!}

                    @include('productos.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 src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="{!! asset('files_custom/assets/input-mask/jquery.inputmask.js')!!}"></script>

<script>
    $('.file-upload-browse').on('click', function() {
      var file = $(this).parent().parent().parent().find('.file-upload-default');
      file.trigger('click');
    });
    $('.file-upload-default').on('change', function() {
      $(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
    });
    $("#precio").blur(function(){
        $("#precio").val(numeral($("#precio").val()).format('0,0.0'));
    });
    
    $('#caducidad').inputmask({
        mask: "99/99/9999"
    });
    $("#divServicios").hide();

    @if($producto->tipo == "cortesia")
    $("#divServicios").show();
    $("#servicios_id").select2({
        placeholder: " Selecciona los servicios que desees vincular"
    });
    @endif
    
    $("#tipo").change(function(){
        if($(this).val() == "cortesia")
        {
            $("#divServicios").show();
            $("#servicios_id").select2({
                placeholder: " Selecciona los servicios que desees vincular"
            });
        }
        else{
            $("#divServicios").hide();
        }
    });
</script>
@endsection