@extends('donamarmita-admin')
@section('title', 'Gestão de FAQs - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="fas fa-question-circle text-primary"></i> 
                Gestão de FAQs
            </h1>
            <p class="text-muted">
                Perguntas Frequentes da {{ $companyName ?? 'nossa plataforma' }}
            </p>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            <i class="fas fa-home mr-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="fas fa-question-circle mr-1"></i> FAQs
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row tile_count">
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-folder text-primary"></i> Total de Categorias
            </span>
            <div class="count green">{{ $faqs->count() }}</div>
            <span class="count_bottom">
                <i class="fas fa-eye mr-1"></i> <span id="visibleCount">{{ $faqs->where('faq_visible', 1)->count() }}</span> visíveis
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-question text-info"></i> Total de Perguntas
            </span>
            <div class="count">{{ $totalQuestions ?? $faqs->sum(fn($faq) => $faq->questions->count()) }}</div>
            <span class="count_bottom">
                <i class="fas fa-chart-line mr-1"></i> média de <span id="avgQuestions">{{ number_format($faqs->avg(fn($faq) => $faq->questions->count()), 1) }}</span> por categoria
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-sort-amount-down text-warning"></i> Ordenação
            </span>
            <div class="count">{{ $faqs->min('faq_sort') ?? 0 }} - {{ $faqs->max('faq_sort') ?? 0 }}</div>
            <span class="count_bottom">
                <i class="fas fa-arrows-alt mr-1"></i> intervalo de posições
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-check-circle text-success"></i> Categorias Ativas
            </span>
            <div class="count">{{ $faqs->where('faq_visible', 1)->count() }}</div>
            <span class="count_bottom">
                <i class="fas fa-eye-slash mr-1"></i> <span id="hiddenCount">{{ $faqs->where('faq_visible', 0)->count() }}</span> inativas
            </span>
        </div>
    </div>

    <!-- Main Panel -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                
                <!-- Filtros Rápidos (opcional, mantive os que tinhas nos banners) -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="btn-group" role="group">
                            <button class="btn btn-sm btn-outline-info" id="filterVisible">
                                <i class="fas fa-eye mr-1"></i> Visíveis
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" id="filterHidden">
                                <i class="fas fa-eye-slash mr-1"></i> Inativas
                            </button>
                            <button class="btn btn-sm btn-outline-primary" id="filterAll">
                                <i class="fas fa-list mr-1"></i> Todos
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>
                                    <i class="fas fa-list-ul mr-2"></i>
                                    Categorias de FAQ
                                    <span class="badge badge-info ml-2">{{ $faqs->count() }} registos</span>
                                </h2>

                                <!-- Botão de adicionar no panel_toolbox (igual ao exemplo dos banners) -->
                                <ul class="nav navbar-right panel_toolbox">
                                    <li>
                                        <a href="{{ route('admin.marketing.faqs.create') }}" class="btn btn-primary btn-sm">
                                            <i class="fa fa-plus"></i> Nova Categoria
                                        </a>
                                    </li>
                                    <li>
                                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>

                            <div class="x_content">
                                @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    {{ session('success') }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                @endif

                                @if(session('warning'))
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-triangle mr-2"></i>
                                    {{ session('warning') }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                @endif

                                <!-- Table -->
                                <div class="table-responsive">
                                    <input type="hidden" id="currentType" value="faq">

                                    <table class="table table-hover jambo_table bulk_action" id="faqTable" style="width:100%">
                                        <thead class="thead-light">
                                            <tr>
                                                <th class="align-middle">Categoria (PT)</th>
                                                <th width="120" class="text-center align-middle">Perguntas</th>
                                                <th width="100" class="text-center align-middle">Ordem</th>
                                                <th width="120" class="text-center align-middle">Estado</th>
                                                <th width="250" class="text-center align-middle">Ações</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($faqs->sortBy('faq_sort') as $faq)
                                            <tr class="faq-row" data-visible="{{ $faq->faq_visible }}">
                                                <td class="align-middle">
                                                    <div class="faq-category-content">
                                                        <strong class="d-block" style="font-size: 16px; color: #333;">
                                                            <i class="fas fa-folder-open text-primary mr-2"></i>
                                                            {{ $faq->faq_title_pt }}
                                                        </strong>
                                                        <small class="text-muted d-block mt-1">
                                                            <i class="fas fa-hashtag mr-1"></i> ID: {{ $faq->faq_id }}
                                                        </small>
                                                        @if($faq->faq_title_en || $faq->faq_title_es || $faq->faq_title_fr)
                                                        <div class="mt-2">
                                                            @if($faq->faq_title_en)
                                                            <span class="badge badge-light" data-toggle="tooltip" title="EN: {{ $faq->faq_title_en }}">
                                                                <i class="flag-icon flag-icon-gb"></i>
                                                            </span>
                                                            @endif
                                                            @if($faq->faq_title_es)
                                                            <span class="badge badge-light" data-toggle="tooltip" title="ES: {{ $faq->faq_title_es }}">
                                                                <i class="flag-icon flag-icon-es"></i>
                                                            </span>
                                                            @endif
                                                            @if($faq->faq_title_fr)
                                                            <span class="badge badge-light" data-toggle="tooltip" title="FR: {{ $faq->faq_title_fr }}">
                                                                <i class="flag-icon flag-icon-fr"></i>
                                                            </span>
                                                            @endif
                                                        </div>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td class="text-center align-middle">
                                                    <div class="questions-stats">
                                                        <span class="badge badge-info" style="font-size: 14px; padding: 6px 12px;">
                                                            <i class="fas fa-question-circle mr-1"></i>
                                                            {{ $faq->questions->count() }}
                                                        </span>
                                                        @if($faq->questions->count() > 0)
                                                        <small class="text-muted d-block mt-1">
                                                            {{ $faq->questions->where('faqp_visible', 1)->count() }} visíveis
                                                        </small>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td class="text-center align-middle">
                                                    <span class="badge badge-light sort-badge" style="font-size: 14px; padding: 5px 10px;">
                                                        <i class="fas fa-sort mr-1"></i>
                                                        {{ $faq->faq_sort ?? '—' }}
                                                    </span>
                                                </td>
                                                <td class="text-center align-middle">
                                                    <button type="button"
                                                            class="btn btn-sm btn-{{ $faq->faq_visible ? 'success' : 'danger' }} toggle-visibility"
                                                            data-id="{{ $faq->faq_id }}"
                                                            data-visible="{{ $faq->faq_visible }}"
                                                            data-topic="faq"
                                                            data-title="{{ $faq->faq_title_pt }}"
                                                            data-toggle="tooltip"
                                                            title="Clique para alterar o estado">
                                                        <i class="fa {{ $faq->faq_visible ? 'fa-eye' : 'fa-eye-slash' }} mr-1"></i>
                                                        {{ $faq->faq_visible ? 'Visível' : 'Oculto' }}
                                                    </button>
                                                </td>
                                                <td class="text-center align-middle">
                                                    <div class="btn-group btn-group-sm" role="group">
                                                        <a href="{{ route('admin.marketing.faqs.questions.index', $faq->faq_id) }}" 
                                                           class="btn btn-outline-secondary"
                                                           data-toggle="tooltip" 
                                                           title="Gerir Perguntas">
                                                            <i class="fas fa-question-circle mr-1"></i>
                                                            Perguntas
                                                        </a>
                                                        <a href="{{ route('admin.marketing.faqs.edit', $faq->faq_id) }}" 
                                                           class="btn btn-outline-info"
                                                           data-toggle="tooltip" 
                                                           title="Editar Categoria">
                                                            <i class="fas fa-pencil-alt"></i>
                                                        </a>
                                                        <button type="button"
                                                                class="btn btn-outline-primary sort-handle"
                                                                data-toggle="tooltip"
                                                                title="Arrastar para reordenar">
                                                            <i class="fas fa-grip-vertical"></i>
                                                        </button>
                                                        <button type="button"
                                                                class="btn btn-outline-danger delete-item"
                                                                data-toggle='tooltip'
                                                                data-title='{{ $faq->faq_title_pt }}'
                                                                data-id='{{ $faq->faq_id }}'
                                                                data-topic='faq'
                                                                data-questions="{{ $faq->questions_count }}"
                                                                title="Eliminar Categoria">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                @if($faqs->isEmpty())
                                <div class="text-center py-5">
                                    <i class="fas fa-question-circle fa-4x text-muted mb-3"></i>
                                    <h5 class="text-muted">Nenhuma categoria de FAQ encontrada</h5>
                                    <p class="text-muted">Clique em "Nova Categoria" para criar a primeira.</p>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="dm-loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
    <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
</div>

@include('admin.marketing.faqs.partial.visibility')
@include('admin.marketing.faqs.partial.delete-faq')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/flag-icon-css/css/flag-icons.min.css" rel="stylesheet">
<style>
/* FAQ Category Content */
.faq-category-content {
    background-color: #fafafa;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid #17a2b8;
    transition: all 0.3s ease;
}

.faq-row:hover .faq-category-content {
    background-color: #ffffff;
    border-left-color: #26B99A;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Questions Stats */
.questions-stats .badge-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    min-width: 50px;
}

/* Sort Badge */
.sort-badge {
    background-color: #f0f0f0;
    color: #333;
    font-weight: 500;
}

/* Table Row Hover */
.faq-row:hover {
    background-color: rgba(23, 162, 184, 0.05);
}

/* Estado Button */
.btn-success, .btn-danger {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    min-width: 85px;
}

/* Sort Handle */
.sort-handle {
    cursor: grab;
    transition: all 0.2s ease;
}

.sort-handle:active {
    cursor: grabbing;
}

.sort-handle:hover {
    background-color: #17a2b8;
    color: white;
    border-color: #17a2b8;
}

/* Flag Icons */
.flag-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.badge-light {
    background-color: #f0f0f0;
    color: #333;
    padding: 4px 6px;
    margin-right: 3px;
}

/* Panel Toolbox - igual ao exemplo dos banners */
.panel_toolbox {
    min-width: auto;
}

.panel_toolbox li {
    float: left;
    margin-left: 5px;
}

.panel_toolbox .btn-primary {
    background-color: #26B99A;
    border-color: #26B99A;
    color: white;
    padding: 5px 12px;
    font-size: 13px;
}

.panel_toolbox .btn-primary:hover {
    background-color: #1e8a73;
    border-color: #1e8a73;
}

/* Responsive */
@media (max-width: 768px) {
    .panel_toolbox {
        float: none !important;
        text-align: left;
        margin-top: 10px;
        width: 100%;
    }
    
    .panel_toolbox li {
        float: none;
        display: inline-block;
    }
    
    .faq-category-content {
        padding: 6px 8px;
    }
    
    .btn-group .btn {
        padding: 3px 6px;
        font-size: 11px;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
$(document).ready(function() {
    
    /* ============================================================
     | FILTER BUTTONS
     ============================================================ */
    $('#filterVisible').on('click', function() {
        $('.faq-row').hide();
        $('.faq-row[data-visible="1"]').show();
        
        // Update active states
        $(this).addClass('active').removeClass('btn-outline-info').addClass('btn-info');
        $('#filterHidden').removeClass('active').removeClass('btn-outline-secondary').addClass('btn-outline-secondary');
        $('#filterAll').removeClass('active').removeClass('btn-outline-primary').addClass('btn-outline-primary');
    });
    
    $('#filterHidden').on('click', function() {
        $('.faq-row').hide();
        $('.faq-row[data-visible="0"]').show();
        
        // Update active states
        $(this).addClass('active').removeClass('btn-outline-secondary').addClass('btn-secondary');
        $('#filterVisible').removeClass('active').removeClass('btn-outline-info').addClass('btn-outline-info');
        $('#filterAll').removeClass('active').removeClass('btn-outline-primary').addClass('btn-outline-primary');
    });
    
    $('#filterAll').on('click', function() {
        $('.faq-row').show();
        
        // Update active states
        $(this).addClass('active').removeClass('btn-outline-primary').addClass('btn-primary');
        $('#filterVisible').removeClass('active').removeClass('btn-outline-info').addClass('btn-outline-info');
        $('#filterHidden').removeClass('active').removeClass('btn-outline-secondary').addClass('btn-outline-secondary');
    });
    
    /* ============================================================
     | TOGGLE VISIBILITY
     ============================================================ */
    $(document).on('click', '.toggle-visibility', function () {

        var button = $(this);
        var id = button.data('id');
        var currentVisible = button.data('visible');
        var title = button.data('title');

        $('#record').val(id);
        $('#status').val(currentVisible);
        $('#visibilityItemDetails').text(title);

        $('#myModalVisible').modal('show');
    });

    $('.changeVisibility').on('click', function () {

        var id = $('#record').val();
        var currentVisible = $('#status').val();

        var button = $('.toggle-visibility[data-id="' + id + '"]');

        $('#dm-loader').fadeIn(200);

        $.ajax({
            url: '{{ route("admin.marketing.faqs.toggle-visibility") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: id,
                visible: currentVisible == 1 ? 0 : 1
            },
            success: function(response) {

                if (response.success) {

                    button.data('visible', response.new_visible);

                    if (response.new_visible) {
                        button.removeClass('btn-danger')
                              .addClass('btn-success')
                              .html('<i class="fa fa-eye mr-1"></i> Visível');
                        button.closest('tr').attr('data-visible', '1');
                    } else {
                        button.removeClass('btn-success')
                              .addClass('btn-danger')
                              .html('<i class="fa fa-eye-slash mr-1"></i> Oculto');
                        button.closest('tr').attr('data-visible', '0');
                    }

                    updateStats();
                    toast.success('Estado alterado com sucesso!', 'Sucesso');

                    $('#myModalVisible').modal('hide');
                }

                $('#dm-loader').fadeOut(200);
            },
            error: function(xhr) {
                toast.error('Erro ao alterar o estado', 'Erro');
                $('#dm-loader').fadeOut(200);
            }
        });

    });
    
    /* ============================================================
     | DELETE MODAL HANDLER
     ============================================================ */
    $(document).on('click', '.delete-item', function() {
        var id = $(this).data('id');
        var title = $(this).data('title');
        var topic = $(this).data('topic'); // 'banner' ou 'faq'
        var questionsCount = $(this).data('questions') || 0; // Para FAQs

        $('#record').val(id);
        $('#deleteTopic').val(topic);

        // Reset do modal
        $('#questionsWarning').hide();
        $('#bannerWarning').hide();
        $('#reassignContainer').hide();
        $('#questionsOptions').hide();
        $('#deleteItemDetails').text('');
        $('#confirmDeleteBtn').removeClass('btn-danger btn-warning').addClass('btn-danger');
        $('#confirmDeleteBtn').html('<i class="fas fa-trash-alt mr-1"></i> Confirmar Eliminação');
        $('#deleteModalHeader').text('Confirmação de Eliminação');
        $('#deleteIcon').removeClass('text-danger text-warning').addClass('text-danger');

        if (topic === 'faq') {
            // Configurar para FAQ
            $('#deleteQuestion').text(`Tem a certeza que deseja eliminar a categoria "${title}"?`);

            if (questionsCount > 0) {
                // Tem perguntas associadas
                $('#questionsCount').text(questionsCount);
                $('#questionsWarning').show();
                $('#questionsOptions').show();
                $('#deleteItemDetails').text(`Esta categoria contém ${questionsCount} pergunta(s) associada(s).`);
                $('#confirmDeleteBtn').removeClass('btn-danger').addClass('btn-warning');
                $('#confirmDeleteBtn').html('<i class="fas fa-exclamation-triangle mr-1"></i> Eliminar com Perguntas');
                $('#deleteModalHeader').text('Atenção: Categoria com Perguntas');
                $('#deleteIcon').removeClass('text-danger').addClass('text-warning');
                $('#deleteIconContainer .fa-exclamation-circle').removeClass('fa-exclamation-circle').addClass('fa-exclamation-triangle');

                // Carregar categorias para reassign
                loadCategoriesForReassign(id);
            } else {
                // Sem perguntas, eliminação simples
                $('#deleteItemDetails').text('Esta ação não pode ser desfeita.');
                $('#bannerWarning').show();
            }
        } else {
            // Configurar para Banner
            $('#deleteQuestion').text(`Tem a certeza que deseja eliminar o banner "${title}"?`);
            $('#deleteItemDetails').text('Esta ação não pode ser desfeita.');
            $('#bannerWarning').show();
        }

        $('#myModalDeleteFaq').modal('show');
    });

    // Carregar categorias para reassign
    function loadCategoriesForReassign(currentId) {
        $.ajax({
            url: '{{ route("admin.marketing.faqs.categories") }}',
            method: 'GET',
            data: {
                exclude_id: currentId
            },
            success: function(response) {
                var select = $('#targetCategory');
                select.empty();
                select.append('<option value="">Selecione uma categoria</option>');

                response.categories.forEach(function(cat) {
                    select.append(`<option value="${cat.id}">${cat.name}</option>`);
                });
            }
        });
    }

    // Mostrar/esconder selector de categoria
    $('input[name="deleteOption"]').on('change', function() {
        if ($(this).val() === 'reassign') {
            $('#reassignContainer').slideDown(200);
            $('#confirmDeleteBtn').text('Mover Perguntas e Eliminar');
            $('#confirmDeleteBtn').removeClass('btn-danger btn-warning').addClass('btn-info');
        } else {
            $('#reassignContainer').slideUp(200);
            if ($(this).val() === 'delete_all') {
                $('#confirmDeleteBtn').text('Eliminar Tudo');
                $('#confirmDeleteBtn').removeClass('btn-info btn-warning').addClass('btn-danger');
            } else {
                $('#confirmDeleteBtn').text('Cancelar Eliminação');
                $('#confirmDeleteBtn').removeClass('btn-info btn-danger').addClass('btn-secondary');
            }
        }
    });

    // Confirmação de eliminação
    $('#confirmDeleteBtn').on('click', function() {
        var id = $('#record').val();
        var topic = $('#deleteTopic').val();
        var option = $('input[name="deleteOption"]:checked').val();
        var targetCategory = $('#targetCategory').val();

        if (topic === 'faq' && option === 'reassign' && !targetCategory) {
            toast.warning('Selecione uma categoria de destino');
            return;
        }

        $('#dm-loader').fadeIn(200);
        $('#myModalDeleteFaq').modal('hide');

        var url = '{{ route("admin.marketing.faqs.destroy", ":id") }}'.replace(':id', id);

        $.ajax({
            url: url,
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}',
                delete_option: option,
                target_category: targetCategory
            },
            success: function(response) {
                $('#dm-loader').fadeOut(200);
                if (response.success) {
                    toast.success(response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    toast.error(response.message);
                }
            },
            error: function(xhr) {
                $('#dm-loader').fadeOut(200);
                toast.error('Erro ao eliminar');
            }
        });
    });        
    
    /* ============================================================
     | SORTABLE DRAG AND DROP
     ============================================================ */
    var tableBody = document.querySelector('#faqTable tbody');
    if (tableBody) {
        var sortable = new Sortable(tableBody, {
            handle: '.sort-handle',
            animation: 150,
            onEnd: function(evt) {
                var ids = [];
                $('#faqTable tbody tr').each(function() {
                    var id = $(this).find('.delete-item').data('id');
                    if (id) ids.push(id);
                });
                
                $('#dm-loader').fadeIn(200);
                
                $.ajax({
                    url: '{{ route("admin.marketing.faqs.reorder") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        order: ids
                    },
                    success: function(response) {
                        if (response.success) {
                            // Update sort badges with new order
                            $('#faqTable tbody tr').each(function(index) {
                                $(this).find('.sort-badge').html(
                                    '<i class="fas fa-sort mr-1"></i> ' + (index + 1)
                                );
                            });
                            toast.success('Ordem atualizada com sucesso!', 'Sucesso');
                        }
                        $('#dm-loader').fadeOut(200);
                    },
                    error: function(xhr) {
                        console.error('Erro:', xhr);
                        toast.error('Erro ao reordenar categorias', 'Erro');
                        $('#dm-loader').fadeOut(200);
                    }
                });
            }
        });
    }
    
    /* ============================================================
     | UPDATE STATS
     ============================================================ */
    function updateStats() {
        var visibleCount = $('.faq-row[data-visible="1"]').length;
        var hiddenCount = $('.faq-row[data-visible="0"]').length;
        
        $('#visibleCount').text(visibleCount);
        $('#hiddenCount').text(hiddenCount);
        
        // Update cards
        $('.tile_stats_count').eq(0).find('.count').text(visibleCount + hiddenCount);
        $('.tile_stats_count').eq(3).find('.count').text(visibleCount);
    }
    
    /* ============================================================
     | TOOLTIP INIT
     ============================================================ */
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
@endpush

@endsection