@extends('layouts.app')

@section('title', 'Novo Cliente')

@push('styles')
<link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendors/dropzone/dropzone.min.css') }}" rel="stylesheet">
<style>
.color-picker-container {
    position: relative;
}

.color-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.color-preview:hover {
    border-color: #9ca3af;
    transform: scale(1.05);
}

.color-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}

.upload-area:hover {
    border-color: #9ca3af;
    background-color: #f3f4f6;
}

.upload-area.dragover {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.file-preview {
    position: relative;
    display: inline-block;
}

.file-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

.is-invalid {
    border-color: #dc3545 !important;
}

.loading-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
@endpush

@section('content')
<div class="mx-n4 px-4 mx-lg-n6 px-lg-6 bg-body-emphasis border-bottom border-300 pt-7 border-bottom-sm-0 pb-7">
    <div class="page-header">
        <div class="row align-items-center justify-content-between">
            <div class="col-auto">
                <nav class="mb-2" aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('clientes.index') }}">Clientes</a></li>
                        <li class="breadcrumb-item active">Novo Cliente</li>
                    </ol>
                </nav>
                <h1 class="page-header-title">
                    <span class="page-header-icon">
                        <span class="fa-solid fa-plus"></span>
                    </span>
                    Novo Cliente
                </h1>
                <p class="page-header-subtitle mt-2">
                    Cadastre um novo cliente no sistema
                </p>
            </div>
            <div class="col-auto">
                <a href="{{ route('clientes.index') }}" class="btn btn-phoenix-secondary">
                    <span class="fa-solid fa-arrow-left me-2"></span>Voltar
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <form id="clienteForm" action="{{ route('clientes.store') }}" method="POST" enctype="multipart/form-data" novalidate>
        @csrf
        
        <div class="row g-3">
            <!-- Coluna Principal -->
            <div class="col-xxl-9">
                <!-- Informações Básicas -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">Informações Básicas</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <!-- Nome do Cliente -->
                            <div class="col-12">
                                <label class="form-label" for="nome">
                                    Nome do Cliente <span class="text-danger">*</span>
                                </label>
                                <input class="form-control" id="nome" name="nome" type="text" 
                                       placeholder="Digite o nome do cliente..." 
                                       value="{{ old('nome') }}" required>
                                <div class="invalid-feedback" id="nome-error"></div>
                                @error('nome')
                                    <div class="text-danger fs-10">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Status -->
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" id="ativo" name="ativo" type="checkbox" 
                                           value="1" {{ old('ativo', true) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold text-body-emphasis" for="ativo">
                                        Cliente Ativo
                                    </label>
                                    <div class="form-text">Clientes ativos aparecem nas listagens e podem receber campanhas</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Logo do Cliente -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">Logo do Cliente</h6>
                    </div>
                    <div class="card-body">
                        <div class="upload-area" id="logoUploadArea">
                            <input type="file" id="logo" name="logo" accept="image/*" style="display: none;">
                            <div id="logoDropZone">
                                <div class="mb-3">
                                    <span class="fa-solid fa-cloud-upload-alt fa-3x text-body-tertiary"></span>
                                </div>
                                <h6 class="text-body-emphasis">Clique para fazer upload ou arraste a imagem</h6>
                                <p class="fs-9 text-body-tertiary mb-0">
                                    Formatos aceitos: JPG, PNG, GIF, SVG, WebP<br>
                                    Tamanho máximo: 2MB
                                </p>
                            </div>
                            <div id="logoPreview" style="display: none;">
                                <div class="file-preview">
                                    <img id="logoPreviewImage" src="" alt="Logo Preview" 
                                         style="max-width: 200px; max-height: 150px; border-radius: 8px;">
                                    <button type="button" class="file-remove" onclick="removeLogo()">
                                        <span class="fa-solid fa-times"></span>
                                    </button>
                                </div>
                                <p class="mt-2 mb-0 fs-9 text-body-tertiary" id="logoFileName"></p>
                            </div>
                        </div>
                        <div class="invalid-feedback" id="logo-error"></div>
                        @error('logo')
                            <div class="text-danger fs-10 mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Cores da Marca -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">Cores da Marca</h6>
                    </div>
                    <div class="card-body">
                        <p class="text-body-tertiary fs-9 mb-3">
                            Defina até 3 cores principais da marca do cliente. Essas cores serão usadas como referência para as campanhas.
                        </p>
                        
                        <div class="row g-3" id="coresContainer">
                            <!-- Cor 1 -->
                            <div class="col-md-4">
                                <label class="form-label" for="cor1">Cor Principal</label>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="color-picker-container">
                                        <div class="color-preview" style="background-color: #3B82F6;" onclick="openColorPicker(1)">
                                            <input type="color" class="color-input" id="colorPicker1" 
                                                   value="#3B82F6" onchange="updateColor(1, this.value)">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <input class="form-control" id="cor1" name="cores_marca[]" type="text" 
                                               placeholder="#000000" value="#3B82F6" 
                                               onchange="updateColorFromInput(1, this.value)">
                                    </div>
                                </div>
                            </div>

                            <!-- Cor 2 -->
                            <div class="col-md-4">
                                <label class="form-label" for="cor2">Cor Secundária</label>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="color-picker-container">
                                        <div class="color-preview" style="background-color: #10B981;" onclick="openColorPicker(2)">
                                            <input type="color" class="color-input" id="colorPicker2" 
                                                   value="#10B981" onchange="updateColor(2, this.value)">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <input class="form-control" id="cor2" name="cores_marca[]" type="text" 
                                               placeholder="#000000" value="#10B981" 
                                               onchange="updateColorFromInput(2, this.value)">
                                    </div>
                                </div>
                            </div>

                            <!-- Cor 3 -->
                            <div class="col-md-4">
                                <label class="form-label" for="cor3">Cor de Apoio</label>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="color-picker-container">
                                        <div class="color-preview" style="background-color: #F59E0B;" onclick="openColorPicker(3)">
                                            <input type="color" class="color-input" id="colorPicker3" 
                                                   value="#F59E0B" onchange="updateColor(3, this.value)">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <input class="form-control" id="cor3" name="cores_marca[]" type="text" 
                                               placeholder="#000000" value="#F59E0B" 
                                               onchange="updateColorFromInput(3, this.value)">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="invalid-feedback" id="cores-error"></div>
                        @error('cores_marca')
                            <div class="text-danger fs-10 mt-2">{{ $message }}</div>
                        @enderror
                        @error('cores_marca.*')
                            <div class="text-danger fs-10 mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Guidelines (PDF) -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">Guidelines da Marca</h6>
                    </div>
                    <div class="card-body">
                        <p class="text-body-tertiary fs-9 mb-3">
                            Faça upload do manual da marca ou guidelines em formato PDF.
                        </p>
                        
                        <div class="upload-area" id="guidelinesUploadArea">
                            <input type="file" id="guidelines" name="guidelines" accept=".pdf" style="display: none;">
                            <div id="guidelinesDropZone">
                                <div class="mb-3">
                                    <span class="fa-solid fa-file-pdf fa-3x text-danger"></span>
                                </div>
                                <h6 class="text-body-emphasis">Clique para fazer upload ou arraste o arquivo PDF</h6>
                                <p class="fs-9 text-body-tertiary mb-0">
                                    Formato aceito: PDF<br>
                                    Tamanho máximo: 10MB
                                </p>
                            </div>
                            <div id="guidelinesPreview" style="display: none;">
                                <div class="d-flex align-items-center p-3 bg-body-secondary rounded">
                                    <span class="fa-solid fa-file-pdf fa-2x text-danger me-3"></span>
                                    <div class="flex-1">
                                        <h6 class="mb-1" id="guidelinesFileName"></h6>
                                        <p class="mb-0 fs-9 text-body-tertiary" id="guidelinesFileSize"></p>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-phoenix-danger" onclick="removeGuidelines()">
                                        <span class="fa-solid fa-trash"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="invalid-feedback" id="guidelines-error"></div>
                        @error('guidelines')
                            <div class="text-danger fs-10 mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-xxl-3">
                <!-- Ações -->
                <div class="card position-sticky top-0">
                    <div class="card-header">
                        <h6 class="mb-0">Ações</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary" type="submit" id="submitBtn">
                                <span class="loading-spinner me-2" id="submitSpinner"></span>
                                <span class="fa-solid fa-save me-2"></span>
                                <span id="submitText">Salvar Cliente</span>
                            </button>
                            
                            <a href="{{ route('clientes.index') }}" class="btn btn-phoenix-secondary">
                                <span class="fa-solid fa-times me-2"></span>Cancelar
                            </a>
                        </div>

                        <hr class="my-3">

                        <div class="text-center">
                            <h6 class="fs-9 text-body-tertiary text-uppercase mb-2">Preview das Cores</h6>
                            <div class="d-flex justify-content-center gap-2" id="colorPreview">
                                <div class="rounded-circle" style="width: 24px; height: 24px; background-color: #3B82F6;"></div>
                                <div class="rounded-circle" style="width: 24px; height: 24px; background-color: #10B981;"></div>
                                <div class="rounded-circle" style="width: 24px; height: 24px; background-color: #F59E0B;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendors/choices/choices.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Elementos do formulário
    const form = document.getElementById('clienteForm');
    const submitBtn = document.getElementById('submitBtn');
    const submitSpinner = document.getElementById('submitSpinner');
    const submitText = document.getElementById('submitText');
    
    // Elementos de upload
    const logoInput = document.getElementById('logo');
    const logoUploadArea = document.getElementById('logoUploadArea');
    const logoDropZone = document.getElementById('logoDropZone');
    const logoPreview = document.getElementById('logoPreview');
    
    const guidelinesInput = document.getElementById('guidelines');
    const guidelinesUploadArea = document.getElementById('guidelinesUploadArea');
    const guidelinesDropZone = document.getElementById('guidelinesDropZone');
    const guidelinesPreview = document.getElementById('guidelinesPreview');
    
    // Setup de eventos
    setupFormValidation();
    setupFileUploads();
    
    // Configurar validação do formulário
    function setupFormValidation() {
        form.addEventListener('submit', handleFormSubmit);
        
        // Validação em tempo real
        document.getElementById('nome').addEventListener('blur', validateNome);
        document.getElementById('nome').addEventListener('input', clearFieldError);
        
        // Validação das cores
        document.querySelectorAll('input[name="cores_marca[]"]').forEach(input => {
            input.addEventListener('blur', validateCores);
            input.addEventListener('input', clearFieldError);
        });
    }
    
    // Configurar uploads de arquivo
    function setupFileUploads() {
        // Logo upload
        logoUploadArea.addEventListener('click', () => logoInput.click());
        logoInput.addEventListener('change', handleLogoUpload);
        
        // Guidelines upload
        guidelinesUploadArea.addEventListener('click', () => guidelinesInput.click());
        guidelinesInput.addEventListener('change', handleGuidelinesUpload);
        
        // Drag & Drop para logo
        setupDragAndDrop(logoUploadArea, logoInput, 'image/*');
        
        // Drag & Drop para guidelines
        setupDragAndDrop(guidelinesUploadArea, guidelinesInput, '.pdf');
    }
    
    // Configurar drag and drop
    function setupDragAndDrop(area, input, accept) {
        area.addEventListener('dragover', function(e) {
            e.preventDefault();
            area.classList.add('dragover');
        });
        
        area.addEventListener('dragleave', function(e) {
            e.preventDefault();
            area.classList.remove('dragover');
        });
        
        area.addEventListener('drop', function(e) {
            e.preventDefault();
            area.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                input.files = files;
                input.dispatchEvent(new Event('change'));
            }
        });
    }
    
    // Handle logo upload
    function handleLogoUpload(e) {
        const file = e.target.files[0];
        if (!file) return;
        
        // Validar arquivo
        if (!file.type.startsWith('image/')) {
            showFieldError('logo', 'Por favor, selecione um arquivo de imagem válido.');
            return;
        }
        
        if (file.size > 2 * 1024 * 1024) { // 2MB
            showFieldError('logo', 'O arquivo deve ter no máximo 2MB.');
            return;
        }
        
        // Mostrar preview
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('logoPreviewImage').src = e.target.result;
            document.getElementById('logoFileName').textContent = file.name;
            logoDropZone.style.display = 'none';
            logoPreview.style.display = 'block';
            clearFieldError('logo');
        };
        reader.readAsDataURL(file);
    }
    
    // Handle guidelines upload
    function handleGuidelinesUpload(e) {
        const file = e.target.files[0];
        if (!file) return;
        
        // Validar arquivo
        if (file.type !== 'application/pdf') {
            showFieldError('guidelines', 'Por favor, selecione um arquivo PDF válido.');
            return;
        }
        
        if (file.size > 10 * 1024 * 1024) { // 10MB
            showFieldError('guidelines', 'O arquivo deve ter no máximo 10MB.');
            return;
        }
        
        // Mostrar preview
        document.getElementById('guidelinesFileName').textContent = file.name;
        document.getElementById('guidelinesFileSize').textContent = formatFileSize(file.size);
        guidelinesDropZone.style.display = 'none';
        guidelinesPreview.style.display = 'block';
        clearFieldError('guidelines');
    }
    
    // Validar nome
    function validateNome() {
        const nome = document.getElementById('nome').value.trim();
        
        if (!nome) {
            showFieldError('nome', 'O nome do cliente é obrigatório.');
            return false;
        }
        
        if (nome.length < 2) {
            showFieldError('nome', 'O nome deve ter pelo menos 2 caracteres.');
            return false;
        }
        
        if (nome.length > 255) {
            showFieldError('nome', 'O nome não pode ter mais de 255 caracteres.');
            return false;
        }
        
        clearFieldError('nome');
        return true;
    }
    
    // Validar cores
    function validateCores() {
        const cores = Array.from(document.querySelectorAll('input[name="cores_marca[]"]'))
            .map(input => input.value.trim())
            .filter(cor => cor);
        
        let valid = true;
        
        cores.forEach((cor, index) => {
            if (cor && !/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(cor)) {
                showFieldError(`cor${index + 1}`, 'Cor deve estar no formato hexadecimal (ex: #FF5733).');
                valid = false;
            }
        });
        
        if (valid) {
            clearFieldError('cores');
        }
        
        return valid;
    }
    
    // Handle form submit
    function handleFormSubmit(e) {
        e.preventDefault();
        
        // Validar formulário
        let isValid = true;
        
        isValid = validateNome() && isValid;
        isValid = validateCores() && isValid;
        
        if (!isValid) {
            return;
        }
        
        // Mostrar loading
        setLoading(true);
        
        // Enviar formulário
        const formData = new FormData(form);
        
        fetch(form.action, {
            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) {
                window.location.href = data.redirect || '{{ route("clientes.index") }}';
            } else {
                throw new Error(data.message || 'Erro ao salvar cliente');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showAlert('Erro ao salvar cliente: ' + error.message, 'danger');
        })
        .finally(() => {
            setLoading(false);
        });
    }
    
    // Utility functions
    function showFieldError(field, message) {
        const input = document.getElementById(field);
        const errorDiv = document.getElementById(field + '-error');
        
        if (input) {
            input.classList.add('is-invalid');
        }
        
        if (errorDiv) {
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
        }
    }
    
    function clearFieldError(fieldOrEvent) {
        const field = typeof fieldOrEvent === 'string' ? fieldOrEvent : fieldOrEvent.target.id;
        const input = document.getElementById(field);
        const errorDiv = document.getElementById(field + '-error');
        
        if (input) {
            input.classList.remove('is-invalid');
        }
        
        if (errorDiv) {
            errorDiv.style.display = 'none';
        }
    }
    
    function setLoading(loading) {
        if (loading) {
            submitBtn.disabled = true;
            submitSpinner.style.display = 'inline-block';
            submitText.textContent = 'Salvando...';
        } else {
            submitBtn.disabled = false;
            submitSpinner.style.display = 'none';
            submitText.textContent = 'Salvar Cliente';
        }
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    function showAlert(message, type = 'info') {
        // Implementar sistema de alertas conforme Phoenix
        console.log(`[${type.toUpperCase()}] ${message}`);
    }
    
    // Funções globais para color picker
    window.openColorPicker = function(index) {
        document.getElementById(`colorPicker${index}`).click();
    };
    
    window.updateColor = function(index, color) {
        document.getElementById(`cor${index}`).value = color;
        document.querySelector(`#colorPicker${index}`).parentElement.style.backgroundColor = color;
        updateColorPreview();
    };
    
    window.updateColorFromInput = function(index, color) {
        if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
            document.getElementById(`colorPicker${index}`).value = color;
            document.querySelector(`#colorPicker${index}`).parentElement.style.backgroundColor = color;
            updateColorPreview();
        }
    };
    
    function updateColorPreview() {
        const previewDiv = document.getElementById('colorPreview');
        const cores = [
            document.getElementById('cor1').value,
            document.getElementById('cor2').value,
            document.getElementById('cor3').value
        ];
        
        previewDiv.innerHTML = cores
            .filter(cor => cor && /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(cor))
            .map(cor => `<div class="rounded-circle" style="width: 24px; height: 24px; background-color: ${cor};"></div>`)
            .join('');
    }
    
    // Funções globais para remover arquivos
    window.removeLogo = function() {
        logoInput.value = '';
        logoDropZone.style.display = 'block';
        logoPreview.style.display = 'none';
        clearFieldError('logo');
    };
    
    window.removeGuidelines = function() {
        guidelinesInput.value = '';
        guidelinesDropZone.style.display = 'block';
        guidelinesPreview.style.display = 'none';
        clearFieldError('guidelines');
    };
});
</script>
@endpush