@extends('member.layouts.default')

@section('content')
<div class="w-full max-w-3xl mx-auto px-4 py-8">
    
    <div class="mb-8 flex items-center gap-3">
        <div class="p-2.5 bg-primary-50 dark:bg-primary-500/10 rounded-xl text-primary-600 shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-secondary-900 dark:text-white tracking-tight">Become a Partner</h1>
            <p class="text-sm text-secondary-400 mt-1">Submit your application to join our loyalty network.</p>
        </div>
    </div>
	<div class="mb-8 flex items-center gap-3">
        @php
			$aboutPage = \Illuminate\Support\Facades\DB::table('pages')->where('slug', 'join-our-merchants')->first();
		@endphp
		<div class="prose max-w-none" style="white-space: normal;">
			<style>.custom-content p {margin-bottom: 1rem !important; display: block !important;}</style>
			<div class="custom-content">{!! $aboutPage->content_en !!}</div>
		</div>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-sm font-medium">
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-white dark:bg-secondary-900 border border-secondary-200 dark:border-secondary-800 rounded-3xl shadow-sm p-6 md:p-8">
        <form action="{{ route('partners.store_application') }}" method="POST" class="space-y-6">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">Company / Brand Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name') }}" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border @error('name') border-rose-500 @else border-secondary-200 dark:border-secondary-700 @enderror rounded-xl px-4 h-11 text-sm outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
                    @error('name') <span class="text-rose-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="email" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">Business Email</label>
                    <input type="email" name="email" id="email" value="{{ old('email') }}" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border @error('email') border-rose-500 @else border-secondary-200 dark:border-secondary-700 @enderror rounded-xl px-4 h-11 text-sm outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
                    @error('email') <span class="text-rose-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="phone" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">Phone Number</label>
                    <input type="text" name="phone" id="phone" value="{{ old('phone') }}" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border @error('phone') border-rose-500 @else border-secondary-200 dark:border-secondary-700 @enderror rounded-xl px-4 h-11 text-sm outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
                    @error('phone') <span class="text-rose-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="contact_person" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">Contact Person Name</label>
                    <input type="text" name="contact_person" id="contact_person" value="{{ old('contact_person') }}" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border @error('contact_person') border-rose-500 @else border-secondary-200 dark:border-secondary-700 @enderror rounded-xl px-4 h-11 text-sm outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
                    @error('contact_person') <span class="text-rose-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                </div>
            </div>

            <div>
                <label for="description" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">Business Description / Notes</label>
                <textarea name="description" id="description" rows="4" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border @error('description') border-rose-500 @else border-secondary-200 dark:border-secondary-700 @enderror rounded-xl p-4 text-sm outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500 resize-none">{{ old('description') }}</textarea>
                @error('description') <span class="text-rose-500 text-xs mt-1 block">{{ $message }}</span> @enderror
            </div>

            <div class="flex justify-end pt-4">
                <button type="submit" class="bg-secondary-900 hover:bg-secondary-800 dark:bg-white dark:hover:bg-secondary-100 text-white dark:text-secondary-900 font-bold text-xs h-11 px-6 rounded-xl transition-all cursor-pointer shadow-sm">
                    Submit Application
                </button>
            </div>
        </form>
    </div>
</div>
@endsection