@extends('layouts.admin')

@section('title', 'Gestão de Cores')

@section('content')
<div class="container-fluid" style="max-width: 1400px; margin: 0 auto;">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 style="color: rgb(1, 15, 27); font-weight: 600; margin-bottom: 4px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                <i class="fas fa-palette me-2"></i>Gestão de Cores
            </h2>
            <p style="color: #64748b; margin-bottom: 0;">Gerencie as cores disponíveis para os cartões de visita</p>
        </div>
        <button type="button" class="btn text-white px-4 py-2" 
                style="background-color: rgb(243, 158, 11); border-radius: 8px; font-weight: 500; border: none;"
                data-bs-toggle="modal" data-bs-target="#addColorModal">
            <i class="fas fa-plus me-2"></i>Nova Cor
        </button>
    </div>

    <!-- Colors Grid -->
    @if($colors->count() > 0)
    <div class="row g-4">
        @foreach($colors as $color)
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="rounded-lg shadow-sm h-100" style="background-color: white; border: 1px solid #e2e8f0;">
                <!-- Color Header -->
                <div class="p-4 text-center" style="border-bottom: 1px solid #e2e8f0;">
                    <div class="mx-auto rounded-circle d-flex align-items-center justify-content-center mb-3" 
                         style="width: 80px; height: 80px; background-color: {{ $color->hex_code }}; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
                    </div>
                    <h6 style="color: rgb(1, 15, 27); font-weight: 600; margin-bottom: 4px;">{{ $color->name }}</h6>
                    <div style="color: #6b7280; font-size: 14px; font-family: 'Courier New', monospace;">{{ strtoupper($color->hex_code) }}</div>
                </div>
                
                <!-- Color Info -->
                <div class="p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span style="color: #6b7280; font-size: 14px;">Status:</span>
                        <span class="badge px-2 py-1" style="background-color: {{ $color->is_active ? '#10b981' : '#ef4444' }}; color: white; font-size: 12px;">
                            {{ $color->is_active ? 'Ativa' : 'Inativa' }}
                        </span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <span style="color: #6b7280; font-size: 14px;">Usuários:</span>
                        <span style="color: rgb(1, 15, 27); font-weight: 500;">{{ $color->usage_count }}</span>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary btn-sm" 
                                data-bs-toggle="modal" data-bs-target="#editColorModal{{ $color->id }}"
                                style="border-radius: 6px;">
                            <i class="fas fa-edit me-1"></i>Editar
                        </button>
                        
                        <div class="d-flex gap-2">
                            <button type="button" 
                                    class="btn btn-outline-{{ $color->is_active ? 'warning' : 'success' }} btn-sm flex-fill"
                                    onclick="toggleColor({{ $color->id }})"
                                    style="border-radius: 6px;">
                                <i class="fas fa-{{ $color->is_active ? 'eye-slash' : 'eye' }} me-1"></i>
                                {{ $color->is_active ? 'Desativar' : 'Ativar' }}
                            </button>
                            
                            @if($color->usage_count == 0)
                            <button type="button" 
                                    class="btn btn-outline-danger btn-sm"
                                    onclick="deleteColor({{ $color->id }})"
                                    style="border-radius: 6px;">
                                <i class="fas fa-trash"></i>
                            </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="text-center py-5">
        <div class="mb-3">
            <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center" 
                 style="width: 64px; height: 64px; background-color: #f8fafc; color: rgb(1, 15, 27);">
                <i class="fas fa-palette fa-2x"></i>
            </div>
        </div>
        <h5 style="color: rgb(1, 15, 27); font-weight: 500;">Nenhuma cor encontrada</h5>
        <p style="color: #6b7280; margin-bottom: 0;">Adicione a primeira cor clicando no botão acima.</p>
    </div>
    @endif
</div>

