@extends('layouts.admin')
@section('title', 'Cores de Status — Configurações')

@push('styles')
<style>
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}
.settings-nav {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.settings-nav-header {
    padding: 16px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.settings-nav-link:hover { background: var(--color-bg); color: var(--color-primary); }
.settings-nav-link.active {
    background: color-mix(in srgb, var(--color-primary) 8%, white);
    color: var(--color-primary);
    font-weight: 700;
    border-left-color: var(--color-primary);
}
@media (max-width: 768px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { position: static; }
}

/* Color Editor */
.status-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.status-color-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}
.status-color-preview {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 12px 12px 0 0;
    transition: all .2s;
}
.status-color-body { padding: 14px; }
.color-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.color-row label { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; width: 85px; flex-shrink: 0; }
.color-row input[type="color"] { width: 36px; height: 28px; border: 1.5px solid var(--color-border); border-radius: 6px; cursor: pointer; padding: 1px 2px; }
.color-row input[type="text"] { flex: 1; padding: 5px 8px; border: 1.5px solid var(--color-border); border-radius: 6px; font-size: 12px; font-family: monospace; color: var(--color-text); text-transform: uppercase; }
.color-row input[type="text"]:focus { outline: none; border-color: var(--color-primary); }
.label-input { width: 100%; padding: 7px 10px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--color-text); margin-bottom: 10px; }
.label-input:focus { outline: none; border-color: var(--color-primary); }
</style>
@endpush

@section('breadcrumb')
    <a class="breadcrumb-item" href="{{ route('admin.settings.hotel.index') }}">Configurações</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Cores de Status</span>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Configurações</h1>
        <p class="page-subtitle">Personalize as cores exibidas para cada status de reserva.</p>
    </div>
</div>

<div class="settings-layout">
    {{-- Nav --}}
    <nav class="settings-nav">
        <div class="settings-nav-header">Configurações</div>
        <a href="{{ route('admin.settings.hotel.index') }}" class="settings-nav-link">
            <i data-lucide="building-2" style="width:16px;height:16px;"></i> Perfil do Hotel
        </a>
        <a href="{{ route('admin.settings.payment-methods.index') }}" class="settings-nav-link">
            <i data-lucide="credit-card" style="width:16px;height:16px;"></i> Pagamentos
        </a>
        <a href="{{ route('admin.settings.accounts.index') }}" class="settings-nav-link">
            <i data-lucide="landmark" style="width:16px;height:16px;"></i> Contas Financeiras
        </a>
        <a href="{{ route('admin.settings.status-colors.index') }}" class="settings-nav-link active">
            <i data-lucide="palette" style="width:16px;height:16px;"></i> Cores de Status
        </a>
        <a href="{{ route('admin.settings.notifications.index') }}" class="settings-nav-link">
            <i data-lucide="bell" style="width:16px;height:16px;"></i> Notificações
        </a>
        <a href="{{ route('admin.settings.users.index') }}" class="settings-nav-link">
            <i data-lucide="users" style="width:16px;height:16px;"></i> Usuários
        </a>
    </nav>

    {{-- Content --}}
    <div>
        <div id="alert-box" style="display:none;margin-bottom:16px;"></div>

        <div class="card mb-lg">
            <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
                <h3 style="margin:0;font-size:14px;font-weight:700;">
                    <i data-lucide="palette" style="width:15px;height:15px;display:inline-block;vertical-align:middle;margin-right:6px;"></i>
                    Cores por Status de Reserva
                </h3>
                <div style="display:flex;gap:8px;">
                    <button onclick="resetColors()" class="btn btn-sm btn-ghost" style="color:var(--color-danger);">
                        <i data-lucide="rotate-ccw" style="width:13px;height:13px;"></i> Redefinir
                    </button>
                    <button onclick="saveColors()" class="btn btn-sm btn-primary" id="btn-save">
                        <i data-lucide="save" style="width:13px;height:13px;"></i> Salvar
                    </button>
                </div>
            </div>
            <div class="card-body">
                <p style="font-size:12px;color:var(--color-text-muted);margin-bottom:18px;">
                    As cores são aplicadas em toda a interface: mapa, lista de reservas, FNRH e relatórios.
                </p>
                <div class="status-color-grid" id="color-grid">
                    <div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--color-text-muted);">
                        <span>Carregando...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
const headers = {
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': csrf,
    'X-Requested-With': 'XMLHttpRequest'
};

const STATUS_LABELS_PT = {
    provisional: 'Pré-reservado',
    confirmed:   'Confirmado',
    checked_in:  'Hospedado',
    checked_out: 'Finalizado',
    canceled:    'Cancelado',
    no_show:     'No-Show',
};

let colorsData = {};

async function loadColors() {
    try {
        const res = await fetch('{{ route("admin.settings.status-colors.index") }}', {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        });
        const json = await res.json();
        colorsData = json.colors || {};
        renderGrid();
    } catch (e) {
        showAlert('Erro ao carregar cores.', 'danger');
    }
}

