{% extends 'admin_base.html.twig' %}


{% block body %}
    <style>
        #text{
            font-size : 15px;
            color: #000000;
        }
        #text:hover{
            font-size : 15px;
            color: #0a6aa1;
        }
        ul, #myUL {
            list-style-type: none;

        }

        #myUL {
            margin-bottom : 100px;
            padding: 0;
        }

        .caret {
            cursor: pointer;
            -webkit-user-select: none; /* Safari 3.1+ */
            -moz-user-select: none; /* Firefox 2+ */
            -ms-user-select: none; /* IE 10+ */
            user-select: none;
        }

        .caret::before {

        }

        .caret-down::before {
            -ms-transform: rotate(90deg); /* IE 9 */
            -webkit-transform: rotate(90deg); /* Safari */'
        transform: rotate(90deg);
        }

        .nested {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">

            <div class="card card-custom gutter-b">
                <!--begin::Header-->
                <div class="card-header border-0 py-5" >

                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label font-weight-bolder text-dark">Liste des prix de Client : {{ client.getTradingCode() }}</span>
                        <span class="text-muted mt-3 font-weight-bold font-size-sm"></span>
                    </h3>
                    <div class="card-toolbar">
                        <a href="{{ path("admin.prices.print",{"token" : client.getSgToken()}) }}" class="btn btn-light-primary font-weight-bolder font-size-sm" style="margin-right: 3px;">Ajouter</a>

                        <div class="input-icon" style="margin-right: 10px;">
                            <input type="text" id="myInput" class="form-control form-control-solid" placeholder="Search..." >
                            <span><i class="flaticon2-search-1 text-muted"></i></span>
                        </div>

                    </div>
                </div>
                <!--end::Header-->

                <!--begin::Body-->


                <!--begin::Table-->
                <div class="card-body py-0">
                    <!--begin::Table-->
                    <div class="table-responsive" id="products">
                        <table class="table table-head-custom table-vertical-center" id="kt_advance_table_widget_4">
                            <thead>
                            <tr class="text-left">

                                <th class="pl-0" style="min-width: 170px">Code Variante </th>
                                <th class="pl-0" style="min-width: 170px">Designation</th>

                                <th class="pl-0" style="min-width: 50px">Prix Unitaire</th>
                                
                                <th class="pl-0" style="min-width: 50px">Prix Remise</th>
                                
                                <th class="pl-0" style="min-width: 50px">Prix Client</th>
                                
                                <th class="pl-0" style="min-width: 50px">Marge</th>
                                
                                <th class="pr-0 text-right" style="min-width: 100px">Action</th>
                            </tr>
                            </thead>
                            <tbody id="myTable">

                            {% for c in prices %}
                                <tr>
                                    <td class="pl-0">
                                        <a href="{{ path("admin.variants.edit",{"token":c.getVariant().sg_token}) }}" class="text-dark-75 font-weight-bolder text-hover-primary font-size-lg"> {{ " this this1 this2"|replace({'this':  c.getVariant().getSKU()|slice(0, 2), 'this1':  c.getVariant().getSKU()|slice(2, 3),'this2' :  c.getVariant().getSKU()|slice(5, 3)}) }}   </a>
                                    </td>
                                    <td class="pl-0">
                                        <a href="{{ path("admin.variants.edit",{"token":c.getVariant().sg_token}) }}" class="text-dark font-weight-bolder text-hover-primary mb-1 font-size-lg">{{ c.getVariant().getProduct().name }}</a>
                                        <span class="text-muted font-weight-bold d-block">
                                            {% for o in c.getVariant().getOptions() %}
                                                {{ o.getValue() }},
                                            {% endfor %}
                                        </span>
                                    </td>


                                    <td class="pl-0">
                                        {{ c.getVariant().getUnitPrice}}€
                                    </td>


                                    <td class="pl-0">
                                        {{ c.getVariant().getVirtualFinalPrice }}€
                                    </td>

                                    <td class="pl-0">
                                      <span id="{{ c.sg_token}}p1"> {{ c.getPrice() }}</span>
                                        <input style="display: none;" type="number" id="{{ c.sg_token}}p2" class="form-control" value="{{ c.getPrice() }}">

                                    </td>

                                    <td class="pl-0">
                                        {{ c.getPrice()-c.getVariant().getBuyPrice()}}€
                                    </td>



                                    <td class="pr-0 text-right" id="{{ c.sg_token}}2" style="display: none;">
                                        <a  href="javascript:;" onclick="f({{ c.sg_token|json_encode }})" class="btn btn-icon btn-light btn-hover-primary btn-sm mx-3">
                                            <span class="svg-icon svg-icon-md svg-icon-primary"><!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Write.svg-->
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect x="0" y="0" width="24" height="24"/>
        <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
        <path d="M16.7689447,7.81768175 C17.1457787,7.41393107 17.7785676,7.39211077 18.1823183,7.76894473 C18.5860689,8.1457787 18.6078892,8.77856757 18.2310553,9.18231825 L11.2310553,16.6823183 C10.8654446,17.0740439 10.2560456,17.107974 9.84920863,16.7592566 L6.34920863,13.7592566 C5.92988278,13.3998345 5.88132125,12.7685345 6.2407434,12.3492086 C6.60016555,11.9298828 7.23146553,11.8813212 7.65079137,12.2407434 L10.4229928,14.616916 L16.7689447,7.81768175 Z" fill="#000000" fill-rule="nonzero"/>
    </g>
</svg><!--end::Svg Icon-->
                                            </span>
                                        </a>
                                    </td>
                                        <td class="pr-0 text-right" id="{{ c.sg_token}}1" >
                                        <a  href="javascript:;" onclick="show({{ c.sg_token|json_encode }})" class="btn btn-icon btn-light btn-hover-primary btn-sm mx-3">
                                            <span class="svg-icon svg-icon-md svg-icon-primary"><!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Write.svg-->
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                        <rect x="0" y="0" width="24" height="24"/>
                                                        <path d="M12.2674799,18.2323597 L12.0084872,5.45852451 C12.0004303,5.06114792 12.1504154,4.6768183 12.4255037,4.38993949 L15.0030167,1.70195304 L17.5910752,4.40093695 C17.8599071,4.6812911 18.0095067,5.05499603 18.0083938,5.44341307 L17.9718262,18.2062508 C17.9694575,19.0329966 17.2985816,19.701953 16.4718324,19.701953 L13.7671717,19.701953 C12.9505952,19.701953 12.2840328,19.0487684 12.2674799,18.2323597 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.701953, 10.701953) rotate(-135.000000) translate(-14.701953, -10.701953) "/>
                                                        <path d="M12.9,2 C13.4522847,2 13.9,2.44771525 13.9,3 C13.9,3.55228475 13.4522847,4 12.9,4 L6,4 C4.8954305,4 4,4.8954305 4,6 L4,18 C4,19.1045695 4.8954305,20 6,20 L18,20 C19.1045695,20 20,19.1045695 20,18 L20,13 C20,12.4477153 20.4477153,12 21,12 C21.5522847,12 22,12.4477153 22,13 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L12.9,2 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                    </g>
                                                </svg><!--end::Svg Icon-->
                                            </span>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                       
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div class="d-flex flex-wrap py-2 mr-3">
                                <a href="javascript:;"
                                   onclick="pro( 0,{{ limit|json_encode }},{{ client.sg_token|json_encode }})"
                                   class="{{ start ==0 ? "btn btn-icon btn-sm btn-light mr-2 my-1 disabled": "btn btn-icon btn-sm btn-light mr-2 my-1" }}"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>

                                <a href="javascript:;"
                                   onclick="pro( {{ start|json_encode }} - {{ limit|json_encode }},{{ limit|json_encode }},{{ client.sg_token|json_encode }})"
                                   class="{{ start ==0 ? "btn btn-icon btn-sm btn-light mr-2 my-1 disabled": "btn btn-icon btn-sm btn-light mr-2 my-1" }}"> <i class="ki ki-bold-arrow-back icon-xs"></i></a>

                                {% set np = total/limit %}
                                {%  for i in range(1,np|number_format ) %}
                                    <a href="javascript:;" onclick="pro( {{ limit*(i-1)|json_encode }},{{ limit|json_encode }},{{ client.sg_token|json_encode }})" class="{{ start==limit*(i-1) ? "btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1" :"btn btn-icon btn-sm border-0 btn-light mr-2 my-1" }}">{{ i }}</a>
                                {% endfor %}

                                {% set foo = start + limit %}
                                <a href="javascript:;" onclick="pro( {{ foo|json_encode }},{{ limit|json_encode }},{{ client.sg_token|json_encode }})" class="{{start==limit*np|number_format ? "btn btn-icon btn-sm btn-light mr-2 my-1 disabled" : "btn btn-icon btn-sm btn-light mr-2 my-1" }} "><i class="ki ki-bold-arrow-next icon-xs"></i></a>

                                {% set s = limit*np|number_format %}
                                <a href="javascript:;" onclick="pro({{ s|json_encode }},{{ limit|json_encode }},{{ client.sg_token|json_encode }})" class="{{start==limit*np|number_format ? "btn btn-icon btn-sm btn-light mr-2 my-1 disabled" : "btn btn-icon btn-sm btn-light mr-2 my-1" }} "><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
                            </div>
                            <div class="d-flex align-items-center py-3">

                                <span class="text-muted">Affichage de {{ start == 0 ? limit : start+prices|length }} sur {{ total }} </span>
                            </div>
                        </div>

                    </div>
                    <!--end::Table-->
                </div>
                <!--end::Table-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Pagination-->
    </div>
    <!--end::Container-->




{% endblock %}
{% block javascripts %}

    <script type="text/javascript">
        function show(v) {
            document.getElementById(v+"2").style.display="block";
            document.getElementById(v+"1").style.display="none";
            document.getElementById(v+"p1").style.display="none";
            document.getElementById(v+"p2").style.display="block";

        }
        function f(v) {
            var price = document.getElementById(v+"p2").value;
            $.ajax({
                type: "POST",
                url: "{{ path("admin.prices.update") }}",
                data: {
                   token:v,
                    price:price,

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                success: function (Response) {
                    document.getElementById(v+"2").style.display="none";
                    document.getElementById(v+"1").style.display="block";
                    document.getElementById(v+"p1").style.display="block";
                    document.getElementById(v+"p1").innerText=price+"€";
                    document.getElementById(v+"p2").style.display="none";

                }

            });

        }
        function pro(start,limit,v){

            $.ajax({
                type: "POST",
                url: "{{ path("admin.prices.paginate") }}",
                data: {
                    start:start,
                    limit:limit,
                    token: v,
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                success: function (Response) {
                    $("#products").html(Response);

                }
            });
        }
        var toggler = document.getElementsByClassName("caret");
        var i;

        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click", function() {
                this.parentElement.querySelector(".nested").classList.toggle("active");
                this.classList.toggle("caret-down");
            });
        }


    </script>

{% endblock %}