@extends('template_pages.session')

@section('page_title', 'Clientes Institucionais')
@section('page_icon', 'handshake')

@php
    $module = request()->segment(1);
@endphp

@section('filter')
<div class="d-flex align-items-center gap-2 filters-mobile">
    <span class="me-2 fw-semibold">Filtrar por:</span>

    <!-- Filtro Tipo -->
    <div class="app-search">
        <select id="filter-tipo" class="form-select form-control my-1 my-md-0">
            <option value="">Todos os Tipos</option>
            <option value="B2B">B2B</option>
            <option value="Incorporadora">Incorporadora</option>
            <option value="B2C">B2C</option>
            <option value="SAAS">SAAS</option>
        </select>
        <i data-lucide="bookmark" class="app-search-icon text-muted"></i>
    </div>

    <!-- Filtro Status -->
    <div class="app-search">
        <select id="filter-status" class="form-select form-control my-1 my-md-0">
            <option value="">Todos os Status</option>
            <option value="Ativo">Ativo</option>
            <option value="Desativado">Desativado</option>
        </select>
        <i data-lucide="box" class="app-search-icon text-muted"></i>
    </div>

    <!-- Botão Limpar Filtros -->
    <button id="clear-filters" class="btn btn-outline-primary">
        <i data-lucide="x" class="me-1"></i>
        Limpar
    </button>
</div>
@endsection

@section('content_page')
<div class="card border-0">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="card-title mb-0">
            <i data-lucide="handshake" class="me-2"></i>
            Lista de Clientes Institucionais
        </h4>
        <div class="d-flex gap-2">
            <a href="{{ route('clients.institutional.add', ['module' => $module]) }}" class="btn btn-primary btn-sm" id="add-client">
                <i data-lucide="plus" class="me-1"></i>
                Novo Cliente
            </a>
        </div>
    </div>
    
    <div class="card-body">
        <table id="institutional-clients-ajax-table" class="table table-striped table-hover dt-responsive align-middle mb-0">
            <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                <tr class="text-uppercase fs-xxs">
                    <th style="width: 5%;">ID</th>
                    <th style="width: 40%;">Cliente Institucional</th>
                    <th style="width: 20%;">Tipo</th>
                    <th style="width: 15%;">Status</th>
                    <th class="text-center checkbox-select-datatable" style="width: 10%;">Ações</th>
                </tr>
            </thead>
            <tbody>
                <!-- Os dados serão carregados via AJAX -->
            </tbody>
        </table>
    </div>

    <div class="card-footer border-0">
        <div class="d-flex justify-content-between align-items-center">
            <div id="table-info" class="text-muted"></div>
            <div id="table-pagination"></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Datatables js -->
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.bootstrap5.min.js') }}"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Inicializar a DataTable com AJAX
    const table = new DataTable('#institutional-clients-ajax-table', {
        ajax: {
            url: '{{ route('clients.institutional.list.ajax', ['module' => $module]) }}',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            dataSrc: 'data'
        },
        processing: true,
        serverSide: false,
        responsive: true,
        pageLength: 10,
        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        order: [[0, 'desc']],
        columns: [
            { data: 'id', },
            { data: 'name' },
            { data: 'client_type' },
            { data: 'status' },
            { data: 'actions', className: 'text-center checkbox-select-datatable' },
        ],
        language: {
            url: '{{ asset('assets/inspinia/plugins/datatables/pt_br.json') }}',
            paginate: {
                first: '<i class="ti ti-chevrons-left"></i>',
                previous: '<i class="ti ti-chevron-left"></i>',
                next: '<i class="ti ti-chevron-right"></i>',
                last: '<i class="ti ti-chevrons-right"></i>'
            },
            processing: '',
        },
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    // Utilitário para escapar caracteres especiais de regex
    const escapeRegex = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

    // Filtros personalizados (busca exata)
    $('#filter-tipo').on('change', function() {
        const v = this.value;
        table.column(2).search(v ? `^${escapeRegex(v)}$` : '', true, false, false).draw();
    });

    $('#filter-status').on('change', function() {
        const v = this.value;
        table.column(3).search(v ? `^${escapeRegex(v)}$` : '', true, false, false).draw();
    });

    // Limpar todos os filtros
    $('#clear-filters').on('click', function() {
        $('#filter-tipo').val('');
        $('#filter-status').val('');
        table.search('').columns().search('').draw();
    });
});
</script>
@endpush