@extends('layouts.app')
@section('title', 'Rate Card Profile')
@section('page-title', '🎨 Rate Card Profile')
@section('page-subtitle', 'Customise your public rate card page')

@section('content')
    <div class="max-w-3xl mx-auto space-y-5">

        @if(session('success'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
                class="flex items-center justify-between gap-3 bg-green-50 border border-green-200 rounded-2xl px-4 py-3 text-sm text-green-700">
                <span>{{ session('success') }}</span>
                <button @click="show = false" class="text-green-500 hover:text-green-700 text-lg leading-none">✕</button>
            </div>
        @endif

        <form action="{{ route('rate-cards.profile.update') }}" method="POST" enctype="multipart/form-data"
            class="space-y-5">
            @csrf

            {{-- Identity --}}
            <div class="cat-card overflow-hidden">
                <div class="flex items-center gap-3 px-5 py-4 border-b border-pink-50">
                    <span class="text-xl">👤</span>
                    <h2 class="font-bold text-gray-700">Identity</h2>
                </div>
                <div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Display Name <span
                                class="text-pink-400">*</span></label>
                        <input type="text" name="owner_name" required value="{{ old('owner_name', $profile->owner_name) }}"
                            class="input-soft" placeholder="e.g. Sakura KOL">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Tagline</label>
                        <input type="text" name="tagline" value="{{ old('tagline', $profile->tagline) }}" class="input-soft"
                            placeholder="e.g. Lifestyle & Beauty Creator">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Email</label>
                        <input type="email" name="email" value="{{ old('email', $profile->email) }}" class="input-soft"
                            placeholder="hi@example.com">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">WhatsApp Number</label>
                        <input type="text" name="whatsapp" value="{{ old('whatsapp', $profile->whatsapp) }}"
                            class="input-soft" placeholder="+6012-345-6789">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Instagram Handle</label>
                        <div class="relative">
                            <span
                                class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></span>
                            <input type="text" name="ig_handle" value="{{ old('ig_handle', $profile->ig_handle) }}"
                                class="input-soft pl-7" placeholder="@yourhandle">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">TikTok Handle</label>
                        <div class="relative">
                            <span
                                class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></span>
                            <input type="text" name="tiktok_handle"
                                value="{{ old('tiktok_handle', $profile->tiktok_handle) }}" class="input-soft pl-7"
                                placeholder="@yourhandle">
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">YouTube Handle / Channel</label>
                        <input type="text" name="youtube_handle"
                            value="{{ old('youtube_handle', $profile->youtube_handle) }}" class="input-soft"
                            placeholder="@yourchannel">
                    </div>
                </div>
            </div>

            {{-- Appearance --}}
            <div class="cat-card overflow-hidden">
                <div class="flex items-center gap-3 px-5 py-4 border-b border-pink-50">
                    <span class="text-xl">🎨</span>
                    <h2 class="font-bold text-gray-700">Appearance</h2>
                </div>
                <div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Logo / Profile Image</label>
                        @if($profile->logo_path)
                            <div class="flex items-center gap-3 mb-2">
                                <img src="{{ route('files.serve-profile-logo') }}" alt="Logo"
                                    class="w-16 h-16 object-cover rounded-2xl border border-pink-100">
                                <span class="text-xs text-gray-400">Current logo</span>
                            </div>
                        @endif
                        <input type="file" name="logo" accept="image/*" class="w-full text-sm text-gray-600
                                          file:mr-3 file:py-2 file:px-4 file:rounded-full file:border-0
                                          file:text-xs file:font-semibold file:bg-pink-50 file:text-pink-600
                                          hover:file:bg-pink-100 cursor-pointer">
                        <p class="text-xs text-gray-400 mt-1">Max 2MB. PNG/JPG/WebP.</p>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Background Color</label>
                        <div class="flex items-center gap-2">
                            <input type="color" name="bg_color" value="{{ old('bg_color', $profile->bg_color) }}"
                                class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
                                oninput="document.getElementById('bg_text').value=this.value">
                            <input type="text" id="bg_text" value="{{ old('bg_color', $profile->bg_color) }}"
                                class="input-soft text-sm flex-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Accent Color</label>
                        <div class="flex items-center gap-2">
                            <input type="color" name="accent_color"
                                value="{{ old('accent_color', $profile->accent_color) }}"
                                class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
                                oninput="document.getElementById('accent_text').value=this.value">
                            <input type="text" id="accent_text" value="{{ old('accent_color', $profile->accent_color) }}"
                                class="input-soft text-sm flex-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Text Color</label>
                        <div class="flex items-center gap-2">
                            <input type="color" name="text_color" value="{{ old('text_color', $profile->text_color) }}"
                                class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
                                oninput="document.getElementById('text_text').value=this.value">
                            <input type="text" id="text_text" value="{{ old('text_color', $profile->text_color) }}"
                                class="input-soft text-sm flex-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Custom Footer</label>
                        <input type="text" name="custom_footer" value="{{ old('custom_footer', $profile->custom_footer) }}"
                            class="input-soft" placeholder="e.g. Prices valid until Dec 2025 · DM for bundles">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="flex items-start gap-3 cursor-pointer">
                            <input type="checkbox" name="show_prices" value="1"
                                class="w-4 h-4 accent-pink-400 mt-0.5 shrink-0" {{ old('show_prices', $profile->show_prices) ? 'checked' : '' }}>
                            <div>
                                <span class="text-sm font-medium text-gray-700">Show prices publicly</span>
                                <p class="text-xs text-gray-400">Uncheck to show "On Request" instead of actual prices</p>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex flex-wrap items-center gap-3">
                <button type="submit" class="btn-sakura px-6 py-2.5">💾 Save Profile</button>
                <a href="{{ route('rate-cards.public') }}" target="_blank"
                    class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-pink-200 text-pink-500 hover:bg-pink-50">
                    👁️ Preview
                </a>
                <a href="{{ route('rate-cards.pdf') }}"
                    class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-blue-200 text-blue-500 hover:bg-blue-50">
                    📄 Download PDF
                </a>
                <a href="{{ route('rate-cards.index') }}"
                    class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50">
                    ← Back
                </a>
            </div>
        </form>
    </div>
@endsection