@extends('admin.layouts.app')

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

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Novo Produto</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.produtos.index') }}">Produtos</a></li>
                        <li class="breadcrumb-item active">Novo</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <form method="POST" action="{{ route('admin.produtos.store') }}" enctype="multipart/form-data" id="produtoForm">
                @csrf
                
                <div class="row">
                    <div class="col-md-8">
                        <!-- Informações Básicas -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Informações Básicas</h3>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="nome">Nome do Produto *</label>
                                    <input type="text" name="nome" class="form-control @error('nome') is-invalid @enderror" 
                                           value="{{ old('nome') }}" placeholder="Ex: Big Burger" required>
                                    @error('nome')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="categoria_id">Categoria *</label>
                                    <select name="categoria_id" class="form-control @error('categoria_id') is-invalid @enderror" required>
                                        <option value="">Selecione uma categoria</option>
                                        @foreach($categorias as $categoria)
                                            <option value="{{ $categoria->id }}" 
                                                {{ old('categoria_id') == $categoria->id ? 'selected' : '' }}>
                                                {{ $categoria->nome }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('categoria_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="descricao_curta">Descrição Curta</label>
                                    <input type="text" name="descricao_curta" class="form-control @error('descricao_curta') is-invalid @enderror" 
                                           value="{{ old('descricao_curta') }}" placeholder="Breve descrição do produto (máximo 255 caracteres)">
                                    @error('descricao_curta')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="descricao">Descrição Completa</label>
                                    <textarea name="descricao" class="form-control @error('descricao') is-invalid @enderror" 
                                              rows="4" placeholder="Descrição detalhada do produto">{{ old('descricao') }}</textarea>
                                    @error('descricao')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Preços e Estoque -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Preços e Estoque</h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="preco">Preço de Venda *</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">R$</span>
                                                </div>
                                                <input type="number" name="preco" class="form-control @error('preco') is-invalid @enderror" 
                                                       step="0.01" min="0.01" value="{{ old('preco') }}" required>
                                            </div>
                                            @error('preco')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="preco_promocional">Preço Promocional</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">R$</span>
                                                </div>
                                                <input type="number" name="preco_promocional" class="form-control @error('preco_promocional') is-invalid @enderror" 
                                                       step="0.01" min="0.01" value="{{ old('preco_promocional') }}">
                                            </div>
                                            <small class="form-text text-muted">Deixe em branco se não houver promoção</small>
                                            @error('preco_promocional')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="estoque_atual">Estoque Atual *</label>
                                            <input type="number" name="estoque_atual" class="form-control @error('estoque_atual') is-invalid @enderror" 
                                                   min="0" value="{{ old('estoque_atual', 0) }}" required>
                                            @error('estoque_atual')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="estoque_minimo">Estoque Mínimo *</label>
                                            <input type="number" name="estoque_minimo" class="form-control @error('estoque_minimo') is-invalid @enderror" 
                                                   min="0" value="{{ old('estoque_minimo', 5) }}" required>
                                            @error('estoque_minimo')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Informações Nutricionais -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Informações Nutricionais</h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="calorias">Calorias</label>
                                            <input type="number" name="calorias" class="form-control @error('calorias') is-invalid @enderror" 
                                                   step="0.1" min="0" value="{{ old('calorias') }}">
                                            @error('calorias')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="proteinas">Proteínas (g)</label>
                                            <input type="number" name="proteinas" class="form-control @error('proteinas') is-invalid @enderror" 
                                                   step="0.1" min="0" value="{{ old('proteinas') }}">
                                            @error('proteinas')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="carboidratos">Carboidratos (g)</label>
                                            <input type="number" name="carboidratos" class="form-control @error('carboidratos') is-invalid @enderror" 
                                                   step="0.1" min="0" value="{{ old('carboidratos') }}">
                                            @error('carboidratos')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="gorduras">Gorduras (g)</label>
                                            <input type="number" name="gorduras" class="form-control @error('gorduras') is-invalid @enderror" 
                                                   step="0.1" min="0" value="{{ old('gorduras') }}">
                                            @error('gorduras')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="tempo_preparo_minutos">Tempo de Preparo (minutos)</label>
                                    <input type="number" name="tempo_preparo_minutos" class="form-control @error('tempo_preparo_minutos') is-invalid @enderror" 
                                           min="0" value="{{ old('tempo_preparo_minutos', 15) }}">
                                    @error('tempo_preparo_minutos')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="alergenos">Alergênicos</label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="alergenos[]" value="lactose" 
                                                       id="alergeno-lactose" {{ in_array('lactose', old('alergenos', [])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="alergeno-lactose">
                                                    <i class="fas fa-cheese"></i> Lactose
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="alergenos[]" value="gluten" 
                                                       id="alergeno-gluten" {{ in_array('gluten', old('alergenos', [])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="alergeno-gluten">
                                                    <i class="fas fa-wheat"></i> Glúten
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="alergenos[]" value="amendoim" 
                                                       id="alergeno-amendoim" {{ in_array('amendoim', old('alergenos', [])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="alergeno-amendoim">
                                                    <i class="fas fa-seedling"></i> Amendoim
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="alergenos[]" value="soja" 
                                                       id="alergeno-soja" {{ in_array('soja', old('alergenos', [])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="alergeno-soja">
                                                    <i class="fas fa-leaf"></i> Soja
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="alergenos[]" value="ovo" 
                                                       id="alergeno-ovo" {{ in_array('ovo', old('alergenos', [])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="alergeno-ovo">
                                                    <i class="fas fa-egg"></i> Ovo
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="alergenos[]" value="peixe" 
                                                       id="alergeno-peixe" {{ in_array('peixe', old('alergenos', [])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="alergeno-peixe">
                                                    <i class="fas fa-fish"></i> Peixe
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <!-- Imagem -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Imagem do Produto</h3>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Upload de Imagem</label>
                                    <div class="upload-area" id="uploadArea">
                                        <div class="upload-content">
                                            <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                            <p><strong>Arraste a imagem aqui</strong></p>
                                            <p class="text-muted">ou</p>
                                            <button type="button" class="btn btn-primary" id="btnBrowse">
                                                <i class="fas fa-folder-open"></i> Selecionar Arquivo
                                            </button>
                                            <input type="file" name="imagem" id="imagem" class="d-none" accept="image/*">
                                            <div class="mt-3">
                                                <small class="text-muted">
                                                    Formatos aceitos: JPG, PNG, GIF, WEBP<br>
                                                    Tamanho máximo: 5MB
                                                </small>
                                            </div>
                                        </div>
                                        <div class="upload-preview d-none" id="uploadPreview">
                                            <img id="previewImage" class="img-fluid" alt="Preview">
                                            <div class="upload-actions mt-2">
                                                <button type="button" class="btn btn-sm btn-warning" id="btnChange">
                                                    <i class="fas fa-edit"></i> Alterar
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger" id="btnRemove">
                                                    <i class="fas fa-trash"></i> Remover
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    @error('imagem')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Configurações -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Configurações</h3>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="is_vegano" value="1" 
                                               id="is_vegano" {{ old('is_vegano') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_vegano">
                                            <i class="fas fa-leaf text-success"></i> Produto Vegano
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="sem_gluten" value="1" 
                                               id="sem_gluten" {{ old('sem_gluten') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="sem_gluten">
                                            <i class="fas fa-wheat text-warning"></i> Sem Glúten
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="sem_lactose" value="1" 
                                               id="sem_lactose" {{ old('sem_lactose') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="sem_lactose">
                                            <i class="fas fa-cheese text-info"></i> Sem Lactose
                                        </label>
                                    </div>
                                </div>

                                <hr>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="destaque" value="1" 
                                               id="destaque" {{ old('destaque') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="destaque">
                                            <i class="fas fa-star text-warning"></i> Produto em Destaque
                                        </label>
                                        <small class="form-text text-muted">
                                            Produtos em destaque aparecem primeiro na listagem
                                        </small>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="promocao" value="1" 
                                               id="promocao" {{ old('promocao') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="promocao">
                                            <i class="fas fa-tag text-warning"></i> Em Promoção
                                        </label>
                                        <small class="form-text text-muted">
                                            Defina o preço promocional no campo acima
                                        </small>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="disponivel" value="1" 
                                               id="disponivel" {{ old('disponivel', '1') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="disponivel">
                                            <i class="fas fa-check-circle text-success"></i> Disponível para Venda
                                        </label>
                                        <small class="form-text text-muted">
                                            Produtos indisponíveis não aparecem na listagem para clientes
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Ações -->
                        <div class="card">
                            <div class="card-body">
                                <button type="submit" class="btn btn-success btn-block">
                                    <i class="fas fa-save"></i> Salvar Produto
                                </button>
                                <a href="{{ route('admin.produtos.index') }}" class="btn btn-secondary btn-block">
                                    <i class="fas fa-times"></i> Cancelar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>
@endsection

@push('styles')
<style>
.upload-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.upload-area.dragover {
    border-color: #28a745;
    background-color: #e8f5e8;
}

.upload-preview {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.upload-actions button {
    margin: 0 5px;
}

.form-check-label i {
    width: 20px;
    text-align: center;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Drag and Drop Upload
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('imagem');
    const btnBrowse = document.getElementById('btnBrowse');
    const btnRemove = document.getElementById('btnRemove');
    const btnChange = document.getElementById('btnChange');
    const uploadPreview = document.getElementById('uploadPreview');
    const uploadContent = document.querySelector('.upload-content');
    const previewImage = document.getElementById('previewImage');

    // Browse button click
    btnBrowse.addEventListener('click', () => {
        fileInput.click();
    });

    // File input change
    fileInput.addEventListener('change', handleFile);

    // Drag and drop events
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });

    uploadArea.addEventListener('dragleave', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFile({ target: { files } });
        }
    });

    // Remove button
    btnRemove.addEventListener('click', () => {
        fileInput.value = '';
        uploadPreview.classList.add('d-none');
        uploadContent.classList.remove('d-none');
    });

    // Change button
    btnChange.addEventListener('click', () => {
        fileInput.click();
    });

    // Upload area click
    uploadArea.addEventListener('click', (e) => {
        if (e.target === uploadArea || e.target.closest('.upload-content')) {
            fileInput.click();
        }
    });

    function handleFile(event) {
        const file = event.target.files[0];
        if (!file) return;

        // Validate file type
        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
        if (!allowedTypes.includes(file.type)) {
            alert('Tipo de arquivo não permitido. Use apenas JPG, PNG, GIF ou WEBP.');
            return;
        }

        // Validate file size (5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('Arquivo muito grande. Tamanho máximo: 5MB.');
            return;
        }

        // Show preview
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImage.src = e.target.result;
            uploadContent.classList.add('d-none');
            uploadPreview.classList.remove('d-none');
        };
        reader.readAsDataURL(file);
    }

    // Form validation
    $('#produtoForm').on('submit', function(e) {
        const nome = $('input[name="nome"]').val().trim();
        const categoria = $('select[name="categoria_id"]').val();
        const preco = $('input[name="preco"]').val();
        const precoPromocional = $('input[name="preco_promocional"]').val();

        if (!nome) {
            e.preventDefault();
            alert('Por favor, preencha o nome do produto.');
            $('input[name="nome"]').focus();
            return false;
        }

        if (!categoria) {
            e.preventDefault();
            alert('Por favor, selecione uma categoria.');
            $('select[name="categoria_id"]').focus();
            return false;
        }

        if (!preco || parseFloat(preco) <= 0) {
            e.preventDefault();
            alert('Por favor, informe um preço válido.');
            $('input[name="preco"]').focus();
            return false;
        }

        if (precoPromocional && parseFloat(precoPromocional) >= parseFloat(preco)) {
            e.preventDefault();
            alert('O preço promocional deve ser menor que o preço original.');
            $('input[name="preco_promocional"]').focus();
            return false;
        }
    });

    // Real-time validation for promotional price
    $('input[name="preco"]').on('input', function() {
        const precoOriginal = parseFloat($(this).val()) || 0;
        const precoPromocional = $('input[name="preco_promocional"]');
        
        if (precoPromocional.val()) {
            precoPromocional.attr('max', precoOriginal - 0.01);
            
            if (parseFloat(precoPromocional.val()) >= precoOriginal) {
                precoPromocional.addClass('is-invalid');
                precoPromocional.siblings('.invalid-feedback').remove();
                precoPromocional.after('<div class="invalid-feedback">Deve ser menor que o preço original.</div>');
            } else {
                precoPromocional.removeClass('is-invalid');
                precoPromocional.siblings('.invalid-feedback').remove();
            }
        }
    });

    // Character counter for description
    $('input[name="descricao_curta"]').on('input', function() {
        const maxLength = 255;
        const currentLength = $(this).val().length;
        
        if (currentLength > maxLength) {
            $(this).val($(this).val().substring(0, maxLength));
        }
    });
});
</script>
@endpush