{% extends 'base_admin.html.twig' %}
{# {% form_theme form 'bootstrap_4_layout.html.twig' %} #}
{% block stylesheets %}
<style>
    th, td {
        padding: 0.2rem !important;
    }
    #orderIdTableBody td {
        padding: 0.3rem !important;
    }
    #orderIdTableBody td input[type=checkbox] {
        transform: scale(2.1);
        margin-top: 4%;
    }
    #operatorAssign{
        margin-bottom: 1px;
    }
    td > a {
    font-size: .7rem !important;
    }

    .checkbox-number {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #productNotFound{
       border: none;
       outline: none;
       font-weight: bold;
       color: red;
       text-align: center;
    }

    .background-green{
        background: #E3F8E0;
    }

   .client-service {
        display: flex;
        gap: 1rem;
        align-items: center;
   }

   .client-service h6 {
    font-size: 2rem;
    margin: 0;
  }

  .client-service h6::before {
    content: "|";
    margin-right: 0.5rem;
  }

    #photoProduct.modal.fade.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #img01 {
        object-fit: contain;
        max-width: 50%; /* Puedes ajustar este valor según lo necesites */
        max-height: 50%; /* Puedes ajustar este valor según lo necesites */
    }

    .modal-no-photo {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

</style>
{% endblock stylesheets %}
{% block body %}
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item active">{{ title }}</li>
            </ul>
        </div>
    </div>
    <br/>


    <div class="container-fluid">
        {% if is_granted('lots_list') %}
        <!-- Select to set operator -->
<select class="form-control form-control-sm d-none" id="operatorAssign">
    <option value="">Select operator</option>
</select>

<select class="form-control form-control-sm d-none" id="sellerGenerate">
    <option value="">Select seller</option>
</select>

<select class="form-control form-control-sm d-none cloned-select" id="packagingAssign">
    <option value="">Select packaging</option>
</select>

        <div class="card" id="cardLotAssign">
            <div class="card-header d-flex align-items-center p-2">
                <h4>{{ title }}</h4>
                <a class="btn btn-primary text-white ml-auto" id="viewLotsInformation">
                    <span class="fa fa-eye"></span> View Lots Information
                </a>
                <a class="btn btn-primary text-white" id="reportByTime" style="margin-left: 5px;">Report By time</a>
                {% if is_granted('lot_generate') %}
                    <a href="#" id="generateLotsButton" class="btn btn-primary" style="margin-left: 5px;">
                        <span class="fa fa-plus"></span> Generate Lots
                    </a>
                {% endif %}
            </div>
            <div class="card-body" id="lotsNotAssign">
            </div>
        </div>
        {% endif %}
        {% if is_granted('lots_assign_list') %}
        <div class="card">
            <div class="card-header d-flex align-items-center p-2">
                <h4>My assigned lots</h4>
            </div>
            <div class="card-body" id="lotsAssign">
            </div>
        </div>
        {% endif %}
    </div>
    {# <div class="card"> #}
    {# <div class="card-header d-flex align-items-center"> #}
    {# <h4>Order shipment list</h4> #}
    {# </div> #}
    {# <div class="card-body" id="orderShipmentContainer"> #}
    {# Please select one import #}
    {# </div> #}
    {# </div> #}
    {# </div> #}

    {# Modales para la aplicaci贸n. #}
    <div class="modal fade " id="orderIdModal" tabindex="-1" role="dialog" aria-labelledby="selectCourierModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 98%;margin: 0.5% 1%;">
            <div class="modal-content" style="height: 100vh;">
                <div class="modal-header">
                <div class="row">
                    <div class="col-md-8">
                        <h1 class="modal-title" id="orderReference" style="font-size: 5rem;"></h1>
                        <div class="client-service">
                        <h6  style="font-size: 2rem;" >Cliente:  <b id="clientReference"></b></h6>
                        <h6  style="font-size: 2rem;" >Service:  <b id="serviceReference"></b></h6>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="float-right" style="display: flex; align-items: center;">
                            <span id="timer" style="font-size: 2rem; margin-right: 20px;">00:00:00</span>
                            <button type="button" class="fa fa-play" id="startTimer"></button>
                        </div>
                        <h5  style="font-size: 3.7rem;float: right;">Lote <b id="loteReference"></b></h5>
                        <h5  style="font-size: 3.7rem;text-align: right">Shipment <b id="shipmentId"></b></h5>
                    </div>
                </div>
                </div>
                <div class="modal-body" id="orderIdModalContainer" style="max-height: 60vh;overflow: auto;">
                    <div id="packSupply"></div>
                    </br>
                    <div class="table-responsive" style="max-height: 60vh;">
                        <table class="table table-hover table-bordered" id="orderIdTable">
                            <thead>
                            <th class="text-center">check</th>
                            <th class="text-center">Reference</th>
                            <th class="text-center">Name</th>
                            <th id="quantityOrderIdModal" class="text-center">Quantity</th>
                            <th id="products" class="text-center d-none">Product</th>
                            </thead>
                            <tbody id="orderIdTableBody">
                            </tbody>
                        </table>
                    </div>
                    <div id="boxInfoContainer"></div>
                </div>
                <div class="modal-footer" id="">
                <input type="text" id="productNotFound" disabled style="margin-right: -10px; width: 20%;">
                <input type="text" id="validate-barcode" class="d-none">
                <button type="button" class="btn btn-lg btn-default float-left" id="btCloseProcess">Exit</button>
                <button type="button" class="btn btn-lg btn-default float-left d-none" id="btPrevious" value="0">Previous</button>
                <button type="button" class="btn btn-lg btn-success float-right" id="btOrderIdTable">Next</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="photoProduct" tabindex="-1" role="dialog" aria-labelledby="selectCourierModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 98%; margin: 0.5% 1%;">
            <div class="modal-content" style="height: 100vh; display: flex; flex-direction: column; justify-content: center;">
                <div class="modal-body" style="display: flex; justify-content: center; align-items: center; height: 100%;">
                    <img class="img-fluid" id="img01" data-base-url="{{ asset('products/') }}" style="max-width: 80%; max-height: 80%; margin: 0 auto;" src="">
                    <div class="modal-no-photo" style="text-align: center; display: none;">The product does not have an image assigned</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-lg btn-default float-left" id="btClosePhoto">Exit</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="selectSellerModal" tabindex="-1" role="dialog" aria-labelledby="selectSellerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 50%; margin: 5% auto;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="selectSellerModalLabel">Select Seller for Generate Lots</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div id="sellerSelectContainer">
                        <!-- Placeholder for your select dropdown -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="sendGenerateButton">Send</button>
                <!-- Your "Send" button can be added here if needed -->
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="pickingModal" tabindex="-1" role="dialog" aria-labelledby="selectCourierModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 98%; margin: 0.5% 1%;">
        <div class="modal-content" style="height: 100vh;">
            <div class="modal-header">
                <div class="row w-100">
                    <div class="col-md-8 d-flex align-items-center">
                        <h1 class="modal-title" style="font-size: 5rem;">Picking List</h1>
                    </div>
                    <div class="col-md-4 d-flex justify-content-end align-items-center">
                        <span id="timer2" style="font-size: 2rem; margin-right: 20px;">00:00:00</span>
                        <button type="button" class="fa fa-play" id="startTimer2"></button>
                    </div>
                </div>
            </div>
            <div class="modal-body" id="pickingModalContainer" style="max-height: 60vh; overflow: auto;">
                <div class="table-responsive" style="max-height: 60vh;">
                    <table class="table table-hover table-bordered" id="orderIdTable">
                        <thead>
                            <tr>
                                <th class="text-center">Sku</th>
                                <th class="text-center">Name</th>
                                <th class="text-center">Location 1</th>
                                <th class="text-center">Location 2</th>
                                <th class="text-center">Location 3</th>
                                <th class="text-center">Quantity</th>
                            </tr>
                        </thead>
                        <tbody id="pickingTableBody">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-lg btn-success float-left" id="btOpenPacking">Continue Packing</button>
                <button type="button" class="btn btn-lg btn-default float-left" id="btCloseProcess2">Exit</button>
            </div>
        </div>
    </div>
</div>

   <div class="modal fade " id="reportByTimeModal" tabindex="-1" role="dialog" aria-labelledby="selectCourierModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                        <h1 class="modal-title">Export Report By Time</h1>
                </div>
                <div class="modal-body" id="exportReportByTimeModalContainer" style="height: 65vh; overflow: auto;">
                <div class="row">
                    <div class="col-md-6">
                        <label for="operatorListReport">Select Operator</label>
                        <br>
                        <div id="operatorListReport" data-key="operatorListReport">
                        </div>
                    </div>
                    <div  class="col-md-6">
                        <label for="frequency">Select frequency</label>
                    <br>
                    <select class="form-control form-control-sm" id="frequency">
                        <option value="">Select Frequency</option>
                        <option value="Daily">Daily</option>
                        <option value="Monthly">Monthly</option>
                        <option value="Yearly">Yearly</option>
                    </select>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                    <div class="form-group">
                            <label for="dateStartReport">Select date end</label>
                                <div class="input-group date" id="datetimepicker1"
                                data-target-input="nearest">
                                    <input type="text" id="dateStartReport" class="form-control form-control-sm">
                                    <div class="input-group-append"
                                    data-target="#datetimepicker1" data-toggle="datetimepicker">
                                        <div class="input-group-text">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div  class="col-md-6">
                           <div class="form-group">
                            <label for="dateEndReport">Select date end</label>
                                <div class="input-group date" id="datetimepicker2"
                                data-target-input="nearest">
                                    <input type="text" id="dateEndReport" class="form-control form-control-sm">
                                    <div class="input-group-append"
                                    data-target="#datetimepicker2" data-toggle="datetimepicker">
                                        <div class="input-group-text">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
        </div>
        <div class="modal-footer">
                <button type="button" class="btn btn-success float-right" id="btConfirmReport" value="reportByTime">Confirm</button>
                <button type="button" class="btn btn-secondary float-left" id="btExit">Exit</button>
        </div>
    </div>
   </div>
  </div>

     <div class="modal fade " id="orderIdInformationModal" tabindex="-1" role="dialog" aria-labelledby="selectCourierModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document" >
            <div class="modal-content">
                <div class="modal-header">
                     <h1 class="modal-title" id="orderInformationReference">Consult order preparation</h1>
                </div>
                <div class="modal-body" id="orderIdModalContainer">
                <div id="searchInformationLotOrder">
                <label for="orderId">Order Id:</label>
                <input type="text" id="orderId" name="orderId" required size="20">
                <button type="button" class="btn btn-primary float-right" id="searchInformationLotOrder">Search</button>
                <br>
                </div>
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered" id="orderIdInformationTable">
                            <thead>
                            </thead>
                            <tbody id="orderIdInformationTableBody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-default float-left" id="btCloseSearchProcess">Exit</button>
                </div>
            </div>
        </div>
    </div>

    {# Fin de modales #}

        <div class="js-routes" data-lots-list-route="{{ path('lots_list') }}" data-lots-assign-list-route="{{ path('lots_assign_list') }}" data-export-lots-route="{{ path('export_lot_data') }}"
        class="js-routes" data-get-lots-orders-route="{{ path('lot_orders') }}" class="js-routes" data-get-product-orders-route="{{ path('get_product_orders') }}"
        data-export-tags="{{ path('export_imported') }}" data-create-picking-order-route="{{ path('create_picking_order') }}" data-export-tags="{{ path('export_imported') }}"
        data-update-date-end-picking-lot-route="{{ path('update_date_end_picking_lot') }}" data-operator-list-route="{{ path('operator_list') }}"  data-create-picking-lot-route="{{ path('create_picking_lot') }}"
        data-search-sequence-route="{{ path('search_sequence') }}" data-export-trackings-tags-route="{{ path('export_tracking_tags', {id:0}) }}" data-packaging-list-route="{{ path('lots_packaging_option_list') }}"
        data-seller-list-route="{{ path('seller_list') }}"  data-lot-orders-information-route="{{ path('lot_orders_information') }}" data-get-picking-route="{{ path('get_picking_lot') }}">

    {#    </div> #}
{% endblock %}

{% block javascripts %}
        <script src="{{ asset('js/app/lot/index-v31.js') }}"></script>
{% endblock javascripts %}