@extends('admin.settings.layout')
@php
use App\Models\Setting;
$debug_mode = true;

// Check actual database values for debugging
$dbPrimary = Setting::where('key', 'primary_color')->first()?->value;
$dbSecondary = Setting::where('key', 'secondary_color')->first()?->value;
@endphp

@section('settings_content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-palette me-2"></i>Pengaturan Tampilan</h5>
    </div>
    <div class="card-body">
        <!-- Debug Info -->
        @if($debug_mode)
        <div class="alert alert-warning mb-3">
            <strong>Debug Info:</strong> DB primary_color = <code id="dbPrimary">{{ $dbPrimary }}</code> | secondary_color = <code id="dbSecondary">{{ $dbSecondary }}</code>
            <button type="button" onclick="location.reload()" class="btn btn-sm btn-outline-warning float-end">Refresh</button>
        </div>
        @endif

        <form id="appearanceForm" action="{{ route('admin.settings.updateBatch') }}" method="POST">
            @csrf

            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Warna Utama (Primary)</label>
                        <div class="d-flex gap-2">
                            <input type="color" name="settings[primary_color]" value="{{ $dbPrimary ?? '#4F46E5' }}" class="form-control form-control-color" style="width: 60px;" id="primaryColorPicker">
                            <input type="text" name="settings[primary_color]" value="{{ $dbPrimary ?? '#4F46E5' }}" class="form-control" id="primaryColorText">
                        </div>
                        <small class="text-muted">Warna utama website (sidebar, button, dll)</small>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Warna Sekunder</label>
                        <div class="d-flex gap-2">
                            <input type="color" name="settings[secondary_color]" value="{{ $dbSecondary ?? '#64748B' }}" class="form-control form-control-color" style="width: 60px;" id="secondaryColorPicker">
                            <input type="text" name="settings[secondary_color]" value="{{ $dbSecondary ?? '#64748B' }}" class="form-control" id="secondaryColorText">
                        </div>
                        <small class="text-muted">Warna sekunder untuk aksen</small>
                    </div>
                </div>
            </div>

            <!-- Preview -->
            <hr class="my-4">
            <h6>Preview Warna</h6>
            <div class="border rounded p-4" id="colorPreview" style="background: linear-gradient(135deg, {{ $dbPrimary ?? '#4F46E5' }}, {{ $dbSecondary ?? '#64748B' }});">
                <div class="bg-white rounded p-3">
                    <div class="d-flex gap-2 mb-2">
                        <button class="btn btn-sm" style="background: {{ $dbPrimary ?? '#4F46E5' }}; color: white;">Primary</button>
                        <button class="btn btn-sm btn-secondary">Secondary</button>
                    </div>
                    <p class="mb-0 small" style="color: {{ $dbSecondary ?? '#64748B' }};">Contoh teks dengan warna sekunder</p>
                </div>
            </div>

            <hr class="my-4">
            <button type="submit" class="btn btn-success">
                <i class="bi bi-check-lg me-2"></i>Simpan Perubahan
            </button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
@if($debug_mode)
<script>
document.getElementById('appearanceForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    console.log('Submitting appearance settings...');
    console.log('primary_color value:', formData.get('settings[primary_color]'));

    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('Server response:', data);
        if (data.success || data.message) {
            showToast(data.message || data.success, 'success');
            // Update debug info
            document.getElementById('dbPrimary').textContent = formData.get('settings[primary_color]');
            document.getElementById('dbSecondary').textContent = formData.get('settings[secondary_color]');
            setTimeout(() => location.reload(), 1500);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Terjadi kesalahan', 'error');
    });
});
</script>
@endif

<script>
// Sync color picker with text input
document.getElementById('primaryColorPicker').addEventListener('input', function() {
    document.getElementById('primaryColorText').value = this.value;
    updatePreview();
});

document.getElementById('secondaryColorPicker').addEventListener('input', function() {
    document.getElementById('secondaryColorText').value = this.value;
    updatePreview();
});

function updatePreview() {
    const primary = document.getElementById('primaryColorPicker').value || '#4F46E5';
    const secondary = document.getElementById('secondaryColorPicker').value || '#64748B';
    document.getElementById('colorPreview').style.background = `linear-gradient(135deg, ${primary}, ${secondary})`;
}
</script>
@endpush