@extends('layouts.app')
@section('title', 'Branding & Settings')
@section('breadcrumb')
    <a href="{{ route('admin.index') }}">Admin</a>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><polyline points="9 18 15 12 9 6"></polyline></svg>
    <span style="font-weight:600;color:var(--text-primary);">Settings</span>
@endsection

@section('content')
    <div class="page-header">
        <h1>🎨 Branding & Appearance</h1>
        <p class="text-muted mt-1">Customize your app name, logo, and color scheme.</p>
    </div>

    @if(session('success'))
        <div class="alert alert-success mb-4">{{ session('success') }}</div>
    @endif

    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" id="settingsForm">
        @csrf
        @method('PUT')

        <div style="display:grid;grid-template-columns:1fr 380px;gap:24px;">
            {{-- Left Column: Settings --}}
            <div>
                {{-- App Identity --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h3 class="card-header-title">App Identity</h3>
                    </div>
                    <div class="card-body" style="padding:20px 24px;">
                        <div class="form-group mb-4">
                            <label class="form-label">Application Name</label>
                            <input type="text" name="app_name" class="form-control" value="{{ $settings['app_name'] }}" id="inputAppName">
                            <small class="text-muted">Shown in sidebar, title bar, and emails.</small>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Logo</label>
                            <div style="display:flex;align-items:center;gap:16px;">
                                <div id="logoPreview" style="width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;color:white;background:linear-gradient(135deg, {{ $settings['primary_color'] }}, {{ $settings['accent_color'] }});border:2px dashed var(--border-color);overflow:hidden;">
                                    @if($settings['app_logo'])
                                        <img src="{{ asset('storage/' . $settings['app_logo']) }}" style="width:100%;height:100%;object-fit:cover;">
                                    @else
                                        {{ strtoupper(substr($settings['app_name'], 0, 1)) }}
                                    @endif
                                </div>
                                <div style="flex:1;">
                                    <input type="file" name="app_logo" id="logoInput" accept="image/*" class="form-control" style="font-size:0.85rem;">
                                    <small class="text-muted">PNG, JPG, SVG. Max 2MB.</small>
                                    @if($settings['app_logo'])
                                        <label style="display:flex;align-items:center;gap:6px;margin-top:8px;cursor:pointer;font-size:0.82rem;color:var(--accent-red);">
                                            <input type="checkbox" name="remove_logo" value="1"> Remove current logo
                                        </label>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Color Scheme --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h3 class="card-header-title">Color Scheme</h3>
                    </div>
                    <div class="card-body" style="padding:20px 24px;">
                        <div class="grid grid-2" style="gap:20px;">
                            <div class="form-group">
                                <label class="form-label">Primary Color</label>
                                <div style="display:flex;align-items:center;gap:10px;">
                                    <input type="color" name="primary_color" value="{{ $settings['primary_color'] }}" id="inputPrimary" style="width:42px;height:42px;border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;padding:2px;">
                                    <input type="text" value="{{ $settings['primary_color'] }}" class="form-control" style="flex:1;font-family:monospace;" id="inputPrimaryText" readonly>
                                </div>
                                <small class="text-muted">Buttons, links, active states</small>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Accent Color</label>
                                <div style="display:flex;align-items:center;gap:10px;">
                                    <input type="color" name="accent_color" value="{{ $settings['accent_color'] }}" id="inputAccent" style="width:42px;height:42px;border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;padding:2px;">
                                    <input type="text" value="{{ $settings['accent_color'] }}" class="form-control" style="flex:1;font-family:monospace;" id="inputAccentText" readonly>
                                </div>
                                <small class="text-muted">Secondary highlights, hover</small>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Sidebar Background</label>
                                <div style="display:flex;align-items:center;gap:10px;">
                                    <input type="color" name="sidebar_color" value="{{ $settings['sidebar_color'] }}" id="inputSidebar" style="width:42px;height:42px;border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;padding:2px;">
                                    <input type="text" value="{{ $settings['sidebar_color'] }}" class="form-control" style="flex:1;font-family:monospace;" id="inputSidebarText" readonly>
                                </div>
                                <small class="text-muted">Sidebar panel background</small>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Sidebar Text</label>
                                <div style="display:flex;align-items:center;gap:10px;">
                                    <input type="color" name="sidebar_text_color" value="{{ $settings['sidebar_text_color'] }}" id="inputSidebarText2" style="width:42px;height:42px;border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;padding:2px;">
                                    <input type="text" value="{{ $settings['sidebar_text_color'] }}" class="form-control" style="flex:1;font-family:monospace;" id="inputSidebarTextVal" readonly>
                                </div>
                                <small class="text-muted">Sidebar labels and icons</small>
                            </div>
                        </div>

                        <div style="margin-top:20px;padding-top:16px;border-top:1px solid var(--border-color);display:flex;gap:10px;">
                            <button type="button" id="btnReset" class="btn btn-ghost">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:4px;"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
                                Reset to Defaults
                            </button>
                        </div>
                    </div>
                </div>

                <div style="display:flex;gap:12px;">
                    <button type="submit" class="btn btn-primary">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:4px;"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                        Save Changes
                    </button>
                </div>
            </div>

            {{-- Right Column: Live Preview --}}
            <div>
                <div class="card" style="position:sticky;top:20px;">
                    <div class="card-header">
                        <h3 class="card-header-title">Live Preview</h3>
                    </div>
                    <div class="card-body" style="padding:0;">
                        <div id="previewPane" style="display:flex;min-height:350px;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;">
                            {{-- Mini Sidebar --}}
                            <div id="previewSidebar" style="width:180px;padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:{{ $settings['sidebar_color'] }};">
                                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                                    <div id="previewLogo" style="width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:white;background:linear-gradient(135deg, {{ $settings['primary_color'] }}, {{ $settings['accent_color'] }});">
                                        @if($settings['app_logo'])
                                            <img src="{{ asset('storage/' . $settings['app_logo']) }}" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">
                                        @else
                                            {{ strtoupper(substr($settings['app_name'], 0, 1)) }}
                                        @endif
                                    </div>
                                    <span id="previewName" style="font-weight:700;font-size:0.82rem;color:var(--text-primary);">{{ $settings['app_name'] }}</span>
                                </div>
                                <div id="previewLink1" class="preview-link active" style="padding:6px 10px;border-radius:6px;font-size:0.75rem;cursor:default;display:flex;align-items:center;gap:6px;">
                                    <span style="width:4px;height:4px;border-radius:50%;background:currentColor;"></span> Home
                                </div>
                                <div id="previewLink2" class="preview-link" style="padding:6px 10px;border-radius:6px;font-size:0.75rem;cursor:default;display:flex;align-items:center;gap:6px;">
                                    <span style="width:4px;height:4px;border-radius:50%;background:currentColor;"></span> My Tasks
                                </div>
                                <div id="previewLink3" class="preview-link" style="padding:6px 10px;border-radius:6px;font-size:0.75rem;cursor:default;display:flex;align-items:center;gap:6px;">
                                    <span style="width:4px;height:4px;border-radius:50%;background:currentColor;"></span> Projects
                                </div>
                            </div>
                            {{-- Mini Content --}}
                            <div style="flex:1;padding:16px;background:var(--bg-primary);">
                                <div id="previewBtn" style="display:inline-block;padding:6px 14px;border-radius:6px;font-size:0.72rem;font-weight:600;color:white;margin-bottom:12px;">Button</div>
                                <div style="background:var(--bg-secondary);border-radius:8px;padding:12px;border:1px solid var(--border-color);">
                                    <div style="font-size:0.72rem;font-weight:600;margin-bottom:6px;color:var(--text-primary);">Sample Card</div>
                                    <div style="font-size:0.65rem;color:var(--text-secondary);">This is how your brand colors will appear throughout the app.</div>
                                    <div id="previewBadge" style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:0.6rem;font-weight:600;color:white;margin-top:8px;">Active</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const defaults = {
        primary: '#6366f1',
        accent: '#818cf8',
        sidebar: '#1a1a2e',
        sidebarText: '#a1a1aa',
    };

    const inputPrimary = document.getElementById('inputPrimary');
    const inputAccent = document.getElementById('inputAccent');
    const inputSidebar = document.getElementById('inputSidebar');
    const inputSidebarText2 = document.getElementById('inputSidebarText2');
    const inputAppName = document.getElementById('inputAppName');

    function updatePreview() {
        const pc = inputPrimary.value;
        const ac = inputAccent.value;
        const sc = inputSidebar.value;
        const st = inputSidebarText2.value;

        // Update text inputs
        document.getElementById('inputPrimaryText').value = pc;
        document.getElementById('inputAccentText').value = ac;
        document.getElementById('inputSidebarText').value = sc;
        document.getElementById('inputSidebarTextVal').value = st;

        // Preview sidebar
        document.getElementById('previewSidebar').style.background = sc;

        // Preview links
        document.querySelectorAll('.preview-link').forEach(link => {
            link.style.color = st;
        });
        document.querySelector('.preview-link.active').style.background = pc + '22';
        document.querySelector('.preview-link.active').style.color = pc;

        // Preview logo
        document.getElementById('previewLogo').style.background = `linear-gradient(135deg, ${pc}, ${ac})`;
        document.getElementById('logoPreview').style.background = `linear-gradient(135deg, ${pc}, ${ac})`;

        // Preview button & badge
        document.getElementById('previewBtn').style.background = pc;
        document.getElementById('previewBadge').style.background = pc;

        // Preview name
        document.getElementById('previewName').textContent = inputAppName.value;
    }

    inputPrimary.addEventListener('input', updatePreview);
    inputAccent.addEventListener('input', updatePreview);
    inputSidebar.addEventListener('input', updatePreview);
    inputSidebarText2.addEventListener('input', updatePreview);
    inputAppName.addEventListener('input', updatePreview);

    // Logo file preview
    document.getElementById('logoInput').addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = function(ev) {
                document.getElementById('logoPreview').innerHTML = `<img src="${ev.target.result}" style="width:100%;height:100%;object-fit:cover;">`;
                document.getElementById('previewLogo').innerHTML = `<img src="${ev.target.result}" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">`;
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    });

    // Reset
    document.getElementById('btnReset').addEventListener('click', function() {
        inputPrimary.value = defaults.primary;
        inputAccent.value = defaults.accent;
        inputSidebar.value = defaults.sidebar;
        inputSidebarText2.value = defaults.sidebarText;
        inputAppName.value = 'TaskFlow';
        updatePreview();
    });
});
</script>
@endpush