@extends('layouts.dashboard')
@section('css')

@endsection



@section('content')
    <style>
        span.select2-selection.select2-selection--single {
            height: calc(2.25rem + 2px);
            border: 1px solid #ced4da;

        }

    </style>

    <div class="app-page-title" style="
            margin-bottom: 0px;
            border-bottom-width: 0px;
            border-bottom-style: solid;
            padding-bottom: 17px;
        ">
        <div class="page-title-wrapper">
            <div class="col-md-4">
                <div class="page-title-heading">
                    <div class="page-title-icon">
                        <i class="{{ $icon ?? '' }} icon-gradient bg-premium-dark"></i>
                    </div>
                    <div>Productos
                        <div class="page-title-subheading">
                            Listado de productos
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-8 d-none d-sm-none d-md-none d-lg-block">
                <div class="page-header  float-right">
                    <nav class="" aria-label=" breadcrumb">
                        <ol class="breadcrumb text-right">
                            <li class="breadcrumb-item"><a href="{{ route('conceptos.index') }}">Productos</a></li>
                            <li class="active breadcrumb-item" aria-current="page">Nuevo</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>



    <!-- /Widgets -->



    {{-- <div class="card-group ">
        <div class="card ">
            <div class="card-body">
                <div class="h1 text-muted text-right">
                    <i class="fa fa-users"></i>
                </div>

                <div class="h4 mb-0">
                    <span>{{ $productos->count() }}</span>
                </div>

                <small class="text-muted text-uppercase font-weight-bold">Productos</small>
                <div class="progress progress-xs mt-3 mb-0 bg-flat-color-1"
                    style="width: 40%; height: 5px;background-color: #139d7d;"></div>
            </div>
        </div>


        <div class="card  no-padding d-none d-md-block d-lg-block d-xl-block">
            <div class="card-body">
                <div class="h1 text-muted text-right mb-4">
                    <i class="fa fa-cart-plus"></i>
                </div>
                <div class="h4 mb-0">
                    <span>1238</span>
                </div>
                <small class="text-muted text-uppercase font-weight-bold">Facturas</small>
                <div class="progress progress-xs mt-3 mb-0 bg-flat-color-5"
                    style="width: 40%; height: 5px;background-color: #105e7b;"></div>
            </div>
        </div>
        <br>

        <div class="card col-md-6 no-padding d-none d-md-block d-lg-block d-xl-block ">
            <div class="card-body">
                <div class="h1 text-muted text-right mb-4">
                    <i class="fa fa-map"></i>
                </div>
                <div class="h4 mb-0">
                    <span>$200000</span>
                </div>
                <small class="text-muted text-uppercase font-weight-bold">Importe facturado</small>
                <div class="progress progress-xs mt-3 mb-0 bg-flat-color-2"
                    style="width: 40%; height: 5px;background-color: #32b1ce;"></div>
            </div>
        </div>

        <div class="card col-md-6 no-padding d-none d-md-block d-lg-block d-xl-block">
            <div class="card-body">
                <div class="h1 text-muted text-right mb-4">
                    <i class="fa fa-user-plus"></i>
                </div>
                <div class="h4 mb-0">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" onclick="window.location='cliente-registro.html'" class="btn btn-primary"
                        style="background-color:#16627c;">
                        <i class="fa fa-plus"></i>&nbsp;&nbsp; Nuevo Producto o Servicio&nbsp;&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div> --}}


    {{-- <svg height="40mm" width="40mm">
        <circle cx="20mm" cy="20mm" r="15mm" style="fill: rgb(217, 217, 223); stroke: rgb(125, 186, 255); stroke-width: 1mm;" />
        <text x="5mm" y="10mm" fill="blue" font-size="8mm">SVG </text>
    </svg> --}}


    <br>

    @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
                        <span aria-hidden="true">×</span>
                    </button>

                    <div class="row">
                        <div class="col-1">
                            <i class="pe-7s-shield" style="font-size: 20px;"> </i>
                        </div>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>
                                    <div class="col-12"><strong>
                                            <strong>{{ $error }}</strong></strong></div>
                                </li>
                            @endforeach
                        </ul>


                    </div>


                </div>
            @endif

    <div class="main-card mb-3 card ">
        <div class="card-header" style="text-transform: none !important"><strong>Conceptos</strong><small> &nbsp; del
                comprobante</small></div>

           <form action="{{url('conceptos')}}" method="POST">
            @csrf
        <div class="card-body card-block">

            <div class="row form-group  ">

                <div class="col col-md-2">
                    <label for="text-input" class=" form-control-label">Clave SAT<span
                        class="text-danger ">*</span>
                    </label>
                </div>
                <div class="col-12 col-md-4">
                    <select class="livesearch buscar form-control" required  style="width: 100%" name="c_ClaveProdServ"
                       ></select>

                </div>

                <label for="inputPassword" class="col-md-2  col-form-label">Precio unitario<span
                    class="text-danger">*</span></label>
                <div class="col-md-4">
                    <div class="input-group">

                        <input class="form-control input-mask-trigger" id="ValorUni" required name="ValorUni"
                            data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                            im-insert="true" style="text-align: right;">
                    </div>

                </div>

            </div>
            <div class="row form-group ">
                <div class="col col-md-2">
                    <label for="text-input" class=" form-control-label">Clave interna<span
                        class="text-danger">*</span>
                    </label>
                </div>
                <div class="col-12 col-md-4">
                    <input type="text" id="IdentificadortInt"  required maxlength="20" name="IdentificadortInt" placeholder=""
                        class="form-control"><small class="form-text text-muted"></small>
                </div>
                <div class="col col-md-2">
                    <label for="text-input" class=" form-control-label">IVA incluido
                    </label>
                </div>
                <div class="col-12 col-md-4">
                    <select name="Iva" id="select" name="" class="form-control text-right">
                        <option selected value="0">No</option>
                        <option value="0.16">16 %</option>
                        <option value="0.08">8 %</option>
                    </select>
                </div>
            </div>

            <div class="row form-group">
                <div class="col col-md-2">
                    <label for="text-input" class="form-control-label">Unidad M. Sat<span
                        class="text-danger">*</span>
                    </label>
                </div>
                <div class="col-12 col-md-4">
                    <select class="livesearch form-control unidadMsat" required style="width: 100%" name="c_ClaveUnidad"
                        ></select>
                </div>
                <div class="col col-md-2">
                    <label for="text-input" class=" form-control-label">Descuento %
                    </label>
                </div>
                <div class="col-md-4">
                    <div class="input-group">

                        <input class="form-control input-mask-trigger"  maxlength="8"
                            data-inputmask="'alias': 'numeric', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'suffix': '%', 'placeholder': '0'"
                            im-insert="true" style="text-align: right;" name="Descuento">
                    </div>

                </div>
            </div>
            <div class="row form-group">
                <div class="col col-md-2">
                    <label for="text-input" class=" form-control-label">Unidad medida<span
                        class="text-danger">*</span>
                    </label>
                </div>
                <div class="col-12 col-md-4">
                    <input type="text" id="text-input" name="UnidadMed" required placeholder="" class="form-control"><small
                        class="form-text text-muted"></small>
                </div>
                <div class="col col-md-2">
                    <label for="text-input" class=" form-control-label">Descripción
                    </label>
                </div>
                <div class="col-12 col-md-4">
                    <textarea name="Descripcion" maxlength="180" id="textarea-input" rows="4" placeholder="Agrege una descripción al concepto..."
                        class="form-control"></textarea>
                </div>
            </div>



            {{-- inicio de select de impuesto --}}

            <div class="alert alert-dark fade show text-center" role="alert">
                <a class="alert-link">Impuesto relacionados</a>

            </div>

            <select multiple="multiple" name="impuesto[]" class="multiselect-dropdown form-control col-md-12">
                <optgroup label="Impuesto">

                   @foreach ($impuesto as $item )
                   <option value="{{$item->c_TasaOCuota}}">{{$item->Impuesto.' - '.($item->ValorMax*100).'%'.($item->Retencion == 'Sí' ? ' - RET' :'') }}</option>
                   @endforeach
                </optgroup>
             <a href="#">  <optgroup label="Configurar Impuesto "></a>

                </optgroup>

            </select>


            <br>
            <br>
            {{-- fin de select de impuesto --}}

            {{-- Datos Adicionales --}}


            <div class="card-body card-block" style="display:none;" id="divocultamuestra">


                <div class="row form-group">

                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Marca
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="text" id="Marca" maxlength="15" name="Marca" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>
                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Modelo
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="text" id="Modelo" maxlength="20" name="Modelo" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>


                    <div class="col col-md-1">
                        <label for="text-input" maxlength="100" class=" form-control-label">Codigo de barra
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="text" id="CodigoBarra" maxlength="100" name="CodigoBarra" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>

                </div>

                <div class="row form-group">
                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Peso
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="tel" id="Peso" maxlength="10" name="Peso" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>
                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Tipo
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="text" id="Tipo" maxlength="20" name="Tipo" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>


                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Numero de motor
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="text" id="NoMotor" maxlength="50" name="NoMotor" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>

                </div>

                <div class="row form-group">
                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Color
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="text" id="Color" maxlength="20" name="Color" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>
                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Año
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="numer" id="Anio" maxlength="4" name="Anio" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>


                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Numero de serie
                        </label>
                    </div>
                    <div class="col-12 col-md-3">
                        <input type="text" id="NoSerie" maxlength="50" name="NoSerie" placeholder="" class="form-control"><small
                            class="form-text text-muted"></small>
                    </div>

                </div>


                <div class="row form-group">
                    <div class="col col-md-1">
                        <label for="text-input" class=" form-control-label">Descripción
                        </label>
                    </div>
                    <div class="col-12 col-md-11">
                        <textarea name="NotaInterna" maxlength="250" id="NotaInterna" rows="4" placeholder=""
                            class="form-control"></textarea>
                    </div>

                </div>



            </div>


            {{-- fin  Datos Adicionales --}}


            <div class="row">

                <div class="col-md-6">
                    <button id="botonocultamuestra" type="button" class="btn btn-lg btn-dedault btn-block"
                        style="background-color: #eef0f078;">
                        <i class="fa fa-plus" id="iconn"></i>&nbsp;
                        <span id="payment-button-amount">Datos Adiccionales</span>

                    </button>
                </div>

                <div class="col-md-4 offset-md-2">
                    <button style="background-color:#16627c;"  type="submit"
                        class="btn btn-lg btn-info btn-block">
                        <i class="pe-7s-diskette" style="font-size: 1rem;position: inherit;
                            bottom: -2px;"></i>&nbsp;
                        <span id="payment-button-amount">Agregar concepto</span>

                    </button>
                </div>



            </div>
        </div>
    </form>










    </div>




    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

    <script src="{{ asset('js/select2.js') }}"></script>
    <script src="{{ asset('js/_autocompleteSAT.js') }}" ></script>





@endsection