@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Appearance Settings</h1>
        <p class="page-subtitle">Customize the look and feel of your banking application</p>
    </div>
</div>

<div class="grid-2">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Color Settings</h3>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.settings.appearance.update') }}">
                @csrf
                @method('PUT')

                <div class="form-grid form-grid-2">
                    <div class="form-group">
                        <label for="primary_color" class="form-label">Primary Color</label>
                        <div class="input-with-preview">
                            <input type="color" id="primary_color" name="primary_color" value="{{ old('primary_color', $settings->primary_color ?? '#0D6B58') }}" class="form-color" onchange="updatePreview()">
                            <input type="text" value="{{ old('primary_color', $settings->primary_color ?? '#0D6B58') }}" class="form-input form-input-sm" oninput="document.getElementById('primary_color').value=this.value; updatePreview()">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="secondary_color" class="form-label">Secondary Color</label>
                        <div class="input-with-preview">
                            <input type="color" id="secondary_color" name="secondary_color" value="{{ old('secondary_color', $settings->secondary_color ?? '#138A6E') }}" class="form-color" onchange="updatePreview()">
                            <input type="text" value="{{ old('secondary_color', $settings->secondary_color ?? '#138A6E') }}" class="form-input form-input-sm" oninput="document.getElementById('secondary_color').value=this.value; updatePreview()">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="accent_color" class="form-label">Accent Color</label>
                        <div class="input-with-preview">
                            <input type="color" id="accent_color" name="accent_color" value="{{ old('accent_color', $settings->accent_color ?? '#0D6B58') }}" class="form-color" onchange="updatePreview()">
                            <input type="text" value="{{ old('accent_color', $settings->accent_color ?? '#0D6B58') }}" class="form-input form-input-sm" oninput="document.getElementById('accent_color').value=this.value; updatePreview()">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="button_color" class="form-label">Button Color</label>
                        <div class="input-with-preview">
                            <input type="color" id="button_color" name="button_color" value="{{ old('button_color', $settings->button_color ?? '#0D6B58') }}" class="form-color" onchange="updatePreview()">
                            <input type="text" value="{{ old('button_color', $settings->button_color ?? '#0D6B58') }}" class="form-input form-input-sm" oninput="document.getElementById('button_color').value=this.value; updatePreview()">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="header_color" class="form-label">Header Color</label>
                        <div class="input-with-preview">
                            <input type="color" id="header_color" name="header_color" value="{{ old('header_color', $settings->header_color ?? '#FFFFFF') }}" class="form-color" onchange="updatePreview()">
                            <input type="text" value="{{ old('header_color', $settings->header_color ?? '#FFFFFF') }}" class="form-input form-input-sm" oninput="document.getElementById('header_color').value=this.value; updatePreview()">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sidebar_color" class="form-label">Sidebar Color</label>
                        <div class="input-with-preview">
                            <input type="color" id="sidebar_color" name="sidebar_color" value="{{ old('sidebar_color', $settings->sidebar_color ?? '#0D6B58') }}" class="form-color" onchange="updatePreview()">
                            <input type="text" value="{{ old('sidebar_color', $settings->sidebar_color ?? '#0D6B58') }}" class="form-input form-input-sm" oninput="document.getElementById('sidebar_color').value=this.value; updatePreview()">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="background_color" class="form-label">Background Color</label>
                        <div class="input-with-preview">
                            <input type="color" id="background_color" name="background_color" value="{{ old('background_color', $settings->background_color ?? '#F8FAFC') }}" class="form-color" onchange="updatePreview()">
                            <input type="text" value="{{ old('background_color', $settings->background_color ?? '#F8FAFC') }}" class="form-input form-input-sm" oninput="document.getElementById('background_color').value=this.value; updatePreview()">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="text_color" class="form-label">Text Color</label>
                        <div class="input-with-preview">
                            <input type="color" id="text_color" name="text_color" value="{{ old('text_color', $settings->text_color ?? '#1E293B') }}" class="form-color" onchange="updatePreview()">
                            <input type="text" value="{{ old('text_color', $settings->text_color ?? '#1E293B') }}" class="form-input form-input-sm" oninput="document.getElementById('text_color').value=this.value; updatePreview()">
                        </div>
                    </div>
                </div>

                <div class="form-group" style="margin-top: 1rem;">
                    <label for="font_family" class="form-label">Font Family</label>
                    <select id="font_family" name="font_family" class="form-select">
                        <option value="Inter" {{ old('font_family', $settings->font_family ?? 'Inter') === 'Inter' ? 'selected' : '' }}>Inter</option>
                        <option value="Roboto" {{ old('font_family', $settings->font_family ?? '') === 'Roboto' ? 'selected' : '' }}>Roboto</option>
                        <option value="Open Sans" {{ old('font_family', $settings->font_family ?? '') === 'Open Sans' ? 'selected' : '' }}>Open Sans</option>
                        <option value="Lato" {{ old('font_family', $settings->font_family ?? '') === 'Lato' ? 'selected' : '' }}>Lato</option>
                        <option value="Poppins" {{ old('font_family', $settings->font_family ?? '') === 'Poppins' ? 'selected' : '' }}>Poppins</option>
                    </select>
                </div>

                <div class="form-grid form-grid-2" style="margin-top: 1rem;">
                    <div class="form-group">
                        <label for="logo" class="form-label">Logo</label>
                        <input type="file" id="logo" name="logo" class="form-input" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label for="favicon" class="form-label">Favicon</label>
                        <input type="file" id="favicon" name="favicon" class="form-input" accept="image/*">
                    </div>
                </div>

                <div class="form-actions" style="margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        Save Theme
                    </button>
                    <button type="button" class="btn btn-outline" onclick="resetTheme()">Reset to Default</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Live Preview</h3>
        </div>
        <div class="card-body">
            <div id="theme-preview" class="theme-preview">
                <div class="preview-sidebar" id="preview-sidebar">
                    <div class="preview-sidebar-logo">BANKING</div>
                    <div class="preview-sidebar-items">
                        <div class="preview-sidebar-item active">Dashboard</div>
                        <div class="preview-sidebar-item">Customers</div>
                        <div class="preview-sidebar-item">Transactions</div>
                    </div>
                </div>
                <div class="preview-main">
                    <div class="preview-header" id="preview-header">
                        <span class="preview-header-text">Admin Panel</span>
                    </div>
                    <div class="preview-content" id="preview-content">
                        <div class="preview-card">
                            <p class="preview-card-title">Total Customers</p>
                            <p class="preview-card-value">1,234</p>
                        </div>
                        <div class="preview-btn" id="preview-btn">Primary Button</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
var defaults = {
    primary_color: '#0D6B58',
    secondary_color: '#138A6E',
    accent_color: '#0D6B58',
    button_color: '#0D6B58',
    header_color: '#FFFFFF',
    sidebar_color: '#0D6B58',
    background_color: '#F8FAFC',
    text_color: '#1E293B'
};

function updatePreview() {
    document.getElementById('preview-sidebar').style.backgroundColor = document.getElementById('sidebar_color').value;
    document.getElementById('preview-header').style.backgroundColor = document.getElementById('header_color').value;
    document.getElementById('preview-content').style.backgroundColor = document.getElementById('background_color').value;
    document.getElementById('preview-content').style.color = document.getElementById('text_color').value;
    document.getElementById('preview-btn').style.backgroundColor = document.getElementById('button_color').value;
}

function resetTheme() {
    Object.keys(defaults).forEach(function(key) {
        var el = document.getElementById(key);
        if (el) { el.value = defaults[key]; }
    });
    updatePreview();
}

document.addEventListener('DOMContentLoaded', updatePreview);
</script>
@endpush