{% extends 'base.html.twig' %}
{% set titleName = "Home" %}
{% block title %} POWER DATA {% endblock %}
{% block page %}{{titleName}}{% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{titleName}} {% endif %} {% endblock %}


{% block css %}
    <style>
        #contentHeaderBase{
            display: none;
        }
    </style>
{% endblock %}
{% block content %}
    <style>
        .null {
            width: 0 !important;
            padding: 0 !important;
            color: transparent !important;
        }
        .compteurProduct {
            font-size: 27px;
            font-weight: bold;
            color: white !important;
        }
        .blockEdit{
            pointer-events: none;
            background: rgb(213, 217, 221);
        }

        .borderFirst{
            border: 3px solid var(--green)!important;
        }
        .btn_round {
            color: black;
            width: 35px;
            height: 35px;
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            line-height: 35px;
            margin-left: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .btn_round_add:hover {
            color: #fff;
            background: #28a745;
            border: 1px solid #28a745;
        }
        .btn_round_delete:hover {
            color: #fff;
            background: #dc3545;
            border: 1px solid #dc3545;
        }

        .btn_content_outer {
            display: inline-block;
            width: 85%;
        }
        .close_c_btn {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 10px;
            top: 0px;
            line-height: 30px;
            border-radius: 50%;
            background: #ededed;
            border: 1px solid #ccc;
            color: #ff5c5c;
            text-align: center;
            cursor: pointer;
        }

        .add_icon {
            padding: 10px;
            border: 1px dashed #aaa;
            display: inline-block;
            border-radius: 50%;
            margin-right: 10px;
        }
        .add_group_btn {
            display: flex;
        }
        .add_group_btn i {
            font-size: 32px;
            display: inline-block;
            margin-right: 10px;
        }

        .add_group_btn span {
            margin-top: 8px;
        }
        .add_group_btn,
        .clone_sub_task {
            cursor: pointer;
        }

        .sub_task_append_area .custom_square {
            cursor: move;
        }

        .del_btn_d {
            display: inline-block;
            position: absolute;
            right: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
        }
    </style>
    <style>
        .bg-aramex{
            background: #dc3d24;
            color: white;
        }
        .bg-first{
            background: #00ad47;
            color: #fff;
        }
    </style>
    <section class="content">
        <div class="container-fluid">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <h1>   test </h1>

            <div class="form-group">
                <label>Date masks:</label>
                <div class="input-group">
                    <input type="text" class="form-control openscanner  "   inputmode="numeric" id="testqrcode">
                    <div class="input-group-prepend openscanner">
                        <span class="input-group-text">
                            <i class="fa fa-qrcode"></i></span>
                    </div>
                </div>
                <!-- /.input group -->
            </div>
            <button id="btncloseqrcode"> close </button>

            <hr>
            <fieldset id="productData"  class="form-group  border p-3">
                <legend class="w-auto px-2">Product Data</legend>
                <div class="linesProduct" id="linesProduct" >
                    <div class="form-row oneLineProduct " data-id="1" id="oneLineProduct-1" data-validated="false" >
                        <div class="form-group col-12 col-md-4">
                            <label for="role" >Barcode</label>
                            <div class="input-group">
                            <input class="form-control "  type="text" name="barcode-1" inputmode="numeric" id="barcode-1" required>
                            <div class="input-group-prepend openscanner" data-id="1" >
                            <span class="input-group-text">
                            <i class="fa fa-qrcode"></i></span>
                            </div>
                            </div>
                        </div>
                        <div class="form-group col-12 col-md-3">
                            <label for="role" >Emplacement</label>
                            <input class="form-control "  type="text" name="price-1" id="price-1" step="any" required >
                        </div>
                        <div class="form-group col-12 col-md-3">
                            <label for="role" >Qty</label>
                            <input class="form-control"  type="number" name="qty-1" id="qty-1" required>
                        </div>
                        <div class="form-group col-md-2 add_del_btn_outer" style="display: flex;place-items: flex-end;">
                            <a   data-id="1"  class="btn_round btn-success compteurProduct" id="compteur-1" >
                                1
                            </a>
                            <a  id="btnAdd-1" data-id="1"   class="btn_round btn_round_add add_node_btn_frm_field" title="Copy or clone this row">
                                <i class="fas fa-plus"></i>
                            </a>
                            <!--
                            <button  data-id="1"  class="btn_round btn_round_delete removeLine" >
                                <i class="fas fa-trash-alt"></i>
                            </button>
                            -->
                        </div>
                    </div>

                </div>
            </fieldset>


        </div>
    </section>

    <div class="modal fade" id="modal-scanner">
        <div class="modal-dialog">
            <div class="modal-content">
                <div style="width: 250px" id="reader"></div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


{% endblock %}

{% block script %}
    <script src="{{ asset('assets/js/qrcode/html5-qrcode.min.js') }}"></script>
    <script>

        $(document).on('click', '.btn_round_add', function(event){
            rowData = $(this);
            var currentId = rowData.attr("data-id");
            var nextId = currentId + 1 ;
            var barcode =  $('#barcode-'+currentId).val().replace(' ','').trim();
            var qty =  $('#qty-'+currentId).val();
            if (barcode.length < 13){
                toastr.error('Please check Barcode');
            }
            if(qty > 0 ){
                var numberOfLines = $('.btn_round_add').length
                $('#barcodeSearchData').val(barcode);
                $('#oneLineProduct-'+currentId).attr('data-validated', true);
                $('#price-'+currentId).val(20);
                $('#btnAdd-'+currentId).hide();
                $('#checkValidation').show();
                $('#create_order_submit').hide();
                $('#linesProduct').append('data.template');
            }else {
                toastr.error('Please check Quantity');
            }

        });
        $(document).on('click', '.removeLine', function(event){
            rowData = $(this);
            var currentId = rowData.attr("data-id");
            $('#oneLineProduct-'+currentId).remove();
            var idLastLine =  $('#linesProduct .oneLineProduct:last-child').attr("data-id");
            $('#btnAdd-'+idLastLine).show();

            if($('#oneLineProduct-'+idLastLine).attr('data-validated') === "true"){
                $('#create_order_submit').show();
                $('#checkValidation').hide();
            }


        });




        var html5QrcodeScanner = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: {width: 250, height: 250} },
            /* verbose= */ false);

        function onScanSuccess(decodedText, decodedResult) {
            // Handle on success condition with the decoded text or result.
            console.log(`Scan result: ${decodedText}`, decodedResult);
            $('#testqrcode').val(decodedText);
          //  html5QrcodeScanner.clear();
        }

        function onScanFailure(error) {
            // handle scan failure, usually better to ignore and keep scanning.
            // for example:
            console.warn(`Code scan error = ${error}`);
        }


        $(document).on('click', '.openscanner', function (event) {
            html5QrcodeScanner.render(onScanSuccess);
            //modal-scanner
            $('#modal-scanner').modal('show');
        });
        $(document).on('click', '#btncloseqrcode', function (event) {
            html5QrcodeScanner.clear();

        });

    </script>
{% endblock %}