@extends('layouts.base')

@section('content')
<div class="w-full  py-16">
    <div class="container mx-auto px-4">
        <div class="flex justify-center">
            <div class="w-full max-w-2xl">
                <div class="bg-white shadow-xl rounded-2xl overflow-hidden">

                    <!-- Header -->
                    <div class="p-6 text-center border-b">
                        <h4 class="text-xl font-bold text-gray-900">
                            {{ trans('general.contact') }}
                        </h4>
                        <small class="text-gray-500 block mt-2">{{ trans('general.subtitle_contact') }}</small>
                    </div>

                    <div class="p-8">

                        <!-- Success Message -->
                        @if (session('notification'))
                            <div class="bg-green-100 text-green-800 p-4 rounded-lg relative mb-4">
                                {{ session('notification') }}
                                <button type="button" class="absolute top-2 right-2 text-green-600" onclick="this.parentElement.remove()">
                                    ×
                                </button>
                            </div>
                        @endif

                        @include('errors.errors-forms')

                        <form method="POST" action="{{ url('contact') }}" id="contactForm" class="space-y-6">
                            @csrf

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                                <!-- Full Name (readonly) -->
                                <div>
                                    <label class="block mb-2 text-gray-700 font-medium">{{ trans('auth.full_name') }}</label>
                                    <input 
                                        class="w-full bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none cursor-not-allowed" 
                                        readonly
                                        value="{{ Auth::user()->fullname() ??  old('full_name') }}"
                                        name="full_name"
                                        type="text"
                                    >
                                </div>

                                <!-- Email (readonly) -->
                                <div>
                                    <label class="block mb-2 text-gray-700 font-medium">{{ trans('auth.email') }}</label>
                                    <input 
                                        type="email" 
                                        value="{{ Auth::user()->email ??  old('email') }}" 
                                        class="w-full bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none cursor-not-allowed" 
                                        readonly
                                    >
                                </div>
                            </div>

                            <!-- Subject -->
                            <div>
                                <label class="block mb-2 text-gray-700 font-medium">{{ trans('general.subject') }}</label>
                                <input 
                                    name="subject"
                                    required
                                    type="text"
                                    value="{{ old('subject') }}"
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                    placeholder="{{ trans('general.subject') }}"
                                >
                            </div>

                            <!-- Message -->
                            <div>
                                <label class="block mb-2 text-gray-700 font-medium">{{ trans('general.message') }}</label>
                                <textarea 
                                    name="message" 
                                    required 
                                    rows="4" 
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                    placeholder="{{ trans('general.message') }}"
                                >{{ old('message') }}</textarea>
                            </div>

                            <!-- Terms & Privacy -->
                            @if (__system_settings('link_terms') != '' && __system_settings('link_privacy') != '')
                                <label class="inline-flex items-start space-x-2 cursor-pointer">
                                    <input 
                                        class="mt-1 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" 
                                        required 
                                        name="agree_terms_privacy" 
                                        type="checkbox"
                                    >
                                    <span class="text-sm text-gray-600">
                                        {{ trans('general.i_agree_with') }}
                                        <a href="{{ __system_settings('link_terms') }}" target="_blank" class="text-blue-600 hover:underline">{{ trans('admin.terms_conditions') }}</a>
                                        {{ trans('general.and') }}
                                        <a href="{{ __system_settings('link_privacy') }}" target="_blank" class="text-blue-600 hover:underline">{{ trans('admin.privacy_policy') }}</a>
                                    </span>
                                </label>
                            @endif

                            <!-- Submit -->
                            <div class="text-center">
                                @if (__system_settings('captcha_contact') == 'on')
                                    {!! NoCaptcha::displaySubmit('contactForm', __('auth.send').' <i class="fa fa-paper-plane ml-1"></i>', ['data-size' => 'invisible', 'class' => 'bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg w-full font-semibold transition']) !!}
                                    {!! NoCaptcha::renderJs() !!}
                                @else
                                    <button 
                                        type="submit" 
                                        class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg w-full font-semibold transition"
                                    >
                                        {{ __('auth.send') }} <i class="fa fa-paper-plane ml-1"></i>
                                    </button>
                                @endif
                            </div>
                        </form>

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

@endsection