{{-- Form Body --}}
<div class="mt-3 row">

    {{-- CSRF Token --}}
    <input type="hidden" name="_token" value="{{ csrf_token() }}" id="token">

    {{-- Command --}}
    <div class="pr-4 col-lg-9 col-md-9 col-sm-12 col-xs-12">

        {{-- Levantamiento de Comandas --}}
        <div class="mt-2 mb-4 custom-card border-success">
            <div class="card-body">

                {{-- Title --}}
                <h5 class="mb-3 section-title bottom-divisor">{{ __('entity_forms')['orders']['product_section'] }}</h5>

                {{-- Tabs --}}
                <ul class="px-2 mb-3 nav nav-tabs" id="product-selector-tabs">
                    <li class="mr-2 nav-item active">
                        <a class="nav-link active" href="#stored_products" data-toggle="tab">
                            {{ __('entity_forms')['orders']['stored_products_sections'] }}
                        </a>
                    </li>
                    <li class="ml-2 nav-item">
                        <a class="nav-link" href="#extra_products" data-toggle="tab">
                            {{ __('entity_forms')['orders']['extra_products_sections'] }}
                        </a>
                    </li>
                </ul>

                {{--Contenido--}}
                <div class="pt-2 tab-content">

                    {{-- Productos Registrados --}}
                    <div class="px-2 tab-pane fade show active" id="stored_products">

                        {{-- Toggle Search Method --}}
                        @if ($has_product_barcodes)
                            <div class="mb-3 d-flex justify-content-start">
                                <div class="px-2 py-2 mb-2 ml-2 bg-white rounded-lg shadow-sm switch_card d-flex align-items-center justify-content-between">

                                    <label class="m-0 switch switch_label">
                                        <input type="checkbox" id="barcode_status" onchange="displayBarcodeReader()">
                                        <span class="specific_slider slider round"></span>
                                    </label>

                                    <p class="mb-0 ml-3 harsi-color" style="font-weight: 600;">
                                        {{ __('entity_forms')['orders']['barcode_reader'] }}
                                    </p>

                                </div>
                            </div>
                        @endif

                        {{-- Método: Buscador --}}
                        <div class="px-3 row justify-content-center" id="search_method_section">

                            {{-- Buscador --}}
                            <div class="mb-2 col-12">
                                <div class="form-group">
                                    <label for="articulo">
                                        {{ __('entity_forms')['orders']['search_product'] }}
                                    </label>

                                    <div class="search-container">
                                        <input type="text" id="search_bar"
                                            class="form-control search-input" data-live-search="true" value=""
                                            placeholder="{{ __('entity_forms')['common']['search'] }}">
                                        <i class="fas fa-search search-icon"></i>
                                    </div>
                                </div>
                            </div>

                            {{-- Producto --}}
                            <div class="pr-0 col-4">
                                <div class="form-group">
                                    <label for="articulo">
                                        {{ __('entity_fields')['order']['item'] }}
                                    </label>

                                    <select id="select_product" class="form-control selectpicker" data-live-search="true">
                                        <option value="" disabled selected>-- -- --</option>
                                    </select>

                                    <input type="hidden" id="selected_product_name" class="form-control">
                                    <input type="hidden" id="selected_product_category" class="form-control">
                                </div>
                            </div>

                            @if ($has_discounts)
                                {{-- Discount --}}
                                <div class="pr-0 col-2" id="discount_product_section">
                                    <div class="form-group">
                                        <label for="selected_product_discount">
                                            {{ __('entity_fields')['common']['discount'] }} %
                                        </label>
                                        <input type="number" id="selected_product_discount"
                                            class="form-control" step="0.01" min="0"
                                            placeholder="0%"
                                            onkeydown="return event.key !== '-'"
                                            onchange="redondearDecimales('selected_product_discount');"
                                            onblur="calculateProductDiscount();"
                                        >
                                    </div>
                                </div>
                            @endif

                            {{-- Precio --}}
                            <div class="pr-0 col">
                                <div class="form-group">
                                    <label for="selected_product_price">
                                        {{ __('entity_fields')['common']['price'] }}
                                    </label>

                                    <input type="number" id="selected_product_price" disabled
                                        class="form-control disabled-fields"
                                        step="0.01" placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"
                                    >

                                    <input type="hidden" id="selected_product_original_price" name="selected_product_original_price">
                                </div>
                            </div>

                            {{-- Cantidad --}}
                            <div class="pr-1 col">
                                <div class="form-group">
                                    <label for="selected_product_quantity">
                                        {{ __('entity_fields')['order']['quantity'] }}
                                    </label>

                                    <input type="number" id="selected_product_quantity"
                                        class="form-control"
                                        min="1" max="9" step="1" value="1">
                                </div>
                            </div>

                            {{-- Button --}}
                            <div class="text-center col-2" style="margin-top:30px">
                                <button type="button" id="save_selected_product" class="btn btn-secondary">
                                    {{ __('common_actions')['add'] }}
                                </button>
                            </div>

                        </div>

                        {{-- Método: Lector de Barras --}}
                        <div class="px-3 row justify-content-center" id="reader_method_section">
                            <div class="mb-2 col-12">
                                <div class="form-group">
                                    <label for="barcode_reader">
                                        {{ __('entity_forms')['orders']['search_product'] }}
                                    </label>

                                    <div class="mb-2 search-container">
                                        <input type="text" id="barcode_reader"
                                            class="form-control search-input" value=""
                                            placeholder="{{ __('entity_forms')['orders']['search_by_code'] }}">
                                        <i class="fas fa-barcode search-icon"></i>
                                    </div>

                                    <small class="pl-3 text-center" style="color:#0d6889; font-weight: 500">
                                        <i class="pr-1 fas fa-info-circle"></i>
                                        {{ __('entity_forms')['product']['barcode_indications'] }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Productos Extras --}}
                    <div class="tab-pane fade row" id="extra_products">
                        <div class="px-5 row justify-content-center">

                            {{-- Producto --}}
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="articulo">
                                        {{ __('entity_forms')['orders']['extra_product_label'] }}
                                    </label>

                                    <input type="text" id="extra_product_name"
                                        class="form-control"
                                        placeholder="{{ __('entity_forms')['orders']['extra_product'] }}">
                                </div>
                            </div>

                            {{-- Precio --}}
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="extra_product_price">
                                        {{ __('entity_fields')['common']['price'] }}
                                    </label>
                                    <input type="number" id="extra_product_price"
                                        class="form-control" step="0.01"
                                        placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"
                                        onkeydown="return event.key !== '-'"
                                        onchange="redondearDecimales('extra_product_price')"
                                    >
                                </div>
                            </div>

                            {{-- Cantidad --}}
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="extra_product_quantity">
                                        {{ __('entity_fields')['order']['quantity'] }}
                                    </label>

                                    <input type="number" id="extra_product_quantity"
                                        class="form-control"
                                        min="1" max="9" step="1" value="1">
                                </div>
                            </div>

                            {{-- Button --}}
                            <div class="col" style="margin-top:30px">
                                <button type="button" id="save_extra_product" class="btn btn-secondary btn-block">
                                    {{ __('common_actions')['add'] }}
                                </button>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>

        {{-- Resumen de Comandas --}}
        <div class="custom-card border-success">
            <div class="card-body">

                {{-- Title --}}
                <h5 class="mt-1 mb-4 section-title bottom-divisor">{{ __('entity_forms')['orders']['summary_section'] }}</h5>

                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover table-light">

                        {{-- Header --}}
                        <thead class="table-success">
                            <th width="14%">{{ __('entity_fields')['common']['actions'] }}</th>
                            <th>{{ __('entity_fields')['order']['item'] }}</th>
                            <th>{{ __('entity_fields')['order']['quantity'] }}</th>
                            <th>{{ __('entity_forms')['orders']['unit_price'] }}</th>
                            <th>{{ __('entity_fields')['order']['subtotal'] }}</th>
                        </thead>

                        {{-- Footer --}}
                        <tfoot>
                            <th colspan="4" class="text-right">
                                {{ __('entity_fields')['order']['subtotal'] }}
                            </th>
                            <th class="text-center">
                                <h2 id="visual_total">0.00</h2>
                            </th>
                        </tfoot>

                        {{-- Body --}}
                        <tbody id="order-table-body"></tbody>

                    </table>
                </div>
            </div>
        </div>

    </div>

    {{-- Payment Control --}}
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6" style="padding-left: 0px">
        <div class="mt-2 custom-card border-dark">
            <div class="card-body">

                {{-- Title --}}
                    <h5 class="mt-1 mb-4 text-center section-title bottom-divisor">
                        {{ __('entity_forms')['orders']['payment_section'] }}
                    </h5>

                {{-- Descuento --}}
                @if ($has_discounts)
                    <div id="discount_section">

                        {{-- % de Descuento --}}
                        <div class="form-group">
                            <label class="pb-0 mb-0" for="discount_percentage">
                                {{ __('entity_fields')['common']['discount'] }} (%)
                            </label>
                            <input type="number" id="discount_percentage" name="discount_percentage" required
                                class="form-control" style="margin-top:5px;font-weight: bold;"
                                placeholder="0%" autocomplete="off" min="0" step="0.01"
                                onkeydown="return event.key !== '-'"
                                onchange="redondearDecimales('discount_percentage');"
                                onblur="calculateDiscount()"
                            >
                        </div>

                        {{-- Descuento $ --}}
                        <div class="form-group">
                            <label class="pb-0 mb-0" for="discount">
                                {{ __('entity_fields')['common']['discount'] }} ({{ session('currency.symbol', '$') }})
                            </label>
                            <input type="number" id="discount" name="discount" readonly required
                                class="form-control" style="margin-top:5px;font-weight: bold;"
                                placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}" autocomplete="off" >
                        </div>

                    </div>
                @endif

                {{-- Total --}}
                <div class="form-group">
                    <label class="pb-0 mb-0" for="total_orden">
                        {{ __('entity_fields')['order']['total'] }}
                    </label>

                    <input type="number" id="total_orden_illusory" name="total_orden_illusory" readonly required
                        class="form-control" style="margin-top:5px;font-weight: bold;"
                        placeholder="{{ __('entity_fields')['order']['total'] }}" autocomplete="off" >

                    <input type="hidden" id="total_orden" name="total_orden">
                </div>

                {{-- Pago --}}
                <div class="form-group">
                    <label class="pb-0 mb-0" for="pago">{{ __('entity_fields')['order']['payment'] }}</label>

                    <input type="number" id="pago_recibido" name="pago" required
                        class="form-control" style="margin-top:5px;"
                        placeholder="{{ __('entity_fields')['order']['payment'] }}"
                        step="0.01" autocomplete="off"
                        onchange="redondearDecimales('pago_recibido')">
                </div>

                {{-- Cambio --}}
                <div class="form-group">
                    <label class="pb-0 mb-0" for="cambio">{{ __('entity_fields')['order']['change'] }}</label>

                    <input type="number" id="payback" name="cambio" readonly required
                        class="form-control" style="margin-top:5px;"
                        placeholder="{{ __('entity_fields')['order']['change'] }}"
                        autocomplete="off">
                </div>

                {{-- Button --}}
                <div class="col-md-12" align="center" id="save_order_section">
                    <div class="form-group">
                        <button class="btn form-control" id="save_order" style="background-color: #0d6889 !important; color: #ffffff !important;" type="submit">
                            {{ __('common_actions')['save'] }}
                        </button>
                    </div>
                </div>

                {{-- Warning --}}
                <div class="col-md-12" align="center" id="refuse_payment">
                    <p style="font-weight: bold; color:#bb2533; text-transform: uppercase">
                        {{ __('entity_forms')['orders']['underpayment'] }}
                    </p>
                </div>

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

</div>
