@extends('layouts.app')

@section('title', 'Transferências Bancárias')

@push('styles-custom')
    <!-- Estilos personalizados -->
    <link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--single {
            height: 31px;
            padding: 0.1rem 0.5rem;
            font-size: 0.8125rem;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .modal-lg .select2-container {
            width: 100% !important;
        }
        .cursor-pointer {
            cursor: pointer;
        }
        .badge:hover {
            transform: scale(1.05);
            transition: transform 0.2s;
        }
        .bg-purple-100 {
            background-color: #f3e8ff !important;
        }
        .text-purple-800 {
            color: #5b21b6 !important;
        }
        .d-flex.flex-column .badge {
            margin-bottom: 2px;
        }
        .d-flex.flex-column .badge:last-child {
            margin-bottom: 0;
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Transferências</li>
        </ol>
    </nav>

    <div class="mb-9">
        <!-- Título -->
        <div class="row g-2 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">Transferências</h2>
            </div>
        </div>

        <!-- Filtros: Status, Registros por Página, Período e Busca -->
        <form method="GET" action="{{ route('transferencias.index') }}" id="filterForm">
            <!-- Primeira linha - Filtros principais e botão -->
            <div class="row mb-2">
                <div class="col-md-10 d-flex flex-wrap align-items-center">
                    <!-- Status de Vinculação -->
                    <div class="me-2 mb-2">
                        <select name="status_vinculacao" class="form-select form-select-sm" onchange="document.getElementById('filterForm').submit()">
                            <option value="all" {{ ($statusVinculacao ?? 'all') == 'all' ? 'selected' : '' }}>Todas</option>
                            <option value="disponivel" {{ ($statusVinculacao ?? '') == 'disponivel' ? 'selected' : '' }}>Disponíveis</option>
                            <option value="origem" {{ ($statusVinculacao ?? '') == 'origem' ? 'selected' : '' }}>Origem</option>
                            <option value="destino" {{ ($statusVinculacao ?? '') == 'destino' ? 'selected' : '' }}>Destino</option>
                            <option value="intermediaria" {{ ($statusVinculacao ?? '') == 'intermediaria' ? 'selected' : '' }}>Intermediárias</option>
                        </select>
                    </div>

                    <!-- Registros por página -->
                    <div class="me-2 mb-2">
                        <select name="per_page" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="10"  {{ request('per_page', 100) == 10   ? 'selected' : '' }}>10</option>
                            <option value="25"  {{ request('per_page', 100) == 25   ? 'selected' : '' }}>25</option>
                            <option value="50"  {{ request('per_page', 100) == 50   ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('per_page', 100) == 100  ? 'selected' : '' }}>100</option>
                        </select>
                    </div>

                    <!-- Filtro de Período -->
                    <div class="me-2 mb-2">
                        <div class="dropdown">
                            @php
                                $periodoAtual = request('periodo', 'tudo');
                                $labelPeriodo = match ($periodoAtual) {
                                    'hoje'        => 'Hoje',
                                    'ontem'       => 'Ontem',
                                    'ultimos_7'   => 'Últimos 7 dias',
                                    'ultimos_15'  => 'Últimos 15 dias',
                                    'ultimo_mes'  => 'Último mês',
                                    'mes_atual'   => 'Mês atual',
                                    'intervalo'   => 'Intervalo',
                                    'especifico'  => 'Específico',
                                    default       => 'Tudo',
                                };
                            @endphp
                            <button class="btn btn-secondary btn-sm dropdown-toggle"
                                    type="button"
                                    id="periodoDropdown"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                Período: {{ $labelPeriodo }}
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="periodoDropdown">
                                <li><a class="dropdown-item" href="#" data-value="hoje">Hoje</a></li>
                                <li><a class="dropdown-item" href="#" data-value="ontem">Ontem</a></li>
                                <li><a class="dropdown-item" href="#" data-value="ultimos_7">Últimos 7 dias</a></li>
                                <li><a class="dropdown-item" href="#" data-value="ultimos_15">Últimos 15 dias</a></li>
                                <li><a class="dropdown-item" href="#" data-value="ultimo_mes">Último mês</a></li>
                                <li><a class="dropdown-item" href="#" data-value="mes_atual">Mês atual</a></li>
                                <li><a class="dropdown-item" href="#" data-value="tudo">Tudo</a></li>
                                <li><a class="dropdown-item" href="#" data-value="intervalo">Intervalo</a></li>
                                <li><a class="dropdown-item" href="#" data-value="especifico">Específico</a></li>
                            </ul>
                            <input type="hidden" name="periodo" id="periodoInput" value="{{ request('periodo', 'tudo') }}">
                        </div>
                    </div>

                    <!-- Containers para datas do período -->
                    <!-- Para Intervalo: dois inputs e um botão -->
                    <div class="me-2 mb-2" id="periodoIntervaloContainer" style="display: {{ request('periodo') === 'intervalo' ? 'flex' : 'none' }};">
                        <div class="d-flex">
                            <input type="date" name="data_inicio" class="form-control form-control-sm me-1" placeholder="Data Início" value="{{ request('data_inicio') }}">
                            <input type="date" name="data_fim" class="form-control form-control-sm me-1" placeholder="Data Fim" value="{{ request('data_fim') }}">
                            <button type="submit" class="btn btn-primary btn-sm">Aplicar</button>
                        </div>
                    </div>
                    <!-- Para Específico: um input que submete automaticamente ao alterar -->
                    <div class="me-2 mb-2" id="periodoEspecificoContainer" style="display: {{ request('periodo') === 'especifico' ? 'block' : 'none' }};">
                        <input type="date" name="data_especifica" class="form-control form-control-sm" placeholder="Data" value="{{ request('data_especifica') }}">
                    </div>
                </div>

                <!-- Botão Adicionar (sempre à direita) -->
                <div class="col-md-2 d-flex justify-content-md-end mb-2">
                    <button type="button" class="btn btn-primary btn-sm" onclick="window.location='{{ route('transferencias.create') }}'">
                        <i class="fas fa-exchange-alt me-2"></i>Nova Transferência
                    </button>
                </div>
            </div>

            <!-- Segunda linha - Buscas -->
            <div class="row mb-2">
                <!-- Conjunto de busca primária -->
                <div class="col-md-5 mb-2">
                    <div class="row">
                        <!-- Input de busca (3 colunas) -->
                        <div class="col-8">
                            <div class="search-box w-100">
                                <input
                                    id="searchInput"
                                    class="form-control search-input form-control-sm w-100"
                                    type="search"
                                    name="q"
                                    placeholder="{{ request('search_field') ? 'Buscar por ' . ucfirst(str_replace('_',' ',request('search_field'))) : 'Buscar em todas as colunas' }}"
                                    aria-label="Search"
                                    value="{{ request('q') }}"
                                >
                                <span class="fa fa-search search-box-icon"></span>
                            </div>
                        </div>
                        <!-- Select de coluna (2 colunas) -->
                        <div class="col-4">
                            <select name="search_field" class="form-select form-select-sm w-100" onchange="updatePlaceholder()">
                                <option value="" {{ request('search_field') == '' ? 'selected' : '' }}>Todas as Colunas</option>
                                <option value="descricao" {{ request('search_field') == 'descricao' ? 'selected' : '' }}>Descrição</option>
                                <option value="valor" {{ request('search_field') == 'valor' ? 'selected' : '' }}>Valor</option>
                                <option value="origem" {{ request('search_field') == 'origem' ? 'selected' : '' }}>Origem</option>
                                <option value="destino" {{ request('search_field') == 'destino' ? 'selected' : '' }}>Destino</option>
                                <option value="plano_saida" {{ request('search_field') == 'plano_saida' ? 'selected' : '' }}>Plano de Saída</option>
                                <option value="plano_entrada" {{ request('search_field') == 'plano_entrada' ? 'selected' : '' }}>Plano de Entrada</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Divisor "E" (1 coluna) -->
                <div class="col-md-1 d-flex align-items-center justify-content-center mb-2">
                    <span class="badge bg-secondary">E</span>
                </div>

                <!-- Conjunto de busca secundária -->
                <div class="col-md-6 mb-2">
                    <div class="row">
                        <!-- Input de busca secundária -->
                        <div class="col-8">
                            <div class="search-box w-100">
                                <input
                                    id="searchInput2"
                                    class="form-control search-input form-control-sm w-100"
                                    type="search"
                                    name="q2"
                                    placeholder="{{ request('search_field2') ? 'Buscar por ' . ucfirst(str_replace('_',' ',request('search_field2'))) : 'Segundo filtro (opcional)' }}"
                                    aria-label="Search"
                                    value="{{ request('q2') }}"
                                >
                                <span class="fa fa-search search-box-icon"></span>
                            </div>
                        </div>
                        <!-- Select de coluna secundária -->
                        <div class="col-4">
                            <select name="search_field2" class="form-select form-select-sm w-100" onchange="updatePlaceholder2()">
                                <option value="" {{ request('search_field2') == '' ? 'selected' : '' }}>Selecione uma coluna</option>
                                <option value="descricao" {{ request('search_field2') == 'descricao' ? 'selected' : '' }}>Descrição</option>
                                <option value="valor" {{ request('search_field2') == 'valor' ? 'selected' : '' }}>Valor</option>
                                <option value="origem" {{ request('search_field2') == 'origem' ? 'selected' : '' }}>Origem</option>
                                <option value="destino" {{ request('search_field2') == 'destino' ? 'selected' : '' }}>Destino</option>
                                <option value="plano_saida" {{ request('search_field2') == 'plano_saida' ? 'selected' : '' }}>Plano de Saída</option>
                                <option value="plano_entrada" {{ request('search_field2') == 'plano_entrada' ? 'selected' : '' }}>Plano de Entrada</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- Tabela de Transferências -->
        @php $clientPerPage = (int) request('per_page', 100); @endphp
        <div id="transferencias"
             data-list='{"valueNames":["id","data","descricao","origem","destino","plano_saida","plano_entrada","status_vinculacao","valor"],
                         "page":{{ $clientPerPage }},"pagination":true}'>

            <div class="table-responsive">
                <table class="table table-sm fs-9 mb-0">
                    <thead class="text-body">
                        <tr>
                            <th class="sort ps-3" data-sort="id" style="min-width:4.5rem;"># <span class="fa-solid fa-sort"></span></th>
                            <th class="sort text-center" data-sort="data" style="min-width:6rem;">Data <span class="fa-solid fa-sort"></span></th>
                            <th class="sort" data-sort="descricao">Descrição <span class="fa-solid fa-sort"></span></th>
                            <th class="sort" data-sort="origem">Origem <span class="fa-solid fa-sort"></span></th>
                            <th class="sort" data-sort="destino">Destino <span class="fa-solid fa-sort"></span></th>
                            <th class="sort" data-sort="plano_saida">Plano Saída <span class="fa-solid fa-sort"></span></th>
                            <th class="sort" data-sort="plano_entrada">Plano Entrada <span class="fa-solid fa-sort"></span></th>
                            <th class="sort text-center" data-sort="status_vinculacao" style="min-width:7rem;">Status Vinculação <span class="fa-solid fa-sort"></span></th>
                            <th class="sort text-end" data-sort="valor">Valor <span class="fa-solid fa-sort"></span></th>
                            <th class="no-sort text-end">Ações</th>
                        </tr>
                    </thead>
                    <tbody class="list">
                        {{-- linha usada pelo List.js; fica oculta --}}
                        <tr class="d-none template-row" data-list="template">
                            <td class="id ps-3 align-middle fw-semibold"></td>
                            <td class="data text-center align-middle"></td>
                            <td class="descricao align-middle"></td>
                            <td class="origem align-middle"></td>
                            <td class="destino align-middle"></td>
                            <td class="plano_saida align-middle"></td>
                            <td class="plano_entrada align-middle"></td>
                            <td class="status_vinculacao text-center align-middle"></td>
                            <td class="valor text-end align-middle"></td>
                            <td class="align-middle text-end acoes"></td>
                        </tr>
                        @forelse($transferencias as $t)
                        <tr>
                            <th scope="row" class="id">{{ $t->id }}</th>
                            <td class="data text-center">{{ \Carbon\Carbon::parse($t->data)->format('d/m/Y') }}</td>
                            <td class="descricao">{{ $t->descricao }}</td>
                            <td class="origem">
                                {{ $t->contaOrigem->empresa->nome_fantasia }} —
                                {{ $t->contaOrigem->banco }}/{{ $t->contaOrigem->agencia }}/{{ $t->contaOrigem->conta_corrente }}
                            </td>
                            <td class="destino">
                                {{ $t->contaDestino->empresa->nome_fantasia }} —
                                {{ $t->contaDestino->banco }}/{{ $t->contaDestino->agencia }}/{{ $t->contaDestino->conta_corrente }}
                            </td>
                            <td class="plano_saida">
                                {{ $t->planoOrigem->codigo }} – {{ $t->planoOrigem->descricao }}
                            </td>
                            <td class="plano_entrada">
                                {{ $t->planoDestino->codigo }} – {{ $t->planoDestino->descricao }}
                            </td>
                            <td class="status_vinculacao text-center">
                                @php
                                    $tipoVinculacao = $t->tipo_vinculacao;
                                    $temVinculacaoOrigem = $t->vinculacoesOrigem->count() > 0;
                                    $temVinculacaoDestino = $t->vinculacoesDestino->count() > 0;
                                @endphp

                                @if($tipoVinculacao === 'intermediaria')
                                    {{-- Transferência intermediária (origem E destino) --}}
                                    <div class="d-flex flex-column gap-1">
                                        @foreach($t->vinculacoesOrigem as $vinculacao)
                                            @php
                                                $transDestino = $vinculacao->transferenciaDestino;
                                                $tooltipInfo = "Vinculada com: #{$transDestino->id} - {$transDestino->descricao} (R$ " . number_format($vinculacao->valor_vinculado, 2, ',', '.') . ")";
                                            @endphp
                                            <span class="badge bg-info cursor-pointer"
                                                title="{{ $tooltipInfo }}"
                                                data-bs-toggle="modal"
                                                data-bs-target="#vinculacaoModal"
                                                data-transferencia-id="{{ $t->id }}"
                                                data-tipo="origem">
                                                <i class="fas fa-arrow-right me-1"></i>→ #{{ $transDestino->id }}
                                            </span>
                                        @endforeach
                                        @foreach($t->vinculacoesDestino as $vinculacao)
                                            @php
                                                $transOrigem = $vinculacao->transferenciaOrigem;
                                                $tooltipInfo = "Recebe de: #{$transOrigem->id} - {$transOrigem->descricao} (R$ " . number_format($vinculacao->valor_vinculado, 2, ',', '.') . ")";
                                            @endphp
                                            <span class="badge bg-warning cursor-pointer"
                                                title="{{ $tooltipInfo }}"
                                                data-bs-toggle="modal"
                                                data-bs-target="#vinculacaoModal"
                                                data-transferencia-id="{{ $t->id }}"
                                                data-tipo="destino">
                                                <i class="fas fa-arrow-left me-1"></i>← #{{ $transOrigem->id }}
                                            </span>
                                        @endforeach
                                        <span class="badge bg-purple-100 text-purple-800" title="Transferência intermediária - faz ponte na rede">
                                            <i class="fas fa-exchange-alt me-1"></i>Intermediária
                                        </span>
                                    </div>
                                @elseif($tipoVinculacao === 'origem')
                                    {{-- Apenas origem --}}
                                    @foreach($t->vinculacoesOrigem as $vinculacao)
                                        @php
                                            $transDestino = $vinculacao->transferenciaDestino;
                                            $tooltipInfo = "Vinculada com: #{$transDestino->id} - {$transDestino->descricao} (R$ " . number_format($vinculacao->valor_vinculado, 2, ',', '.') . ")";
                                        @endphp
                                        <span class="badge bg-info me-1 cursor-pointer"
                                            title="{{ $tooltipInfo }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#vinculacaoModal"
                                            data-transferencia-id="{{ $t->id }}"
                                            data-tipo="origem">
                                            <i class="fas fa-arrow-right me-1"></i>→ #{{ $transDestino->id }}
                                        </span>
                                    @endforeach
                                @elseif($tipoVinculacao === 'destino')
                                    {{-- Apenas destino --}}
                                    @foreach($t->vinculacoesDestino as $vinculacao)
                                        @php
                                            $transOrigem = $vinculacao->transferenciaOrigem;
                                            $tooltipInfo = "Recebe de: #{$transOrigem->id} - {$transOrigem->descricao} (R$ " . number_format($vinculacao->valor_vinculado, 2, ',', '.') . ")";
                                        @endphp
                                        <span class="badge bg-warning me-1 cursor-pointer"
                                            title="{{ $tooltipInfo }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#vinculacaoModal"
                                            data-transferencia-id="{{ $t->id }}"
                                            data-tipo="destino">
                                            <i class="fas fa-arrow-left me-1"></i>← #{{ $transOrigem->id }}
                                        </span>
                                    @endforeach
                                @else
                                    {{-- Disponível --}}
                                    <span class="badge bg-success" title="Transferência disponível para vinculação">
                                        <i class="fas fa-check me-1"></i>Disponível
                                    </span>
                                @endif
                            </td>
                            <td class="valor text-end">
                                R$ {{ number_format($t->valor, 2, ',', '.') }}
                            </td>
                            <td class="text-end">
                                <div class="btn-reveal-trigger position-static">
                                    <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                                            type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-end py-2">
                                        <a class="dropdown-item" href="{{ route('transferencias.show', $t) }}">Ver</a>
                                        <a class="dropdown-item" href="{{ route('transferencias.edit', $t) }}">Editar</a>
                                        <button class="dropdown-item text-danger" type="button" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ $t->id }}" data-descricao="{{ $t->descricao }}">
                                            Excluir
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="10" class="text-center">Nenhuma transferência encontrada.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-3">
                {{-- Formulário para Seleção de Registros por Página --}}
                <form method="GET" action="{{ route('transferencias.index') }}" class="d-flex align-items-center">
                    <label for="perPage" class="form-label mb-0 me-2">Registros por página:</label>
                    <select name="per_page" id="perPage" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
                        <option value="10" {{ request('per_page', 100) == 10 ? 'selected' : '' }}>10</option>
                        <option value="25" {{ request('per_page', 100) == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('per_page', 100) == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ request('per_page', 100) == 100 ? 'selected' : '' }}>100</option>
                    </select>
                    {{-- Mantém outros filtros --}}
                    @foreach(request()->except('per_page') as $key => $value)
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                    @endforeach
                </form>

                {{-- Links de Paginação --}}
                <div>
                    {{ $transferencias->appends([
                        'status_vinculacao' => request('status_vinculacao'),
                        'per_page'          => request('per_page', 100),
                        'periodo'           => request('periodo'),
                        'data_inicio'       => request('data_inicio'),
                        'data_fim'          => request('data_fim'),
                        'data_especifica'   => request('data_especifica'),
                        'q'                 => request('q'),
                        'search_field'      => request('search_field'),
                        'q2'                => request('q2'),
                        'search_field2'     => request('search_field2')
                    ])->links('vendor.pagination.bootstrap-5') }}
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de Exclusão --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">Excluir Transferência</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    <div class="modal-body">
                        <p>Tem certeza que deseja excluir a transferência <strong id="transferenciaDescricao"></strong>?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger">Excluir</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Modal de Detalhes da Vinculação --}}
    <div class="modal fade" id="vinculacaoModal" tabindex="-1" aria-labelledby="vinculacaoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="vinculacaoModalLabel">Detalhes das Vinculações</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body" id="vinculacaoModalBody">
                    <!-- Conteúdo será carregado via JavaScript -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de Remoção de Vinculação --}}
    <div class="modal fade" id="removeVinculacaoModal" tabindex="-1" aria-labelledby="removeVinculacaoModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="removeVinculacaoForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="removeVinculacaoModalLabel">
                            <i class="fas fa-unlink text-danger me-2"></i>
                            Remover Vinculação
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Atenção!</strong> Esta ação não pode ser desfeita.
                        </div>

                        <p class="mb-3">Tem certeza que deseja remover a vinculação entre:</p>

                        <div class="row g-3">
                            <div class="col-12">
                                <div class="card border-info">
                                    <div class="card-header bg-info-subtle">
                                        <h6 class="mb-0 text-info">
                                            <i class="fas fa-arrow-right me-2"></i>
                                            Transferência Origem
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <p class="mb-1"><strong>ID:</strong> <span id="vinculacaoOrigemId"></span></p>
                                        <p class="mb-1"><strong>Descrição:</strong> <span id="vinculacaoOrigemDescricao"></span></p>
                                        <p class="mb-0"><strong>Valor:</strong> <span id="vinculacaoOrigemValor"></span></p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 text-center">
                                <i class="fas fa-arrow-down text-muted"></i>
                            </div>

                            <div class="col-12">
                                <div class="card border-warning">
                                    <div class="card-header bg-warning-subtle">
                                        <h6 class="mb-0 text-warning">
                                            <i class="fas fa-arrow-left me-2"></i>
                                            Transferência Destino
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <p class="mb-1"><strong>ID:</strong> <span id="vinculacaoDestinoId"></span></p>
                                        <p class="mb-1"><strong>Descrição:</strong> <span id="vinculacaoDestinoDescricao"></span></p>
                                        <p class="mb-0"><strong>Valor Vinculado:</strong> <span id="vinculacaoValorVinculado" class="text-danger fw-bold"></span></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-3">
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                Ao remover a vinculação, as contas a pagar e a receber geradas automaticamente serão mantidas no sistema.
                            </small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-2"></i>Cancelar
                        </button>
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-unlink me-2"></i>Remover Vinculação
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts-custom')
    <script src="{{ asset('vendors/choices/choices.min.js') }}"></script>

    <!-- Select2 JS -->
    <script src="{{ asset('vendors/select2/js/select2.full.min.js') }}"></script>

    {{-- Controla os campos de período --}}
    <script>
      $(function (){
        function updatePeriodFields(){
          const periodo = $('#periodoInput').val();
          $('#periodoIntervaloContainer').toggle(periodo === 'intervalo');
          $('#periodoEspecificoContainer').toggle(periodo === 'especifico');
        }
        updatePeriodFields();

        $(document).on('click','.dropdown-menu a[data-value]',function (e){
          e.preventDefault();
          const value = $(this).data('value');
          $('#periodoInput').val(value);
          $('#periodoDropdown').text('Período: ' + $(this).text().trim());
          updatePeriodFields();
          if (!['intervalo','especifico'].includes(value)) $('#filterForm').submit();
        });

        $('#periodoEspecificoContainer input[name="data_especifica"]').on('change',()=>$('#filterForm').submit());
      });
    </script>

    <script>
       document.addEventListener('DOMContentLoaded', () => {

        /* ----------------------------------------------------
            1.  Instância (ou reaproveita) o List.js
        ---------------------------------------------------- */
        const wrapper     = document.getElementById('transferencias');
        const list = wrapper.list ?? new window.List(wrapper, {
            valueNames : [
                'id',
                'data',
                'descricao',
                'origem',
                'destino',
                'plano_saida',
                'plano_entrada',
                'status_vinculacao',
                'valor'
            ],
            page       : {{ $clientPerPage }},
            pagination : true
        });

        /* ----------------------------------------------------
            2.  Ordenação ASC ⇄ DESC  com 1 único ícone
        ---------------------------------------------------- */
        const heads = wrapper.querySelectorAll('th.sort');

        heads.forEach(th => {
            // ícone já vem do HTML (<span class="fa-solid fa-sort">)
            const icon = th.querySelector('span.fa-sort,span.fa-sort-up,span.fa-sort-down');

            /* -- clique: alterna asc ⇄ desc -- */
            th.addEventListener('click', () => {
                const current = th.dataset.dir || '';          // "", "asc" ou "desc"
                const next    = current === 'asc' ? 'desc' : 'asc';

                // limpa TODOS os outros cabeçalhos (menos o que foi clicado)
                heads.forEach(h => {
                    if (h === th) return;                        // ← ignora o atual
                    h.dataset.dir = '';
                    const ic = h.querySelector('span.fa-sort,span.fa-sort-up,span.fa-sort-down');
                    if (ic){
                    ic.classList.remove('fa-sort-up','fa-sort-down');
                    ic.classList.add('fa-sort');
                    }
                });

                // aplica no cabeçalho clicado
                th.dataset.dir = next;
                const ic = th.querySelector('span.fa-sort,span.fa-sort-up,span.fa-sort-down');
                if (ic){
                    ic.classList.remove('fa-sort','fa-sort-up','fa-sort-down');
                    ic.classList.add(next === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
                }

                // executa a ordenação
                list.sort(th.dataset.sort, {
                    order: next
                });
            });
        });

        });
    </script>

    <script>
        // Apenas ajusta o placeholder — não submete o form automaticamente
        function updatePlaceholder() {
            const field = document.querySelector('select[name="search_field"]').value;
            const input = document.getElementById('searchInput');
            if (!field) {
                input.placeholder = 'Buscar em todas as colunas';
            } else {
                const label = field.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                input.placeholder = 'Buscar por ' + label;
            }
        }

        // Função para o segundo campo de busca
        function updatePlaceholder2() {
            const field = document.querySelector('select[name="search_field2"]').value;
            const input = document.getElementById('searchInput2');
            if (!field) {
                input.placeholder = 'Segundo filtro (opcional)';
            } else {
                const label = field.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                input.placeholder = 'Buscar por ' + label;
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            // Define os placeholders ao carregar a página
            updatePlaceholder();
            updatePlaceholder2();

            // Quando o usuário muda a coluna de busca primária
            document.querySelector('select[name="search_field"]')
                .addEventListener('change', () => {
                    updatePlaceholder();
                    document.getElementById('filterForm').submit();
                });

            // Quando o usuário muda a coluna de busca secundária
            document.querySelector('select[name="search_field2"]')
                .addEventListener('change', () => {
                    updatePlaceholder2();
                    document.getElementById('filterForm').submit();
                });

            // Implementa busca ao pressionar Enter nos campos de busca
            document.getElementById('searchInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    document.getElementById('filterForm').submit();
                }
            });

            document.getElementById('searchInput2').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    document.getElementById('filterForm').submit();
                }
            });
        });
    </script>

    <!-- Scripts para o modal de exclusão e vinculação -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Modal de exclusão
            const deleteModal = document.getElementById('deleteModal');
            const deleteForm = document.getElementById('deleteForm');
            const transferenciaDescricao = document.getElementById('transferenciaDescricao');

            deleteModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                const descricao = button.getAttribute('data-descricao');

                transferenciaDescricao.textContent = descricao;
                deleteForm.action = `/transferencias/${id}`;
            });

            // Modal de vinculação
            const vinculacaoModal = document.getElementById('vinculacaoModal');
            const vinculacaoModalBody = document.getElementById('vinculacaoModalBody');

            vinculacaoModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                const transferenciaId = button.getAttribute('data-transferencia-id');
                const tipo = button.getAttribute('data-tipo');

                // Buscar dados da transferência
                const transferencia = @json($transferencias->items()).find(t => t.id == transferenciaId);

                let html = '<div class="table-responsive"><table class="table table-sm">';
                html += '<thead><tr><th>Tipo</th><th>Transferência</th><th>Descrição</th><th>Valor Vinculado</th><th>Data</th><th>Ações</th></tr></thead><tbody>';

                // Vinculações como origem
                if (transferencia.vinculacoes_origem && transferencia.vinculacoes_origem.length > 0) {
                    transferencia.vinculacoes_origem.forEach(vinc => {
                        const transDestino = vinc.transferencia_destino;
                        html += `<tr class="table-info">
                            <td><span class="badge bg-info"><i class="fas fa-arrow-right me-1"></i>Origem</span></td>
                            <td><a href="/transferencias/${transDestino.id}" class="text-decoration-none">#${transDestino.id}</a></td>
                            <td>${transDestino.descricao}</td>
                            <td>R$ ${new Intl.NumberFormat('pt-BR', {minimumFractionDigits: 2}).format(vinc.valor_vinculado)}</td>
                            <td>${new Date(vinc.data_vinculacao).toLocaleDateString('pt-BR')}</td>
                            <td>
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger"
                                        data-bs-toggle="modal"
                                        data-bs-target="#removeVinculacaoModal"
                                        data-action="/transferencias/${transferencia.id}/vinculacoes/${vinc.id}"
                                        data-origem-id="${transferencia.id}"
                                        data-origem-descricao="${transferencia.descricao}"
                                        data-origem-valor="R$ ${new Intl.NumberFormat('pt-BR', {minimumFractionDigits: 2}).format(transferencia.valor)}"
                                        data-destino-id="${transDestino.id}"
                                        data-destino-descricao="${transDestino.descricao}"
                                        data-valor-vinculado="R$ ${new Intl.NumberFormat('pt-BR', {minimumFractionDigits: 2}).format(vinc.valor_vinculado)}"
                                        title="Remover vinculação">
                                    <i class="fas fa-unlink"></i>
                                </button>
                            </td>
                        </tr>`;
                    });
                }

                // Vinculações como destino
                if (transferencia.vinculacoes_destino && transferencia.vinculacoes_destino.length > 0) {
                    transferencia.vinculacoes_destino.forEach(vinc => {
                        const transOrigem = vinc.transferencia_origem;
                        html += `<tr class="table-warning">
                            <td><span class="badge bg-warning"><i class="fas fa-arrow-left me-1"></i>Destino</span></td>
                            <td><a href="/transferencias/${transOrigem.id}" class="text-decoration-none">#${transOrigem.id}</a></td>
                            <td>${transOrigem.descricao}</td>
                            <td>R$ ${new Intl.NumberFormat('pt-BR', {minimumFractionDigits: 2}).format(vinc.valor_vinculado)}</td>
                            <td>${new Date(vinc.data_vinculacao).toLocaleDateString('pt-BR')}</td>
                            <td>
                                <span class="text-muted small">Apenas a origem pode remover</span>
                            </td>
                        </tr>`;
                    });
                }

                html += '</tbody></table></div>';

                if (!transferencia.vinculacoes_origem?.length && !transferencia.vinculacoes_destino?.length) {
                    html = '<p class="text-center text-muted">Esta transferência não possui vinculações.</p>';
                }

                vinculacaoModalBody.innerHTML = html;
            });

            // Modal de remoção de vinculação
            const removeVinculacaoModal = document.getElementById('removeVinculacaoModal');
            const removeVinculacaoForm = document.getElementById('removeVinculacaoForm');

            removeVinculacaoModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;

                // Pegar dados dos atributos do botão
                const action = button.getAttribute('data-action');
                const origemId = button.getAttribute('data-origem-id');
                const origemDescricao = button.getAttribute('data-origem-descricao');
                const origemValor = button.getAttribute('data-origem-valor');
                const destinoId = button.getAttribute('data-destino-id');
                const destinoDescricao = button.getAttribute('data-destino-descricao');
                const valorVinculado = button.getAttribute('data-valor-vinculado');

                // Definir a ação do formulário
                removeVinculacaoForm.action = action;

                // Preencher os campos do modal
                document.getElementById('vinculacaoOrigemId').textContent = '#' + origemId;
                document.getElementById('vinculacaoOrigemDescricao').textContent = origemDescricao;
                document.getElementById('vinculacaoOrigemValor').textContent = origemValor;
                document.getElementById('vinculacaoDestinoId').textContent = '#' + destinoId;
                document.getElementById('vinculacaoDestinoDescricao').textContent = destinoDescricao;
                document.getElementById('vinculacaoValorVinculado').textContent = valorVinculado;
            });

            // Inicializar tooltips do Bootstrap
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
@endpush