{% extends "base_douchette_menu.html.twig" %}

{% block title %}
    {{ parent() }}
    PLM Services
{% endblock %}

{% block body %}
    {{ parent() }}

    <style>
        @media (max-width: 770px) {
            .font-size-h3, .h3, h3 {
                margin-top: 4px;
                font-size: 17px;
                color: black;
            }
            .block-content.block-content-full.douchette {
                height: 60px;
                padding: 10px;
            }
            .block-link-shadow.douchette {
                margin-bottom: 4px;
            }
            .col-6.douchette {
                padding: 5px;
            }
            .main {
                display: flex;
                justify-content: center;
            }
            .block-content {
                width: 157.5px!important;
                height: 160px!important;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
    </style>

    <div class="content" style="padding-top: 4px;padding-bottom: 4px;">
                <div class="row main">

                    <div class="col-md-6 col-6 mt-1">
                        <a class="block block-rounded block-link-shadow block-service-click" href="{{ path('douchette_search_bl') }}">
                            <div class="block-content block-content-full text-center">
                                <div class="item item-circle bg-info-light text-info mx-auto">
                                    <i class="fa fa-paperclip"></i>
                                </div>
                                <div class="font-size-h3 mb-5">Infos BL</div>
                            </div>
                        </a>
                    </div>

                    <div class="col-md-6 col-6 mt-1">
                        <a class="block block-rounded block-link-shadow block-service-click" href="{{ path('douchette_article_location') }}">
                            <div class="block-content block-content-full text-center">
                                <div class="item item-circle bg-success-light text-success mx-auto">
                                    <i class="fa fa-arrow-down"></i>
                                </div>
                                <div class="font-size-h3 mb-5">Retour de location</div>
                            </div>
                        </a>
                    </div>

                    <div class="col-md-6 col-6 mt-1">
                        <a class="block block-rounded block-link-shadow block-service-click" href="{{ path('douchette_commandes') }}">
                            <div class="block-content block-content-full text-center">
                                <div class="item item-circle bg-secondary-light text-secondary mx-auto" style="color: grey!important; background-color: #e1e1e1;!important">
                                    <i class="fa fa-cubes"></i>
                                </div>
                                <div class="font-size-h3 mb-5">Réception Commande</div>
                            </div>
                        </a>
                    </div>

                    <div class="col-md-6 col-6 mt-1">
                        <a class="block block-rounded block-link-shadow block-service-click" href="{{ path('douchette_search_articles') }}?searchType=stock">
                            <div class="block-content block-content-full text-center">
                                <div class="item item-circle bg-warning-light text-warning mx-auto">
                                    <i class="fa fa-archive"></i>
                                </div>
                                <div class="font-size-h3 mb-5">Gestion stock</div>
                            </div>
                        </a>
                    </div>

                    <div class="col-md-6 col-6 mt-1">
                        <a class="block block-rounded block-link-shadow block-service-click" href="{{ path('douchette_search_rma') }}">
                            <div class="block-content block-content-full text-center">
                                <div class="item item-circle bg-danger-light text-danger mx-auto">
                                    <i class="fa fa-chain-broken"></i>
                                </div>
                                <div class="font-size-h3 mb-5">Réception RMA</div>
                            </div>
                        </a>
                    </div>

{#                    <div class="col-12 douchette">#}
{#                        <a class="block block-rounded block-link-shadow douchette" style="margin-bottom: 15px;" href="{{ path('douchette_article_location') }}">#}
{#                            <div class="block-content block-content-full douchette text-center" style="padding-top: 10px;;padding-bottom: 10px;">#}
{#                                <div class="font-size-h3 mb-5">GERER LES ARTICLES EN LOCATION</div>#}
{#                            </div>#}
{#                        </a>#}
{#                    </div>#}
{#                    <div class="col-12 douchette">#}
{#                        <a class="block block-rounded block-link-shadow douchette" style="margin-bottom: 15px;" href="{{ path('douchette_commandes') }}">#}
{#                            <div class="block-content block-content-full douchette text-center" style="padding-top: 10px;;padding-bottom: 10px;">#}
{#                                <div class="font-size-h3 mb-5" style="">RECEPTIONNER UNE COMMANDE</div>#}
{#                            </div>#}
{#                        </a>#}
{#                    </div>#}
{#                    <div class="col-12 douchette">#}
{#                        <a class="block block-rounded block-link-shadow douchette" style="margin-bottom: 15px;" href="{{ path('douchette_search_articles') }}?searchType=stock">#}
{#                            <div class="block-content block-content-full douchette text-center" style="padding-top: 10px;;padding-bottom: 10px;">#}
{#                                <div class="font-size-h3 mb-5">GERER LE STOCK</div>#}
{#                            </div>#}
{#                        </a>#}
{#                    </div>#}
{#                    <div class="col-12 douchette">#}
{#                        <a class="block block-rounded block-link-shadow douchette" style="margin-bottom: 15px;" href="{{ path('douchette_search_bl') }}">#}
{#                            <div class="block-content block-content-full douchette text-center" style="padding-top: 10px;;padding-bottom: 10px;">#}
{#                                <div class="font-size-h3 mb-5">INFORMATIONS BON DE LIVRAISON</div>#}
{#                            </div>#}
{#                        </a>#}
{#                    </div>#}
{#                    <div class="col-12 douchette">#}
{#                        <a class="block block-rounded block-link-shadow douchette" style="margin-bottom: 15px;" href="{{ path('douchette_search_rma') }}">#}
{#                            <div class="block-content block-content-full douchette text-center" style="padding-top: 10px;;padding-bottom: 10px;">#}
{#                                <div class="font-size-h3 mb-5">INFORMATIONS RMA</div>#}
{#                            </div>#}
{#                        </a>#}
{#                    </div>#}
{#                    <div class="col-12 douchette">#}
{#                        <a class="block block-rounded block-link-shadow douchette" style="margin-bottom: 15px;" href="{{ path('douchette_search_reploc') }}">#}
{#                            <div class="block-content block-content-full douchette text-center" style="padding-top: 10px;;padding-bottom: 10px;">#}
{#                                <div class="font-size-h3 mb-5">INFORMATIONS REP/CAL LOC</div>#}
{#                            </div>#}
{#                        </a>#}
{#                    </div>#}

                    <style>
                        a.block.block-link-shadow:hover {
                            transform: translateY(-3px);
                        }
                        a.block.block-link-disable {
                            opacity: 0.5;
                        }
                    </style>
                </div>

    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">
        $('.block.douchette').click(function() {
            $(this).css('filter', 'opacity(30%)');
            $(this).css('-webkit-filter', 'opacity(30%)');
            $(this).prepend('<i class="fa fa-spinner fa-pulse fa-3x fa-fw spinner-block-click-position"></i>');

        });
    </script>
{% endblock %}