@extends('layouts.layoutMaster')

@section('title', 'Editar Produto - ' . ($produto->nome ?? 'Produto'))

@section('content')
<div class="container-xxl flex-grow-1 pt-1">
    <div class="row">
        <div class="col-md-12">
            <!-- Card das Tabs -->
            <div class="card mb-4">
                <div class="card-body py-3">
                    <ul class="nav nav-pills" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="javascript:void(0);" data-bs-toggle="pill" data-bs-target="#tab-dados-gerais">
                                <i class="ti ti-file-description me-1"></i> Dados Gerais
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-bs-toggle="pill" data-bs-target="#tab-patrimonios">
                                <i class="ti ti-building-warehouse me-1"></i> Patrimônios
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-bs-toggle="pill" data-bs-target="#tab-estoque">
                                <i class="ti ti-packages me-1"></i> Estoque
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-bs-toggle="pill" data-bs-target="#tab-anexos">
                                <i class="ti ti-paperclip me-1"></i> Anexos
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Card do Conteúdo -->
            <div class="card">
                <div class="card-body">
                    <div class="tab-content">
                        <!-- Tab: Dados Gerais -->
                        <div class="tab-pane fade show active" id="tab-dados-gerais" role="tabpanel">
                                @if($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach($errors->all() as $err)
                                                <li>{{ $err }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <!-- Hidden Fields para API -->
                                <input type="hidden" id="produtoId" value="{{ $produto->id_produto }}">
                                <input type="hidden" id="empresaId" value="{{ session('id_empresa') }}">
                                <input type="hidden" id="fotoFilename" value="{{ $produto->foto_filename ?? '' }}">

                                <form id="produtoEditForm" action="{{ route('produtos.update', $produto->id_produto) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    
                                    <div class="row g-3">
                                        <!-- Card de Foto do Produto -->
                                        <div class="col-12">
                                            <div class="card" style="background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 1px solid #667eea30;">
                                                <div class="card-body">
                                                    <h6 class="card-title mb-3">
                                                        <i class="ti ti-camera me-2"></i>
                                                        Foto do Produto
                                                    </h6>
                                                    <div class="row align-items-center">
                                                        <div class="col-md-2 text-center">
                                                            <div id="fotoPreview" class="mb-3 mb-md-0">
                                                                @if(!empty($produto->foto_url))
                                                                    <img src="{{ $produto->foto_url }}" alt="{{ $produto->nome }}" class="rounded" style="width: 80px; height: 80px; object-fit: cover;">
                                                                @else
                                                                    <div class="avatar avatar-xl">
                                                                        <span class="avatar-initial rounded bg-label-primary fs-1">
                                                                            <i class="ti ti-package"></i>
                                                                        </span>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="col-md-10">
                                                            <div class="mb-0">
                                                                <label for="fotoUpload" class="form-label small">Selecionar Foto</label>
                                                                <input type="file" class="form-control" id="fotoUpload" accept="image/jpeg,image/jpg,image/png,image/webp">
                                                                <small class="form-text text-muted">
                                                                    Formatos: JPG, PNG, WEBP. Tamanho máximo: 10MB
                                                                </small>
                                                            </div>
                                                            <div class="mt-2">
                                                                <button type="button" class="btn btn-sm btn-primary" id="btnUploadFoto" disabled>
                                                                    <i class="ti ti-upload me-1"></i> Enviar Foto
                                                                </button>
                                                                @if(!empty($produto->foto_url))
                                                                <button type="button" class="btn btn-sm btn-outline-danger ms-2" id="btnDeletarFoto">
                                                                    <i class="ti ti-trash me-1"></i> Remover
                                                                </button>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label small">Nome <span class="text-danger">*</span></label>
                                            <input type="text" name="nome" class="form-control" value="{{ old('nome', $produto->nome) }}" required>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Código</label>
                                            <input type="text" name="codigo" class="form-control" value="{{ old('codigo', $produto->codigo) }}">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Número de Série</label>
                                            <input type="text" name="numero_serie" class="form-control" value="{{ old('numero_serie', $produto->numero_serie) }}">
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label small">Descrição</label>
                                            <textarea name="descricao" class="form-control" rows="3">{{ old('descricao', $produto->descricao) }}</textarea>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label small">Detalhes</label>
                                            <textarea name="detalhes" class="form-control" rows="3">{{ old('detalhes', $produto->detalhes) }}</textarea>
                                        </div>

                                        <!-- Separador Preços -->
                                        <div class="col-12">
                                            <hr class="my-2">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Preço de Custo</label>
                                            <div class="input-group">
                                                <span class="input-group-text">R$</span>
                                                <input type="text" name="preco_custo" class="form-control mask-money" value="{{ old('preco_custo', number_format($produto->preco_custo, 2, ',', '.')) }}">
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Preço de Venda</label>
                                            <div class="input-group">
                                                <span class="input-group-text">R$</span>
                                                <input type="text" name="preco_venda" class="form-control mask-money" value="{{ old('preco_venda', number_format($produto->preco_venda, 2, ',', '.')) }}">
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Preço de Locação</label>
                                            <div class="input-group">
                                                <span class="input-group-text">R$</span>
                                                <input type="text" name="preco_locacao" class="form-control mask-money" value="{{ old('preco_locacao', number_format($produto->preco_locacao, 2, ',', '.')) }}">
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Status</label>
                                            <select name="status" class="form-select">
                                                <option value="ativo" {{ old('status', $produto->status) === 'ativo' ? 'selected' : '' }}>Ativo</option>
                                                <option value="inativo" {{ old('status', $produto->status) === 'inativo' ? 'selected' : '' }}>Inativo</option>
                                            </select>
                                        </div>

                                        <!-- Separador Dimensões -->
                                        <div class="col-12">
                                            <hr class="my-2">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Altura (cm)</label>
                                            <input type="text" name="altura" class="form-control mask-decimal" value="{{ old('altura', number_format($produto->altura, 2, ',', '.')) }}">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Largura (cm)</label>
                                            <input type="text" name="largura" class="form-control mask-decimal" value="{{ old('largura', number_format($produto->largura, 2, ',', '.')) }}">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Profundidade (cm)</label>
                                            <input type="text" name="profundidade" class="form-control mask-decimal" value="{{ old('profundidade', number_format($produto->profundidade, 2, ',', '.')) }}">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label small">Peso (kg)</label>
                                            <input type="text" name="peso" class="form-control mask-decimal" value="{{ old('peso', number_format($produto->peso, 2, ',', '.')) }}">
                                        </div>

                                        <!-- Botões -->
                                        <div class="col-12 mt-4 d-flex justify-content-between">
                                            <div class="d-flex gap-2">
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="ti ti-check me-1"></i> Salvar
                                                </button>
                                                <a href="{{ route('produtos.index') }}" class="btn btn-secondary">Cancelar</a>
                                            </div>
                                            <div>
                                                <button type="button" class="btn btn-danger produto-action" data-action="delete" data-id="{{ $produto->id_produto }}" data-base-url="{{ url('produtos') }}">
                                                    <i class="ti ti-trash me-1"></i> Deletar
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                        </div>

                        <!-- Tab: Patrimônios -->
                        <div class="tab-pane fade" id="tab-patrimonios" role="tabpanel">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0">Patrimônios Vinculados</h6>
                                <button type="button" class="btn btn-primary btn-sm" id="btnNovoPatrimonio">
                                    <i class="ti ti-plus me-1"></i> Novo Patrimônio
                                </button>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Código</th>
                                            <th>Número de Série</th>
                                            <th>Localização</th>
                                            <th>Estado</th>
                                            <th>Status</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="6" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="ti ti-building-warehouse ti-lg d-block mb-2"></i>
                                                    <p class="mb-0">Nenhum patrimônio cadastrado</p>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Tab: Estoque -->
                        <div class="tab-pane fade" id="tab-estoque" role="tabpanel">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0">Controle de Estoque</h6>
                                <button type="button" class="btn btn-primary btn-sm" id="btnNovaMovimentacao">
                                    <i class="ti ti-plus me-1"></i> Nova Movimentação
                                </button>
                            </div>
                            <!-- Cards de Resumo -->
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <div class="card bg-label-primary mb-0">
                                        <div class="card-body text-center py-3">
                                            <h4 class="mb-1">{{ $produto->estoque_total ?? 0 }}</h4>
                                            <small>Estoque Total</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-label-success mb-0">
                                        <div class="card-body text-center py-3">
                                            <h4 class="mb-1">{{ $produto->quantidade ?? 0 }}</h4>
                                            <small>Disponível</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-label-warning mb-0">
                                        <div class="card-body text-center py-3">
                                            <h4 class="mb-1">{{ ($produto->estoque_total ?? 0) - ($produto->quantidade ?? 0) }}</h4>
                                            <small>Em Uso</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h6 class="mb-3">Histórico de Movimentações</h6>
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Data</th>
                                            <th>Tipo</th>
                                            <th>Qtd</th>
                                            <th>Observação</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="4" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="ti ti-history ti-lg d-block mb-2"></i>
                                                    <p class="mb-0">Nenhuma movimentação</p>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Tab: Anexos -->
                        <div class="tab-pane fade" id="tab-anexos" role="tabpanel">
                            <h6 class="mb-3">Documentos e Arquivos</h6>
                            <div class="border border-dashed rounded p-4 text-center mb-4" style="border-color: #7367f0 !important;">
                                <i class="ti ti-cloud-upload ti-xl text-primary d-block mb-2"></i>
                                <h6>Arraste arquivos aqui ou clique para selecionar</h6>
                                <small class="text-muted d-block mb-3">PDF, DOC, XLS, JPG, PNG (máx. 10MB)</small>
                                <input type="file" class="form-control" id="inputAnexo" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png" style="max-width: 300px; margin: 0 auto;">
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover" id="tabelaAnexos">
                                    <thead>
                                        <tr>
                                            <th>Arquivo</th>
                                            <th>Tipo</th>
                                            <th>Tamanho</th>
                                            <th>Data</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="5" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="ti ti-files-off ti-lg d-block mb-2"></i>
                                                    <p class="mb-0">Nenhum arquivo anexado</p>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('vendor-script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
@endsection

@section('page-script')
<script src="{{ asset('assets/js/produtos-upload.js') }}"></script>
<script>
$(document).ready(function() {
    // Máscaras
    $('.mask-money').mask('#.##0,00', {reverse: true});
    $('.mask-decimal').mask('#.##0,00', {reverse: true});

    // Submit do formulário
    $('#produtoEditForm').on('submit', function(e) {
        const $form = $(this);
        const $submitBtn = $form.find('button[type="submit"]');
        
        const nome = $form.find('input[name="nome"]').val();
        
        if (!nome) {
            e.preventDefault();
            Swal.fire({
                icon: 'warning',
                title: 'Atenção!',
                text: 'O nome do produto é obrigatório.',
                confirmButtonText: 'OK'
            });
            return false;
        }
        
        $submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Salvando...');
        
        return true;
    });

    // Ação de deletar
    $(document).on('click', '.produto-action', function() {
        const action = $(this).data('action');
        const id = $(this).data('id');
        const baseUrl = $(this).data('base-url');

        if (action === 'delete') {
            Swal.fire({
                title: 'Confirmar exclusão?',
                text: 'Deseja realmente excluir este produto?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sim, excluir!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `${baseUrl}/${id}`,
                        method: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Sucesso!',
                                    text: response.message
                                }).then(() => {
                                    window.location.href = '{{ route('produtos.index') }}';
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Erro',
                                    text: response.message
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Erro',
                                text: 'Erro ao excluir produto.'
                            });
                        }
                    });
                }
            });
        }
    });
});
</script>

@if(session('success'))
<script>
$(document).ready(function() {
    Swal.fire({
        icon: 'success',
        title: 'Sucesso!',
        text: '{{ session('success') }}',
        confirmButtonText: 'OK',
        timer: 2000,
        timerProgressBar: true
    });
});
</script>
@endif

@if(session('error'))
<script>
$(document).ready(function() {
    Swal.fire({
        icon: 'error',
        title: 'Erro!',
        text: '{{ session('error') }}',
        confirmButtonText: 'OK'
    });
});
</script>
@endif
@endsection