@component('templates.modal-custom', ['modalId' => 'modal-order', 'title' => 'Nueva Orden', 'classDiv' => 'modal-dialog-centered modal-lg loading-root', 'classHeader' => 'bg-danger text-white',
                                       'classTitle' => 'font-weight-600 h5 text-white', 'styleDiv' => 'display: none; z-index: 99999999999; background-color: rgba(0,0,0,.8); overflow-x: hidden;display: none;'])
    @slot('body')
        <form action="{{ route('purchase') }}" method="post"  id="form-purchase" >
            @csrf
            <input type="hidden" name="amountPasarela" id="totalPasarela" value="">
            <input type="hidden" name="order" value="">
            <input type="hidden" name="ref" value="{{ $productData['ref'] }}">
            <input type="hidden" name="name" value="{{ $productData['name'] }}">
            <input type="hidden" name="summary" value="{{ $productData['summary'] }}">
            <input type="hidden" name="price" value="{{ $productData['price'] }}">
            <input type="hidden" name="terms" value="{{ $productData['terms'] }}">
            <input type="hidden" name="amount" id="amount" value="1">
            <input type="hidden" name="unitValue" id="unitValue" value="{{ $productData['price'] }}">
            <input type="hidden" name="totalValue" id="totalValue" value="{{ $productData['price'] }}">
            <input type="hidden" name="productUuidKey" value="{{ $productData['uuidKey'] }}">
            <input type="hidden" name="supplierUuidKey" value="{{ $productData['supplierUuidKey'] }}">
            <input type="hidden" name="categoryUuidKey" value="{{ $productData['categoryUuidKey'] }}">
            <input type="hidden" name="productCampaignUuidKey" value="{{ $productData['campaignUuidKey'] }}">
            <input type="hidden" name="subtotal" id="subtotal" value="{{ $productData['price'] }}">
            <input type="hidden" name="iva" id="iva" value="{{ $productData['price'] * 0.19 }}">
            <input type="hidden" name="totalToPay" id="totalToPay" value="{{ $productData['price'] + ($productData['price'] * 0.19) }}">
            <input type="hidden" name="campaignUuidKey" value="{{ $campain['uuidKey'] }}">
            <div class="modal-body">
                <strong style="color: #39C0ED">* Datos del cliente</strong>
                <div class="row mb-3">
                    <div class="col-lg-6">
                        <label for="identificacion" class="form-label">
                            Identificaci&oacute;n: <span class="text-danger">*</span>
                        </label>
                        <div class="form-outline  mb-1">
                            <input type="text"
                                   class="form-control form-control-lg"
                                   id="identificacion"
                                   placeholder="Identificacion"
                                   name="identificacion"
                                   value="12 347654">
                        </div>

                        <label for="establecimiento" class="form-label">
                            Establecimiento: <span class="text-danger">*</span>
                        </label>
                        <div class="form-outline  mb-1">
                            <input type="text"
                                   class="form-control form-control-lg"
                                   id="establecimiento"
                                   placeholder="Establecimiento"
                                   name="establecimiento"
                                   value="{{ $user_data['establecimiento'] }}">
                        </div>

                        <label for="telefono" class="form-label">
                            Tel&eacute;fono: <span class="text-danger">*</span>
                        </label>
                        <div class="form-outline  mb-1">
                            <input type="text"
                                   class="form-control form-control-lg"
                                   id="telefono"
                                   placeholder="Tel&eacute;fono"
                                   name="telefono"
                                   value="{{ $user_data['telefono'] }}">

                        </div>
                    </div>
                    <div class="col-lg-6">
                        <label for="nombre" class="form-label">Cliente: <span class="text-danger">*</span>
                        </label>
                        <div class="form-outline  mb-1">
                            <input type="text"
                                   class="form-control form-control-lg"
                                   id="nombre"
                                   placeholder="Nombre"
                                   name="nombre"
                                   value="{{ $user_data['nombre'] }}">

                        </div>

                        <label for="ciudad" class="form-label">
                            Ciudad: <span class="text-danger">*</span>
                        </label>
                        <div class="form-outline  mb-1">
                            <input type="text"
                                   class="form-control form-control-lg"
                                   id="ciudad"
                                   placeholder="ciudad"
                                   name="ciudad"
                                   value="{{ $user_data['ciudad'] }}">
                        </div>

                        <label for="email" class="form-label">
                            Correo: <span class="text-danger">*</span>
                        </label>
                        <div class="form-outline  mb-1">
                            <input type="text"
                                   class="form-control form-control-lg"
                                   id="email"
                                   placeholder="email"
                                   name="email" value="{{ $user_data['email'] }}">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <label for="deliveryAddress" class="form-label">
                            Domicilio de Envío: <span class="text-danger">*</span>
                        </label>
                        <div class="form-outline  mb-1">
                            <input type="text"
                                   class="form-control form-control-lg validate"
                                   id="deliveryAddress"
                                   placeholder="Domicilio de Envío"
                                   required
                                   name="deliveryAddress" value="{{ $user_data['deliveryAddress'] ?? ''}}">
                        </div>
                    </div>
                </div>

                <strong style="margin-top: 42px; color: #39C0ED">* Datos de la compra</strong>
                <br>
                <table class="table table-bordered d-none d-md-table">
                    <thead>
                    <tr class="table-danger">
                        <th>Cantidad</th>
                        <th>Producto</th>
                        <th>Vr Unitario</th>
                        <th>Precio</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row" id="cantidad_cart_table">1</th>
                        <td>{{ $productData['name'] }}</td>
                        <td id="price_cart">$ {{ number_format($productData['price'], 0, ',', '.') }} COP</td>
                        <td id="price_total">$ {{ number_format($productData['price'], 0, ',', '.') }} COP</td>
                    </tr>
                    </tbody>
                </table>
                <div class="border mb-2 d-md-none d-lg-none">
                    <div class="border p-2">
                        <b>Cantidad: </b> <span id="cantidad_cart">1</span>
                    </div>

                    <div class="border p-2">
                        <b>Producto: </b> <span>{{ $productData['name'] }}</span>
                    </div>

                    <div class="border p-2">
                        <b>Vr Unitario: </b> <span id="price_cart">$ {{ number_format($productData['price'], 0, ',', '.') }} COP</span>
                    </div>

                    <div class="border p-2">
                        <b>Precio: </b> <span id="price_total">$ {{ number_format($productData['price'], 0, ',', '.') }} COP</span>
                    </div>
                </div>
                <div class="d-flex flex-column flex-lg-row justify-content-md-around align-items-center">
                    <div class="mb-2">
                        <div class="form-group">
                                <textarea class="form-control"
                                          rows="3"
                                          cols="30"
                                          id="notes"
                                          placeholder="Comentario"
                                          name="notes">
                                </textarea>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <div style="margin-right: 3.2rem !important">
                            <p class="font-weight-600 font-weight-bold"> Subtotal: </p>
                            <p class="font-weight-600 font-weight-bold"> IVA: </p>
                            <p class="font-weight-600 font-weight-bold"> Total: </p>
                        </div>
                        <div>
                            <p id="sub_total"> $ {{ number_format($productData['price'], 0, ',', '.') }} COP</p>
                            <p id="iva_total"> $ {{ number_format($productData['price'] * 0.19, 0, ',', '.') }} COP</p>
                            <p id="total"> $ {{ number_format($productData['price'] + ($productData['price'] * 0.19), 0, ',', '.') }} COP</p>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    @endslot

    @slot('footer')
        <button type="button" id="cancelar" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
        <button type="button" id="purchase-button" class="btn btn-primary">Comprar</button>
    @endslot

@endcomponent