<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Growth & Marketing</p>
            <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Share Report Settings</h2>
        </div>
    </x-slot>

    <section class="max-w-5xl rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <form method="POST" action="{{ route('admin.share-report-settings.update') }}" enctype="multipart/form-data" class="grid gap-5 md:grid-cols-2">
            @csrf
            @method('PATCH')

            <label class="flex items-center gap-3 rounded-lg bg-blue-50 p-4 text-sm font-semibold text-slate-700 dark:bg-blue-950/30 dark:text-slate-200">
                <input type="checkbox" name="share_reports_enabled" value="1" @checked($settings->share_reports_enabled) class="rounded border-gray-300 text-blue-600">
                Enable shareable reports
            </label>

            <label class="flex items-center gap-3 rounded-lg bg-blue-50 p-4 text-sm font-semibold text-slate-700 dark:bg-blue-950/30 dark:text-slate-200">
                <input type="checkbox" name="allow_profit_display" value="1" @checked($settings->allow_profit_display) class="rounded border-gray-300 text-blue-600">
                Allow profit display
            </label>

            <label class="flex items-center gap-3 rounded-lg bg-blue-50 p-4 text-sm font-semibold text-slate-700 dark:bg-blue-950/30 dark:text-slate-200">
                <input type="checkbox" name="show_badges" value="1" @checked($settings->show_badges) class="rounded border-gray-300 text-blue-600">
                Show badges on report
            </label>

            <label class="flex items-center gap-3 rounded-lg bg-blue-50 p-4 text-sm font-semibold text-slate-700 dark:bg-blue-950/30 dark:text-slate-200">
                <input type="checkbox" name="show_motivational_line" value="1" @checked($settings->show_motivational_line) class="rounded border-gray-300 text-blue-600">
                Show motivational line
            </label>

            <div>
                <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Branding text</label>
                <x-text-input name="branding_text" value="{{ old('branding_text', $settings->branding_text) }}" class="mt-1 w-full" required />
                @error('branding_text') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Watermark text</label>
                <x-text-input name="watermark" value="{{ old('watermark', $settings->watermark) }}" class="mt-1 w-full" required />
                @error('watermark') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Brand color</label>
                <div class="mt-1 flex gap-3">
                    <input type="color" name="brand_color" value="{{ old('brand_color', $settings->brand_color ?? '#2563EB') }}" class="h-11 w-16 rounded-lg border border-blue-100 bg-white p-1 dark:border-blue-900 dark:bg-slate-950">
                    <x-text-input value="{{ old('brand_color', $settings->brand_color ?? '#2563EB') }}" class="w-full" disabled />
                </div>
                @error('brand_color') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Default template</label>
                <select name="default_template" class="mt-1 w-full rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                    <option value="premium-blue" @selected($settings->default_template === 'premium-blue')>Premium Blue</option>
                    <option value="glass-blue" @selected($settings->default_template === 'glass-blue')>Glass Blue</option>
                </select>
            </div>

            <div class="md:col-span-2">
                <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Motivational line</label>
                <x-text-input name="motivational_line" value="{{ old('motivational_line', $settings->motivational_line) }}" class="mt-1 w-full" required />
                @error('motivational_line') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="md:col-span-2">
                <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Report logo</label>
                <input type="file" name="report_logo" accept="image/png,image/jpeg,image/webp" class="mt-1 block w-full rounded-lg border border-blue-100 bg-white px-3 py-2 text-sm text-slate-700 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-200">
                <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">Upload PNG/JPG/WebP, max 2MB. If empty, ViZuTrade default logo is used.</p>
                @if ($settings->report_logo_path)
                    <img src="{{ asset('storage/'.$settings->report_logo_path) }}" alt="Report logo" class="mt-3 h-14 rounded-lg bg-slate-950 p-2">
                @endif
                @error('report_logo') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <button class="rounded-lg bg-blue-600 px-4 py-3 text-sm font-bold text-white md:col-span-2">Save Share Report Settings</button>
        </form>
    </section>
</x-app-layout>
