{% extends 'UserPortalBundle:layout:frontend.html.twig' %}
{% block pageTitle %} {{ 'Northgate | Add Request'|trans}} {% endblock %}
{% block content %}

    <!-- Page Container Right Section Begins -->
    <section class="page-container">
        <div class="container-fluid">
            <!-- Page Title and Breadcrumb row Begins -->
            <div class="row breadcrumb-pagetitle">
                <div class="col-6">
                    <h1 class="page-title">{{ tagName | title }} - <span class="grayColor"> {{ tagSize }} </span></h1>
                    {% include 'UserPortalBundle:includes:breadcrumbs.html.twig' with {'pageName':tagName} %}
                </div>
                <div class="col-6 text-right ">
                    {% if reqDate is defined %}
                        {{ reqDate }}
                    {% else %}    
                        {{ 'now'| date('M j, Y g:ia') }}
                    {%endif%}
                </div>
            </div>
            <!-- Page Title and Breadcrumb row Ends -->
            {% set action = getActionName() %}
            <!-- Page White Box Begins -->
            <section class="white-container card-detail pb-0">
                <form id="add-request-form" action="/request/add" method="POST" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-sm-6"><strong>{{ 'Store' | trans }}:</strong> {{ storeName }}</div>
                        <div class="col-sm-6"><strong>{{ 'Department' | trans }}:</strong>
                            {{ getCommaSeparatedName(departmentName) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-6"><strong>{{ 'Cutoff Day' | trans }}:</strong> 
                            {% if cutoffDay %}
                                {{ cutoffDay }}
                            {% else %}
                                {{'N/A'|trans}}
                            {% endif %}
                        </div>
                        <div class="col-sm-6"><strong>{{ 'Printing Day' | trans }}:</strong> 
                            {% if printingDay %}
                                {{ printingDay }}
                            {% else %}
                                {{'N/A'|trans}}
                            {% endif %}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-6"><strong>{{ 'Max Quantity' | trans  }}:</strong> <span class="maxQty">{{ maxQty }}</span></div>
                        <div class="col-sm-6"><strong>{{ 'Tag Type' | trans }}:</strong> {{ tagType }}</div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-6"><strong>{{ 'Effective Date' | trans  }}:</strong>
                            {% if effectiveDate %}
                                {{ effectiveDate | date('M j, Y') }}
                            {% else %}
                                {{ 'now'| date('M j, Y') }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-5 mt-3">
                            <div class="form-group">
                                <strong>{{ 'Enter Product AISLE Information'|trans}}</strong>
                                <input value="{{aisleInfo}}" name="aisleInfo" type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 browseQtyRow">
                        {% if prodUpcArr | length == 0 %}
                            <div class="row">
                                <div class="col-md-5">
                                    {{ 'Upload Excel'|trans}}
                                    <div class="form-group">
                                        <label for="file-upload" class="custom-file-upload">
                                            <input readonly type="text" class="form-control browse" placeholder={{'Upload'|trans}}{{'Excel'|trans}} />
                                            <span class="btn-black-border"><i class="fa fa-cloud-upload"></i>{{'BROWSE'|trans}}</span>
                                        </label>
                                        <input {% if (upcArr | length > 0) and (fileName | trim | length == 0 ) %}{{'disabled'}}{%endif%} id="file-upload" name='upload_csv' type="file" style="display:none;">
                                    </div>
                                </div>
                                {% if (fileName == '') %}
                                    <div class="col">
                                        <div class="addUPC row no-gutters">
                                            <div class="col-6">
                                                {{ 'Enter UPCs Number'|trans}} <input name="upc-number" type="text" />
                                            </div>
                                            <div class="qty-box col-3">
                                                {{ 'Qty'|trans}}
                                                <div class="input-group number-spinner">
                                                    <input name="upc-qty" type="text" class="form-control text-center" value="1" />
                                                    <span class="input-group-btn">
                                                        <button type="button" class="btn btn-default" data-dir="dwn">
                                                            <i class="fa fa-minus"></i>
                                                        </button>
                                                        <button type="button" class="btn btn-default" data-dir="up">
                                                            <i class="fa fa-plus"></i>
                                                        </button>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-3">
                                                &nbsp; <button data-attr="add-upc" type="button" class="btn-primary w-100">{{'ADD'|trans}}</button>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        {% if fileName is defined and fileName != '' %}
                            <div class="row">
                                <div class="col-12">
                                    {{'File Uploaded:'}}
                                    <a href="javascript:void(0);" class="download" data-attr="{{key}}">
                                        {{fileName}}
                                    </a>
                                </div>
                            </div>
                        {%endif%}
                        {% if (fileName == '') %}
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive upc-qty-table">
                                        <table class="table  ">
                                            <thead>
                                                <tr>
                                                    <th>{{ 'UPC'|trans}}</th>
                                                    <th>{{ 'Qty'|trans}}</th>
                                                    <th>{{ 'Description'|trans}}</th>
                                                    <th style="width: 150px;">
                                                        {% if (upcArr | length > 0) %}
                                                            <a class="refresh-upc-all">{{ 'Refresh'|trans}}</a> / 
                                                        {% endif %}
                                                        <a class="delete-upc-all">{{ 'Delete All'|trans}}</a>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody id="upc-section">
                                                {% if upcArr | length > 0 %}
                                                    {% for key,upc in upcArr %}
                                                        <tr data-attr="upc-{{upc}}">
                                                            <td><a href= "" title= "Preview" class="prev-upc" data-toggle="modal" data-target="#previewModal">{{upc}}<input name="upc[]" value="{{upc}}" type="hidden" /></a></td>
                                                            <td><input value="{% if qtyArr[upc] is defined %}{{qtyArr[upc]}}{%else%}{{'1'}}{%endif%}" name="qty[]" type="text" class="form-control" /></td>
                                                            <td>{{description[upc]}}</td>
                                                            <td><a class="delete-upc"><i class="fa fa-trash-o"></i></td>
                                                        </tr>
                                                    {% endfor %}
                                                    <tr data-attr="blank-upc" style="display:none;">
                                                        <td colspan="4">{{ 'No UPC Added'|trans}}</td>
                                                    </tr>
                                                {% else %}
                                                    <tr data-attr="blank-upc">
                                                        <td colspan="4">{{ 'No UPC Added' | trans }}</td>
                                                    </tr>
                                                {% endif %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        {%endif%}
                    </div>
                    {% if prodUpcArr | length == 0 or (fileName is defined and fileName != '') %}
                        {% if upcArr|length == 0 %}
                            {% set tagDisplay = 'display:block;' %}
                        {% elseif(fileName is defined and fileName != '') %}
                            {% set tagDisplay = 'display:block;' %}
                         {% else %}
                            {% set tagDisplay = 'display:none;' %}   
                        {% endif %}
                        <div class="card-box-outer" style="{{tagDisplay}}}">
                            <div class="card-box">
                                {% if tagHtml %}
                                    <div class="box-dimensions square">
                                        <div class="p-3">
                                            {{ tagHtml | raw }}
                                        </div>
                                        <div style="display:none;" class="templateHtml">
                                            {{ templateLayoutHtml | raw }}
                                        </div>
                                    </div>
                                {% endif %}
                                <div class="qty-box browse-qty">
                                    <div class="input-group number-spinner">
                                        {{ 'Qty'|trans}} &nbsp;
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" data-dir="dwn"><i class="fa fa-minus"></i></button>
                                        </span>
                                        <input name="tag-qty" type="text" class="form-control text-center" value="{% if tagQty is defined %}{{tagQty}}{%else%}{{'1'}}{%endif%}">
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" data-dir="up"><i class="fa fa-plus"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}                    
                    <div class="form-action">
                        {% if key is defined %}
                            {% set key = key %}
                        {%else%}
                            {% set key = 0 %} 
                        {%endif%}
                        <input type="hidden" name="key" value="{{key}}" />
                        <input type="hidden" name="effectiveDate" value="{{effectiveDate}}" />
                        <input type="hidden" name="templateItem" value="{{template}}" />
                        <input type="hidden" name="store" value="{{store}}" />
                        <input type="hidden" name="department" value="{{department}}" />
                        <input type="hidden" name="language" value="{{language}}" />
                        <input type="hidden" name="checksubmit" value="" />
                        <input type="hidden" name="upc-list" value="{{upc}}" />
                        <input type="hidden" name="qty-list" value="{% if qtyData is defined %}{{qtyData}}{%endif%}" />
                        <input type="hidden" name="desc-list" value="{% if desc is defined %}{{desc}}{%endif%}" />
                        <a href="{{app.request.headers.get('referer')}}" class="btn-black-border mr-2">{{ 'Cancel'|trans}}</a>
                        <button value="save-draft" type="submit" name="submit-request" class="btn-black-border mr-2">{{ 'Save as Draft' | trans }}</button>
                        <button value="send-request" type="submit" name="submit-request" class="btn-primary">{{ 'Send Request'|trans}}</button>
                    </div>
                </form>    
            </section>
            <!-- Page White Box  Ends -->
        </div>
    </section>
    <!--Page Container Right Section Begins-->


    <!-- Modal -->
    <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Preview</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
                {#<div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>#}
            </div>
        </div>
    </div>

{% endblock %}