function renderGrid() {
    const grid = document.getElementById('color-grid');
    grid.innerHTML = '';

    Object.entries(colorsData).forEach(([code, data]) => {
        const label = STATUS_LABELS_PT[code] || code;
        grid.innerHTML += `
        <div class="status-color-card" id="card-${code}">
            <div class="status-color-preview"
                id="preview-${code}"
                style="background:${data.bg_color};color:${data.text_color};border-bottom:3px solid ${data.border_color};">
                ${label}
            </div>
            <div class="status-color-body">
                <label style="font-size:11px;font-weight:700;color:var(--color-text-muted);display:block;margin-bottom:6px;">LABEL</label>
                <input type="text" class="label-input" id="label-${code}" value="${data.label}"
                    oninput="updatePreview('${code}')" maxlength="60">

                <div class="color-row">
                    <label>Fundo</label>
                    <input type="color" id="bg-${code}" value="${data.bg_color}" oninput="syncHex('bg','${code}')">
                    <input type="text" id="bghex-${code}" value="${data.bg_color}" maxlength="7" oninput="syncColor('bg','${code}')">
                </div>
                <div class="color-row">
                    <label>Texto</label>
                    <input type="color" id="text-${code}" value="${data.text_color}" oninput="syncHex('text','${code}')">
                    <input type="text" id="texthex-${code}" value="${data.text_color}" maxlength="7" oninput="syncColor('text','${code}')">
                </div>
                <div class="color-row">
                    <label>Borda</label>
                    <input type="color" id="border-${code}" value="${data.border_color}" oninput="syncHex('border','${code}')">
                    <input type="text" id="borderhex-${code}" value="${data.border_color}" maxlength="7" oninput="syncColor('border','${code}')">
                </div>
            </div>
        </div>`;
    });
}

function syncHex(type, code) {
    const val = document.getElementById(`${type}-${code}`).value;
    document.getElementById(`${type}hex-${code}`).value = val;
    updatePreview(code);
}

function syncColor(type, code) {
    let val = document.getElementById(`${type}hex-${code}`).value;
    if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
        document.getElementById(`${type}-${code}`).value = val;
        updatePreview(code);
    }
}

function updatePreview(code) {
    const bg     = document.getElementById(`bghex-${code}`)?.value;
    const text   = document.getElementById(`texthex-${code}`)?.value;
    const border = document.getElementById(`borderhex-${code}`)?.value;
    const label  = document.getElementById(`label-${code}`)?.value;
    const preview = document.getElementById(`preview-${code}`);
    if (preview && bg && text && border) {
        preview.style.background    = bg;
        preview.style.color         = text;
        preview.style.borderBottom  = `3px solid ${border}`;
        if (label) preview.textContent = label;
    }
}

async function saveColors() {
    const btn = document.getElementById('btn-save');
    btn.disabled = true;
    btn.textContent = 'Salvando...';

    const colors = {};
    Object.keys(colorsData).forEach(code => {
        colors[code] = {
            label:        document.getElementById(`label-${code}`)?.value || '',
            bg_color:     document.getElementById(`bghex-${code}`)?.value || '#ffffff',
            text_color:   document.getElementById(`texthex-${code}`)?.value || '#000000',
            border_color: document.getElementById(`borderhex-${code}`)?.value || '#000000',
        };
    });

    try {
        const res  = await fetch('{{ route("admin.settings.status-colors.store") }}', {
            method: 'POST', headers,
            body: JSON.stringify({ colors })
        });
        const json = await res.json();
        showAlert(json.message || 'Salvo!', json.success ? 'success' : 'danger');
    } catch (e) {
        showAlert('Erro ao salvar.', 'danger');
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="save" style="width:13px;height:13px;"></i> Salvar';
        lucide.createIcons();
    }
}

async function resetColors() {
    if (!confirm('Redefinir todas as cores para os valores padrão do sistema?')) return;
    try {
        const res  = await fetch('{{ route("admin.settings.status-colors.reset") }}', {
            method: 'DELETE', headers
        });
        const json = await res.json();
        if (json.success) {
            colorsData = json.colors;
            renderGrid();
            showAlert('Cores redefinidas para o padrão!', 'success');
        }
    } catch (e) {
        showAlert('Erro ao redefinir.', 'danger');
    }
}

function showAlert(msg, type = 'success') {
    const box = document.getElementById('alert-box');
    const bg  = type === 'success' ? '#dcfce7' : '#fee2e2';
    const cl  = type === 'success' ? '#15803d' : '#dc2626';
    const bd  = type === 'success' ? '#86efac' : '#fca5a5';
    box.style.display = 'block';
    box.innerHTML = `<div style="background:${bg};border:1px solid ${bd};border-radius:10px;padding:12px 16px;color:${cl};font-size:13px;">${msg}</div>`;
    setTimeout(() => { box.style.display = 'none'; }, 4000);
}

loadColors();
</script>
@endpush