@extends('donamarmita-admin')
@section('title', 'Packs - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fa fa-cube"></i> Packs</h1>
            <p class="text-muted">Gere os packs disponíveis na 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') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.products.index') }}">Produtos</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Packs</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row tile_count">
        <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-cube text-primary"></i> Total de Packs</span>
            <div class="count text-primary">{{ $totalPacks }}</div>
            <span class="count_bottom">
                {{ $activePacks }} ativos
            </span>
        </div>

        <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-eye" style="color: #1ABB9C;"></i> Packs Visíveis</span>
            <div class="count" style="color: #1ABB9C;">{{ $visiblePacks }}</div>
            <span class="count_bottom">
                {{ $totalPacks > 0 ? round(($visiblePacks/$totalPacks)*100) : 0 }}% do total
            </span>
        </div>

        <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-star" style="color: #F39C12;"></i> Em Destaque</span>
            <div class="count" style="color: #F39C12;">{{ $highlightedPacks }}</div>
            <span class="count_bottom">
                packs destacados
            </span>
        </div>

        <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-clock" style="color: #3498DB;"></i> Pendentes</span>
            <div class="count" style="color: #3498DB;">{{ $pendingPacks }}</div>
            <span class="count_bottom">
                aguardam aprovação
            </span>
        </div>

        @if(isset($bestSellers) && $bestSellers->count() > 0)
        @foreach($bestSellers as $index => $pack)
        @php
            $colors = ['#E74C3C', '#9B59B6', '#1ABC9C'];
            $color = $colors[$index % count($colors)];
        @endphp
        <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-trophy" style="color: {{ $color }};"></i> TOP {{ $index + 1 }}</span>
            <div class="count" style="text-align: center;">
                @if($pack->pro_img)
                <img src="{{ asset('images/product/' . $pack->pro_img) }}" 
                     alt="{{ $pack->pro_description_pt }}"
                     class="img-circle" 
                     style="width: 80px; height: 80px; object-fit: cover; border: 2px solid {{ $color }};"
                     onerror="this.onerror=null;this.src='{{ asset('images/product/default-product.png') }}';">
                @else
                <div class="img-circle" style="width: 80px; height: 80px; background-color: {{ $color }}; border: 2px solid {{ $color }}; display: inline-flex; align-items: center; justify-content: center;">
                    <i class="fa fa-cube fa-2x text-white"></i>
                </div>
                @endif
            </div>
            <span class="count_bottom" style="font-size: 11px;">
                {{ Str::limit($pack->pro_description_pt, 15) }}
            </span>
        </div>
        @endforeach
        @endif
    </div>

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

    <!-- Alert Messages -->
    @if(session('success'))
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong><i class="fa fa-check-circle"></i> Sucesso!</strong> {{ session('success') }}
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong><i class="fa fa-exclamation-circle"></i> Erro!</strong> {{ session('error') }}
            </div>
        </div>
    </div>
    @endif

    <!-- Filters -->
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h5><i class="fa fa-filter"></i> Filtros</h5>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="filterCategory">Categoria:</label>
                                <select id="filterCategory" class="form-control">
                                    <option value="all">Todas as Categorias</option>
                                    @foreach($categories as $category)
                                    <option value="{{ $category->cat_id }}">{{ $category->cat_description_pt }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="filterStatus">Estado:</label>
                                <select id="filterStatus" class="form-control">
                                    <option value="all">Todos os Estados</option>
                                    <option value="active">Ativos</option>
                                    <option value="inactive">Inativos</option>
                                    <option value="highlighted">Em Destaque</option>
                                    <option value="pending">Pendentes</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="filterCountry">País:</label>
                                <select id="filterCountry" class="form-control">
                                    <option value="all">Todos os Países</option>
                                    <option value="PT">Portugal</option>
                                    <option value="ES">Espanha</option>
                                    <option value="FR">França</option>
                                    <option value="EN">Inglaterra</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <div>
                                    <button type="button" id="clearFilters" class="btn btn-secondary">
                                        <i class="fa fa-eraser"></i> Limpar Filtros
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Card -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-list"></i> Lista de Packs</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a href="{{ route('admin.packs.create') }}" class="btn btn-primary btn-sm">
                                <i class="fa fa-plus"></i> Adicionar Pack
                            </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">
                    <!-- AJAX Response -->
                    <div id="ajax-response" style="display: none;"></div>

                    @if($packs->isEmpty())
                    <div class="text-center py-5">
                        <i class="fa fa-cube fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">Nenhum pack encontrado</h4>
                        <p class="text-muted">Comece adicionando um novo pack</p>
                        <a href="{{ route('admin.packs.create') }}" class="btn btn-primary">
                            <i class="fa fa-plus"></i> Adicionar Primeiro Pack
                        </a>
                    </div>
                    @else
                    <!-- Responsive Table -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover jambo_table" id="packsTable">
                            <thead class="thead-dark">
                                <tr class="headings">
                                    <th class="column-title" style="width: 10%;">Imagem</th>
                                    <th class="column-title" style="width: 25%;">Descrição</th>
                                    <th class="column-title text-center" style="width: 15%;">Categoria</th>
                                    <th class="column-title text-center" style="width: 10%;">Estado</th>
                                    <th class="column-title text-center" style="width: 10%;">País</th>
                                    <th class="column-title text-center" style="width: 10%;">Visualizações</th>
                                    <th class="column-title text-center" style="width: 20%;">Ações</th>
                                </tr>
                            </thead>
                            <!-- SEM TBODY (DataTables preenche via AJAX) -->
                        </table>
                    </div>
                    @endif  
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Visibility Modal -->
<div class="modal fade" id="visibilityModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-eye"></i> Alterar Visibilidade</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="visibilityMessage"></p>
                <form id="visibilityForm" method="POST">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="pro_visible" id="newVisibility">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="confirmVisibilityChange">
                    <i class="fa fa-check"></i> Confirmar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Highlight Modal -->
<div class="modal fade" id="highlightModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-star"></i> Alterar Destaque</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="highlightMessage"></p>
                <form id="highlightForm" method="POST">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="pro_highlight" id="newHighlight">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn-warning" id="confirmHighlightChange">
                    <i class="fa fa-star"></i> Confirmar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger"><i class="fa fa-exclamation-triangle"></i> Confirmar Eliminação</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="deleteMessage"></p>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn-danger" id="confirmDelete">
                    <i class="fa fa-trash"></i> Eliminar
                </button>
            </div>
        </div>
    </div>
</div>

<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>


@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Tooltips
    $('[data-toggle="tooltip"]').tooltip();
    
    
    const packsTable = $('#packsTable')
        .on('processing.dt', function (e, settings, processing) {
            $('#dm-loader').toggle(processing);
        })
        .DataTable({
            processing: true,
            serverSide: true,
            paging: true,
            pageLength: 20,
            lengthMenu: [[20, 40, 60, 100], [20, 40, 60, 100]],
            searching: true,
            ordering: true,
            ajax: {
                url: '{{ route("admin.packs.data") }}',
                type: 'GET',
                data: function (d) {
                    d.category = $('#filterCategory').val();
                    d.status   = $('#filterStatus').val();
                    d.country  = $('#filterCountry').val();
                }
            },
            columns: [
                { data: 'image',       orderable: false, searchable: false },
                { data: 'description' },
                { data: 'category' },
                { data: 'status' },
                { data: 'country' },
                { data: 'views' },
                { data: 'actions',     orderable: false, searchable: false }
            ],
            columnDefs: [
                { targets: [2,3,4,5,6], className: 'text-center' },
                { targets: [0],         className: 'text-center', width: '10%' },
                { targets: [1],         width: '25%' }
            ],
            language: {
                url: '/vendor/datatables/Portuguese.json',
                search: '',
                processing: ''
            },
            initComplete: function () {
                // ✅ aqui já existe o input de pesquisa
                const $input = $(this.api().table().container())
                    .find('div.dataTables_filter input');

                $input
                    .attr('placeholder', 'Pesquisar pack...')
                    .addClass('form-control');
            },
            drawCallback: function () {
                $('[data-toggle="tooltip"]').tooltip();
            }
        });

    $('#packsTable_filter input')
        .attr('placeholder', 'Pesquisar pack...')
        .addClass('form-control');

    // Como DataTables injeta linhas via AJAX, eventos têm de ser delegated:
    $(document).on('click', '.btn-toggle-visibility', function () {
        var packId = $(this).data('id');
        var packTitle = $(this).data('title');
        var isVisible = $(this).data('current');
        var newStatus = isVisible == '1' ? '0' : '1';
        var newStatusText = isVisible == '1' ? 'ocultar' : 'tornar visível';

        $('#visibilityMessage').html('Deseja <strong>' + newStatusText + '</strong> o pack <strong>"' + packTitle + '"</strong>?');
        $('#newVisibility').val(newStatus);
        $('#visibilityForm').attr('action', '/donamarmita-admin/products/packs/' + packId + '/visibility');
        
        $('#visibilityModal').modal('show');
    });

    $(document).on('click', '.btn-toggle-highlight', function () {
        var packId = $(this).data('id');
        var packTitle = $(this).data('title');
        var isHighlighted = $(this).data('current');
        var newStatus = isHighlighted == '1' ? '0' : '1';
        var newStatusText = isHighlighted == '1' ? 'remover destaque' : 'destacar';

        $('#highlightMessage').html('Deseja <strong>' + newStatusText + '</strong> o pack <strong>"' + packTitle + '"</strong>?');
        $('#newHighlight').val(newStatus);
        $('#highlightForm').attr('action', '/donamarmita-admin/products/packs/' + packId + '/highlight');
        
        $('#highlightModal').modal('show');
    });

    $(document).on('click', '.btn-delete', function () {
        var packId = $(this).data('id');
        var packTitle = $(this).data('title');
        
        $('#deleteMessage').html('Tem a certeza que deseja eliminar o pack <strong>"' + packTitle + '"</strong>?<br><small class="text-danger">Esta ação não pode ser desfeita.</small>');
        $('#deleteForm').attr('action', '/donamarmita-admin/products/packs/' + packId);
        
        $('#deleteModal').modal('show');
    });

    // Pesquisa em tempo real
    $('#searchPack').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $('.pack-row').each(function() {
            var title = $(this).data('title');
            var rowText = $(this).text().toLowerCase();
            $(this).toggle(title.includes(value) || rowText.includes(value));
        });
    });

    // Trigger reload when filters change
    $('#filterCategory, #filterStatus, #filterCountry').on('change', function () {
        packsTable.ajax.reload();
    });

    $('#clearFilters').on('click', function () {
        $('#filterCategory, #filterStatus, #filterCountry').val('all');
        packsTable.ajax.reload();
    });

    // Confirm visibility change
    $('#confirmVisibilityChange').click(function() {
        $('#visibilityForm').submit();
    });

    // Confirm highlight change
    $('#confirmHighlightChange').click(function() {
        $('#highlightForm').submit();
    });

    // Confirm delete
    $('#confirmDelete').click(function() {
        $('#deleteForm').submit();
    });

    // Auto-hide alerts
    setTimeout(function() {
        $('.alert').alert('close');
    }, 5000);
});
</script>

<style>
.pack-row:hover {
    background-color: rgba(42, 63, 84, 0.05) !important;
}

.img-thumbnail {
    border-radius: 8px !important;
}

.badge {
    padding: 5px 10px;
    font-size: 12px;
}

.btn-group .btn {
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

@media (max-width: 768px) {
    .btn-group .btn {
        padding: 2px 5px;
        font-size: 10px;
        margin-bottom: 2px;
    }
    
    .badge {
        font-size: 10px;
        padding: 3px 6px;
    }
}
</style>
@endpush