@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="text-xs px-4 py-2.5 rounded-full border border-pink-200 text-pink-500 hover:bg-pink-50">
                👁️ Preview Public Page
            </a>
            <a href="{{ route('rate-cards.pdf') }}"
               class="text-xs 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="text-xs px-4 py-2.5 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50">
                ← Back to Rate Cards
            </a>
        </div>
    </form>
</div>
@endsection