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

{% block title %}{% endblock %}

{% block page_content %}
    <style>
        input {
            width: 80% !important;
            margin: 10px auto !important;
            border: 0 !important;
            border-radius: 0px !important;
        }
        #signature {
            width: 80% !important;
            margin: 10px auto !important;
        }
    </style>
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="box">
                <div class="box-body">
{#                    <div class="col-sm-12 col-md-6 text-center" style="margin-bottom:10px">#}
{#                        <h3>Firmar manifiesto {{ carrierNameCanonical }}-{{ manifest.id }} <br/> {{ manifest.dateAdd | date('d/m/Y') }}</h3>#}
{#                    </div>#}
                    <div class="col-sm-12 col-md-6">
                        <form id="confirm-signature" action="{{ path('app_manifest_sign', { id: manifest.id}) }}" method="POST" data-suggest-path="{{ path('app_manifest_suggest_drivers', { id: manifest.id }) }}" data-error-msg="{{ 'manifest.signature.error_missing_data' | trans }}">
                            <input placeholder="Nombre del conductor" id="driver_name" class="form-control" type="text" name="signature[driver_name]" value="" autocomplete="off" />
                            <div class="suggested-drivers"></div>
                            <input style="margin-top:10px" placeholder="DNI del conductor" id="id_card_number" class="form-control" type="text" name="signature[driver_id_card_number]" value="" />
                            <input style="margin-top:10px" placeholder="{{ 'manifest_sign.pallets_taken' | trans }}" id="pallets_taken" class="form-control" type="number" name="pallets_taken" value="" />
                            <input style="margin-top:10px" placeholder="{{ 'manifest_sign.pallets_returned' | trans }}" id="pallets_received" class="form-control" type="number" name="pallets_received" value="" />
                            <input id="driver_id" type="hidden" name="signature[driver_id]" value="0" />
                            <input id="signature_mimetype" type="hidden" name="signature[mimetype]" value="" />
                            <input id="signature_data" type="hidden" name="signature[data]" value="" />
                        </form>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div style="background: white" id="signature" ></div>
                        </div>
                        <div class="col-sm-12 text-center" style="margin-top:30px">
                            <a href="#" class="btn btn-primary reset-signature">Limpiar campos</a>
                        </div>
                        <div class="col-sm-12 text-center" style="margin-top:30px">
                            <a href="#" class="btn btn-primary confirm-signature">Confirmar firma</a>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>

{% endblock %}