@extends('layouts.admin-lti')

@section('title', 'Editar Despesa')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .card-section {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .card-header {
        background-color: #f8f9fa;
        padding: 15px 20px;
        border-bottom: 1px solid #e0e0e0;
    }

    .card-body {
        padding: 20px;
    }

    .required-label:after {
        content: " *";
        color: #dc3545;
    }

    .file-preview {
        display: flex;
        align-items: center;
        margin-top: 8px;
    }

    .file-icon {
        font-size: 24px;
        margin-right: 10px;
        color: #6c757d;
    }

    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .badge-pendente {
        background-color: #ffc107;
        color: #212529;
    }

    .badge-pago {
        background-color: #28a745;
        color: white;
    }

    .badge-rejeitado {
        background-color: #dc3545;
        color: white;
    }
</style>
@endpush

@section('content')
<div class="container">
 <div class="row mb-4">
            <div class="col-md-12">
                <h2><i class="fa fa-list"></i> Editar Despesas</h2>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item active"><a href="{{ Route('gestao-despesas.despesas.index') }}">Despesas</a></li>
                    <li class="breadcrumb-item active">Edit</li>
                </ol>
            </div>
        </div>

          @if ($errors->any())
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h5><i class="icon fa fa-ban"></i> Erros no formulário!</h5>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif



    <form action="{{ route('gestao-despesas.despesas.update', $despesa->id) }}" method="POST" enctype="multipart/form-data" id="despesaForm">
        @csrf
        @method('PUT')

        <!-- Seção: Informações Básicas -->
        <div class="card-section  card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fa fa-info-circle me-2"></i>Informações Básicas</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-8">
                        <label class="required-label">Descrição</label>
                        <input type="text" name="descricao" class="form-control"
                               value="{{ old('descricao', $despesa->descricao) }}" required
                               placeholder="Ex: Pagamento de fornecedor, Compra de material">
                    </div>

                    <div class="col-md-4">
                        <label class="required-label">Valor</label>
                        <div class="input-group">
                            <span class="input-group-text">MT</span>
                            <input type="number" name="valor" class="form-control"
                                   value="{{ old('valor', $despesa->valor) }}" step="0.01" min="0.01" required
                                   placeholder="0.00">
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="required-label">Categoria</label>
                        <select name="categoria_id" class="form-control select2" required>
                            @foreach($categorias as $categoria)
                                <option value="{{ $categoria->id }}"
                                    {{ $despesa->categoria_id == $categoria->id ? 'selected' : '' }}>
                                    {{ $categoria->nome }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="required-label">Fornecedor</label>
                        <select name="fornecedor_id" class="form-control select2" required>
                            @foreach($fornecedores as $fornecedor)
                                <option value="{{ $fornecedor->id }}"
                                    {{ $despesa->fornecedor_id == $fornecedor->id ? 'selected' : '' }}>
                                    {{ $fornecedor->nome }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="required-label">Forma de Pagamento</label>
                        <select name="forma_pagamento_id" class="form-control select2" required>
                            @foreach($formasPagamento as $forma)
                                <option value="{{ $forma->id }}"
    {{ old('forma_pagamento_id', $despesa->forma_pagamento_id) == $forma->id ? 'selected' : '' }}>
    {{ $forma->descricao }}
</option>

                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção: Datas e Recorrência -->
        <div class="card-section  card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fa fa-calendar-alt me-2"></i>Datas e Recorrência</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="required-label">Data de Vencimento</label>
                        <input type="date" name="data_vencimento" class="form-control"
                               value="{{ old('data_vencimento', optional($despesa->data_vencimento)->format('Y-m-d')) }}" required>
                    </div>

                    <div class="col-md-4">
                        <label>Data de Pagamento</label>
                        <input type="date" name="data_pagamento" class="form-control"
                               value="{{ old('data_pagamento', optional($despesa->data_pagamento)->format('Y-m-d')) }}"
                               placeholder="Data efetiva do pagamento">
                    </div>

                    <div class="col-md-4">
                        <label>Status</label>
                        <select name="status" class="form-control" required>
                            <option value="pendente" {{ $despesa->status == 'pendente' ? 'selected' : '' }}>Pendente</option>
                            <option value="pago" {{ $despesa->status == 'pago' ? 'selected' : '' }}>Pago</option>
                            <option value="rejeitado" {{ $despesa->status == 'rejeitado' ? 'selected' : '' }}>Rejeitado</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label>Recorrente</label>
                        <select name="recorrente" class="form-control" id="recorrenteSelect">
                            <option value="">Não Recorrente</option>
                            <option value="diario" {{ $despesa->recorrente == 'diario' ? 'selected' : '' }}>Diário</option>
                            <option value="semanal" {{ $despesa->recorrente == 'semanal' ? 'selected' : '' }}>Semanal</option>
                            <option value="mensal" {{ $despesa->recorrente == 'mensal' ? 'selected' : '' }}>Mensal</option>
                            <option value="anual" {{ $despesa->recorrente == 'anual' ? 'selected' : '' }}>Anual</option>
                        </select>
                    </div>

                    <div class="col-md-4" id="dataFimContainer" style="{{ $despesa->recorrente ? '' : 'display:none' }}">
                        <label>Data Fim Recorrência</label>
                       <input type="date" name="data_fim_recorrencia" class="form-control"
       value="{{ old('data_fim_recorrencia', optional($despesa->data_fim_recorrencia)->format('Y-m-d')) }}">
      </div>

                    <div class="col-md-4" id="parcelasContainer" style="{{ $despesa->recorrente ? '' : 'display:none' }}">
                        <label>Quantidade de Parcelas</label>
                        <input type="number" name="quantidade_parcelas" class="form-control"
                               value="{{ old('quantidade_parcelas', $despesa->quantidade_parcelas) }}" min="1">
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção: Documentação -->
        <div class="card-section card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fa fa-file-alt me-2"></i>Documentação</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>Anexo</label>
                        <input type="file" name="anexo" class="form-control" accept=".pdf,.jpg,.jpeg,.png">

                        @if($despesa->anexo)
                            <div class="file-preview mt-2">
                                <div class="file-icon">
                                    <i class="fa fa-file-pdf"></i>
                                </div>
                                <div>
                                    <a href="{{ asset('storage/' . $despesa->anexo) }}" target="_blank" class="d-block">
                                        Ver Anexo Atual
                                    </a>
                                    <small class="text-muted">
                                        {{ \Illuminate\Support\Str::afterLast($despesa->anexo, '/') }}
                                    </small>
                                </div>
                            </div>
                        @else
                            <div class="mt-2 text-muted">
                                Nenhum anexo cadastrado
                            </div>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label>Observações</label>
                        <textarea name="observacoes" class="form-control" rows="3"
                                  placeholder="Informações adicionais sobre a despesa">{{ old('observacoes', $despesa->observacoes) }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção: Aprovação -->
        <div class="card-section Card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fa fa-check-circle me-2"></i>Aprovação</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>Aprovador</label>
                        <select name="aprovador_id" class="form-control select2">
                            <option value="">-- Selecione um aprovador --</option>
                            @foreach($aprovadores as $aprovador)
                                <option value="{{ $aprovador->id }}"
                                    {{ $despesa->aprovador_id == $aprovador->id ? 'selected' : '' }}>
                                    {{ $aprovador->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label>Comentário de Aprovação</label>
                        <input type="text" name="comentario_aprovacao" class="form-control"
                               value="{{ old('comentario_aprovacao', $despesa->comentario_aprovacao) }}"
                               placeholder="Comentário do aprovador">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <label>Motivo de Rejeição</label>
                        <input type="text" name="motivo_rejeicao" class="form-control"
                               value="{{ old('motivo_rejeicao', $despesa->motivo_rejeicao) }}"
                               placeholder="Informe o motivo da rejeição, se aplicável">
                    </div>
                </div>
            </div>
        </div>

        <!-- Botões de ação -->
        <div class="d-flex justify-content-between mt-4">
            <div>
                <a href="{{ route('gestao-despesas.despesas.index') }}" class="btn btn-outline-secondary">
                    <i class="fa fa-arrow-left me-2"></i>Voltar
                </a>
            </div>

            <div>
                <button type="reset" class="btn btn-outline-danger me-2">
                    <i class="fa fa-redo me-2"></i>Limpar
                </button>

                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-save me-2"></i>Salvar Alterações
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')

<script>
$(document).ready(function() {
    // Inicializar Select2
    $('.select2').select2({
        placeholder: "Selecione uma opção",
        allowClear: true
    });

    // Controle de campos de recorrência
    $('#recorrenteSelect').change(function() {
        const isRecorrente = $(this).val() !== '';
        $('#dataFimContainer, #parcelasContainer').toggle(isRecorrente);
    });

    // Validação do formulário
    $('#despesaForm').on('submit', function(e) {
        let isValid = true;

        // Validar campos obrigatórios
        $('[required]').each(function() {
            if (!$(this).val()) {
                isValid = false;
                $(this).addClass('is-invalid');
            } else {
                $(this).removeClass('is-invalid');
            }
        });

        // Validar data de vencimento
        const vencimento = new Date($('[name="data_vencimento"]').val());
        const hoje = new Date();
        hoje.setHours(0, 0, 0, 0);

        if (vencimento < hoje) {
            alert('A data de vencimento não pode ser anterior a hoje!');
            isValid = false;
        }

        if (!isValid) {
            e.preventDefault();
            alert('Por favor, preencha todos os campos obrigatórios corretamente.');
        }
    });

    // Atualizar status visual
    $('[name="status"]').change(function() {
        $('.status-badge')
            .removeClass('badge-pendente badge-pago badge-rejeitado')
            .addClass('badge-' + $(this).val())
            .text($(this).find('option:selected').text());
    });
});
</script>
@endpush