<x-layouts.site>
    <x-slot:title>Training Feedback Form</x-slot:title>
    <x-slot:description>Share feedback after a Money-Wise training, workshop, talk, or coaching session.</x-slot:description>

    @php
        $satisfactionScale = [
            '1' => 'Very dissatisfied',
            '2' => 'Dissatisfied',
            '3' => 'Neutral',
            '4' => 'Satisfied',
            '5' => 'Very satisfied',
        ];

        $overallScale = [
            '5' => 'Excellent',
            '4' => 'Good',
            '3' => 'Neutral',
            '2' => 'Poor',
            '1' => 'Very poor',
        ];

        $topics = [
            'Money Personality & Values Clarification',
            'Budgeting Basics',
            'Managing Debt',
            'Saving and Emergency Funds',
            'Investing and Investment Options',
            'Retirement Planning',
            'Money and Relationships',
        ];
    @endphp

    <section class="bg-mesh py-16">
        <div class="container-site max-w-3xl">
            <div class="mb-10 text-center">
                <span class="eyebrow justify-center">Training Feedback</span>
                <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display">How did we do?</h1>
                <p class="mx-auto mt-4 max-w-2xl text-lg text-navy-600">
                    Your feedback helps us improve Money-Wise trainings, talks, coaching sessions, and future resources.
                </p>
            </div>

            @if (session('feedback_submitted'))
                <div class="rounded-brand bg-emerald-50 p-8 text-center ring-1 ring-emerald-200 shadow-lg">
                    <span class="mx-auto grid h-16 w-16 place-items-center rounded-full bg-emerald-100 text-emerald-600">
                        <x-icon name="check" class="h-8 w-8" />
                    </span>
                    <h2 class="mt-4 font-display text-2xl font-bold text-emerald-800">Feedback submitted. Asante.</h2>
                    <p class="mt-2 text-navy-600">
                        Your response has been recorded and will help us refine the next Money-Wise experience.
                    </p>
                    <div class="mt-6">
                        <a href="{{ route('home') }}" class="btn-primary">Return home</a>
                    </div>
                </div>
            @else
                <form method="POST" action="{{ route('feedback.store') }}" class="space-y-6">
                    @csrf

                    <div class="card p-8">
                        <div class="border-b border-navy-100 pb-4">
                            <h2 class="font-display text-lg font-bold text-navy-900">Session Details</h2>
                            <p class="mt-1 text-sm text-navy-500">Optional, but useful when this form is shared by QR code after a specific session.</p>
                        </div>

                        <div class="mt-5 grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="name" class="mb-1 block text-sm font-semibold text-navy-700">Full name</label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" autocomplete="name"
                                       class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">
                                @error('name') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                            </div>

                            <div>
                                <label for="email" class="mb-1 block text-sm font-semibold text-navy-700">Email address</label>
                                <input type="email" name="email" id="email" value="{{ old('email') }}" autocomplete="email"
                                       class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">
                                @error('email') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                            </div>

                            <div>
                                <label for="organization" class="mb-1 block text-sm font-semibold text-navy-700">Organization / group</label>
                                <input type="text" name="organization" id="organization" value="{{ old('organization', request('organization')) }}"
                                       class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">
                                @error('organization') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                            </div>

                            <div>
                                <label for="event_name" class="mb-1 block text-sm font-semibold text-navy-700">Event / session name</label>
                                <input type="text" name="event_name" id="event_name" value="{{ old('event_name', request('event')) }}"
                                       class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">
                                @error('event_name') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                            </div>

                            <div>
                                <label for="training_date" class="mb-1 block text-sm font-semibold text-navy-700">Training date</label>
                                <input type="date" name="training_date" id="training_date" value="{{ old('training_date', request('date')) }}"
                                       class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">
                                @error('training_date') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                            </div>

                            <div>
                                <label for="facilitator" class="mb-1 block text-sm font-semibold text-navy-700">Facilitator / trainer</label>
                                <input type="text" name="facilitator" id="facilitator" value="{{ old('facilitator', request('facilitator')) }}"
                                       class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">
                                @error('facilitator') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                            </div>

                            <div class="sm:col-span-2">
                                <label for="audience_segment" class="mb-1 block text-sm font-semibold text-navy-700">Audience profile</label>
                                <select name="audience_segment" id="audience_segment"
                                        class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">
                                    <option value="">Select one</option>
                                    @foreach (['Individual', 'Couple / family', 'Chama / group', 'Entry-level staff', 'Mid-level / supervisors', 'Executive / senior staff', 'Soon-to-retire staff', 'Retrenchment / transition group', 'Other'] as $segment)
                                        <option value="{{ $segment }}" @selected(old('audience_segment', request('segment')) === $segment)>{{ $segment }}</option>
                                    @endforeach
                                </select>
                                @error('audience_segment') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                            </div>
                        </div>
                    </div>

                    <div class="card p-8 space-y-8">
                        <x-feedback-rating
                            number="1"
                            name="content_satisfaction"
                            label="How satisfied were you with the content, learning materials, worksheets, or exercises shared during the session?"
                            :options="$satisfactionScale"
                            :value="old('content_satisfaction')" />

                        <x-feedback-rating
                            number="2"
                            name="trainer_expertise"
                            label="How satisfied were you with the expertise and knowledge of the trainer?"
                            :options="$satisfactionScale"
                            :value="old('trainer_expertise')" />

                        <x-feedback-rating
                            number="3"
                            name="scheduling_rating"
                            label="How would you rate the scheduling, timing, and length of the session?"
                            :options="['1' => 'Bad', '2' => 'Fair', '3' => 'Neutral', '4' => 'Good', '5' => 'Excellent']"
                            :value="old('scheduling_rating')" />

                        <div>
                            <label for="scheduling_comment" class="mb-1 block text-sm font-semibold text-navy-700">Scheduling comment</label>
                            <textarea name="scheduling_comment" id="scheduling_comment" rows="3"
                                      class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">{{ old('scheduling_comment') }}</textarea>
                            @error('scheduling_comment') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>

                        <x-feedback-rating
                            number="4"
                            name="trainer_personalization"
                            label="How well did the trainer personalize the session to the audience's financial needs?"
                            :options="['1' => 'Not at all', '2' => 'Slightly', '3' => 'Somewhat', '4' => 'Well', '5' => 'Extremely well']"
                            :value="old('trainer_personalization')" />

                        <div>
                            <label for="trainer_advice" class="mb-1 block text-sm font-semibold text-navy-700">Did the trainer provide clear and actionable guidance?</label>
                            <textarea name="trainer_advice" id="trainer_advice" rows="3"
                                      class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">{{ old('trainer_advice') }}</textarea>
                            @error('trainer_advice') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>

                        <x-feedback-rating
                            number="5"
                            name="overall_experience"
                            label="How would you rate your overall experience?"
                            :options="$overallScale"
                            :value="old('overall_experience')" />
                    </div>

                    <div class="card p-8 space-y-6">
                        <h2 class="font-display text-lg font-bold text-navy-900">Impact And Next Steps</h2>

                        <div>
                            <label for="financial_mindset_impact" class="mb-1 block text-sm font-semibold text-navy-700">What impact has this session had on your financial mindset or situation?</label>
                            <textarea name="financial_mindset_impact" id="financial_mindset_impact" rows="4"
                                      class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">{{ old('financial_mindset_impact') }}</textarea>
                            @error('financial_mindset_impact') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="recommend_training" class="mb-1 block text-sm font-semibold text-navy-700">Would you recommend this session to a colleague, spouse, family, chama, or organization?</label>
                            <input type="text" name="recommend_training" id="recommend_training" value="{{ old('recommend_training') }}"
                                   class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">
                            @error('recommend_training') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <h3 class="font-display text-base font-bold text-navy-900">Which topics had the greatest impact?</h3>
                            <div class="mt-3 grid gap-2 sm:grid-cols-2">
                                @foreach ($topics as $topic)
                                    <label class="flex items-start gap-3 rounded-2xl border border-navy-150 bg-white p-4 transition hover:bg-navy-50">
                                        <input type="checkbox" name="greatest_impact_topics[]" value="{{ $topic }}"
                                               @checked(in_array($topic, old('greatest_impact_topics', []), true))
                                               class="mt-1 rounded border-navy-200 text-wise-500 focus:ring-wise-400">
                                        <span class="text-sm font-semibold leading-snug text-navy-800">{{ $topic }}</span>
                                    </label>
                                @endforeach
                            </div>
                            @error('greatest_impact_topics') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <h3 class="font-display text-base font-bold text-navy-900">Which topics need more time or a deeper session?</h3>
                            <div class="mt-3 grid gap-2 sm:grid-cols-2">
                                @foreach ($topics as $topic)
                                    <label class="flex items-start gap-3 rounded-2xl border border-navy-150 bg-white p-4 transition hover:bg-navy-50">
                                        <input type="checkbox" name="more_time_topics[]" value="{{ $topic }}"
                                               @checked(in_array($topic, old('more_time_topics', []), true))
                                               class="mt-1 rounded border-navy-200 text-wise-500 focus:ring-wise-400">
                                        <span class="text-sm font-semibold leading-snug text-navy-800">{{ $topic }}</span>
                                    </label>
                                @endforeach
                            </div>
                            @error('more_time_topics') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="recommended_improvements" class="mb-1 block text-sm font-semibold text-navy-700">What improvements or additional services would you recommend?</label>
                            <textarea name="recommended_improvements" id="recommended_improvements" rows="4"
                                      class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">{{ old('recommended_improvements') }}</textarea>
                            @error('recommended_improvements') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="trainer_additional_feedback" class="mb-1 block text-sm font-semibold text-navy-700">Any additional feedback regarding your trainer?</label>
                            <textarea name="trainer_additional_feedback" id="trainer_additional_feedback" rows="4"
                                      class="w-full rounded-2xl border-navy-200 px-4 py-3 transition focus:border-wise-400 focus:ring-wise-400">{{ old('trainer_additional_feedback') }}</textarea>
                            @error('trainer_additional_feedback') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="pt-4 text-center">
                        <button type="submit" class="btn-accent btn-lg w-full shadow-lg md:w-auto md:px-16">
                            Submit feedback <x-icon name="send" class="h-5 w-5" />
                        </button>
                    </div>
                </form>
            @endif
        </div>
    </section>
</x-layouts.site>