<!-- Modal para Adicionar Nova Cor -->
<div class="modal fade" id="addColorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 12px; border: none;">
            <div class="modal-header" style="background-color: rgb(1, 15, 27); border-radius: 12px 12px 0 0;">
                <h5 class="modal-title text-white" style="font-weight: 600;">
                    <i class="fas fa-plus me-2"></i>Adicionar Nova Cor
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="addColorForm">
                @csrf
                <div class="modal-body" style="padding: 24px;">
                    <div class="mb-3">
                        <label for="colorName" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Nome da Cor</label>
                        <input type="text" 
                               class="form-control" 
                               id="colorName" 
                               name="name"
                               required
                               style="border-color: #d1d5db; padding: 12px; border-radius: 6px;"
                               placeholder="Ex: Azul Corporativo">
                    </div>
                    
                    <div class="mb-3">
                        <label for="colorHex" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Código Hexadecimal</label>
                        <div class="input-group">
                            <input type="color" 
                                   class="form-control form-control-color" 
                                   id="colorPicker" 
                                   value="rgb(1, 15, 27)" 
                                   onchange="updateHexInput()"
                                   style="border-radius: 6px 0 0 6px;">
                            <input type="text" 
                                   class="form-control" 
                                   id="colorHex" 
                                   name="hex_code"
                                   value="rgb(1, 15, 27)" 
                                   oninput="updateColorPicker()"
                                   pattern="^#[a-fA-F0-9]{6}$"
                                   required
                                   style="border-radius: 0 6px 6px 0; border-left: none; padding: 12px;">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-medium" style="color: rgb(1, 15, 27);">Preview</label>
                        <div class="d-flex align-items-center justify-content-center p-4 rounded" 
                             id="colorPreview" 
                             style="background-color: rgb(1, 15, 27); min-height: 100px; border-radius: 8px;">
                            <span class="text-white fw-bold" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">
                                Preview da Cor
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer" style="border-top: 1px solid #e2e8f0; padding: 16px 24px;">
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal" style="border-radius: 6px;">
                        Cancelar
                    </button>
                    <button type="submit" class="btn text-white px-4" style="background-color: rgb(243, 158, 11); border-radius: 6px; border: none;">
                        <i class="fas fa-save me-1"></i>Adicionar Cor
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modais de Edição -->
@foreach($colors as $color)
<div class="modal fade" id="editColorModal{{ $color->id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 12px; border: none;">
            <div class="modal-header" style="background-color: rgb(1, 15, 27); border-radius: 12px 12px 0 0;">
                <h5 class="modal-title text-white" style="font-weight: 600;">
                    <i class="fas fa-edit me-2"></i>Editar Cor
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="editColorForm{{ $color->id }}">
                @csrf
                @method('PUT')
                <div class="modal-body" style="padding: 24px;">
                    <div class="mb-3">
                        <label for="editColorName{{ $color->id }}" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Nome da Cor</label>
                        <input type="text" 
                               class="form-control" 
                               id="editColorName{{ $color->id }}" 
                               name="name"
                               value="{{ $color->name }}"
                               required
                               style="border-color: #d1d5db; padding: 12px; border-radius: 6px;">
                    </div>
                    
                    <div class="mb-3">
                        <label for="editColorHex{{ $color->id }}" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Código Hexadecimal</label>
                        <div class="input-group">
                            <input type="color" 
                                   class="form-control form-control-color" 
                                   id="editColorPicker{{ $color->id }}" 
                                   value="{{ $color->hex_code }}" 
                                   onchange="updateEditHexInput({{ $color->id }})"
                                   style="border-radius: 6px 0 0 6px;">
                            <input type="text" 
                                   class="form-control" 
                                   id="editColorHex{{ $color->id }}" 
                                   name="hex_code"
                                   value="{{ $color->hex_code }}" 
                                   oninput="updateEditColorPicker({{ $color->id }})"
                                   pattern="^#[a-fA-F0-9]{6}$"
                                   required
                                   style="border-radius: 0 6px 6px 0; border-left: none; padding: 12px;">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-medium" style="color: rgb(1, 15, 27);">Preview</label>
                        <div class="d-flex align-items-center justify-content-center p-4 rounded" 
                             id="editColorPreview{{ $color->id }}" 
                             style="background-color: {{ $color->hex_code }}; min-height: 100px; border-radius: 8px;">
                            <span class="text-white fw-bold" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">
                                Preview da Cor
                            </span>
                        </div>
                    </div>
                    
                    <div class="form-check">
                        <input class="form-check-input" 
                               type="checkbox" 
                               id="editColorActive{{ $color->id }}" 
                               name="is_active"
                               {{ $color->is_active ? 'checked' : '' }}>
                        <label class="form-check-label fw-medium" for="editColorActive{{ $color->id }}" style="color: rgb(1, 15, 27);">
                            Cor ativa (visível para usuários)
                        </label>
                    </div>
                </div>
                
                <div class="modal-footer" style="border-top: 1px solid #e2e8f0; padding: 16px 24px;">
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal" style="border-radius: 6px;">
                        Cancelar
                    </button>
                    <button type="submit" class="btn text-white px-4" style="background-color: rgb(243, 158, 11); border-radius: 6px; border: none;">
                        <i class="fas fa-save me-1"></i>Salvar Alterações
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

