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

    <div class="mx-auto max-w-5xl">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-xl font-black text-slate-950 dark:text-white">Choose report options</h3>
            <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">Preview before downloading. Profit stays hidden unless admin allows it and you choose to show it.</p>

            <form method="GET" action="{{ route('reports.share.preview') }}" class="mt-6 grid gap-5 md:grid-cols-2">
                <div>
                    <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Report type</label>
                    <select name="report_type" 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="weekly">Weekly Report</option>
                        <option value="monthly">Monthly Report</option>
                    </select>
                </div>

                <div>
                    <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Image size</label>
                    <select name="image_size" 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">
                        @foreach ($sizes as $key => $size)
                            <option value="{{ $key }}">{{ $size['label'] }} - {{ $size['width'] }}x{{ $size['height'] }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="text-sm font-bold text-slate-700 dark:text-slate-200">Report theme</label>
                    <select name="image_theme" 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="dark">Premium Dark</option>
                        <option value="light">Clean Light</option>
                    </select>
                </div>

                @if ($settings->allow_profit_display)
                    <label class="flex items-center gap-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm font-bold text-slate-700 dark:border-blue-900 dark:bg-blue-950/30 dark:text-slate-200">
                        <input type="checkbox" name="show_profit" value="1" class="rounded border-blue-300 text-blue-600">
                        Show profit/loss on my report image
                    </label>
                @else
                    <div class="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm font-bold text-amber-900 md:col-span-2 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-100">
                        Admin disabled profit display for shared reports.
                    </div>
                @endif

                <button class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white hover:bg-blue-700 md:col-span-2">Preview Report</button>
            </form>
        </section>
    </div>
</x-app-layout>
