@extends('adminlte.app')

@section('content')
<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

<div class="content-wrapper pb-3">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Despesas</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
            
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif
    @if ($message = Session::get('error'))
        <div class="alert alert-danger">
            <p>{{ $message }}</p>
        </div>
    @endif
    <form action="{{ route('despesas.store') }}" method="POST" enctype="multipart/form-data">

        @csrf
        <div class="card mx-3 mt-3">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-4">
                        Cadastro Despesas
                    </div>
                    <div class="col-md-8 text-right">
                        <a href="javascript:history.back()"><button type="button" id="voltar" class="btn btn-primary d-print-none">Voltar</button></a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <label for="data">Data</label>
                        <input type="date" name="data" id="data" class="form-control" required value="{{ old('data', isset($despesa) ? $despesa->data : '') }}">
                    </div>

                    {{-- CENTRO DE CUSTO --}}
                    <div class="col-md-3">
                        <label for="centro_custo_id">Centro de Custo</label>
                        <select name="centro_custo_id" id="centro_custo_id" class="form-control" required>
                            <option value="">Selecione</option>
                            @foreach($centrosCusto as $centro_de_custo)
                                <option
                                    @if(old('centro_custo_id') == $centro_de_custo->id) 
                                        selected 
                                    @elseif(isset($despesa) && $despesa->centro_custo_id == $centro_de_custo->id) 
                                        selected
                                    @endif
                                    value="{{ $centro_de_custo->id }}">
                                    {{ $centro_de_custo->nome_centro_custo }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- POSTO --}}
                    <div class="col-md-3 d-none" id="campo_posto">
                        <label for="posto_id">Posto</label>
                        <select name="posto_id" id="posto_id" class="form-control">
                            <option value="">Selecione</option>
                            @foreach($postos as $posto)
                                <option 
                                    @if(old('posto_id') == $posto->id) 
                                        selected
                                    @elseif(isset($despesa) && $despesa->posto_id == $posto->id) 
                                        selected
                                    @endif
                                    value="{{ $posto->id }}">
                                    {{ $posto->nome_posto }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- CLIENTE --}}
                    <div class="col-md-3 d-none" id="campo_cliente">
                        <label for="cliente_id">Cliente</label>
                        <select name="cliente_id" id="cliente_id" class="form-control"></select>
                    </div>

                    {{-- MATRÍCULA --}}
                    <div class="col-md-3 d-none" id="campo_matricula">
                        <label for="matricula">Matrícula</label>
                        <input type="text" name="matricula" id="matricula" class="form-control" value="{{ old('matricula', $despesa->matricula ?? '') }}">
                    </div>

                    {{-- SERÁ VALIDADO POR --}}
                    <div class="col-md-3">
                        <label for="aprovador_id">Será validado por</label>
                        <select name="aprovador_id" id="aprovador_id" class="form-control" required>
                            <option value="">Selecione</option>
                        </select>
                    </div>

                    {{-- DESCRIÇÃO --}}
                    <div class="col-md-6 mt-3">
                        <label for="descricao">Descrição da Despesa</label>
                        <textarea name="descricao" id="descricao" class="form-control" required>{{ old('descricao', $despesa->descricao ?? '') }}</textarea>
                    </div>

                    {{-- VALOR --}}
                    <div class="col-md-3 mt-3">
                        <label for="valor">Valor da Despesa</label>
                        <input type="number" step="0.01" name="valor" id="valor" class="form-control" required  value="{{ old('valor', $despesa->valor ?? '') }}">
                    </div>

                    {{-- COMPROVATIVO --}}
                    <div class="col-md-3 mt-3">
                        <label for="comprovativo">Comprovativo</label>
                        <input type="file" name="comprovativo" id="comprovativo" class="form-control" required>
                        @if(isset($despesa->comprovativo))
                            <a href="{{ route('despesas.ver_anexos', $despesa) }}" target="_blank">Ver Comprovativo Atual</a>
                        @endif
                    </div>

                </div>

            </div>

        </div>
        <div class="col-sm-12 pt-3 text-center">
            <button id="btnSalvar" class="btn btn-primary rounded mx-auto">
                Salvar
            </button>
        </div>
    </form>
