{% extends 'layout/app.html.twig' %}

{% set heading = previous ? 'proposal.submit_next'|trans : 'proposal.submit_first'|trans %}

{% block title %}{{ heading }} - {{ sourcingRequest.title }} - {{ 'app.portal'|trans }}{% endblock %}
{% block breadcrumb %}<a href="{{ path('app_home') }}" class="hover:underline">{{ 'request.back'|trans }}</a> / <a href="{{ path('app_request_show', { id: sourcingRequest.id }) }}" class="hover:underline">{{ sourcingRequest.externalReference }}</a> / {{ 'proposal.title'|trans }}{% endblock %}

{% block app_content %}
    {% set input = 'mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-pepite-ink' %}
    {% set label = 'block text-xs text-pepite-ink/60' %}
    {% set legend = 'px-1 font-structure text-sm font-semibold text-pepite-ink' %}
    {% set box = 'rounded-md border border-gray-200 bg-white p-4' %}

    <p class="font-structure text-xs text-pepite-ink/50">{{ 'request.reference'|trans }} {{ sourcingRequest.externalReference }} · {{ sourcingRequest.title }}</p>
    <h1 class="mt-0.5 font-display text-2xl text-pepite-ink">{{ heading }}</h1>
    <p class="mt-1 max-w-3xl font-structure text-sm text-pepite-ink/60">{{ 'proposal.form.optional'|trans }}</p>

    {% if adjustment and adjustment.kind.value == 'adjustment_requested' %}
        <div data-role="adjustment" class="mt-4 max-w-3xl rounded-md border-l-4 border-orange-400 bg-orange-50 px-4 py-3 text-sm text-pepite-ink">
            <p class="font-structure text-xs font-bold uppercase tracking-wide text-orange-900">{{ 'proposal.adjustment_title'|trans }}</p>
            <p class="mt-1 whitespace-pre-line">{{ adjustment.comment }}</p>
        </div>
    {% endif %}

    <form method="post" action="{{ path('app_proposal_submit', { id: sourcingRequest.id }) }}" enctype="multipart/form-data" class="mt-6 max-w-3xl space-y-4">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('proposal_submit_' ~ assignment.id) }}">

        <fieldset class="{{ box }}">
            <legend class="{{ legend }}">{{ 'proposal.form.section_offer'|trans }}</legend>
            <div class="grid gap-4 sm:grid-cols-2">
                <label class="{{ label }}">{{ 'proposal.field.unitPrice'|trans }}
                    <input type="text" inputmode="decimal" name="unitPrice" value="{{ values.unitPrice }}" class="{{ input }}" placeholder="{{ 'proposal.form.amount_help'|trans }}">
                </label>
                <label class="{{ label }}">{{ 'proposal.field.currency'|trans }}
                    <input type="text" name="currency" value="{{ values.currency }}" maxlength="3" class="{{ input }} uppercase" placeholder="USD">
                    <span class="mt-1 block text-[11px] text-pepite-ink/40">{{ 'proposal.hint.currency'|trans }}</span>
                </label>
                <label class="{{ label }}">{{ 'proposal.field.moq'|trans }}
                    <input type="text" inputmode="numeric" name="moq" value="{{ values.moq }}" class="{{ input }}">
                </label>
                <label class="{{ label }}">{{ 'proposal.field.leadTimeDays'|trans }}
                    <input type="text" inputmode="numeric" name="leadTimeDays" value="{{ values.leadTimeDays }}" class="{{ input }}">
                </label>
                <label class="{{ label }}">{{ 'proposal.field.incoterm'|trans }}
                    <select name="incoterm" class="{{ input }}">
                        <option value="">{{ 'proposal.form.incoterm_none'|trans }}</option>
                        {% for incoterm in incoterms %}
                            <option value="{{ incoterm }}" {{ values.incoterm|upper == incoterm ? 'selected' : '' }}>{{ incoterm }}</option>
                        {% endfor %}
                    </select>
                </label>
                <label class="{{ label }}">{{ 'proposal.field.validUntil'|trans }}
                    <input type="date" name="validUntil" value="{{ values.validUntil }}" class="{{ input }}">
                </label>
            </div>
        </fieldset>

        <fieldset class="{{ box }}">
            <legend class="{{ legend }}">{{ 'proposal.form.section_product'|trans }}</legend>
            <div class="grid gap-4 sm:grid-cols-2">
                <label class="{{ label }}">{{ 'proposal.field.material'|trans }}
                    <input type="text" name="material" value="{{ values.material }}" maxlength="255" class="{{ input }}">
                </label>
                <label class="{{ label }}">{{ 'proposal.field.dimensions'|trans }}
                    <input type="text" name="dimensions" value="{{ values.dimensions }}" maxlength="255" class="{{ input }}">
                </label>
                <label class="{{ label }}">{{ 'proposal.field.weightGrams'|trans }}
                    <input type="text" inputmode="numeric" name="weightGrams" value="{{ values.weightGrams }}" class="{{ input }}">
                </label>
                <label class="{{ label }} sm:col-span-2">{{ 'proposal.field.packaging'|trans }}
                    <textarea name="packaging" rows="2" class="{{ input }}" placeholder="{{ 'proposal.hint.packaging'|trans }}">{{ values.packaging }}</textarea>
                </label>
                <label class="{{ label }} sm:col-span-2">{{ 'proposal.field.packing'|trans }}
                    <textarea name="packing" rows="2" class="{{ input }}" placeholder="{{ 'proposal.hint.packing'|trans }}">{{ values.packing }}</textarea>
                </label>
                <label class="{{ label }} sm:col-span-2">{{ 'proposal.field.standards'|trans }}
                    <textarea name="standards" rows="2" class="{{ input }}">{{ values.standards }}</textarea>
                </label>
            </div>
        </fieldset>

        <fieldset class="{{ box }}">
            <legend class="{{ legend }}">{{ 'proposal.form.section_sample'|trans }}</legend>
            <div class="grid gap-4 sm:grid-cols-2">
                <label class="{{ label }}">{{ 'proposal.field.sampleAvailable'|trans }}
                    <select name="sampleAvailable" class="{{ input }}">
                        <option value="">{{ 'proposal.form.sample_unknown'|trans }}</option>
                        <option value="1" {{ values.sampleAvailable == '1' ? 'selected' : '' }}>{{ 'proposal.choice_yes'|trans }}</option>
                        <option value="0" {{ values.sampleAvailable == '0' ? 'selected' : '' }}>{{ 'proposal.choice_no'|trans }}</option>
                    </select>
                </label>
                <label class="{{ label }}">{{ 'proposal.field.sampleCost'|trans }}
                    <input type="text" inputmode="decimal" name="sampleCost" value="{{ values.sampleCost }}" class="{{ input }}" placeholder="{{ 'proposal.form.amount_help'|trans }}">
                </label>
            </div>
        </fieldset>

        {% if sourcingRequest.openQuestions is not empty %}
            <fieldset class="{{ box }}">
                <legend class="{{ legend }}">{{ 'proposal.form.section_answers'|trans }}</legend>
                <div class="space-y-4">
                    {% for key in sourcingRequest.openQuestions %}
                        {% set text = sheet_question_text(key) %}
                        <label class="{{ label }}">
                            <span class="font-semibold text-pepite-ink">{{ sheet_question_topic(key) }}</span>{% if text %} — {{ text }}{% endif %}
                            <textarea name="answers[{{ key }}]" rows="2" class="{{ input }}">{{ values.answers[key] ?? '' }}</textarea>
                        </label>
                    {% endfor %}
                </div>
            </fieldset>
        {% endif %}

        <fieldset class="{{ box }}">
            <legend class="{{ legend }}">{{ 'proposal.form.section_files'|trans }}</legend>
            {% if previous and previous.attachments is not empty %}
                <p class="text-xs text-pepite-ink/60">{{ 'proposal.form.keep'|trans }}</p>
                <div class="mt-1 space-y-1">
                    {% for attachment in previous.attachments %}
                        <label class="flex items-center gap-2 text-sm">
                            <input type="checkbox" name="keep[]" value="{{ attachment.id }}" {{ attachment.id in keep ? 'checked' : '' }}>
                            <span>{{ attachment.originalName }} <span class="text-xs text-pepite-ink/50">· {{ file_size(attachment.sizeBytes) }}</span></span>
                        </label>
                    {% endfor %}
                </div>
            {% endif %}
            <label class="{{ label }} {{ previous and previous.attachments is not empty ? 'mt-4' : '' }}">{{ 'proposal.form.add_files'|trans }}
                <input type="file" name="attachments[]" multiple accept=".jpg,.jpeg,.png,.webp,.pdf,.xlsx,.docx" class="{{ input }}">
            </label>
            <p data-role="files-help" class="mt-1 text-[11px] text-pepite-ink/40">{{ 'proposal.form.files_help'|trans({'%size%': fileLimitMb, '%count%': fileLimitCount}) }}</p>
        </fieldset>

        <fieldset class="{{ box }}">
            <label class="{{ label }}">{{ 'proposal.field.notes'|trans }}
                <textarea name="notes" rows="3" class="{{ input }}">{{ values.notes }}</textarea>
            </label>
        </fieldset>

        <p class="text-xs text-pepite-ink/50">{{ 'proposal.not_an_order'|trans }}</p>

        <div class="flex gap-3">
            <button type="submit" class="rounded-md bg-pepite-navy px-4 py-2 font-structure text-sm font-medium text-white hover:bg-pepite-navy-light">{{ 'proposal.form.submit'|trans }}</button>
            <a href="{{ path('app_request_show', { id: sourcingRequest.id }) }}" class="rounded-md px-4 py-2 font-structure text-sm text-pepite-ink/60 hover:underline">{{ 'proposal.form.cancel'|trans }}</a>
        </div>
    </form>
{% endblock %}