@extends('backend.layouts.app')

@section('title', 'Theme Settings')

@push('styles')
    <style>
        /* Sama konsep dengan .auth-field di halaman login (auth-base.blade.php) */
        .theme-field {
            width: 100%;
            height: 2.75rem;
            border: 1px solid #d0d5dd;
            border-radius: 0.5rem;
            background-color: transparent;
            padding: 0.625rem 0.75rem;
            font-size: 0.875rem;
            line-height: 1.25rem;
            font-weight: 400;
            color: #1d2939;
            box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
            transition: border-color 150ms ease, box-shadow 150ms ease;
        }

        .theme-field::placeholder {
            color: #98a2b3;
            opacity: 1;
        }

        .theme-field:focus {
            outline: none;
            border-color: #9cb9ff;
            box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(70, 95, 255, 0.10);
        }

        .theme-field--swatch {
            width: 4rem;
            padding: 0.25rem;
            cursor: pointer;
        }

        .dark .theme-field {
            border-color: #374151;
            background-color: #111827;
            color: #f3f4f6;
        }

        .dark .theme-field:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
        }
    </style>
@endpush

@section('content')
    @include('backend.module._index-reset-button')
    @php
        $pageTitle = 'Theme Settings';
        $units = ['px', 'rem', '%', 'vh', 'vw'];
    @endphp
    <div class="mb-6">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $pageTitle }}</h2>
            <nav>
                <ol class="flex items-center gap-1.5">
                    <li>
                        <a class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                            href="{{ route('admin.home') }}">Home</a>
                    </li>
                    <li class="flex items-center gap-1.5 text-sm text-gray-800 dark:text-white/90">
                        <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
                        {{ $pageTitle }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <form id="theme-setting-form" action="{{ route('theme-setting.save') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="space-y-5 sm:space-y-6">

            {{-- ===== HARDCODED FIELDS ===== --}}
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="px-5 py-4 sm:px-6 sm:py-5 border-b border-gray-100 dark:border-gray-800">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">General Settings</h3>
                </div>
                <div class="px-5 py-6 sm:px-6 space-y-8">

                    {{-- Site Name --}}
                    <div>
                        <label for="site_name" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                Page Title <span class="text-xs text-gray-400 font-normal">(Browser tab title &amp; email fallback)</span>
                        </label>
                        <input type="text" name="site_name" id="site_name" value="{{ $hardcoded['site_name'] }}"
                            autofocus placeholder="e.g. NRES Portal"
                            class="theme-field">
                    </div>

                    {{-- Branding Images --}}
                    <div>
                        <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4 dark:text-gray-400">Branding Images</h4>

                        @php
                            $brandFields = [
                                ['key' => 'sidebar_logo', 'label' => 'Sidebar Logo', 'desc' => 'Sidebar & navbar', 'size' => '400 × 130px', 'cropWidth' => 400, 'cropHeight' => 130, 'acceptedTypes' => ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'], 'imgClass' => 'h-14 rounded border border-gray-200 dark:border-gray-700 object-contain bg-white p-1', 'accept' => 'image/jpeg,image/png,image/webp,image/svg+xml', 'removeName' => 'remove_sidebar_logo', 'resetLabel' => 'Reset to default logo', 'icon' => 'sidebar'],
                                ['key' => 'favicon', 'label' => 'Favicon', 'desc' => 'Browser tab icon', 'size' => '64 × 64px', 'cropWidth' => 64, 'cropHeight' => 64, 'acceptedTypes' => ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml', 'image/x-icon', 'image/vnd.microsoft.icon'], 'imgClass' => 'w-8 h-8 rounded border border-gray-200 dark:border-gray-700 object-contain bg-white', 'accept' => 'image/jpeg,image/png,image/webp,image/svg+xml,image/x-icon,image/vnd.microsoft.icon', 'removeName' => 'remove_favicon', 'resetLabel' => 'Remove favicon', 'icon' => 'browser'],
                                ['key' => 'login_logo', 'label' => 'Login Logo', 'desc' => 'Login page', 'size' => '224 × 224px', 'cropWidth' => 224, 'cropHeight' => 224, 'acceptedTypes' => ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'], 'imgClass' => 'h-14 rounded-xl border border-gray-200 dark:border-gray-700 object-contain bg-white p-1', 'accept' => 'image/jpeg,image/png,image/webp,image/svg+xml', 'removeName' => 'remove_login_logo', 'resetLabel' => 'Reset to default logo', 'icon' => 'lock'],
                                ['key' => 'login_background', 'label' => 'Login Background', 'desc' => 'Login page background', 'size' => '1920 × 1080px', 'cropWidth' => 1920, 'cropHeight' => 1080, 'acceptedTypes' => ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'], 'imgClass' => 'w-full h-20 rounded-xl border border-gray-200 dark:border-gray-700 object-cover', 'accept' => 'image/jpeg,image/png,image/webp,image/svg+xml', 'removeName' => 'remove_login_background', 'resetLabel' => 'Reset to default background', 'icon' => 'image'],
                                ['key' => 'dashboard_banner', 'label' => 'Dashboard Banner', 'desc' => 'Dashboard banner', 'size' => '1920 × 400px', 'cropWidth' => 1920, 'cropHeight' => 400, 'acceptedTypes' => ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'], 'imgClass' => 'w-full h-20 rounded-xl border border-gray-200 dark:border-gray-700 object-cover', 'accept' => 'image/jpeg,image/png,image/webp,image/svg+xml', 'removeName' => 'remove_dashboard_banner', 'resetLabel' => 'Remove banner', 'icon' => 'chart'],
                            ];
                            $brandIcons = [
                                'sidebar' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />',
                                'browser' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 0 1 0 1.971l-11.54 6.347a1.125 1.125 0 0 1-1.667-.985V5.653Z" />',
                                'lock' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />',
                                'image' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />',
                                'chart' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />',
                            ];
                        @endphp

                        <div class="space-y-4">
                            @foreach($brandFields as $f)
                                <div class="group rounded-xl border border-gray-200 bg-white p-4 transition hover:shadow-md hover:border-gray-300 dark:border-gray-700 dark:bg-white/[0.03] dark:hover:border-gray-600">
                                    <div class="flex flex-col lg:flex-row gap-4">

                                        {{-- Left: Info --}}
                                        <div class="lg:w-56 shrink-0">
                                            <div class="flex items-start gap-3 mb-2">
                                                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400">
                                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">{!! $brandIcons[$f['icon']] !!}</svg>
                                                </div>
                                                <div class="min-w-0">
                                                    <span class="block text-sm font-semibold text-gray-800 dark:text-white/90">{{ $f['label'] }}</span>
                                                    <span class="block text-xs text-gray-400 dark:text-gray-500">{{ $f['desc'] }}</span>
                                                </div>
                                            </div>
                                            <div class="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2 py-1 dark:bg-blue-500/10">
                                                <svg class="h-3 w-3 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                                                <span class="text-xs font-medium text-blue-600 dark:text-blue-400">{{ $f['size'] }}</span>
                                            </div>
                                        </div>

                                        {{-- Right: Preview + Upload --}}
                                        <div class="flex-1 min-w-0">
                                            <div class="flex flex-col sm:flex-row gap-4">

                                                {{-- Preview --}}
                                                @if($hardcoded[$f['key']])
                                                    <div class="flex items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 p-3 sm:w-56 shrink-0 dark:border-gray-700 dark:bg-gray-800/50">
                                                        <img src="{{ str_starts_with($hardcoded[$f['key']], 'dynaweb4/') || !str_contains($hardcoded[$f['key']], '/') ? asset($hardcoded[$f['key']]) : Storage::url($hardcoded[$f['key']]) }}" alt="{{ $f['label'] }}" class="{{ $f['imgClass'] }}">
                                                    </div>
                                                @endif

                                                {{-- Upload + Reset --}}
                                                <div class="flex-1 min-w-0">
                                                    <input type="file" name="{{ $f['key'] }}" accept="{{ $f['accept'] }}" class="filepond w-full" data-accepted-types="{{ implode(',', $f['acceptedTypes']) }}" data-crop-width="{{ $f['cropWidth'] }}" data-crop-height="{{ $f['cropHeight'] }}">
                                                    @include('backend.layouts.partials._upload-hint', ['text' => 'Recommended ' . $f['size'] . ' · ' . ($f['key'] === 'favicon' ? 'ICO, PNG, SVG, JPG, WebP' : 'PNG, SVG, JPG, WebP') . ' · Max 15MB'])
                                                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Raster images can be cropped to {{ $f['size'] }}. SVG{{ $f['key'] === 'favicon' ? ' and ICO' : '' }} files are uploaded as-is.</p>

                                                    @if($f['key'] === 'dashboard_banner')
                                                        @if($hardcoded['dashboard_banner'])
                                                        <div class="mt-2">
                                                            <label class="inline-flex items-center gap-1.5 text-xs text-gray-500 hover:text-red-500 cursor-pointer transition">
                                                                <input type="checkbox" name="remove_dashboard_banner" value="1" class="rounded border-gray-300 text-red-500 focus:ring-red-500">
                                                                <span>{{ $f['resetLabel'] }}</span>
                                                            </label>
                                                        </div>
                                                        @endif
                                                    @else
                                                        <div class="mt-2">
                                                            <label class="inline-flex items-center gap-1.5 text-xs text-gray-500 hover:text-red-500 cursor-pointer transition">
                                                                <input type="checkbox" name="{{ $f['removeName'] }}" value="1" class="rounded border-gray-300 text-red-500 focus:ring-red-500">
                                                                <span>{{ $f['resetLabel'] }}</span>
                                                            </label>
                                                        </div>
                                                    @endif
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Sidebar Colors --}}
                    <div>
                        <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4 dark:text-gray-400">Sidebar Colors</h4>
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                            @php
                                $colorFields = [
                                    ['name' => 'sidebar_bg_color', 'label' => 'Bg Light'],
                                    ['name' => 'sidebar_bg_color_dark', 'label' => 'Bg Dark'],
                                    ['name' => 'sidebar_text_color', 'label' => 'Text Light'],
                                    ['name' => 'sidebar_text_color_dark', 'label' => 'Text Dark'],
                                    ['name' => 'sidebar_active_bg_color', 'label' => 'Active Bg Light'],
                                    ['name' => 'sidebar_active_bg_color_dark', 'label' => 'Active Bg Dark'],
                                    ['name' => 'sidebar_active_text_color', 'label' => 'Active Text Light'],
                                    ['name' => 'sidebar_active_text_color_dark', 'label' => 'Active Text Dark'],
                                ];
                            @endphp
                            @foreach($colorFields as $cf)
                                <div class="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
                                    <label for="{{ $cf['name'] }}" class="block text-xs text-gray-500 mb-2 dark:text-gray-400">{{ $cf['label'] }}</label>
                                    <div class="flex items-center gap-2">
                                        <input type="color" name="{{ $cf['name'] }}" id="{{ $cf['name'] }}" value="{{ $hardcoded[$cf['name']] }}" class="theme-field theme-field--swatch">
                                        <span class="text-xs text-gray-400 font-mono">{{ $hardcoded[$cf['name']] }}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>

            {{-- ===== DYNAMIC RULES ===== --}}
            @foreach($rules as $rule)
                @php $ruleSettings = $settings[$rule->rule_id] ?? []; @endphp
                <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="px-5 py-4 sm:px-6 sm:py-5 border-b border-gray-100 dark:border-gray-800">
                        <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">{{ $rule->rule_name }}</h3>
                        @if($rule->rule_description)
                            <p class="text-xs text-gray-500 mt-0.5">
                                <i class="fa fa-info-circle"></i> {{ $rule->rule_description }}
                            </p>
                        @endif
                    </div>
                    <div class="px-5 py-6 sm:px-6 space-y-5">
                        @php $params = $rule->rule_params ?? []; @endphp
                        @forelse($params as $param)
                            @php
                                $paramName = $param['param_name'];
                                $paramType = $param['param_type'] ?? 'text';
                                $paramDefault = $param['param_default'] ?? '';
                                $currentValue = $ruleSettings[$paramName] ?? $paramDefault;
                            @endphp
                            @php
                                $paramLabel = \Illuminate\Support\Str::headline($paramName);
                                $paramDescriptions = [
                                    'background-gradient' => 'CSS gradient used behind the login background image, e.g. linear-gradient(45deg, #0598ff, #09d19a).',
                                    'title' => 'Welcome heading displayed on the login page.',
                                    'description' => 'Welcome paragraph displayed under the login heading.',
                                    'copyright' => 'Copyright line displayed at the bottom of the login page.',
                                ];
                                $paramDescription = $paramDescriptions[$paramName]
                                    ?? 'Value for the {{' . $paramName . '}} token in the CSS template below.';
                            @endphp
                            <div>
                                <label for="rule-{{ $rule->rule_id }}-{{ $paramName }}" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                    {{ $paramLabel }}
                                    <code class="ml-1 rounded bg-gray-100 px-1.5 py-0.5 text-[11px] font-normal text-gray-500 dark:bg-gray-800 dark:text-gray-400">{{ $paramName }}</code>
                                    @if($paramType === 'colorpicker')
                                        <span class="ml-1 text-xs text-gray-400">(Color)</span>
                                    @elseif($paramType === 'unit')
                                        <span class="ml-1 text-xs text-gray-400">(Unit)</span>
                                    @endif
                                </label>
                                <p class="mb-2 text-xs text-gray-500 dark:text-gray-400">{{ $paramDescription }}</p>

                                <input type="hidden" name="rule-id-{{ $rule->rule_id }}[type][{{ $paramName }}]" value="{{ $paramType }}">

                                @php
                                    $def = $paramDefault;
                                    if ($paramType === 'unit') {
                                        if (is_object($paramDefault)) {
                                            $def = $paramDefault->value . $paramDefault->unit;
                                        } elseif (is_array($paramDefault)) {
                                            $def = ($paramDefault['value'] ?? '0') . ($paramDefault['unit'] ?? 'px');
                                        } else {
                                            $def = $paramDefault . 'px';
                                        }
                                    }
                                @endphp
                                <input type="hidden" name="rule-id-{{ $rule->rule_id }}[default][{{ $paramName }}]" value="{{ $def }}">

                                @if($paramType === 'colorpicker')
                                    <input type="color" name="rule-id-{{ $rule->rule_id }}[param][{{ $paramName }}]" id="rule-{{ $rule->rule_id }}-{{ $paramName }}"
                                        value="{{ is_array($currentValue) ? ($currentValue['value'] ?? $def) : (is_object($currentValue) ? $currentValue->value : $currentValue) }}"
                                        class="theme-field theme-field--swatch">

                                @elseif($paramType === 'unit')
                                    @php
                                        if (is_array($currentValue)) {
                                            $unitVal = $currentValue['value'] ?? '0';
                                            $unitType = $currentValue['unit'] ?? 'px';
                                        } elseif (is_object($currentValue)) {
                                            $unitVal = $currentValue->value ?? '0';
                                            $unitType = $currentValue->unit ?? 'px';
                                        } else {
                                            $unitVal = '0';
                                            $unitType = 'px';
                                        }
                                    @endphp
                                    <div class="flex items-center gap-2">
                                        <input type="number" step="any" name="rule-id-{{ $rule->rule_id }}[param][{{ $paramName }}][]"
                                            id="rule-{{ $rule->rule_id }}-{{ $paramName }}" value="{{ $unitVal }}"
                                            class="theme-field flex-1 min-w-0">
                                        <select name="rule-id-{{ $rule->rule_id }}[param][{{ $paramName }}][]"
                                            class="theme-field w-24 shrink-0">
                                            @foreach($units as $u)
                                                <option value="{{ $u }}" {{ $unitType == $u ? 'selected' : '' }}>{{ $u }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                @else
                                    <input type="text" name="rule-id-{{ $rule->rule_id }}[param][{{ $paramName }}]"
                                        id="rule-{{ $rule->rule_id }}-{{ $paramName }}"
                                        value="{{ is_array($currentValue) ? '' : (is_object($currentValue) ? '' : $currentValue) }}"
                                        class="theme-field"
                                        placeholder="{{ $def }}">
                                @endif

                                @php
                                    $displayDefault = $paramDefault;
                                    if ($paramType === 'unit') {
                                        if (is_object($paramDefault)) {
                                            $displayDefault = $paramDefault->value . $paramDefault->unit;
                                        } elseif (is_array($paramDefault)) {
                                            $displayDefault = ($paramDefault['value'] ?? '0') . ($paramDefault['unit'] ?? 'px');
                                        } else {
                                            $displayDefault = $paramDefault . 'px';
                                        }
                                    }
                                @endphp
                                @if($displayDefault)
                                    <p class="mt-1 text-xs text-gray-400">Default: {{ $displayDefault }}</p>
                                @endif
                            </div>
                        @empty
                            <p class="text-sm text-gray-500">No parameters defined for this rule.</p>
                        @endforelse
                    </div>
                </div>
            @endforeach

            {{-- ===== SAVE BUTTON ===== --}}
            <div class="flex justify-end gap-3">
                <a href="{{ route('theme-setting.index') }}"
                    class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">Cancel</a>
                <button type="submit"
                    class="btn-custom rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">Save</button>
            </div>

        </div>
    </form>

    <div id="theme-image-crop-modal" class="fixed inset-0 z-[100000] hidden items-center justify-center bg-gray-950/70 p-3 backdrop-blur-sm sm:p-6" role="dialog" aria-modal="true" aria-labelledby="theme-image-crop-title">
        <div class="flex max-h-[calc(100dvh-1.5rem)] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900 sm:max-h-[calc(100dvh-3rem)]">
            <div class="flex shrink-0 items-center justify-between border-b border-gray-100 px-4 py-4 dark:border-gray-800 sm:px-6">
                <div>
                    <h3 id="theme-image-crop-title" class="text-base font-semibold text-gray-800 dark:text-white/90">Crop image</h3>
                    <p id="theme-image-crop-size" class="mt-1 text-xs text-gray-500 dark:text-gray-400"></p>
                </div>
                <button type="button" id="theme-image-crop-close" aria-label="Cancel crop" class="flex h-9 w-9 items-center justify-center rounded-lg text-2xl leading-none text-gray-400 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200">&times;</button>
            </div>
            <div class="min-h-0 flex-1 overflow-auto bg-gray-50 p-3 dark:bg-gray-950 sm:p-5">
                <div class="mx-auto max-h-[65vh] max-w-full">
                    <img id="theme-image-crop-target" class="block max-h-[65vh] max-w-full" alt="Image crop preview">
                </div>
            </div>
            <div class="flex shrink-0 flex-col-reverse gap-2 border-t border-gray-100 px-4 py-4 dark:border-gray-800 sm:flex-row sm:justify-end sm:gap-3 sm:px-6">
                <button type="button" id="theme-image-crop-cancel" class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:w-auto">Cancel</button>
                <button type="button" id="theme-image-crop-apply" class="w-full rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto">Use Crop</button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const cropModal = document.getElementById('theme-image-crop-modal');
            const cropImage = document.getElementById('theme-image-crop-target');
            const cropSize = document.getElementById('theme-image-crop-size');
            const cropApply = document.getElementById('theme-image-crop-apply');
            const cropperFiles = new WeakSet();
            let activePond = null;
            let activeItem = null;
            let activeInput = null;
            let cropper = null;
            let previewUrl = null;
            let cropInProgress = false;
            const themeForm = document.getElementById('theme-setting-form');

            themeForm.addEventListener('submit', function(event) {
                if (!cropInProgress && cropModal.classList.contains('hidden')) {
                    return;
                }

                event.preventDefault();
                cropSize.textContent = 'Finish or cancel the image crop before saving.';
            });

            function closeCropModal(removeItem) {
                if (cropInProgress) {
                    return;
                }
                if (cropper) {
                    cropper.destroy();
                    cropper = null;
                }
                if (previewUrl) {
                    URL.revokeObjectURL(previewUrl);
                    previewUrl = null;
                }
                cropModal.classList.add('hidden');
                cropModal.classList.remove('flex');
                if (removeItem && activePond && activeItem) {
                    activePond.removeFile(activeItem.id);
                }
                activePond = null;
                activeItem = null;
                activeInput = null;
            }

            document.getElementById('theme-image-crop-close').addEventListener('click', function() {
                closeCropModal(true);
            });
            document.getElementById('theme-image-crop-cancel').addEventListener('click', function() {
                closeCropModal(true);
            });
            cropModal.addEventListener('click', function(event) {
                if (event.target === cropModal) {
                    closeCropModal(true);
                }
            });
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape' && !cropModal.classList.contains('hidden')) {
                    closeCropModal(true);
                }
            });

            cropApply.addEventListener('click', function() {
                if (!cropper || !activePond || !activeItem) {
                    return;
                }

                // FilePond replaces the original <input> (and drops its data-* attributes),
                // so the target size must come from the input element captured on selection.
                const width = Number(activeInput && activeInput.dataset.cropWidth);
                const height = Number(activeInput && activeInput.dataset.cropHeight);
                if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
                    cropSize.textContent = 'Crop size is unknown for this image. Cancel and select the file again.';
                    return;
                }

                cropInProgress = true;
                cropApply.disabled = true;
                cropApply.textContent = 'Preparing...';
                const canvas = cropper.getCroppedCanvas({
                    width: width,
                    height: height,
                    imageSmoothingQuality: 'high',
                });
                const sourceFile = activeItem.file;
                const outputType = sourceFile.type === 'image/jpeg' ? 'image/jpeg' : 'image/png';
                canvas.toBlob(function(blob) {
                    if (!blob) {
                        cropInProgress = false;
                        cropApply.disabled = false;
                        cropApply.textContent = 'Use Crop';
                        cropSize.textContent = 'Could not crop this image. Try a different file.';
                        return;
                    }

                    const extension = outputType === 'image/jpeg' ? 'jpg' : 'png';
                    const croppedFile = new File([blob], sourceFile.name.replace(/\.[^.]+$/, '') + '-cropped.' + extension, {
                        type: outputType,
                        lastModified: Date.now(),
                    });
                    cropperFiles.add(croppedFile);
                    const pond = activePond;
                    const itemId = activeItem.id;
                    pond.removeFile(itemId);
                    pond.addFile(croppedFile).then(function(item) {
                        cropperFiles.add(item.file);
                        cropInProgress = false;
                        closeCropModal(false);
                        cropApply.disabled = false;
                        cropApply.textContent = 'Use Crop';
                    }).catch(function() {
                        cropSize.textContent = 'Could not apply the crop. Please try again.';
                        cropInProgress = false;
                        cropApply.disabled = false;
                        cropApply.textContent = 'Use Crop';
                    });
                }, outputType, 0.92);
            });

            document.querySelectorAll('.filepond').forEach((el) => {
                const pond = FilePond.create(el, {
                    credits: false,
                    allowImagePreview: true,
                    imagePreviewHeight: 170,
                    storeAsFile: true,
                    allowFileTypeValidation: true,
                    allowSyncAcceptAttribute: false,
                    acceptedFileTypes: el.dataset.acceptedTypes.split(','),
                    fileValidateTypeDetectType: function(file, detectedType) {
                        const extension = file.name.split('.').pop().toLowerCase();
                        const typesByExtension = {
                            jpg: 'image/jpeg',
                            jpeg: 'image/jpeg',
                            png: 'image/png',
                            webp: 'image/webp',
                            svg: 'image/svg+xml',
                            ico: 'image/x-icon',
                        };
                        return Promise.resolve(typesByExtension[extension] || detectedType);
                    },
                    onaddfile: function(error, item) {
                        if (error || cropperFiles.has(item.file)) {
                            return;
                        }

                        const fileType = item.file.type;
                        if (!fileType.startsWith('image/') || fileType === 'image/svg+xml' || fileType === 'image/gif' || /\.ico$/i.test(item.file.name)) {
                            return;
                        }

                        activePond = pond;
                        activeItem = item;
                        activeInput = el;
                        cropSize.textContent = 'Select the visible area. Final size: ' + el.dataset.cropWidth + ' × ' + el.dataset.cropHeight + ' px.';
                        previewUrl = URL.createObjectURL(item.file);
                        cropImage.onload = function() {
                            try {
                                cropper = new Cropper(cropImage, {
                                    aspectRatio: Number(el.dataset.cropWidth) / Number(el.dataset.cropHeight),
                                    viewMode: 1,
                                    autoCropArea: 1,
                                    responsive: true,
                                    background: false,
                                    movable: true,
                                    zoomable: true,
                                    rotatable: true,
                                    scalable: false,
                                });
                            } catch (error) {
                                cropSize.textContent = 'This image could not be opened for cropping. Cancel and select another file.';
                            }
                        };
                        cropImage.onerror = function() {
                            cropSize.textContent = 'This image could not be opened for cropping. Cancel and select another file.';
                        };
                        cropImage.src = previewUrl;
                        cropModal.classList.remove('hidden');
                        cropModal.classList.add('flex');
                    }
                });
            });
        });
    </script>
@endpush