{% requireLogin %}

{% extends 'layouts/_base.twig' %}

{% block main %}
    <div class="max-w-7xl mx-auto py-8 space-y-4">

        <h2 class="text-5xl text-center">
            <strong>NWO Brand Audit</strong>
        </h2>

        {% macro errorList(errors) %}
            {% if errors %}
                {{ ul(errors, {class: 'errors'}) }}
            {% endif %}
        {% endmacro %}

        {# Craft needs a default entry to work with#}
        {% set entry = entry ?? create('craft\\elements\\Entry') %}


        <form method="post" accept-charset="UTF-8" class="space-y-4 brand-audit">
            {{ csrfInput() }}
            {{ actionInput('entries/save-entry') }}
            {{ redirectInput('brandaudit/index') }}
            {{ hiddenInput('sectionId', '4') }}

            <input type="hidden" name="fields[relatedUser][]" value="{{ currentUser.id }}">
            <input type="hidden" id="title" name="title" value="{{ currentUser.firstName }} {{ currentUser.lastName }} - Brand Audit">

            <div x-data="{ tab: 1, totalSteps: 23 }">

                <div class="mb-8">
                    <h4>Your progress</h4>
                    <div class="w-full h-2 bg-gray-200 mt-4 relative">
                        <div :style="['width:' + tab / totalSteps * 100 + '%']" class="absolute bg-blue-500 inset-0 h-full"></div>
                    </div>
                </div>

                <div x-show="tab === 1" class="step">
                    <p class="mb-4">
                        <strong>
                            Part brief, part audit, this questionnaire helps us understand
                            where your brand is and where it needs to go – please include
                            any notes on tasks/services you believe are needed to help answer
                            these questions through our work with you.
                        </strong>
                    </p>
                    <p class="mb-4">
                        Please take some time to provide notes and thoughts in any form that
                        suits you, for any or all of the questions below.
                    </p>
                    <p class="mb-4">
                        We will use these answers to establish our baseline understanding of
                        the existing brand—its potential and its story—and we’ll consider these
                        answers as we plan the approach, or workshop if this precedes one.
                    </p>
                    <p>
                        Answers do not need to be exhaustive or all-inclusive. The answer starters
                        are there to assist you, but these are optional. Defer answers to others
                        where necessary.
                    </p>
                    <hr class="mb-4">
                    <h3 class="mb-8"><strong>Part A</strong></h3>

                    <div class="flex flex-col">
                        <label for="purposeWhyDoesYourBrandExist">Purpose—Why does your brand exist?</label>
                        {{ tag('textarea', {
                            id: 'purposeWhyDoesYourBrandExist',
                            name: 'fields[purposeWhyDoesYourBrandExist]',
                            text: entry.purposeWhyDoesYourBrandExist,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('purposeWhyDoesYourBrandExist')) }}
                    </div>
                    <div @click="tab = 2" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 2" class="step">
                    <div class="flex flex-col">
                        <label for="purposeWhyDoesYourBrandExist">Customers—Who does your brand exist to serve?</label>
                        {{ tag('textarea', {
                            id: 'customersWhoDoesYourBrandExistToServe',
                            name: 'fields[customersWhoDoesYourBrandExistToServe]',
                            text: entry.customersWhoDoesYourBrandExistToServe,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('customersWhoDoesYourBrandExistToServe')) }}
                    </div>
                    <div @click="tab = 1" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 3" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 3" class="step">
                    <div class="flex flex-col">
                        <label for="valuesWhatDoYouStandForAndHowDoYouOperate">Values—What do you stand for and how do you operate?</label>
                        {{ tag('textarea', {
                            id: 'valuesWhatDoYouStandForAndHowDoYouOperate',
                            name: 'fields[valuesWhatDoYouStandForAndHowDoYouOperate]',
                            text: entry.valuesWhatDoYouStandForAndHowDoYouOperate,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('valuesWhatDoYouStandForAndHowDoYouOperate')) }}
                    </div>
                    <div @click="tab = 2" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 4" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 4" class="step">
                    <div class="flex flex-col">
                        <label for="cultureHowDoYouAndYourPeopleThinkAndBehaveAtWork">Culture—How do you and your people think and behave at work?</label>
                        {{ tag('textarea', {
                            id: 'cultureHowDoYouAndYourPeopleThinkAndBehaveAtWork',
                            name: 'fields[cultureHowDoYouAndYourPeopleThinkAndBehaveAtWork]',
                            text: entry.cultureHowDoYouAndYourPeopleThinkAndBehaveAtWork,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('cultureHowDoYouAndYourPeopleThinkAndBehaveAtWork')) }}
                    </div>
                    <div @click="tab = 3" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 5" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 5" class="step">
                    <div class="flex flex-col">
                        <label for="howDoPeopleInteractWithYourBrandYourPeople">How do your people interact with your brand - your people</label>
                        {{ tag('textarea', {
                            id: 'howDoPeopleInteractWithYourBrandYourPeople',
                            name: 'fields[howDoPeopleInteractWithYourBrandYourPeople]',
                            text: entry.howDoPeopleInteractWithYourBrandYourPeople,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('howDoPeopleInteractWithYourBrandYourPeople')) }}
                    </div>
                    <div @click="tab = 4" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 6" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 6" class="step">
                    <div class="flex flex-col">
                        <label for="howDoYourPeopleInteractWithYourBrandYourCustomers">How do your people interact with your brand - your customers</label>
                        {{ tag('textarea', {
                            id: 'howDoYourPeopleInteractWithYourBrandYourCustomers',
                            name: 'fields[howDoYourPeopleInteractWithYourBrandYourCustomers]',
                            text: entry.howDoYourPeopleInteractWithYourBrandYourCustomers,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('howDoYourPeopleInteractWithYourBrandYourCustomers')) }}
                    </div>
                    <div @click="tab = 5" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 7" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 7" class="step">
                    <div>
                        <h3 class="text-4xl mb-4">Part B</h3>
                        <p>
                            Story—Describe who you are and what you stand for, where you’ve
                            been and where you are going, (including future scenarios to
                            prepare for, organisational structure and sub-brands—their role
                            and existing identity).
                        </p>
                    </div>

                    <div class="flex flex-col">
                        <label for="yourBrandIs">
                            Your brand is:
                        </label>
                        {{ tag('textarea', {
                            id: 'yourBrandIs',
                            name: 'fields[yourBrandIs]',
                            text: entry.yourBrandIs,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('yourBrandIs')) }}
                    </div>
                    <div @click="tab = 6" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 8" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>
                <div x-show="tab === 8" class="step">
                    <div class="flex flex-col">
                        <label for="yourBrandStandsFor">
                            Your brand stands for:
                        </label>
                        {{ tag('textarea', {
                            id: 'yourBrandStandsFor',
                            name: 'fields[yourBrandStandsFor]',
                            text: entry.yourBrandStandsFor,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('yourBrandStandsFor')) }}
                    </div>
                    <div @click="tab = 7" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 9" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 9" class="step">
                    <div class="flex flex-col">
                        <label for="ourPast">
                            Our past:
                        </label>
                        {{ tag('textarea', {
                            id: 'ourPast',
                            name: 'fields[ourPast]',
                            text: entry.ourPast,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('ourPast')) }}
                    </div>
                    <div @click="tab = 8" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 10" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 10" class="step">
                    <div class="flex flex-col">
                        <label for="ourFuture">
                            Our future:
                        </label>
                        {{ tag('textarea', {
                            id: 'ourFuture',
                            name: 'fields[ourFuture]',
                            text: entry.ourFuture,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('ourFuture')) }}
                    </div>
                    <div @click="tab = 9" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 11" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 11" class="step">
                    <div class="flex flex-col">
                        <label for="ourCurrentBrandsAndTheirPlaceInTheOverallArchitecture">
                            Our current brands and their place in the overall architecture:
                        </label>
                        {{ tag('textarea', {
                            id: 'ourCurrentBrandsAndTheirPlaceInTheOverallArchitecture',
                            name: 'fields[ourCurrentBrandsAndTheirPlaceInTheOverallArchitecture]',
                            text: entry.ourCurrentBrandsAndTheirPlaceInTheOverallArchitecture,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('ourCurrentBrandsAndTheirPlaceInTheOverallArchitecture')) }}
                    </div>
                    <div @click="tab = 10" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 12" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 12" class="step">
                    <div class="flex flex-col">
                        <label for="whatDoesYourBrandSoundLike">
                            Voice—What does your brand sound like (how it speaks and how it communicates the story and personality) and how does this need to evolve?
                        </label>
                        {{ tag('textarea', {
                            id: 'whatDoesYourBrandSoundLike',
                            name: 'fields[whatDoesYourBrandSoundLike]',
                            text: entry.whatDoesYourBrandSoundLike,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('whatDoesYourBrandSoundLike')) }}
                    </div>
                    <div @click="tab = 11" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 13" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 13" class="step">
                    <div class="flex flex-col">
                        <p>
                            Context—Where does your brand appear and compete, who are you are up
                            against, which organisations inspire you, who are your customers, where
                            are they, and what do they need and want?
                        </p>
                    </div>

                    <div class="flex flex-col">
                        <label for="marketsWeCompeteIn">
                            Markets we compete in:
                        </label>
                        {{ tag('textarea', {
                            id: 'marketsWeCompeteIn',
                            name: 'fields[marketsWeCompeteIn]',
                            text: entry.marketsWeCompeteIn,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('marketsWeCompeteIn')) }}
                    </div>
                    <div @click="tab = 12" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 14" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 14" class="step">
                    <div class="flex flex-col">
                        <label for="competitors">
                            Competitors:
                        </label>
                        {{ tag('textarea', {
                            id: 'competitors',
                            name: 'fields[competitors]',
                            text: entry.competitors,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('competitors')) }}
                    </div>
                    <div @click="tab = 13" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 15" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 15" class="step">
                    <div class="flex flex-col">
                        <label for="organisationsSimilarToUsOrThatWeAdmire">
                            Organisations similar to us or that we admire:
                        </label>
                        {{ tag('textarea', {
                            id: 'organisationsSimilarToUsOrThatWeAdmire',
                            name: 'fields[organisationsSimilarToUsOrThatWeAdmire]',
                            text: entry.organisationsSimilarToUsOrThatWeAdmire,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('organisationsSimilarToUsOrThatWeAdmire')) }}
                    </div>
                    <div @click="tab = 14" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 16" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 16" class="step">
                    <div class="flex flex-col">
                        <label for="customersAndTheirWantsNeedsInclude">
                            Customers (and their wants/needs) include:
                        </label>
                        {{ tag('textarea', {
                            id: 'customersAndTheirWantsNeedsInclude',
                            name: 'fields[customersAndTheirWantsNeedsInclude]',
                            text: entry.customersAndTheirWantsNeedsInclude,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('customersAndTheirWantsNeedsInclude')) }}
                    </div>
                    <div @click="tab = 15" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 17" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 17" class="step">
                    <p>
                        Visuals—What is the status of your logo and visual identity, visual
                        branding and where does it appear?
                    </p>

                    <div class="flex flex-col">
                        <label for="ourVisualBrandingNeedsTo">
                            Our visual branding needs to:
                        </label>
                        {{ tag('textarea', {
                            id: 'ourVisualBrandingNeedsTo',
                            name: 'fields[ourVisualBrandingNeedsTo]',
                            text: entry.ourVisualBrandingNeedsTo,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('ourVisualBrandingNeedsTo')) }}
                    </div>
                    <div @click="tab = 16" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 18" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 18" class="step">
                    <div class="flex flex-col">
                        <p>
                            Tools—What collateral, tools and applications do you have/need?
                        </p>
                    </div>

                    <div class="flex flex-col">
                        <label for="existingMaterialsInclude">
                            Existing materials include:
                        </label>
                        {{ tag('textarea', {
                            id: 'existingMaterialsInclude',
                            name: 'fields[existingMaterialsInclude]',
                            text: entry.existingMaterialsInclude,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('existingMaterialsInclude')) }}
                    </div>
                    <div @click="tab = 17" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 19" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 19" class="step">
                    <div class="flex flex-col">
                        <label for="newNeedsInclude">
                            New needs include:
                        </label>
                        {{ tag('textarea', {
                            id: 'newNeedsInclude',
                            name: 'fields[newNeedsInclude]',
                            text: entry.newNeedsInclude,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('newNeedsInclude')) }}
                    </div>
                    <div @click="tab = 18" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 20" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 20" class="step">
                    <div class="flex flex-col">
                        <label for="whatCampaignsWillTellYourStory">
                            Campaigns—What campaigns will tell your story and call
                            people to action (using your brand voice to tell your
                            brand story and engage customers)?
                        </label>
                        {{ tag('textarea', {
                            id: 'whatCampaignsWillTellYourStory',
                            name: 'fields[whatCampaignsWillTellYourStory]',
                            text: entry.whatCampaignsWillTellYourStory,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('whatCampaignsWillTellYourStory')) }}
                    </div>
                    <div @click="tab = 19" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 21" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 21">
                    <div>
                        <h3 class="text-4xl mb-4">Part C</h3>
                    </div>

                    <div class="flex flex-col">
                        <label for="promiseWhatCanShouldDoCustomersExpectFromYou">
                            Promise—What can/should/do customers expect from you?
                        </label>
                        {{ tag('textarea', {
                            id: 'promiseWhatCanShouldDoCustomersExpectFromYou',
                            name: 'fields[promiseWhatCanShouldDoCustomersExpectFromYou]',
                            text: entry.promiseWhatCanShouldDoCustomersExpectFromYou,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('promiseWhatCanShouldDoCustomersExpectFromYou')) }}
                    </div>
                    <div @click="tab = 20" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 22" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 22">
                    <div class="flex flex-col">
                        <label for="whatCanYourBrandAchieve">
                            Opportunities—What can your brand achieve for your business/organisation?
                        </label>
                        {{ tag('textarea', {
                            id: 'whatCanYourBrandAchieve',
                            name: 'fields[whatCanYourBrandAchieve]',
                            text: entry.whatCanYourBrandAchieve,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('whatCanYourBrandAchieve')) }}
                    </div>
                    <div @click="tab = 21" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <div @click="tab = 23" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Next</div>
                </div>

                <div x-show="tab === 23">
                    <div class="flex flex-col">
                        <label for="outcomesWhatNeedsToBeDoneAsAResultOfThisAudit">
                            Outcomes—What needs to be done as a result of this audit?
                        </label>
                        {{ tag('textarea', {
                            id: 'outcomesWhatNeedsToBeDoneAsAResultOfThisAudit',
                            name: 'fields[outcomesWhatNeedsToBeDoneAsAResultOfThisAudit]',
                            text: entry.outcomesWhatNeedsToBeDoneAsAResultOfThisAudit,
                            class: 'p-2 bg-gray-100 border border-gray-100 rounded',
                            rows: 4
                        }) }}
                        {{ _self.errorList(entry.getErrors('outcomesWhatNeedsToBeDoneAsAResultOfThisAudit')) }}
                    </div>
                    <div @click="tab = 22" class="p-2 bg-blue-500 text-white rounded mt-4 inline-block hover:cursor-pointer">Prev</div>
                    <button type="submit" class="p-2 bg-red-500 text-white rounded">Publish</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}