<style>
    body {
        overflow-y: auto;
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
    }

    #label {
        padding: 5px;
        font-size: 2.7vh;
    }

    #btn {
        border-color: rgba(110, 52, 191, 0.13);
        background-color: rgba(110, 52, 191, 0.13) !important;
        font-weight: bolder;
        padding: 8px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 15px;
    }

    .table-responsive {
        height: auto !important;
    }

    .inputs {
        padding: .375rem .75rem;
        width: 60%;
        display: block;
        font-size: .875rem !important;
        border-radius: 1rem !important;
        border: 1px solid #ced4da;
    }



    .filter-container {
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
        margin-top: 15px;
    }

    .filter-container label {
        font-size: 1em;
        font-weight: bold;
        color: #495057;
    }

    .filter-container select,
    .filter-container input[type="date"] {
        width: 100%;
        padding: 8px;
        font-size: 1em;
        border-radius: 6px;
        border: 1px solid #ced4da;
        background-color: #ffffff;
        margin-bottom: 10px;
    }


    .filter-container button:hover {
        background-color: rgba(110, 52, 191, 0.13) !important;
    }

    .btn-container {
        display: flex;
        justify-content: flex-end;
    }

    .card-extrato {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        background-color: #ffffff;
        width: 100%;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .card-extrato:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .card-extrato .card-header {
        font-size: 1em;
        font-weight: bold;
        background-color: #f8f9fa;
        border-radius: 6px;
        padding: 8px;
    }

    .card-extrato .card-body {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
    }

    .menu-container {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .inputs-pesquisa {
        display: none;
        margin-top: 1rem;
    }

    .expandable-btn {
        display: flex;
        justify-content: start;
        gap: 8px;
        cursor: pointer;
    }

    .action-btns {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }

    .action-btns button {
        padding: 6px 12px;
        font-size: 0.9em;
        cursor: pointer;
        border-radius: 6px;
        border: none;
        color: white;
        transition: background-color 0.2s ease;
    }

    .action-btns .btn-excluir {
        background-color: #dc3545;
    }

    .action-btns .btn-excluir:hover {
        background-color: rgba(110, 52, 191, 0.13) !important;
    }

    .menu-container {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    #colorr {
        border-color: rgba(110, 52, 191, 0.13) !important;
    }

    .card-extrato {
        flex: 1 1 300px;
        max-width: 350px;
        height: auto;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        background-color: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .card-body {
        padding: 8px;
    }

    .action-btns {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
    }

    @media (max-width: 768px) {
        .menu-container {
            flex-direction: column;
            align-items: center;
        }

        .card-extrato {
            width: 100%;
        }

        .filter-container {
            width: 100%;
        }
    }
    .data{
        padding: 2px;
    }
    #btn-vende {
        color: #FFF;
        font-weight: bold;
        background-color: rgba(110, 52, 191, 0.13);
        border-color: rgba(110, 52, 191, 0.13);
        border-radius: 5px !important;
        gap: 5px;
        padding: 20px !important;
        justify-content: space-between !important;
    }
</style>


<div class="card p-0 mt-2 mr-2">
    <div class="card-body d-flex flex-column p-1 ms-2">
        <div class="row">

            <div class="col-md-6">
                <div class="btn-group">
                    <a class="btn btn-outline-dark btn-sm" id="btn" href="<?= base_url() ?>intercontrol/Conciliacao/">
                        Voltar
                    </a>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mt-2" style="align-content:center; border-color: rgba(110, 52, 191, 0.13);">
    <div class="filter-container">
        <form method="post" action="<?= base_url() ?>intercontrol/Extratos/consultar/<?= isset($id_forma) ? $id_forma : '' ?>">
            <div class="row">
                <div class="col-md-6">
                    <label for="dataInicio" style="margin-bottom: 10px;">Data de Início:</label>
                    <input type="date" class="data" name="dataInicio" value="<?= isset($dataInicio) ? $dataInicio : '' ?>" required>
                </div>
                <div class="col-md-6">
                    <label for="dataFim"  style="margin-bottom: 10px;">Data de Fim:</label>
                    <input type="date" class="data" name="dataFim" value="<?= isset($dataFim) ? $dataFim : '' ?>" required>
                </div>
            </div>
            <div class="btn-container mt-3">
                <button type="submit" class="btn-vende">Consultar</button>
            </div>
        </form>
    </div>
</div>

<div class="container mt-2">

    <form method="post" action="<?= base_url() ?> intercontrol/Extratos/index/<?= isset($id_forma) ? $id_forma : '' ?>">
        <div class="row">
            <div class="col-md-3 mg-4">
                <label for="filtro_tipo">Filtro Extrato</label>
                <select name="tipoFiltro" id="filtro_tipo" class="form-control">
                    <option value="">Todos</option>
                    <option value="Pagar">Pagar</option>
                    <option value="Receber">Receber</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-vende mt-3">Filtrar</button>
            </div>
        </div>
    </form>
    <br>
    <form method="post" action="<?= base_url() ?>intercontrol/Abaconciliacao/index/<?= isset($id_forma) ? $id_forma : '' ?>">
        <input type="hidden">
        <button type="submit" class="btn btn-vende btn-sm">Ver os Extratos</button>
    </form>
</div>

<div class="menu-container mt-3" style="display:flex">
    <div class="mt-2  flex-column position-relative" style="width:80%; gap:20px;">
        <?php if (!empty($extratos)): ?>
            <div class="container">
                <div class="row">
                    <?php foreach ($extratos as $extrato): ?>
                        <div class="col-md-6 mb-4"> <!-- Ajustado para o card ocupar 50% da largura -->
                            <div class="card" id="colorr" style="flex: 1; border:3px solid; padding:20px">
                                <h5 style="margin-bottom: 15px !important;"> Extrato Bancário</h5>
                                <p><strong>Data:</strong> <?= isset($extrato->data_entrada) ? htmlspecialchars($extrato->data_entrada) : 'N/A' ?></p>
                                <p><strong>Valor:</strong> R$ <?= number_format($extrato->valor, 2, ',', '.') ?></p>
                                <p><strong>Operação:</strong>
                                    <?= isset($extrato->tipo_operacao)
                                        ? ($extrato->tipo_operacao == 'D' ? 'Saída' : ($extrato->tipo_operacao == 'C' ? 'Entrada' : htmlspecialchars($extrato->tipo_operacao)))
                                        : 'N/A' ?>
                                </p>
                                <p><strong>Transação:</strong> <?= isset($extrato->tipo_transacao) ? htmlspecialchars($extrato->tipo_transacao) : 'N/A' ?></p>
                                <p><strong>Descrição:</strong> <?= isset($extrato->descricao) ? htmlspecialchars($extrato->descricao) : 'N/A' ?></p>
                                <div class="action-btns">
                                    <!-- Botões de ação -->
                                    <form method="post" action="<?= base_url() ?>intercontrol/Extratos/excluir/<?= isset($id_forma) ? $id_forma : '' ?>">
                                        <input type="hidden" name="id_extratos" value="<?= $extrato->id_extratos ?>">
                                        <button type="submit" class="btn btn-vende btn-sm">Retirar</button>
                                    </form>
                                </div>
                            </div>


                        </div>

                        <div class="col-md-6 mb-4 "> <!-- Ajustado para o card ocupar 50% da largura -->
                            <!-- Card de Relação -->
                            <form method="post" action="<?= base_url() ?>intercontrol/Extratos/atualizarStatusConciliacao/<?= isset($id_forma) ? $id_forma : '' ?>">

                                <div class="card" id="colorr" style="flex: 1; border:3px solid; padding:20px">
                                    <?php foreach ($dadosIguais as $dadoIgual): ?>
                                        <?php if (
                                            $extrato->data_entrada == $dadoIgual['data_entrada'] &&
                                            $extrato->valor == $dadoIgual['valor']
                                        ): ?>

                                            <h5 style="margin-bottom: 15px !important;">
                                                
                                                    <?= ($extrato->tipo_operacao == 'D') ? 'Contas Pagar' : 'Contas Receber' ?>:

                                            </h5>

                                            <div class="mb-3" style="flex-direction: row !important; display:flex; gap:15px">
                                                <label for="data_entrada" class="form-label"><strong>Data:</strong></label>
                                                <input type="text" name="data_entrada[]" id="data_entrada" class="inputs"
                                                    value="<?= htmlspecialchars($dadoIgual['data_entrada']) ?>">

                                                <label for="valor" class="form-label"><strong>Valor:</strong></label>
                                                <input type="text" name="valor[]" id="valor" class="inputs"
                                                    value="<?= htmlspecialchars($dadoIgual['valor']) ?>">


                                            </div>

                                            <div class="mb-3" style="flex-direction: row !important; display:flex; gap:15px">
                                                <label for="classe" class="form-label">
                                                    <strong>
                                                        <?= ($extrato->tipo_operacao == 'D') ? 'Credor' : 'Devedor' ?>:
                                                    </strong>
                                                </label>
                                                <div class="col-lg-4" style="width:60%">
                                                    <input type="hidden" id="credor_devedor" class="inputs" name="credor_devedor" value="<?= $dadoIgual['credor'] ?>" />
                                                    <input type="text" id="devedorlabel" class="inputs" name="devedorlabel" value="<?= $dadoIgual['credor'] ?>" required="" />
                                                </div>
                                            </div>
                                            <div class="mb-3">

                                                <label for="tipo" class="form-label"><strong>Tipo:</strong></label>
                                                <select name="tipo" id="tipo" class="inputs">
                                                    <option value="">Selecione o Tipo</option>
                                                    <?php
                                                    // Iterando sobre 'contasPagar' e 'contasReceber'
                                                    foreach (array_merge($contas['contasTipo'], $contas['contasTipo']) as $conta): ?>
                                                        <?php if (isset($conta['descricao'])): ?>
                                                            <option value="<?= $conta['descricao']; ?>"><?= $conta['descricao']; ?></option>
                                                        <?php endif; ?>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>

                                            <div class="mb-3">

                                                <label for="classe" class="form-label"><strong>Classe:</strong></label>
                                                <select name="classe" id="classe" class="inputs">
                                                    <option value="">Selecione a Classe</option>
                                                    <?php
                                                    // Iterando sobre 'contasPagar' e 'contasReceber'
                                                    foreach (array_merge($contas['contasClasse'], $contas['contasClasse']) as $conta): ?>
                                                        <?php if (isset($conta['descricao'])): ?>
                                                            <option value="<?= $conta['descricao']; ?>"><?= $conta['descricao']; ?></option>
                                                        <?php endif; ?>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>

                                        <?php endif; ?>
                                    <?php endforeach; ?>

                                    <?php foreach ($dadosIguaisReceber as $dadoReceber): ?>
                                        <?php if (
                                            $extrato->data_entrada == $dadoReceber['data_entrada'] &&
                                            $extrato->valor == $dadoReceber['valor']
                                        ): ?>
                                            <h5 class="card-title">Contas</h5>

                                            <div class="mb-3">
                                                <label for="data_entrada_receber" class="form-label"><strong>Data:</strong></label>
                                                <input type="text" name="data_entrada_receber[]" id="data_entrada_receber" class="inputs"
                                                    value="<?= htmlspecialchars($dadoReceber['data_entrada']) ?>">
                                            </div>
                                            <div class="mb-3">
                                                <label for="valor_receber" class="form-label"><strong>Valor:</strong></label>
                                                <input type="text" name="valor_receber[]" id="valor_receber" class="inputs"
                                                    value="<?= htmlspecialchars($dadoReceber['valor']) ?>">
                                            </div>

                                            <div class="col-lg-4">
                                                <label for="classe" class="form-label">
                                                    <strong>
                                                        <?= ($extrato->tipo_operacao == 'D') ? 'Credor' : 'Devedor' ?>:
                                                    </strong>
                                                </label>
                                                <input type="hidden" id="credor_devedor" class="inputs" name="credor_devedor" value="<?= $dadoIgual['credor'] ?>" />
                                                <input type="text" id="devedorlabel" class="inputs" name="devedorlabel" value="<?= $dadoIgual['credor'] ?>" required="" />
                                            </div>

                                            <div class="mb-3">

                                                <label for="tipo" class="form-label"><strong>Tipo:</strong></label>
                                                <select name="tipo" id="tipo" class="inputs">
                                                    <option value="">Selecione o Tipo</option>
                                                    <?php
                                                    // Iterando sobre 'contasPagar' e 'contasReceber'
                                                    foreach (array_merge($contas['contasTipo'], $contas['contasTipo']) as $conta): ?>
                                                        <?php if (isset($conta['descricao'])): ?>
                                                            <option value="<?= $conta['descricao']; ?>"><?= $conta['descricao']; ?></option>
                                                        <?php endif; ?>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                            <div class="mb-3">

                                                <label for="classe" class="form-label"><strong>Classe:</strong></label>
                                                <select name="classe" id="classe" class="inputs">
                                                    <option value="">Selecione a Classe</option>
                                                    <?php
                                                    // Iterando sobre 'contasPagar' e 'contasReceber'
                                                    foreach (array_merge($contas['contasClasse'], $contas['contasClasse']) as $conta): ?>
                                                        <?php if (isset($conta['descricao'])): ?>
                                                            <option value="<?= $conta['descricao']; ?>"><?= $conta['descricao']; ?></option>
                                                        <?php endif; ?>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>


                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                    <div class="action-btns">

                                        <div class="d-flex" style="gap:15px;">
                                            <input type="hidden" name="id_extratos" value="<?= $extrato->id_extratos ?>">
                                            <?php if ($extrato->habilitarConciliar): ?>
                                                <button type="submit" class="btn-vende btn-sm">Conciliar</button>
                                            <?php else: ?>
                                                <button type="button" class="btn-vende btn-sm" disabled>Conciliar</button>
                                            <?php endif; ?>

                                        </div>
                            </form>

                                <?php if (!$extrato->habilitarConciliar): ?>
                                    <form method="post" action="<?= base_url() ?>intercontrol/Extratos/cadastrarManual/<?= isset($id_forma) ? $id_forma : '' ?>">
                                        <input type="hidden" name="id_extratos" value="<?= $extrato->id_extratos ?>">
                                        <button type="button" class="btn-vende btn-sm" onclick="cadastrarManualModal()">Cadastrar Manualmente</button>
                                    </form>
                                <?php else: ?>
                                    <button type="button" class="btn-vende" disabled>Cadastrar Manualmente</button>
                                <?php endif; ?>

                                <form method="post" action="<?= base_url() ?>intercontrol/Extratos/index<?= isset($id_forma) ? $id_forma : '' ?>">
                                    <input type="hidden" name="id_extratos" value="<?= $extrato->id_extratos ?>">
                                    <button type="button" class="btn-vende btn-sm" onclick="visualizarContas()">Selecionar</button>
                                </form>

                        </div>
                </div>

            </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>
</div>
</div>

</div>
</div>
</div>
<script>
    function cadastrarManualModal() {
        $("#removemodal").remove();

        $("#myModal").append(
            '<div class="modal-dialog modal-dialog-centered row" role="document" id="removemodal">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<h5 class="modal-title" id="cadastroModalLabel">Cadastrar Manualmente</h5>' +
            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
            '</div>' +
            '<div class="modal-body">' +
            '<form method="post" action="<?= base_url() ?>intercontrol/Extratos/cadastrarManual/<?= isset($id_forma) ? $id_forma : "" ?>">' +
            '<input type="hidden" name="id_extratos" value="<?= $extrato->id_extratos ?>">' +





            '<div class="mb-3">' +
            '<label for="classe" class="form-label">' +
            '<strong>'+
            '<?= ($extrato->tipo_operacao == 'D') ? 'Credor' : 'Devedor' ?>:'+
            '</strong>'+
            '</label>'+
            '<input type="hidden" id="credor_devedor2" class="inputs" name="credor_devedor" value="<?= @$obj->_credor_devedor; ?>" />' +
            '<input type="text" id="devedorlabel2" class="inputs" name="devedorlabel" value="<?= @$obj->_credordevedor; ?>" required="" />' +
            '</div>' +



            '<div class="mb-3">' +
            '<label for="tipo" class="form-label"><strong>Tipo:</strong></label>' +
            '<select name="tipo" id="tipo" class="inputs">' +
            '<option value="">Selecione o Tipo</option>' +
            '<?php foreach (array_merge($contas["contasTipo"], $contas["contasTipo"]) as $conta): ?>' +
            '<?php if (isset($conta["descricao"])): ?>' +
            '<option value="<?= $conta["descricao"]; ?>"><?= $conta["descricao"]; ?></option>' +
            '<?php endif; ?>' +
            '<?php endforeach; ?>' +
            '</select>' +
            '</div>' +

            '<div class="mb-3">' +
            '<label for="classe" class="form-label"><strong>Classe:</strong></label>' +
            '<select name="classe" id="classe" class="inputs">' +
            '<option value="">Selecione a Classe</option>' +
            '<?php foreach (array_merge($contas["contasClasse"], $contas["contasClasse"]) as $conta): ?>' +
            '<?php if (isset($conta["descricao"])): ?>' +
            '<option value="<?= $conta["descricao"]; ?>"><?= $conta["descricao"]; ?></option>' +
            '<?php endif; ?>' +
            '<?php endforeach; ?>' +
            '</select>' +
            '</div>' +

            '<div class="form-group">' +
            '<label for="valor">Valor</label>' +
            '<input type="text" class="inputs" id="valor" name="valor" required>' +
            '</div>' +

            '<div class="form-group">' +
            '<label for="observacao">Observação</label>' +
            '<textarea class="inputs" id="observacao" name="observacao" rows="3" required></textarea>' +
            '</div>' +

            '<div class="form-group">' +
            '<label for="data">Data</label>' +
            '<input type="date" class="inputs" id="data" name="data" required>' +
            '</div>' +

            '<button type="submit" class="btn btn-vende">Confirmar</button>' +
            '</form>' +
            '</div>' +
            '</div>' +
            '</div>'
        );

        $('#myModal').modal('show');
        $("#devedorlabel2").autocomplete({
            source: "<?= base_url() ?>index.php?c=autocomplete&m=credordevedor",
            minLength: 1,
            focus: function(event, ui) {
                $("#devedorlabel2").val(ui.item.label);
                return false;
            },
            select: function(event, ui) {
                $("#devedorlabel2").val(ui.item.value);
                $("#credor_devedor2").val(ui.item.id);
                return false;
            }
        });
    }


    $(function() {
        $("#devedorlabel").autocomplete({
            source: "<?= base_url() ?>index.php?c=autocomplete&m=credordevedor",
            minLength: 1,
            focus: function(event, ui) {
                $("#devedorlabel").val(ui.item.label);
                return false;
            },
            select: function(event, ui) {
                $("#devedorlabel").val(ui.item.value);
                $("#credor_devedor").val(ui.item.id);
                return false;
            }
        });
    });



    function visualizarContas() {
        $("#removemodal").remove();

        $("#myModal").append(
            '<div class="modal-dialog modal-dialog-centered row" role="document" id="removemodal">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<h5 class="modal-title" id="cadastroModalLabel">Selecionar Contas</h5>' +
            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
            '</div>' +
            '<div class="modal-body">' +
            '<form method="post" action="<?= base_url() ?>intercontrol/Extratos/processarSelecaoContas/<?= isset($id_forma) ? $id_forma : "" ?>">' +
            '<input type="hidden" name="id_extratos" value="<?= $extrato->id_extratos ?>">' +

            '<div class="mb-3">' +
            '<label for="tipo_conta" class="form-label"><strong>Tipo de Conta:</strong></label>' +
            '<select name="tipo_conta" id="tipo_conta" class="inputs" required>' +
            '<option value="">Selecione</option>' +
            '<option value="contas_pagar">Contas a Pagar</option>' +
            '<option value="contas_receber">Contas a Receber</option>' +
            '</select>' +
            '</div>' +

            '<button type="submit" class="btn btn-vende">Confirmar</button>' +
            '</form>' +
            '</div>' +
            '</div>' +
            '</div>'
        );

        // Exibe a modal
        $('#myModal').modal('show');
    }


    function expandDiv() {
        var btn = document.querySelector('.expandable-btn');
        var inputs = document.querySelector('.inputs-pesquisa');
        btn.classList.toggle('expanded');
        inputs.classList.toggle('expanded');
    }
</script>