@extends('layouts.public')

@section('title', __('Feedback & Grievance'))
@section('meta_description', __('Submit feedback or raise a grievance about ABACO INFRA services or projects.'))

@section('content')
    <x-page-hero :eyebrow="__('We are listening')"
                 :title="__('Feedback & Grievance')"
                 :subtitle="__('Grievances are reviewed by management and acknowledged in writing.')"
                 :breadcrumbs="[__('Feedback & Grievance') => null]" />

    <section class="section">
        <div class="container-page grid gap-14 lg:grid-cols-12">
            <div class="lg:col-span-7 xl:col-span-8">
                @if (session('success'))
                    <x-alert type="success" class="mb-8" :title="__('Submission received')">{{ session('success') }}</x-alert>
                @endif

                @if ($errors->any())
                    <x-alert type="error" class="mb-8" :title="__('Please correct the following')">
                        <ul class="mt-1 list-inside list-disc space-y-0.5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </x-alert>
                @endif

                <form action="{{ route('contact.feedback.store') }}" method="POST" enctype="multipart/form-data"
                      class="grid gap-6 sm:grid-cols-2" x-data="submitGuard" @submit="submit()">
                    @csrf

                    <x-form.select name="type" :label="__('Submission type')" required :placeholder="false"
                                   :options="['feedback' => __('Feedback'), 'grievance' => __('Grievance')]"
                                   class="sm:col-span-2" />

                    <x-form.input name="name" :label="__('Full name')" required autocomplete="name" />
                    <x-form.input name="email" type="email" :label="__('Email address')" required autocomplete="email" />
                    <x-form.input name="phone" :label="__('Phone')" autocomplete="tel" />
                    <x-form.input name="organization" :label="__('Organisation')" />
                    <x-form.input name="subject" :label="__('Subject')" class="sm:col-span-2" />

                    <x-form.textarea name="message" :label="__('Details')" rows="8" required class="sm:col-span-2"
                                     :hint="__('Include project name, location and dates where relevant.')" />

                    <x-form.file name="attachment" :label="__('Supporting document (optional)')" :preview="false"
                                 accept=".pdf,.doc,.docx,.jpg,.png"
                                 :hint="__('PDF, Word or image, up to 20 MB.')" class="sm:col-span-2" />

                    @include('public.partials.honeypot', ['formId' => 'feedback'])
                    @include('public.partials.captcha')

                    <div class="sm:col-span-2">
                        <button type="submit" class="btn-primary" :disabled="submitting">
                            <span x-show="!submitting">{{ __('Submit') }}</span>
                            <span x-show="submitting" x-cloak>{{ __('Submitting…') }}</span>
                        </button>
                    </div>
                </form>
            </div>

            <aside class="lg:col-span-5 xl:col-span-4">
                <div class="panel lg:sticky lg:top-28">
                    <p class="meta-label mb-5">{{ __('How we handle grievances') }}</p>

                    <ol class="space-y-5">
                        @foreach ([
                            __('Acknowledged within two working days.'),
                            __('Reviewed by the relevant project manager.'),
                            __('Written response issued to the address you provide.'),
                        ] as $index => $step)
                            <li class="flex gap-4">
                                <span class="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary-50 font-mono text-xs font-semibold text-primary">
                                    {{ $index + 1 }}
                                </span>
                                <span class="text-sm text-text-secondary">{{ $step }}</span>
                            </li>
                        @endforeach
                    </ol>

                    @if ($office = $offices->firstWhere('is_primary', true))
                        <div class="mt-7 border-t border-border pt-6 text-sm">
                            <p class="font-medium text-text">{{ $office->name }}</p>
                            <p class="mt-1 text-text-secondary">{{ $office->fullAddress() }}</p>
                            @if ($office->phone)
                                <p class="mt-1 text-text-secondary">{{ $office->phone }}</p>
                            @endif
                        </div>
                    @endif
                </div>
            </aside>
        </div>
    </section>
@endsection