{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: support.blade.php
------------------------------------------------------
Use: The contact-support page reached from the sidebar
     card: contact details and a message form.
=====================================================
--}}

@extends('layouts.user')

@section('title', __('front.support.title'))

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('account.credit.form')],
        ['label' => __('front.support.breadcrumb')],
    ]" />
@endsection

@section('page')
    <div class="mb-[22px]">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.support.title') }}</h1>
        <p class="max-w-2xl text-sm leading-7 text-ink-muted">{{ __('front.support.subtitle') }}</p>
    </div>

    <div class="grid gap-5 lg:grid-cols-[1fr_1.3fr]">
        {{-- Contact details --}}
        <div class="flex flex-col gap-3">
            @foreach ([
                ['icon' => 'phone', 'label' => __('front.support.phone_label'), 'value' => ($siteSupportPhone ?? null) ? \App\Support\Format::persianDigits($siteSupportPhone) : __('front.support.phone_value'), 'hint' => __('front.support.phone_hint'), 'ltr' => true, 'left' => false],
                ['icon' => 'mail', 'label' => __('front.support.email_label'), 'value' => $siteSupportEmail ?? __('front.support.email_value'), 'hint' => __('front.support.email_hint'), 'ltr' => true, 'left' => true],
                ['icon' => 'pin', 'label' => __('front.support.address_label'), 'value' => __('front.support.address_value'), 'hint' => null, 'ltr' => false, 'left' => false],
            ] as $item)
                <div class="flex items-start gap-3.5 rounded-[18px] border border-line bg-white p-5">
                    <span class="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[#efeafb] text-primary-600">
                        @switch($item['icon'])
                            @case('phone')
                                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.1-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z"/></svg>
                                @break
                            @case('mail')
                                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
                                @break
                            @default
                                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
                        @endswitch
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="mb-1 text-[12.5px] text-ink-faint">{{ $item['label'] }}</div>
                        {{-- The phone is right-aligned like every other RTL value; only its
                             digits run ltr, via the inner span, so they never reorder. --}}
                        <div @class(['text-sm font-bold leading-7', 'text-left' => $item['left']])>@if ($item['ltr'])<span dir="ltr">{{ $item['value'] }}</span>@else{{ $item['value'] }}@endif</div>
                        @if ($item['hint'])
                            <div class="mt-0.5 text-[11.5px] text-ink-faint">{{ $item['hint'] }}</div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Message form --}}
        <div class="rounded-[18px] border border-line bg-white p-6">
            <div class="mb-1 text-base font-bold">{{ __('front.support.form_title') }}</div>
            <p class="mb-5 text-[13px] text-ink-muted">{{ __('front.support.form_hint') }}</p>

            <form method="POST" action="{{ route('account.support.submit') }}" x-data="{ busy: false }" x-on:submit="busy = true">
                @csrf

                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label for="support-name" class="mb-2 block text-[13px] font-bold">{{ __('front.support.name_label') }}</label>
                        <input id="support-name" type="text" name="name" value="{{ old('name', auth()->user()->fullName()) }}"
                               placeholder="{{ __('front.support.name_placeholder') }}"
                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                    </div>
                    <div>
                        <label for="support-mobile" class="mb-2 block text-[13px] font-bold">{{ __('front.support.mobile_label') }}</label>
                        <input id="support-mobile" type="text" name="mobile" inputmode="numeric" dir="ltr" value="{{ old('mobile', auth()->user()->mobile) }}"
                               placeholder="{{ __('front.support.mobile_placeholder') }}"
                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-left text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                    </div>
                </div>

                <div class="mt-4">
                    <label for="support-subject" class="mb-2 block text-[13px] font-bold">{{ __('front.support.subject_label') }}</label>
                    <select id="support-subject" name="subject"
                            class="w-full cursor-pointer rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                        @foreach ($subjects as $subject)
                            <option value="{{ $subject }}" @selected(old('subject') === $subject)>{{ __("front.support.subjects.{$subject}") }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mt-4">
                    <label for="support-message" class="mb-2 block text-[13px] font-bold">{{ __('front.support.message_label') }}</label>
                    <textarea id="support-message" name="message" rows="5"
                              placeholder="{{ __('front.support.message_placeholder') }}"
                              class="w-full resize-none rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm leading-7 outline-none transition focus:border-primary-600 focus:bg-white">{{ old('message') }}</textarea>
                </div>

                <button type="submit" x-bind:disabled="busy"
                        class="mt-5 inline-flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:opacity-60">
                    <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4z"/></svg>
                    {{ __('front.support.submit') }}
                </button>
            </form>
        </div>
    </div>
@endsection