@php
    $routePersistProduct  = isset($product) ? route('SupplierProduct.updateProduct',['supplierUuidKey' => $supplier['uuidKey'], 'productUuid' => $product->uuidKey]) : route('SupplierProduct.postProducts',['supplierUuidKey' => $supplier['uuidKey']]);
    $styleDivHeader = "background-color: #6329A1; width: 100%; height: 39px; display: flex; align-items: center; padding-left: 20px; padding-top: 10px; padding-bottom: 10px;";
    $styleHeader = "color: #fff; margin-left: 2.1rem;";
    $styleContent = ' height: 120vh !important;';
@endphp
<style>
    #supplier_products_form{
        margin-top: 0px;
        margin-block-end: unset;
    }
</style>

@component('templates.modal',['modalId' => 'modal_supplier_product', 'title' => 'Agregar Referencia', 'classDiv' => 'col-md', 'styleDivHeader' => $styleDivHeader,
                              'styleHeader' => $styleHeader,'styleContent' => $styleContent, 'styleFooter' => 'text-align: center'])
    @slot('body')
        <form action="{{ $routePersistProduct }}" method="POST" enctype="multipart/form-data" id="supplier_products_form" style="max-height: 50% !important; overflow-y: scroll !important;">
            @method('POST')
            @csrf
            <input type="hidden" id="uuidKey" name="uuidKey" value="">
            <input id="categoryUuidKey" name="categoryUuidKey" type="hidden" value={{ $supplier['categoryUuidKey'] ?? '' }} />
            <input type="hidden" id="supplierUuidKey" name="supplierUuidKey" value={{ $supplier['uuidKey'] }}>
            <input id="campaignUuidKey" type="hidden" name="campaignUuidKey" value={{ $defaultCampaing->uuidKey ?? '' }}/>
            <div class="row">
                <div class="col s12">
                    <div class="input-field col s12 m6">
                        <input id="name"
                               class="validate"
                               type="text"
                               name="name"
                               placeholder="Nombre"
                               required
                               value= ""/>
                        <label for="name">Nombre <span style="color:red">*</span></label>
                    </div>

                    <div class="input-field col s12 m6">
                        <div class="mb-2">
                            <label for="color">Color <span style="color:red">*</span></label>
                        </div>
                        <input id="color" type="color" value="" name="color" />
                        @if ($errors->has('color'))
                            <small class="form-text text-danger">{{ $errors->first('color') }}</small>
                        @endif
                    </div>
                </div>

                <div class="col s12 m12">
                    <div class="input-field col s12 m12">
                        <label for="description">Descripción</label>
                        <textarea id="description" placeholder="Descripción" class="materialize-textarea" name="description"  style="height: 100px;"></textarea>
                    </div>
                </div>

                <div class="col s12 m6 l6">
                    <div class="card invoice-action-wrapper mb-10">
                        <div class="card-content" style="overflow: hidden; align-items: center">
                            <div class="card-alert card purple">
                                <div class="card-content white-text">
                                    <p>Imagen 335x300</p>
                                </div>
                            </div>
                            <div class="col s12 m12 l12">
                                <input type="file" class="dropify"  id="image-supplier-product" name="image-supplier-product" accept="image/*" data-default-file="" />
                            </div>
                        </div>
                    </div>
                </div>
                {{--
                <div class="input-field col s12 m6 l6 ">
                    <input id="campaignSlug" type="text" name="campaignSlug" value={{ $defaultCampaing->name ?? '' }} disabled/>
                    <label for="campaignSlug">Campa&ntilde;a <span style="color:red">*</span></label>
                </div>
                --}}

                <div class="input-field col s12 m3 l3">
                    <input id="lastPrice"
                           class="validate"
                           type="number"
                           name="lastPrice"
                           placeholder="Precio anterior"
                           required
                           value="" />
                    <label for="lastPrice">Precio Antes <span style="color:red">*</span></label>
                </div>
                <div class="input-field col s12 m3 l3">
                    <input id="price"
                           class="validate"
                           type="number"
                           name="price"
                           placeholder="Precio"
                           required
                           value= "" />
                    <label for="price">Precio Actual <span style="color:red">*</span></label>
                </div>
                <div class="input-field col s12 m3 l3">
                    <input id="discount"
                           class="validate"
                           type="number"
                           name="discount"
                           placeholder="% Descuento"
                           required
                           value= "" />
                    <label for="discount">Descuento <span style="color:red">*</span></label>
                </div>
                <div class="input-field col s12 m3 l3">
                    <input id="stock"
                           class="validate"
                           type="number"
                           name="stock"
                           placeholder="Cantidad"
                           required
                           value= "" />
                    <label for="stock">Cantidad <span style="color:red">*</span></label>
                </div>
                <div class="row">
                    <div class="col s12 m3 l3 xl3">
                        <label for="state">Estado <span style="color:red">*</span></label>
                    </div>
                    <div class="col s12 m6 l6 xl6">
                        <div class="input-field col s12 m9">
                            <div class="switch">
                                <label>
                                    Inactivo
                                    <input type="checkbox" name="state" id="state" checked >
                                    <span class="lever"></span>
                                    Activo
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="text-align: center; margin-top: 2px; margin-bottom: 15px;">
                <button type="button" class="modal-action modal-close waves-red btn waves-effect waves-light mr-4">Cancelar</button>
                <button type="button" class="waves-effect btn indigo waves-light editButton" id="supplier-product-save">Guardar</button>
            </div>
        </form>
    @endslot

    @slot('footer')
    @endslot
@endcomponent