{#
    /**
     * This file is part of FacturaScripts
     * Copyright (C) 2017-2021 Carlos Garcia Gomez <carlos@facturascripts.com>
     *
     * This program is free software: you can redistribute it and/or modify
     * it under the terms of the GNU Lesser General Public License as
     * published by the Free Software Foundation, either version 3 of the
     * License, or (at your option) any later version.
     *
     * This program is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
     * GNU Lesser General Public License for more details.
     *
     * You should have received a copy of the GNU Lesser General Public License
     * along with this program. If not, see http://www.gnu.org/licenses/.
     */
#}
{% extends "Master/MenuTemplate.html.twig" %}
{% set pageData = fsc.getPageData() %}

{% block body %}
    <form action="{{ fsc.url() }}" method="post" name="formDocStitcher">
        <input type="hidden" name="model" value="{{ fsc.modelName }}"/>
        <input type="hidden" name="multireqtoken" value="{{ fsc.multiRequestProtection.newToken() }}"/>
        <input type="hidden" name="status"/>
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <h1 class="h3">
                        <i class="{{ pageData.icon }}" aria-hidden="true"></i>
                        {{ i18n.trans(pageData.title) }}
                    </h1>
                    <p>{{ i18n.trans('group-or-split-p') }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-sm-6 mb-2">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>
                            </span>
                        </div>
                        <input type="text" name="fecha" value="{{ task.end | date('d-m-Y') }}" class="form-control datepicker" autocomplete="off"/>
                    </div>
                </div>
                <div class="col-lg-2 col-sm-6 mb-2">
                    <select name="extralines" class="form-control">
                        <option value="true">{{ i18n.trans('add-extra-lines') }}</option>
                        <option value="false">{{ i18n.trans('no-extra-lines') }}</option>
                    </select>
                </div>
                <div class="col mb-2">
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-magic fa-fw"></i> {{ i18n.trans('generate') }}
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            {% for status in fsc.getAvaliableStatus() %}
                                <button type="button" onclick="sendFormData('{{ status.primaryColumnValue() }}');" class="dropdown-item">
                                    <i class="fas fa-file fa-fw" aria-hidden="true"></i> {{ i18n.trans(status.generadoc) }}
                                </button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="col text-right mb-2">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-check-square fa-fw"></i> {{ i18n.trans('select') }}
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#" onClick="return selectNone();">
                                {{ i18n.trans('select-none') }}
                            </a>
                            <a class="dropdown-item" href="#" onClick="return selectAll();">
                                {{ i18n.trans('select-all') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col mt-3">
                    {% for doc in fsc.documents %}
                        <input type="hidden" name="code[]" value="{{ doc.primaryColumnValue() }}"/>
                        {{ _self.documentCard(doc, fsc, i18n) }}
                    {% else %}
                        <div class="alert alert-warning" role="alert">
                            {{ i18n.trans('no-data') }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </form>

    {% if fsc.moreDocuments %}
        <div class="container-fluid">
            <div class="row">
                <div class="col mt-3">
                    <div class="card border-success shadow mb-2">
                        <div class="card-body p-2">
                            <button class="btn btn-sm btn-outline-success" type="button" data-toggle="collapse" data-target="#moreDocsCollapse" aria-expanded="false">
                                <i class="fas fa-plus-square fa-fw" aria-hidden="true"></i>
                                {{ i18n.trans('more') }}
                            </button>
                            &nbsp;
                            {{ i18n.trans('group-more-docs-p') }}
                        </div>
                        <div class="collapse" id="moreDocsCollapse">
                            <form action="{{ fsc.url() }}" method="post">
                                <input type="hidden" name="model" value="{{ fsc.modelName }}">
                                <input type="hidden" name="codes" value="{{ fsc.codes | join(',') }}">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>{{ i18n.trans('code') }}</th>
                                                <th>{{ i18n.trans('observations') }}</th>
                                                <th class="text-right">{{ i18n.trans('total') }}</th>
                                                <th class="text-right">{{ i18n.trans('date') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for doc in fsc.moreDocuments %}
                                                <tr>
                                                    <td class="text-center">
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" name="newcodes[]" value="{{ doc.primaryColumnValue() }}">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a href="{{ doc.url() }}">
                                                            {{ doc.codigo }}
                                                        </a>
                                                    </td>
                                                    <td>{{ doc.observaciones | slice(0, 60) | raw }}</td>
                                                    <td class="text-right text-nowrap">{{ fsc.toolBox().coins().format(doc.total) }}</td>
                                                    <td class="text-right text-nowrap">{{ doc.fecha }}</td>
                                                </tr>
                                            {% else %}
                                                <tr class="table-warning">
                                                    <td></td>
                                                    <td colspan="4">{{ i18n.trans('no-data') }}</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <div class="card-body">
                                    <button type="submit" class="btn btn-success">
                                        {{ i18n.trans('add') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block css %}
    {{ parent() }}
    <style>
        body {
            background-color: #FAFBFC;
        }
        .td-quantity {
            width: 165px;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        function selectAll() {
            var inputToServe = document.getElementsByClassName("to_serve");
            var inputToBeServed = document.getElementsByClassName("to_be_served");
            for (i = 0; i < inputToBeServed.length; i++) {
                inputToBeServed.item(i).value = inputToServe.item(i).value;
            }

            return false;
        }
        function selectNone() {
            var inputToBeServed = document.getElementsByClassName("to_be_served");
            for (i = 0; i < inputToBeServed.length; i++) {
                inputToBeServed.item(i).value = 0;
            }

            return false;
        }
        function sendFormData(status) {
            document.formDocStitcher.status.value = status;
            document.formDocStitcher.submit();
        }
    </script>
{% endblock %}

{% macro documentCard(doc, fsc, i18n) %}
    <div class="card shadow mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-sm">
                    <a href="{{ doc.url() }}" class="h5">
                        <i class="fas fa-file fa-fw" aria-hidden="true"></i> {{ i18n.trans(fsc.modelName) }} {{ doc.codigo }}
                    </a>
                    {% if doc.observaciones %}
                        <p>{{ doc.observaciones | raw }}</p>
                    {% endif %}
                </div>
                <div class="col-sm-3 text-right">
                    <p class="small">
                        <i class="far fa-calendar-alt fa-fw" aria-hidden="true"></i> {{ doc.fecha }}
                        <i class="far fa-clock fa-fw" aria-hidden="true"></i> {{ doc.hora }}
                    </p>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead>
                    <tr>
                        <th>{{ i18n.trans('reference') }}</th>
                        <th>{{ i18n.trans('description') }}</th>
                        <th class="text-right td-quantity">{{ i18n.trans('quantity') }}</th>
                        <th class="text-right td-quantity">{{ i18n.trans('quantity-served') }}</th>
                        <th class="text-right td-quantity">{{ i18n.trans('selected-quantity') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line in doc.getLines() %}
                        <tr>
                            <td class="align-middle">{{ line.referencia }}</td>
                            <td class="align-middle">{{ line.descripcion | raw | nl2br }}</td>
                            <td>
                                <input type="number" value="{{ line.cantidad }}" class="form-control text-right" readonly="true"/>
                            </td>
                            <td class="{{ servido == 0 ? '' : 'table-warning' }}">
                                <input type="number" value="{{ line.servido }}" class="form-control text-right" readonly="true"/>
                            </td>
                            {% set newQuantity = line.cantidad - line.servido %}
                            <td class="{{ newQuantity == 0 ? 'table-warning' : 'table-success' }}">
                                <input type="hidden" class="to_serve" value="{{ newQuantity }}"/>
                                <input type="number" name="approve_quant_{{ line.primaryColumnValue() }}" value="{{ newQuantity }}" step="any"
                                       class="form-control text-right to_be_served" autocomplete="off"/>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endmacro %}