@if(session('success'))
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast show" role="alert">
        <div class="toast-header">
            <i class="fas fa-check-circle text-success me-2"></i>
            <strong class="me-auto">Sucesso</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            {{ session('success') }}
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script>
// Funções para o modal de adicionar
function updateHexInput() {
    const picker = document.getElementById('colorPicker');
    const hexInput = document.getElementById('colorHex');
    const preview = document.getElementById('colorPreview');
    
    hexInput.value = picker.value;
    preview.style.backgroundColor = picker.value;
}

function updateColorPicker() {
    const hexInput = document.getElementById('colorHex');
    const picker = document.getElementById('colorPicker');
    const preview = document.getElementById('colorPreview');
    
    if (/^#[0-9A-F]{6}$/i.test(hexInput.value)) {
        picker.value = hexInput.value;
        preview.style.backgroundColor = hexInput.value;
    }
}

// Funções para os modais de edição
function updateEditHexInput(colorId) {
    const picker = document.getElementById('editColorPicker' + colorId);
    const hexInput = document.getElementById('editColorHex' + colorId);
    const preview = document.getElementById('editColorPreview' + colorId);
    
    hexInput.value = picker.value;
    preview.style.backgroundColor = picker.value;
}

function updateEditColorPicker(colorId) {
    const hexInput = document.getElementById('editColorHex' + colorId);
    const picker = document.getElementById('editColorPicker' + colorId);
    const preview = document.getElementById('editColorPreview' + colorId);
    
    if (/^#[0-9A-F]{6}$/i.test(hexInput.value)) {
        picker.value = hexInput.value;
        preview.style.backgroundColor = hexInput.value;
    }
}

// Adicionar nova cor
document.getElementById('addColorForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch('{{ route("admin.colors.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erro ao adicionar cor: ' + (data.message || 'Erro desconhecido'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erro ao adicionar cor');
    });
});

// Editar cor
@foreach($colors as $color)
document.getElementById('editColorForm{{ $color->id }}').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    formData.append('_method', 'PUT');
    
    fetch('{{ route("admin.colors.update", $color->id) }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erro ao atualizar cor: ' + (data.message || 'Erro desconhecido'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erro ao atualizar cor');
    });
});
@endforeach

// Toggle ativar/desativar cor
function toggleColor(colorId) {
    fetch(`/admin/colors/${colorId}/toggle`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erro ao alterar status da cor: ' + (data.message || 'Erro desconhecido'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erro ao alterar status da cor');
    });
}

// Excluir cor
function deleteColor(colorId) {
    if (confirm('Tem certeza que deseja excluir esta cor? Esta ação não pode ser desfeita.')) {
        fetch(`/admin/colors/${colorId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Erro ao excluir cor: ' + (data.message || 'Erro desconhecido'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Erro ao excluir cor');
        });
    }
}
</script>
@endpush