@component('layouts.app', [
    'title' => 'File a Grievance',
    'metaDescription' =>
        'Submit a grievance to Fintech — get a reference number, expected resolution timeline, and a named officer handling your case.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Support',
        'title' => 'File a Grievance',
        'subtitle' =>
            'Tell us what went wrong and we\'ll route it to the right team. Every submission gets a reference number you can use to follow up.',
    ])

    <section class="pb-20 dark:bg-ink lg:pb-28" x-data="{
        priority: {{ Js::from(old('priority', 'Normal')) }},
        relationship: {{ Js::from(old('relationship', '')) }},
        category: {{ Js::from(old('category', '')) }},
        fileName: '',
        fileError: '',
        onFile(e) {
            const file = e.target.files[0];
            this.fileError = '';
            if (file && file.size > 5 * 1024 * 1024) {
                this.fileError = `${file.name} is larger than 5MB. Please choose a smaller file.`;
                e.target.value = '';
                this.fileName = '';
                return;
            }
            this.fileName = file ? file.name : '';
        },
    }">
        <div class="mx-auto max-w-7xl px-6">

            @if ($errors->any())
                <div
                    class="reveal mb-10 rounded-2xl border border-red-200 bg-red-50 px-5 py-4 text-sm font-semibold text-red-700 dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-400">
                    Please correct the highlighted fields and submit your grievance again.
                </div>
            @endif

            <!-- Fraud / urgent notice -->
            <div
                class="reveal mb-10 flex items-start gap-3 rounded-2xl border border-slate-100 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-panel">
                <span
                    class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                    <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
                </span>
                <p class="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
                    <span class="font-bold text-slate-900 dark:text-white">For suspected fraud or unauthorized
                        transactions,</span>
                    don't use this form — call our 24/7 fraud helpline.
                    {{-- <span class="font-semibold text-primary dark:text-secondary">1800-419-0000</span> immediately. --}}
                </p>
            </div>

            <div class="grid grid-cols-1 gap-10 lg:grid-cols-5">
                <!-- Grievance form -->
                <div
                    class="reveal-left rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel lg:col-span-3">
                    <h2 class="mb-6 font-heading text-xl font-bold text-slate-900 dark:text-white">Grievance Details</h2>
                    <form method="post" action="{{ route('grievance.store') }}" enctype="multipart/form-data"
                        class="space-y-5" novalidate>
                        @csrf

                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-1">
                            <div>
                                <label for="grievance-name"
                                    class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Full
                                    Name <span class="text-red-500">*</span></label>
                                <input id="grievance-name" name="name" type="text" required minlength="2"
                                    maxlength="100" value="{{ old('name') }}" placeholder="Sabina Gurung"
                                    autocomplete="name"
                                    class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition invalid:[&:not(:placeholder-shown)]:border-red-400 focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <p class="mt-1 hidden text-xs text-red-500 peer-[&:not(:placeholder-shown):invalid]:block">
                                    Enter your full name (at least 2 characters).</p>
                                @error('name')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                            {{--
                            <div>
                                <label for="grievance-account"
                                    class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Customer
                                    / Account ID <span class="text-red-500">*</span></label>
                                <input id="grievance-account" name="account_id" type="text" required
                                    minlength="4" maxlength="30" value="{{ old('account_id') }}"
                                    placeholder="FIN-XXXXXXXX"
                                    class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <p class="mt-1 hidden text-xs text-red-500 peer-[&:not(:placeholder-shown):invalid]:block">
                                    Enter your customer or account ID.</p>
                                @error('account_id')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                            </div>
                            --}}
                            <div>
                                <label for="grievance-email"
                                    class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Email
                                    <span class="text-red-500">*</span></label>
                                <input id="grievance-email" name="email" type="email" required
                                    value="{{ old('email') }}" placeholder="you@example.com" autocomplete="email"
                                    class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <p class="mt-1 hidden text-xs text-red-500 peer-[&:not(:placeholder-shown):invalid]:block">
                                    Enter a valid email address.</p>
                                @error('email')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>


                            <div>
                                <label for="grievance-phone"
                                    class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Phone
                                    Number <span class="text-red-500">*</span></label>
                                <input id="grievance-phone" name="phone" type="tel" required
                                    pattern="^(\+?977[- ]?)?9\d{9}$" value="{{ old('phone') }}"
                                    title="Enter a valid Nepali phone number, e.g. +977 98XXXXXXXX"
                                    placeholder="+977 98XXXXXXXX" autocomplete="tel"
                                    class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <p class="mt-1 hidden text-xs text-red-500 peer-[&:not(:placeholder-shown):invalid]:block">
                                    Enter a valid Nepali phone number, e.g. +977 98XXXXXXXX.</p>
                                @error('phone')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <label for="grievance-relationship"
                                class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">You
                                Are A <span class="text-red-500">*</span></label>
                            <select id="grievance-relationship" name="relationship" required x-model="relationship"
                                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <option value="" disabled {{ old('relationship') ? '' : 'selected' }}>Select one
                                </option>
                                <option @selected(old('relationship') === 'Retail Customer')>Retail Customer</option>
                                <option @selected(old('relationship') === 'Business / Merchant Account Holder')>Business / Merchant Account Holder</option>
                                <option @selected(old('relationship') === 'Employee')>Employee</option>
                                <option @selected(old('relationship') === 'Vendor or Partner')>Vendor or Partner</option>
                                <option @selected(old('relationship') === 'Other')>Other</option>
                            </select>
                            @error('relationship')
                                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror

                            <div x-show="relationship === 'Other'" x-cloak x-transition class="mt-3">
                                <label for="grievance-relationship-other"
                                    class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Please
                                    Specify <span class="text-red-500">*</span></label>
                                <input id="grievance-relationship-other" name="relationship_other" type="text"
                                    minlength="2" maxlength="100" value="{{ old('relationship_other') }}"
                                    :required="relationship === 'Other'"
                                    placeholder="Tell us how you're related to Fintech International"
                                    class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <p class="mt-1 hidden text-xs text-red-500 peer-[&:not(:placeholder-shown):invalid]:block">
                                    Please tell us how you're related to us.</p>
                                @error('relationship_other')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                            <div>
                                <label for="grievance-category"
                                    class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Category
                                    <span class="text-red-500">*</span></label>
                                <select id="grievance-category" name="category" required x-model="category"
                                    class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                    <option value="" disabled {{ old('category') ? '' : 'selected' }}>Select a
                                        category</option>
                                    <option @selected(old('category') === 'Transaction Dispute')>Transaction Dispute</option>
                                    <option @selected(old('category') === 'Failed or Delayed Payment')>Failed or Delayed Payment</option>
                                    <option @selected(old('category') === 'Account Access Issue')>Account Access Issue</option>
                                    <option @selected(old('category') === 'Charges or Fees')>Charges or Fees</option>
                                    <option @selected(old('category') === 'Customer Service Conduct')>Customer Service Conduct</option>
                                    <option @selected(old('category') === 'Data Privacy Concern')>Data Privacy Concern</option>
                                    <option @selected(old('category') === 'Product or Service Quality')>Product or Service Quality</option>
                                    <option @selected(old('category') === 'Other')>Other</option>
                                </select>
                                @error('category')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror

                                <div x-show="category === 'Other'" x-cloak x-transition class="mt-3">
                                    <label for="grievance-category-other"
                                        class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Please
                                        Specify <span class="text-red-500">*</span></label>
                                    <input id="grievance-category-other" name="category_other" type="text"
                                        minlength="2" maxlength="100" value="{{ old('category_other') }}"
                                        :required="category === 'Other'" placeholder="What type of issue is this?"
                                        class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                    <p
                                        class="mt-1 hidden text-xs text-red-500 peer-[&:not(:placeholder-shown):invalid]:block">
                                        Please specify the category.</p>
                                    @error('category_other')
                                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div>
                                <label for="grievance-date"
                                    class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Date
                                    of Incident <span class="text-red-500">*</span></label>
                                <input id="grievance-date" name="incident_date" type="date" required
                                    max="{{ now()->format('Y-m-d') }}" value="{{ old('incident_date') }}"
                                    class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <p
                                    class="mt-1 hidden text-xs text-slate-500 dark:text-slate-400 peer-[&:not(:placeholder-shown):invalid]:block">
                                    Select a valid date (it can't be in the future).</p>
                                @error('incident_date')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label for="grievance-subject"
                                class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Subject
                                <span class="text-red-500">*</span></label>
                            <input id="grievance-subject" name="subject" type="text" required minlength="5"
                                maxlength="100" value="{{ old('subject') }}"
                                placeholder="One line summarizing the issue"
                                class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                            <p class="mt-1 hidden text-xs text-red-500 peer-[&:not(:placeholder-shown):invalid]:block">
                                Add a short subject line (5–100 characters).</p>
                            @error('subject')
                                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="grievance-description"
                                class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">What
                                Happened? <span class="text-red-500">*</span></label>
                            <textarea id="grievance-description" name="description" required rows="5" minlength="20" maxlength="2000"
                                placeholder="Include dates, amounts, transaction or reference IDs, and who you spoke with, if applicable."
                                class="peer w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">{{ old('description') }}</textarea>
                            <p class="mt-1 hidden text-xs text-red-500 peer-[&:not(:placeholder-shown):invalid]:block">
                                Please describe your grievance in at least 20 characters.</p>
                            @error('description')
                                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <span
                                class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Priority</span>
                            <div class="flex flex-wrap gap-2">
                                <template x-for="level in ['Low', 'Normal', 'High', 'Urgent']" :key="level">
                                    <button type="button" @click="priority = level"
                                        :aria-pressed="(priority === level).toString()"
                                        :class="priority === level ? 'bg-primary text-white dark:bg-secondary dark:text-ink' :
                                            'text-slate-500 hover:bg-primary/5 hover:text-primary dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-secondary'"
                                        class="rounded-xl px-4 py-2 text-xs font-semibold transition duration-300"
                                        x-text="level"></button>
                                </template>
                            </div>
                            <input type="hidden" name="priority" :value="priority">
                        </div>

                        <div>
                            <label for="grievance-attachment"
                                class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                                Supporting Document <span class="font-normal normal-case text-slate-400">(optional, max
                                    5MB)</span>
                            </label>
                            <label for="grievance-attachment"
                                class="flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl border-2 border-dashed border-slate-200 py-5 text-sm text-slate-500 transition hover:border-primary hover:bg-primary/5 dark:border-white/10 dark:text-slate-400 dark:hover:border-secondary dark:hover:bg-white/5">
                                <i class="fa-solid fa-paperclip text-xs" aria-hidden="true"></i>
                                <span x-text="fileName || 'Click to upload, or drag a file here'"></span>
                            </label>
                            <input id="grievance-attachment" name="attachment" type="file" class="hidden"
                                accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" @change="onFile">
                            <p class="mt-1 text-xs text-red-500" x-show="fileError" x-cloak x-text="fileError"></p>
                            @error('attachment')
                                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <label class="flex items-start gap-3 pt-1">
                            <input type="checkbox" name="declaration" required @checked(old('declaration'))
                                class="mt-0.5 h-4 w-4 shrink-0 rounded border-slate-300 text-primary focus:ring-primary dark:border-white/20 dark:bg-surface dark:text-secondary dark:focus:ring-secondary">
                            <span class="text-xs leading-relaxed text-slate-500 dark:text-slate-400">
                                I confirm the details above are accurate to the best of my knowledge, and I consent to
                                Fintech International Pvt. Ltd contacting me to resolve this grievance.
                                <span class="text-red-500">*</span>
                            </span>
                        </label>
                        @error('declaration')
                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                        @enderror

                        <button type="submit"
                            class="w-full rounded-xl bg-primary py-3.5 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-[1.01] dark:bg-secondary dark:text-ink">
                            Submit Grievance
                        </button>
                    </form>
                </div>

                <!-- Sidebar -->
                <div class="reveal-right space-y-5 lg:col-span-2">
                    <div
                        class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                        <span
                            class="mb-3 grid h-10 w-10 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                            <i class="fa-solid fa-scale-balanced" aria-hidden="true"></i>
                        </span>
                        <p class="text-xs font-bold uppercase tracking-wide text-secondary-a11y dark:text-secondary">
                            Grievance Officer</p>
                        <p class="mt-1 font-heading text-sm font-bold text-slate-900 dark:text-white">Roshani Chhetri</p>
                        <p class="mt-2 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
                            Acknowledged within 24 hours, resolved within 15 working days.
                        </p>
                        <div class="mt-3 space-y-1 text-xs text-slate-600 dark:text-slate-300">
                            <a href="mailto:grievance@fintechinternational.com.np"
                                class="flex items-center gap-1.5 transition hover:text-primary dark:hover:text-secondary">
                                <i class="fa-solid fa-envelope text-[10px]" aria-hidden="true"></i>
                                grievance@fintechinternational.com.np </a>
                            <a href="tel:+9779709080288"
                                class="flex items-center gap-1.5 transition hover:text-primary dark:hover:text-secondary">
                                <i class="fa-solid fa-phone text-[10px]" aria-hidden="true"></i> +977 9709080288
                            </a>
                        </div>
                    </div>

                    <div
                        class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                        <div class="mb-3 flex items-center gap-3">
                            <span
                                class="grid h-10 w-10 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                                <i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
                            </span>
                            <p class="font-heading text-sm font-bold text-slate-900 dark:text-white">Resolution Timeline
                            </p>
                        </div>
                        <ul class="space-y-2 text-xs text-slate-500 dark:text-slate-400">
                            <li class="flex items-center justify-between"><span>Urgent</span><span
                                    class="font-semibold text-slate-700 dark:text-slate-200">2 business days</span></li>
                            <li class="flex items-center justify-between"><span>High</span><span
                                    class="font-semibold text-slate-700 dark:text-slate-200">5 business days</span></li>
                            <li class="flex items-center justify-between"><span>Normal</span><span
                                    class="font-semibold text-slate-700 dark:text-slate-200">10 business days</span></li>
                            <li class="flex items-center justify-between"><span>Low</span><span
                                    class="font-semibold text-slate-700 dark:text-slate-200">15 business days</span></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </section>

    @if (session('grievance-status'))
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                window.showToast && window.showToast('Grievance Submitted', @js(session('grievance-status')), 'fa-check');
            });
        </script>
    @endif
@endcomponent