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

{% block title 'Commande client' %}

{% block stylesheet %}

{% endblock %}

{% block body %}
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">
            COMMANDE CLIENT
        </h2>
    </div>
    <!-- BEGIN: Profile Info -->

    <div class="intro-y box px-5 pt-5 mt-5">
        <div class="flex flex-col lg:flex-row border-b border-gray-200 pb-5 -mx-5">
            <div class="flex flex-1 px-5 items-center justify-center lg:justify-start">
                <div class="w-20 h-20 sm:w-24 sm:h-24 flex-none lg:w-32 lg:h-32 image-fit relative">
                    <img alt="" class="rounded-full" src="{{ asset('assets/images/profile-14.jpg') }}">
                    <div class="absolute mb-1 mr-1 flex items-center justify-center bottom-0 right-0 bg-theme-1 rounded-full p-2"> <i class="w-4 h-4 text-white" data-feather="camera"></i> </div>
                </div>
                <div class="ml-5">
                    <div class="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg text-gray-600">{{ customer.name }}</div>
                </div>
            </div>
            <div class="mt-6 lg:mt-0 flex-1 flex items-center justify-center px-5 border-t lg:border-0 border-gray-200 pt-5 lg:pt-0">
                <div class="text-center rounded-md w-20 py-3">
                    <div class="font-semibold text-theme-1 text-lg">{{ customer.orders | length }}</div>
                    <div class="text-gray-600">Commandes</div>
                </div>
                <div class="text-center rounded-md w-20 py-3">
                    <div class="font-semibold text-theme-1 text-lg">{{ customer.orders | filter(o => o.finish == true) | length }}</div>
                    <div class="text-gray-600">Terminés</div>
                </div>
                <div class="text-center rounded-md w-20 py-3">
                    <div class="font-semibold text-theme-1 text-lg">{{ customer.orders | filter(o => o.finish == false) | length }}</div>
                    <div class="text-gray-600">En cours</div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Profile Info -->
    <div class="intro-y tab-content mt-5">
        <div class="tab-content__pane active" id="dashboard">
            <div class="grid grid-cols-12 gap-6">
                <!-- BEGIN: Top Categories -->

                <div class="intro-y box col-span-12 lg:col-span-12 mb-2">

                    <div class="flex items-center p-5 border-b border-gray-200">
                        <h2 class="font-medium text-base mr-auto">
                            COMMANDE
                        </h2>
                    </div>
                    <div class="p-5">
                        <div class="flex items-center p-5 border-b border-gray-200 ">
                            <h2 class="font-medium text-base mr-auto">
                                En cours
                                <hr>
                            </h2>
                        </div>
                        {% for info in customer.orders | filter(o => o.finish == false) %}
                    <div class="tab-content__pane active" id="work-in-progress-new">

                        <div class="accordion">
                            <div class="accordion__pane  border border-gray-200 p-4">
                                <a href="javascript:;" class="accordion__pane__toggle font-medium block">
                                    <div>
                                        <div class="flex">
                                            <div class="text-gray-700 mr-auto">{{ info.product.name }}</div>
                                            <div class="font-medium"></div>
                                        </div>
                                        <div class="w-full h-1 mt-2 bg-gray-400 rounded-full">

                                        </div>
                                    </div>
                                </a>
                                <div class="accordion__pane__content mt-3 text-gray-700 leading-relaxed">
                                    <div class="overflow-x-auto">
                                        <!-- BEGIN: Latest Tasks -->
                                        <div class="intro-y box col-span-12 lg:col-span-6">

                                            <div class="p-5">
                                                <div class="tab-content">

                                                    <div class="tab-content__pane active" id="latest-tasks-new">
                                                        <div class="flex flex-col sm:flex-row">
                                                            <div class="mr-20">
                                                                <div class="flex items-center">
                                                                    <div class="border-l-2 border-theme-1 pl-4">
                                                                        <a href="" class="font-medium">Total commandé</a>
                                                                        <div class="text-gray-600">{{ info.quantity | number_format(0, '.', ' ') }}</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="flex">
                                                                <div class="flex items-center mr-20">
                                                                    <div class="border-l-2 border-theme-1 pl-4">
                                                                        <a href="" class="font-medium">Date de commande</a>
                                                                        <div class="text-gray-600">{{ info.orderAt | date("d/m/Y") }}</div>
                                                                    </div>
                                                                </div>
                                                                {% set w = info.product.weight * info.quantity %}
                                                                <div class="flex items-center mr-20">
                                                                    <div class="border-l-2 border-theme-1 pl-4">
                                                                        <a href="" class="font-medium">Poids (Kg)</a>
                                                                        <div class="text-gray-600">{{ w | number_format(0, '', ' ') }}</div>
                                                                    </div>
                                                                </div>
                                                                {% set total = 0 %}
                                                                <div class="flex items-center ">
                                                                    <div class="border-l-2 border-theme-1 pl-4">
                                                                        <a href="" class="font-medium">Stock</a>
                                                                        <div class="text-gray-600"> {{ info.product.stock }}</div>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200">
                                                <h2 class="font-medium text-base mr-auto">
                                                    Previsions
                                                </h2>
                                                <div class="dropdown relative ml-auto sm:hidden">
                                                    <a class="dropdown-toggle w-5 h-5 block" href="javascript:;"> <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700"></i> </a>
                                                    <div class="nav-tabs dropdown-box mt-5 absolute w-40 top-0 right-0 z-20">
                                                        <div class="dropdown-box__content box p-2"> <a href="javascript:;" data-toggle="tab" data-target="#new" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">New</a> <a href="javascript:;" data-toggle="tab" data-target="#last-week" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">Last Week</a> </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="p-5">
                                            <div class="tab-content">
                                                <div class="tab-content__pane active" id="latest-tasks-new">
                                                    <div class="flex flex-col sm:flex-row">
                                                        <div class="mr-20">
                                                            <div class="flex items-center">
                                                                <div class="border-l-2 border-theme-1 pl-4">
                                                                    <a href="" class="font-medium">CAP Mensuel</a>
                                                                    <div class="text-gray-600">{{ info.product.rate * 31 | number_format(0, '', ' ')}}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mr-20">
                                                            <div class="flex items-center">
                                                                {% set sem = info.product.rate * 31  %}
                                                                <div class="border-l-2 border-theme-1 pl-4">
                                                                    <a href="" class="font-medium">CAP Semestriel</a>
                                                                    <div class="text-gray-600">{{ sem / 4  | number_format(0, '', ' ')}}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex">
                                                            <div class="flex items-center mr-20">
                                                                <div class="border-l-2 border-theme-1 pl-4">
                                                                    <a href="" class="font-medium">Date de production prévue</a>
                                                                    {% set prodat = info.orderAt |date_modify( "+1 day") %}
                                                                    <div class="text-gray-600"> {{ prodat | date("d/m/Y") }}</div>
                                                                </div>
                                                            </div>
                                                            <div class="flex">
                                                                <div class="flex items-center mr-20">
                                                                    <div class="border-l-2 border-theme-1 pl-4">
                                                                        <a href="" class="font-medium">Date de livraison possible</a>
                                                                        <div class="text-gray-600"> {{ prodat |date_modify( "+7 day")| date("d/m/Y") }}</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                        <!-- END: Latest Tasks -->

                                    <div class="col-span-6">
                                        <table class="table">
                                                <thead>
                                                <tr>
                                                    <th class="border-b-2 whitespace-no-wrap">#</th>
                                                    <th class="border-b-2 whitespace-no-wrap">Date</th>
                                                    <th class="border-b-2 whitespace-no-wrap">Semaine</th>
                                                    <th class="border-b-2 whitespace-no-wrap">Quantité produit</th>
                                                    <th class="border-b-2 whitespace-no-wrap">Date de livraison possible</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                        {% for production in info.productions %}

                                            {% set total = total + production.quantity %}
                                                <tr class="bg-gray-200">
                                                    <td class="border-b">#</td>
                                                    <td class="border-b">{{ production.produtedAt | date('d/m/Y')}}</td>
                                                    <td class="border-b">S{{ production.produtedAt | date('W') }}</td>
                                                    <td class="border-b">{{ production.quantity }}</td>
                                                    <td class="border-b">{{ production.produtedAt |date_modify( "+7 day")| date("d/m/Y") }}</td>
                                                </tr>
                                        {% else %}
                                            <tr>
                                                <td colspan="4">Aucune production pour le moment</td>
                                            </tr>
                                        {% endfor %}
                                                </tbody>
                                            </table>
                                            <br>
                                            <div class="w-full sm:w-auto flex mt-4 sm:mt-0">

                                                <a href="javascript:;" data-toggle="modal" data-id="{{ info.id }}" data-target="#delete-modal-preview" class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-9 text-white btn-prod"> <i data-feather="activity" class="w-4 h-4 mr-2"></i>Production</a>
                                               {% if info.quantity <= info.product.stock %}
                                                <a href="javascript:;" data-toggle="modal" data-id="{{ info.id }}"  data-target="#finish-modal-preview" class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-6 text-white btn-finish"> <i data-feather="x-square" class="w-4 h-4 mr-2"></i>Mettre fin</a>
                                            {% endif %}
                                            </div>

                                        </div>


                                    </div>

                                </div>
                            </div>
                        </div>
                            <br>
                        {% endfor %}


                    <div class="flex items-center p-5 border-b border-gray-200 ">
                        <h2 class="font-medium text-base mr-auto">
                            Terminées
                            <hr>
                        </h2>
                    </div>
                    {% for info in customer.orders | filter(o => o.finish == true) %}
                        <div class="tab-content__pane active" id="work-in-progress-new">

                            <div class="accordion">
                                <div class="accordion__pane  border border-gray-200 p-4">
                                    <a href="javascript:;" class="accordion__pane__toggle font-medium block">
                                        <div>
                                            <div class="flex">
                                                <div class="text-gray-700 mr-auto">{{ info.product.name }}</div>
                                                <div class="font-medium"></div>
                                            </div>
                                            <div class="w-full h-1 mt-2 bg-gray-400 rounded-full">

                                            </div>
                                        </div>
                                    </a>
                                    <div class="accordion__pane__content mt-3 text-gray-700 leading-relaxed">
                                        <div class="overflow-x-auto">
                                            <!-- BEGIN: Latest Tasks -->
                                            <div class="intro-y box col-span-12 lg:col-span-6">

                                                <div class="p-5">
                                                    <div class="tab-content">

                                                        <div class="tab-content__pane active" id="latest-tasks-new">
                                                            <div class="flex flex-col sm:flex-row">
                                                                <div class="mr-20">
                                                                    <div class="flex items-center">
                                                                        <div class="border-l-2 border-theme-1 pl-4">
                                                                            <a href="" class="font-medium">Total commandé</a>
                                                                            <div class="text-gray-600">{{ info.quantity | number_format(0, '.', ' ') }}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="flex">
                                                                    <div class="flex items-center mr-20">
                                                                        <div class="border-l-2 border-theme-1 pl-4">
                                                                            <a href="" class="font-medium">Date de commande</a>
                                                                            <div class="text-gray-600">{{ info.orderAt | date("d/m/Y") }}</div>
                                                                        </div>
                                                                    </div>
                                                                    {% set w = info.product.weight * info.quantity %}
                                                                    <div class="flex items-center mr-20">
                                                                        <div class="border-l-2 border-theme-1 pl-4">
                                                                            <a href="" class="font-medium">Poids (Kg)</a>
                                                                            <div class="text-gray-600">{{ w | number_format(0, '', ' ') }}</div>
                                                                        </div>
                                                                    </div>
                                                                    {% set total = 0 %}
                                                                    <div class="flex items-center ">
                                                                        <div class="border-l-2 border-theme-1 pl-4">
                                                                            <a href="" class="font-medium">Stock</a>
                                                                            <div class="text-gray-600"> {{ info.product.stock }}</div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200">
                                                    <h2 class="font-medium text-base mr-auto">
                                                        Previsions
                                                    </h2>
                                                    <div class="dropdown relative ml-auto sm:hidden">
                                                        <a class="dropdown-toggle w-5 h-5 block" href="javascript:;"> <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700"></i> </a>
                                                        <div class="nav-tabs dropdown-box mt-5 absolute w-40 top-0 right-0 z-20">
                                                            <div class="dropdown-box__content box p-2"> <a href="javascript:;" data-toggle="tab" data-target="#new" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">New</a> <a href="javascript:;" data-toggle="tab" data-target="#last-week" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">Last Week</a> </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="p-5">
                                                    <div class="tab-content">
                                                        <div class="tab-content__pane active" id="latest-tasks-new">
                                                            <div class="flex flex-col sm:flex-row">
                                                                <div class="mr-20">
                                                                    <div class="flex items-center">
                                                                        <div class="border-l-2 border-theme-1 pl-4">
                                                                            <a href="" class="font-medium">CAP Mensuel</a>
                                                                            <div class="text-gray-600">{{ info.product.rate * 31 | number_format(0, '', ' ')}}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="mr-20">
                                                                    <div class="flex items-center">
                                                                        {% set sem = info.product.rate * 31  %}
                                                                        <div class="border-l-2 border-theme-1 pl-4">
                                                                            <a href="" class="font-medium">CAP Semestriel</a>
                                                                            <div class="text-gray-600">{{ sem / 4  | number_format(0, '', ' ')}}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="flex">
                                                                    <div class="flex items-center mr-20">
                                                                        <div class="border-l-2 border-theme-1 pl-4">
                                                                            <a href="" class="font-medium">Date de production prévue</a>
                                                                            {% set prodat = info.orderAt |date_modify( "+1 day") %}
                                                                            <div class="text-gray-600"> {{ prodat | date("d/m/Y") }}</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="flex">
                                                                        <div class="flex items-center mr-20">
                                                                            <div class="border-l-2 border-theme-1 pl-4">
                                                                                <a href="" class="font-medium">Date de livraison possible</a>
                                                                                <div class="text-gray-600"> {{ prodat |date_modify( "+7 day")| date("d/m/Y") }}</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- END: Latest Tasks -->

                                        <div class="col-span-6">
                                            <table class="table">
                                                <thead>
                                                <tr>
                                                    <th class="border-b-2 whitespace-no-wrap">#</th>
                                                    <th class="border-b-2 whitespace-no-wrap">Date</th>
                                                    <th class="border-b-2 whitespace-no-wrap">Semaine</th>
                                                    <th class="border-b-2 whitespace-no-wrap">Quantité produit</th>
                                                    <th class="border-b-2 whitespace-no-wrap">Date de livraison possible</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {% for production in info.productions %}

                                                    {% set total = total + production.quantity %}
                                                    <tr class="bg-gray-200">
                                                        <td class="border-b">#</td>
                                                        <td class="border-b">{{ production.produtedAt | date('d/m/Y')}}</td>
                                                        <td class="border-b">S{{ production.produtedAt | date('W') }}</td>
                                                        <td class="border-b">{{ production.quantity }}</td>
                                                        <td class="border-b">{{ production.produtedAt |date_modify( "+7 day")| date("d/m/Y") }}</td>
                                                    </tr>
                                                {% else %}
                                                    <tr>
                                                        <td colspan="4">Aucune production pour le moment</td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                            <br>
                                        </div>


                                    </div>

                                </div>
                            </div>
                        </div>
                        <br>
                    {% endfor %}
                </div>
            </div>

        </div>
                <!-- END: Top Categories -->

            <div class="modal" id="delete-modal-preview">
                <div class="modal__content">
                    <div class="p-5">
                        <form action="{{ path("order_production") }}" method="post">
                        <div>
                            <label>Date</label>
                            <input type="date" name="production[date]"  required class="input w-full border mt-2 flex-1">
                        </div>
                        <div class="mt-3">
                            <label>Quantité produit</label>
                            <input type="number" required  name="production[quantity]"  class="input w-full border mt-2 flex-1" >

                        </div>
                            <div class="mt-3">
                                <input type="hidden"  name="production[order]" id="production_order" class="input w-full border mt-2 flex-1">
                            </div>
                            <div class="px-5 pb-8 text-right">
                                <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Retour</button>
                                <button type="submit" class="button w-24 bg-theme-3 text-white">Valider</button>
                            </div>
                        </form>
                    </div>
                    </div>
            </div>
            <div class="modal" id="finish-modal-preview">
                <div class="modal__content">
                    <div class="p-5">
                        <div class="p-5 text-center"> <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i>
                            <div class="text-3xl mt-5">Etês vous sure?</div>
                            <div class="text-gray-600 mt-2">Voulez-vous marquer cette commande comme terminée.</div>
                        </div>
                        <form action="{{ path('order_finish') }}" method="post">
                            <div class="mt-3">
                                <input type="hidden" id="order_finish" name="finish" class="input w-full border mt-2 flex-1">
                            </div>

                            <div class="px-3 text-right">
                                <div class="px-3 pb-2 text-center"> <button type="reset"  data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Retour</button>
                                    <button type="submit" class="button w-24 bg-theme-6 text-white">Terminer</button> </div>
                            </div>
                        </form>
                    </div>
                    </div>
            </div>


            <!-- BEGIN: PLANNING -->
                <div class="intro-y box col-span-12 mb-2 bg-danger">
                    <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200">
                        <h2 class="font-medium text-base mr-auto">
                            Planning
                        </h2>
                        <div class="dropdown relative ml-auto sm:hidden">
                            <a class="dropdown-toggle w-5 h-5 block" href="javascript:;"> <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700"></i> </a>
                            <div class="dropdown-box mt-5 absolute w-40 top-0 right-0 z-20">
                                <div class="dropdown-box__content box p-2">
                                    <a href="javascript:;" class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="file" class="w-4 h-4 mr-2"></i> Download XML </a>
                                </div>
                            </div>
                        </div>
                        <button class="button border relative flex items-center text-gray-700 hidden sm:flex"> <i data-feather="file" class="w-4 h-4 mr-2"></i>Exporter</button>
                    </div>
                    <div class="p-5">

                    </div>
                </div>
                <!-- BEGIN: PLANNING -->
            <!-- BEGIN: General Statistic -->
            <div class="intro-y box col-span-12">
                <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200">
                    <h2 class="font-medium text-base mr-auto">
                        Statistiques
                    </h2>
                    <div class="dropdown relative ml-auto sm:hidden">
                        <a class="dropdown-toggle w-5 h-5 block" href="javascript:;"> <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700"></i> </a>
                        <div class="dropdown-box mt-5 absolute w-40 top-0 right-0 z-20">
                            <div class="dropdown-box__content box p-2">
                                <a href="javascript:;" class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="file" class="w-4 h-4 mr-2"></i> Download XML </a>
                            </div>
                        </div>
                    </div>
                    <button class="button border relative flex items-center text-gray-700 hidden sm:flex"> <i data-feather="file" class="w-4 h-4 mr-2"></i> Download XML </button>
                </div>
                <div class="p-5">
                    <div class="flex mt-8">
                        <div class="flex items-center mr-5">
                            <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>
                            <span>Production prévue</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-2 h-2 bg-theme-1 rounded-full mr-3"></div>
                            <span>Production réelle</span>
                        </div>
                    </div>
                    <div class="report-chart mt-8">
                        <canvas id="report-line-chart" height="130"></canvas>
                    </div>
                </div>
            </div>
            <!-- END: General Statistic -->
            </div>
        </div>
    </div>



{% endblock %}

{% block javascripts %}
    <script>
        $('.btn-prod').click(function () {
            const id = $(this).data('id')
            $('#production_order').val(id)
        })

        $('.btn-finish').click(function () {
            const id = $(this).data('id')
            $('#order_finish').val(id)
        })
    </script>

{% endblock %}