@extends('admin.layouts.app')
@section('title', 'Theme & Appearance')
@section('content')

<div class="card" style="margin-bottom:20px; border:2px solid var(--primary); background:var(--accent);">
    <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;">
        <div>
            <h3><i class="fa-solid fa-shield-halved"></i> Permanent Default Theme: White + Green</h3>
            <p style="opacity:0.75; font-size:0.85rem; margin-top:4px;">Your customizations never overwrite this default. Reset anytime to instantly restore it everywhere.</p>
        </div>
        <form method="POST" action="{{ route('admin.theme.reset') }}" onsubmit="return confirm('Reset to the default White + Green theme? This will replace all current appearance settings.');">
            @csrf
            <button class="btn btn-danger" type="submit"><i class="fa-solid fa-rotate-left"></i> Reset to Default Theme</button>
        </form>
    </div>
</div>

<div class="card" style="margin-bottom:20px;">
    <h3 style="margin-bottom:14px;">Theme Presets</h3>
    <div class="grid-4">
        @foreach($presets as $key => $p)
            <form method="POST" action="{{ route('admin.theme.preset') }}">
                @csrf
                <input type="hidden" name="preset" value="{{ $key }}">
                <button type="submit" class="card hover-lift" style="width:100%; border:none; cursor:pointer; text-align:left;">
                    <div style="display:flex; gap:6px; margin-bottom:10px;">
                        <span style="width:20px;height:20px;border-radius:50%;background:{{ $p['primary_color'] }};display:inline-block;"></span>
                        <span style="width:20px;height:20px;border-radius:50%;background:{{ $p['background_color'] }};border:1px solid #ddd;display:inline-block;"></span>
                    </div>
                    <strong style="font-size:0.85rem;">{{ $p['label'] }}</strong>
                </button>
            </form>
        @endforeach
    </div>
</div>

<div class="card">
    <h3 style="margin-bottom:16px;">Custom Appearance</h3>
    <form method="POST" action="{{ route('admin.theme.update') }}">
        @csrf @method('PUT')
        <div class="grid-4">
            <div class="field"><label>Primary Color</label><input type="color" name="primary_color" value="{{ $theme->primary_color }}"></div>
            <div class="field"><label>Secondary Color</label><input type="color" name="secondary_color" value="{{ $theme->secondary_color }}"></div>
            <div class="field"><label>Accent Color</label><input type="color" name="accent_color" value="{{ $theme->accent_color }}"></div>
            <div class="field"><label>Background Color</label><input type="color" name="background_color" value="{{ $theme->background_color }}"></div>
            <div class="field"><label>Text Color</label><input type="color" name="text_color" value="{{ $theme->text_color }}"></div>
            <div class="field"><label>Button Color</label><input type="color" name="button_color" value="{{ $theme->button_color }}"></div>
            <div class="field"><label>Sidebar Color</label><input type="color" name="sidebar_color" value="{{ $theme->sidebar_color }}"></div>
            <div class="field"><label>Card Color</label><input type="color" name="card_color" value="{{ $theme->card_color }}"></div>
        </div>
        <div class="grid-3">
            <div class="field"><label>Font Family</label>
                <select name="font_family">
                    @foreach(['Poppins','Inter','Roboto','Nunito','Playfair Display'] as $f)
                        <option value="{{ $f }}" {{ $theme->font_family==$f?'selected':'' }}>{{ $f }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field"><label>Border Radius</label>
                <select name="border_radius">
                    @foreach(['6px','10px','16px','22px'] as $r)
                        <option value="{{ $r }}" {{ $theme->border_radius==$r?'selected':'' }}>{{ $r }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field"><label>Card Style</label>
                <select name="card_style">
                    <option value="elevated" {{ $theme->card_style=='elevated'?'selected':'' }}>Elevated</option>
                    <option value="flat" {{ $theme->card_style=='flat'?'selected':'' }}>Flat</option>
                    <option value="outlined" {{ $theme->card_style=='outlined'?'selected':'' }}>Outlined</option>
                </select>
            </div>
        </div>
        <div class="grid-3">
            <div class="field"><label>Sidebar Style</label>
                <select name="sidebar_style"><option value="dark" {{ $theme->sidebar_style=='dark'?'selected':'' }}>Dark</option><option value="light" {{ $theme->sidebar_style=='light'?'selected':'' }}>Light</option></select>
            </div>
            <div class="field"><label>Dashboard Layout</label>
                <select name="dashboard_layout"><option value="grid" {{ $theme->dashboard_layout=='grid'?'selected':'' }}>Grid</option><option value="list" {{ $theme->dashboard_layout=='list'?'selected':'' }}>List</option></select>
            </div>
        </div>
        <div class="grid-3">
            <label><input type="checkbox" name="animations_enabled" value="1" {{ $theme->animations_enabled?'checked':'' }} style="width:auto;"> Animations ON</label>
            <label><input type="checkbox" name="glassmorphism_enabled" value="1" {{ $theme->glassmorphism_enabled?'checked':'' }} style="width:auto;"> Glassmorphism ON</label>
            <label><input type="checkbox" name="dark_mode" value="1" {{ $theme->dark_mode?'checked':'' }} style="width:auto;"> Dark Mode</label>
        </div>
        <br>
        <button class="btn btn-primary" type="submit">Save & Apply Theme</button>
    </form>
</div>
@endsection