@extends('frontend.layouts.app')
@section('title', 'Grievances')
@section('meta', 'Grievances Meta Description')
@section('content')
    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white"> {{ __('grievances.grievances') }}
                    </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="/" class="text-white font-bold">{{ __('grievances.home') }}</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <p class="text-white font-bold hover:cursor-pointer">{{ __('grievances.grievances') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->

    <section class="min-h-[60vh] flex flex-col">
        <!-- Heading Section -->
        <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">
            <div>
                <!-- Subtitle -->
                <p
                    class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                    {{ __('grievances.reach_out') }}
                </p>

                <!-- Main Title -->
                <h2
                    class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                    <span class="relative inline-block text-[#007300]">
                        <svg viewBox="0 0 52 24" fill="currentColor"
                            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-[#007300] lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                            <defs>
                                <pattern id="grievances-pattern" x="0" y="0" width=".135" height=".30">
                                    <circle cx="1" cy="1" r=".7"></circle>
                                </pattern>
                            </defs>
                            <rect fill="url(#grievances-pattern)" width="52" height="24"></rect>
                        </svg>
                        <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                            {{ __('grievances.grievances') }}

                        </span>
                    </span>
                </h2>
            </div>

            <!-- Description -->
            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto text-gray-600 font-medium">
                {{ __('grievances.grievances_description') }}
            </p>
        </div>
        <section class=" max-w-8xl mx-auto items-center justify-around flex flex-col gap-6 lg:gap-10">
            <div class="flex flex-col xl:flex-row justify-around gap-3">
                <div class="flex-1 p-6">
                    <img src="{{ asset(path: '/assets/images/about-us/about-us.jpg') }}" alt="Banner Image"
                        class=" w-full object-cover rounded-sm" />
                </div>
                <div
                    class="flex-1 font-medium text-gray-700 text-justify flex flex-col gap-6 p-6 text-base tracking-wide my-10">
                    <p>{{ __('grievances.grm_paragraph_1') }}
                    </p>
                    <p>{{ __('grievances.grm_paragraph_2') }}</p>
                </div>

            </div>
            <div id="grievence-form-section" class="p-10 space-y-6 w-full md:mx-10">
                <h1 class="text-2xl text-primary font-extrabold text-center">
                    {{ __('grievances.grievance_redress_mechanism') }}
                </h1>

                <div class="lg:flex lg:justify-center lg:mt-20 w-full">
                    <img src="/assets/images/contact/contact-form-bg.png" class="h-full" alt="" />
                    <div id="grievence-form-section" class="bg-white rounded-md p-6">
                        <form class="sm:mx-20" action="{{ route('grievances') }}" method="POST">
                            @csrf
                            <p class="text-red-500 mb-4">{{ __('grievances.sign_is_mandatory') }}</p>

                            {{-- Confidential --}}
                            <div class="flex flex-col space-y-3 mb-6">
                                <label for="confidential" class="font-bold text-xl text-primary">
                                    {{ __('grievances.confidential_details_question') }}
                                </label>
                                <div class="flex items-center space-x-2">
                                    <input type="hidden" name="is_confidential" value="0">
                                    <input type="checkbox" id="is_confidential" name="is_confidential" value="1"
                                        class="h-4 w-4 text-[#007300] rounded"
                                        {{ old('is_confidential') ? 'checked' : '' }}>
                                    <label for="is_confidential" class="text-gray-700">
                                        {{ __('grievances.yes_keep_my_details_confidential') }}
                                    </label>
                                </div>
                            </div>

                            {{-- Affected Party --}}
                            <div class="flex items-center space-x-2 mb-6">
                                <input type="hidden" name="is_affected_party" value="0">
                                <input type="checkbox" id="is_affected_party" name="is_affected_party" value="1"
                                    class="h-4 w-4 text-[#007300] rounded" {{ old('is_affected_party') ? 'checked' : '' }}>
                                <label for="is_affected_party" class="text-gray-700">
                                    {{ __('grievances.tick_if_complaint_on_behalf_of_affected_party') }}
                                </label>
                            </div>

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                {{-- Full Name --}}
                                <div class="flex flex-col space-y-3">
                                    <label for="full_name" class="font-bold text-xl text-primary">
                                        {{ __('grievances.full_name') }}
                                    </label>
                                    <input type="text" id="full_name" name="full_name" minlength="2"
                                        placeholder="{{ __('grievances.enter_your_full_name') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] px-3 py-2 @error('full_name') border-red-500 @enderror"
                                        value="{{ old('full_name') }}" required />
                                    @error('full_name')
                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Relation --}}
                                <div class="flex flex-col space-y-3">
                                    <label for="relation" class="font-bold text-xl text-primary">
                                        {{ __('grievances.relation_with_affected_party') }}
                                    </label>
                                    <input type="text" id="relation" name="relation"
                                        placeholder="{{ __('grievances.specify_relation_with_affected_party') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] px-3 py-2 @error('relation') border-red-500 @enderror"
                                        value="{{ old('relation') }}" />
                                    @error('relation')
                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Email --}}
                                <div class="flex flex-col space-y-3">
                                    <label for="email" class="font-bold text-xl text-primary">
                                        {{ __('grievances.email') }} <span class="text-red-500">*</span>
                                    </label>
                                    <input type="email" id="email" name="email"
                                        placeholder="{{ __('grievances.enter_your_email') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] px-3 py-2 @error('email') border-red-500 @enderror"
                                        value="{{ old('email') }}" required />
                                    @error('email')
                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Contact No --}}
                                <div class="flex flex-col space-y-3">
                                    <label for="contact_no" class="font-bold text-xl text-primary">
                                        {{ __('grievances.contact_no') }} <span class="text-red-500">*</span>
                                    </label>
                                    <input type="tel" id="contact_no" name="contact_no" pattern="[0-9]{10,15}"
                                        title="{{ __('grievances.enter_your_phone_number') }}"
                                        placeholder="{{ __('grievances.enter_your_phone_number') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] px-3 py-2 @error('contact_no') border-red-500 @enderror"
                                        value="{{ old('contact_no') }}" required />
                                    @error('contact_no')
                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Address --}}
                                <div class="flex flex-col space-y-3">
                                    <label for="address" class="font-bold text-xl text-primary">
                                        {{ __('grievances.address') }} <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" id="address" name="address"
                                        placeholder="{{ __('grievances.enter_your_address') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] px-3 py-2 @error('address') border-red-500 @enderror"
                                        value="{{ old('address') }}" required />
                                    @error('address')
                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Message --}}
                            <div class="mt-5 flex flex-col space-y-3">
                                <label for="message" class="font-bold text-xl text-primary">
                                    {{ __('grievances.your_message') }} <span class="text-red-500">*</span>
                                </label>
                                <textarea id="message" name="message" rows="5" required minlength="5"
                                    placeholder="{{ __('grievances.write_your_message_here') }}"
                                    class="bg-[#F5FEF3] rounded-md px-3 py-2 @error('message') border-red-500 @enderror">{{ old('message') }}</textarea>
                                @error('message')
                                    <span class="text-red-500 text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- Submit --}}
                            <div class="w-full flex justify-center">
                                <button type="submit"
                                    class="w-44 text-center py-3 px-5 rounded-sm border-2 border-primary bg-primary text-white hover:bg-white hover:text-primary transition-all ease-in-out cursor-pointer tracking-wide my-6 font-semibold">
                                    {{ __('grievances.submit') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


        </section>
    </section>
@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>

    @if ($errors->any())
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const el = document.getElementById("grievence-form-section");
                if (el) {
                    el.scrollIntoView({
                        behavior: "smooth"
                    });
                }
            });
        </script>
    @endif

@endpush