</div>
<script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>

<script>
    const despesa = @json($despesa ?? null);
</script>

<script>
$(document).ready(function () {

    // ----------------------------
    //   SELECT2 INICIALIZAÇÃO
    // ----------------------------
    $('#cliente_id').select2({
        theme: 'bootstrap4',
        placeholder: 'Selecione um cliente',
        minimumInputLength: 0,
        allowClear: true,
        width: '100%',
        ajax: {
            url: '{{ route("clientes.buscar") }}',
            dataType: 'json',
            delay: 300,
            data: function (params) {
                return { q: params.term || '', page: params.page || 1 };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data.results,
                    pagination: { more: data.pagination.more }
                };
            },
            cache: true
        }
    });

    $('#posto_id').select2({
        theme: 'bootstrap4',
        placeholder: 'Selecione um posto',
        allowClear: true,
        width: '100%'
    });


    // ======================================================
    //   QUANDO CENTRO DE CUSTO FOR SELECIONADO (CREATE/EDIT)
    // ======================================================
    function carregarCampos(centroCustoId, callback = null) {

        // limpa campos
        $('#campo_posto, #campo_cliente, #campo_matricula').addClass('d-none');
        $('#posto_id, #cliente_id, #matricula')
            .prop('required', false)
            .val(null)
            .trigger('change');

        $('#aprovador_id').empty().append('<option value="">Carregando...</option>');

        if (!centroCustoId) return;

        $.ajax({
            url: '{{ route("centro_custo.dados", "") }}/' + centroCustoId,
            type: 'GET',
            success: function (response) {

                // ---- MOSTRA OS CAMPOS POR TIPO ----
                if (response.tipo === 'Postos') {
                    $('#campo_posto').removeClass('d-none');
                    $('#posto_id').prop('required', true);
                }

                if (response.tipo === 'Distribuição') {
                    $('#campo_cliente').removeClass('d-none');
                    $('#cliente_id').prop('required', true);
                }

                if (response.tipo === 'Logistica') {
                    $('#campo_matricula').removeClass('d-none');
                    $('#matricula').prop('required', true);
                }

                // ---- CARREGA APROVADORES ----
                $('#aprovador_id').empty().append('<option value="">Selecione</option>');
                
                response.aprovadores.forEach(function (user) {
                    $('#aprovador_id').append(`
                        <option value="${user.id}">${user.nome}</option>
                    `);
                });

                // Se callback existir, executa (utilizado no EDIT)
                if (callback) callback(response);
            }
        });
    }


    // EVENTO NORMAL AO MUDAR O CENTRO DE CUSTO
    $('#centro_custo_id').on('change', function () {
        carregarCampos($(this).val());
    });


    // ======================================================
    //               MODO EDIÇÃO AUTOMÁTICO
    // ======================================================
    if (despesa) {

        const centroId = despesa.centro_custo_id;

        // ✓ Chama AJAX automaticamente com o centro salvo
        carregarCampos(centroId, function (response) {

            // ---- SELECIONAR VALIDADOR ----
            console.log(despesa);
            if (despesa.aprovador_id) {
                $('#aprovador_id').val(despesa.aprovador_id);

            }

            // ---- SELECIONAR POSTO ----
            if (response.tipo === 'Postos' && despesa.posto_id) {
                $('#posto_id').val(despesa.posto_id).trigger('change');
            }

            // ---- SELECIONAR MATRÍCULA ----
            if (response.tipo === 'Logistica' && despesa.matricula) {
                $('#matricula').val(despesa.matricula);
            }

            // ---- SELECIONAR CLIENTE ----
            if (response.tipo === 'Distribuição' && despesa.cliente_id) {
                
                // cliente precisa ser carregado manualmente no Select2
                let option = new Option(despesa.cliente_nome, despesa.cliente_id, true, true);
                $('#cliente_id').append(option).trigger('change');
            }
        });
    }

});
</script>





@endsection