@extends('backend.layouts.app')

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

@section('content')
    @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 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 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">(Used in footer & title)</span>
                        </label>
                        <input type="text" name="site_name" value="{{ $hardcoded['site_name'] }}"
                            class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                    </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', 'imgClass' => 'h-14 rounded border border-gray-200 dark:border-gray-700 object-contain bg-white p-1', 'accept' => 'image/*', 'removeName' => 'remove_sidebar_logo', 'resetLabel' => 'Reset to default logo'],
                                ['key' => 'favicon', 'label' => 'Favicon', 'desc' => 'Browser tab icon', 'imgClass' => 'w-8 h-8 rounded border border-gray-200 dark:border-gray-700 object-contain bg-white', 'accept' => 'image/*,.ico', 'removeName' => 'remove_favicon', 'resetLabel' => 'Reset to default favicon'],
                                ['key' => 'login_logo', 'label' => 'Login Logo', 'desc' => 'Login page', 'imgClass' => 'h-14 rounded-xl border border-gray-200 dark:border-gray-700 object-contain bg-white p-1', 'accept' => 'image/*', 'removeName' => 'remove_login_logo', 'resetLabel' => 'Reset to default logo'],
                                ['key' => 'login_background', 'label' => 'Login Background', 'desc' => 'Login page background', 'imgClass' => 'w-full h-20 rounded-xl border border-gray-200 dark:border-gray-700 object-cover', 'accept' => 'image/*', 'removeName' => 'remove_login_background', 'resetLabel' => 'Reset to default background'],
                                ['key' => 'dashboard_banner', 'label' => 'Dashboard Banner', 'desc' => 'Dashboard banner', 'imgClass' => 'w-full h-20 rounded-xl border border-gray-200 dark:border-gray-700 object-cover', 'accept' => 'image/*', 'removeName' => 'remove_dashboard_banner', 'resetLabel' => 'Remove banner'],
                            ];
                        @endphp

                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($brandFields as $f)
                                <div class="rounded-xl border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/30">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                                        {{ $f['label'] }}
                                        <span class="text-xs text-gray-400 font-normal">({{ $f['desc'] }})</span>
                                    </label>

                                    @if($hardcoded[$f['key']])
                                        <div class="mb-3">
                                            @if($f['key'] === 'favicon')
                                                <div class="flex items-center gap-2">
                                                    <img src="{{ str_starts_with($hardcoded['favicon'], 'dynaweb4/') || !str_contains($hardcoded['favicon'], '/') ? asset($hardcoded['favicon']) : Storage::url($hardcoded['favicon']) }}" alt="Favicon" class="{{ $f['imgClass'] }}">
                                                    <span class="text-xs text-gray-500">{{ basename($hardcoded['favicon']) }}</span>
                                                </div>
                                            @else
                                                <img src="{{ str_starts_with($hardcoded[$f['key']], 'dynaweb4/') ? asset($hardcoded[$f['key']]) : Storage::url($hardcoded[$f['key']]) }}" alt="{{ $f['label'] }}" class="{{ $f['imgClass'] }}">
                                            @endif
                                        </div>
                                    @endif

                                    <input type="file" name="{{ $f['key'] }}" accept="{{ $f['accept'] }}" class="filepond w-full">

                                    @if($f['key'] === 'dashboard_banner')
                                        @if($hardcoded['dashboard_banner'])
                                        <div class="mt-2">
                                            <label class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 cursor-pointer">
                                                <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-2 text-sm text-gray-500 hover:text-gray-700 cursor-pointer">
                                                <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>
                            @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 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'] }}" value="{{ $hardcoded[$cf['name']] }}" class="h-9 w-12 rounded border border-gray-300 cursor-pointer dark:border-gray-600">
                                        <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
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                                    {{ $paramName }}
                                    @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>

                                <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 }}]"
                                        value="{{ is_array($currentValue) ? ($currentValue['value'] ?? $def) : (is_object($currentValue) ? $currentValue->value : $currentValue) }}"
                                        class="h-10 w-16 rounded border border-gray-300 cursor-pointer dark:border-gray-700">

                                @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 }}][]"
                                            value="{{ $unitVal }}"
                                            class="h-11 w-28 rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                        <select name="rule-id-{{ $rule->rule_id }}[param][{{ $paramName }}][]"
                                            class="h-11 w-24 rounded-lg border border-gray-300 bg-transparent px-3 py-2.5 text-sm text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                            @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 }}]"
                                        value="{{ is_array($currentValue) ? '' : (is_object($currentValue) ? '' : $currentValue) }}"
                                        class="h-11 w-full max-w-md rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
                                        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>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.filepond').forEach((el) => {
                FilePond.create(el, {
                    credits: false,
                    allowImagePreview: true,
                    imagePreviewHeight: 170,
                    storeAsFile: true
                });
            });
        });
    </script>
@endpush