@extends('admin.layouts.app')

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

@section('content')
<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1><i class="bi bi-palette"></i> Theme Customization</h1>
                <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Back
                </a>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <h5 class="alert-heading"><i class="bi bi-exclamation-circle"></i> Validation Errors</h5>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="card card-header-gradient">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-layers"></i> Color Schemes</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.theme.update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <!-- Primary Color -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label" for="theme_primary">
                                    <i class="bi bi-circle-fill" style="color: {{ $colors['primary'] ?? '#1f2937' }}"></i>
                                    Primary Color
                                </label>
                                <div class="input-group">
                                    <input type="color" id="theme_primary" name="theme_primary" 
                                           class="form-control form-control-color" 
                                           value="{{ $colors['primary'] ?? '#1f2937' }}"
                                           required>
                                    <input type="text" class="form-control" 
                                           id="theme_primary_text"
                                           value="{{ $colors['primary'] ?? '#1f2937' }}" 
                                           readonly>
                                </div>
                                <small class="form-text text-muted">Main brand color used for headers and key elements</small>
                            </div>

                            <!-- Secondary Color -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label" for="theme_secondary">
                                    <i class="bi bi-circle-fill" style="color: {{ $colors['secondary'] ?? '#3b82f6' }}"></i>
                                    Secondary Color
                                </label>
                                <div class="input-group">
                                    <input type="color" id="theme_secondary" name="theme_secondary" 
                                           class="form-control form-control-color" 
                                           value="{{ $colors['secondary'] ?? '#3b82f6' }}"
                                           required>
                                    <input type="text" class="form-control" 
                                           id="theme_secondary_text"
                                           value="{{ $colors['secondary'] ?? '#3b82f6' }}" 
                                           readonly>
                                </div>
                                <small class="form-text text-muted">Buttons, links, and interactive elements</small>
                            </div>

                            <!-- Accent Color -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label" for="theme_accent">
                                    <i class="bi bi-circle-fill" style="color: {{ $colors['accent'] ?? '#ec4899' }}"></i>
                                    Accent Color
                                </label>
                                <div class="input-group">
                                    <input type="color" id="theme_accent" name="theme_accent" 
                                           class="form-control form-control-color" 
                                           value="{{ $colors['accent'] ?? '#ec4899' }}"
                                           required>
                                    <input type="text" class="form-control" 
                                           id="theme_accent_text"
                                           value="{{ $colors['accent'] ?? '#ec4899' }}" 
                                           readonly>
                                </div>
                                <small class="form-text text-muted">Highlights and special offers</small>
                            </div>

                            <!-- Success Color -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label" for="theme_success">
                                    <i class="bi bi-circle-fill" style="color: {{ $colors['success'] ?? '#10b981' }}"></i>
                                    Success Color
                                </label>
                                <div class="input-group">
                                    <input type="color" id="theme_success" name="theme_success" 
                                           class="form-control form-control-color" 
                                           value="{{ $colors['success'] ?? '#10b981' }}"
                                           required>
                                    <input type="text" class="form-control" 
                                           id="theme_success_text"
                                           value="{{ $colors['success'] ?? '#10b981' }}" 
                                           readonly>
                                </div>
                                <small class="form-text text-muted">Success messages and confirmations</small>
                            </div>

                            <!-- Warning Color -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label" for="theme_warning">
                                    <i class="bi bi-circle-fill" style="color: {{ $colors['warning'] ?? '#f59e0b' }}"></i>
                                    Warning Color
                                </label>
                                <div class="input-group">
                                    <input type="color" id="theme_warning" name="theme_warning" 
                                           class="form-control form-control-color" 
                                           value="{{ $colors['warning'] ?? '#f59e0b' }}"
                                           required>
                                    <input type="text" class="form-control" 
                                           id="theme_warning_text"
                                           value="{{ $colors['warning'] ?? '#f59e0b' }}" 
                                           readonly>
                                </div>
                                <small class="form-text text-muted">Warning messages and alerts</small>
                            </div>

                            <!-- Danger Color -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label" for="theme_danger">
                                    <i class="bi bi-circle-fill" style="color: {{ $colors['danger'] ?? '#ef4444' }}"></i>
                                    Danger Color
                                </label>
                                <div class="input-group">
                                    <input type="color" id="theme_danger" name="theme_danger" 
                                           class="form-control form-control-color" 
                                           value="{{ $colors['danger'] ?? '#ef4444' }}"
                                           required>
                                    <input type="text" class="form-control" 
                                           id="theme_danger_text"
                                           value="{{ $colors['danger'] ?? '#ef4444' }}" 
                                           readonly>
                                </div>
                                <small class="form-text text-muted">Errors, deletions, and destructive actions</small>
                            </div>

                            <!-- Dark Color -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label" for="theme_dark">
                                    <i class="bi bi-circle-fill" style="color: {{ $colors['dark'] ?? '#111827' }}"></i>
                                    Dark Color
                                </label>
                                <div class="input-group">
                                    <input type="color" id="theme_dark" name="theme_dark" 
                                           class="form-control form-control-color" 
                                           value="{{ $colors['dark'] ?? '#111827' }}"
                                           required>
                                    <input type="text" class="form-control" 
                                           id="theme_dark_text"
                                           value="{{ $colors['dark'] ?? '#111827' }}" 
                                           readonly>
                                </div>
                                <small class="form-text text-muted">Text and dark backgrounds</small>
                            </div>

                            <!-- Light Color -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label" for="theme_light">
                                    <i class="bi bi-circle-fill" style="color: {{ $colors['light'] ?? '#f9fafb' }}; border: 1px solid #ddd;"></i>
                                    Light Color
                                </label>
                                <div class="input-group">
                                    <input type="color" id="theme_light" name="theme_light" 
                                           class="form-control form-control-color" 
                                           value="{{ $colors['light'] ?? '#f9fafb' }}"
                                           required>
                                    <input type="text" class="form-control" 
                                           id="theme_light_text"
                                           value="{{ $colors['light'] ?? '#f9fafb' }}" 
                                           readonly>
                                </div>
                                <small class="form-text text-muted">Light backgrounds</small>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="row">
                            <div class="col-md-12">
                                <h6 class="mb-3"><i class="bi bi-eye-fill"></i> Live Preview</h6>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <button type="button" class="btn btn-primary w-100">
                                            <i class="bi bi-check-circle"></i> Primary Button
                                        </button>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <button type="button" class="btn btn-success w-100">
                                            <i class="bi bi-check"></i> Success Button
                                        </button>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <button type="button" class="btn btn-danger w-100">
                                            <i class="bi bi-x-circle"></i> Danger Button
                                        </button>
                                    </div>
                                </div>

                                <div class="alert alert-info mt-3">
                                    <i class="bi bi-info-circle"></i>
                                    <strong>Note:</strong> Color changes apply immediately to the entire site after saving.
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="bi bi-check-circle"></i> Save Theme Colors
                                </button>
                                <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary btn-lg">
                                    <i class="bi bi-x-circle"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .form-control-color {
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
    }

    .card-header-gradient {
        background: white;
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .card-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: white;
        border: none;
    }

    .form-label {
        font-weight: 600;
        margin-bottom: 0.75rem;
    }

    .input-group .form-control-color {
        border-right: none;
    }

    .input-group .form-control:last-child {
        border-left: none;
    }

    small.form-text {
        display: block;
        margin-top: 0.5rem;
    }
</style>

<script>
    // Sync color hex display
    document.querySelectorAll('input[type="color"]').forEach(input => {
        input.addEventListener('change', function() {
            const textInput = document.getElementById(this.id + '_text');
            if (textInput) {
                textInput.value = this.value;
            }
        });

        input.addEventListener('input', function() {
            const textInput = document.getElementById(this.id + '_text');
            if (textInput) {
                textInput.value = this.value;
            }
        });
    });
</script>
@endsection