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

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="fas fa-images text-primary"></i> 
                @switch($type)
                    @case('main')
                        Banner Principal
                        @break
                    @case('secondary')
                        Banner Secundário
                        @break
                    @case('fit')
                        Banner Fit
                        @break
                    @case('vegetarian')
                        Banner Vegetariano
                        @break
                    @default
                        Gestão de Banner
                @endswitch
            </h1>
            <p class="text-muted">
                @switch($type)
                    @case('main')
                        Banner principal exibido no topo da página inicial, utilizado para destacar mensagens estratégicas e conteúdos de maior relevância.
                        @break

                    @case('secondary')
                        Imagens promocionais apresentadas no menu principal de categorias, reforçando áreas específicas da plataforma.
                        @break

                    @case('fit')
                        Banners associados às refeições regulares da plataforma, representando a oferta padrão disponível aos clientes.
                        @break

                    @case('vegetarian')
                        Banners dedicados à categoria de refeições vegetarianas, promovendo opções equilibradas e nutritivas.
                        @break

                    @default
                        Tipo de banner não definido.
                @endswitch
            </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">
                        <a href="#">
                            <i class="fas fa-images mr-1"></i> Marketing
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        @switch($type)
                            @case('main') Banner Principal @break
                            @case('secondary') Banner Secundário @break
                            @case('fit') Banner Fit @break
                            @case('vegetarian') Banner Vegetariano @break
                        @endswitch
                    </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-images text-primary"></i> Total de Banners
            </span>
            <div class="count green">{{ $banners->count() }}</div>
            <span class="count_bottom">
                <i class="fas fa-eye mr-1"></i> <span id="visibleCount">{{ $banners->where('ban_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-eye text-success"></i> Banners Visíveis
            </span>
            <div class="count">{{ $banners->where('ban_visible', 1)->count() }}</div>
            <span class="count_bottom">
                <i class="fas fa-eye-slash mr-1"></i> <span id="hiddenCount">{{ $banners->where('ban_visible', 0)->count() }}</span> ocultos
            </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-info"></i> Ordenação
            </span>
            <div class="count">{{ $banners->min('ban_sort') ?? 0 }} - {{ $banners->max('ban_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-link text-warning"></i> Com CTA
            </span>
            <div class="count">{{ $banners->where('ban_cta_url', '!=', null)->count() }}</div>
            <span class="count_bottom">
                <i class="fas fa-external-link-alt mr-1"></i> com link
            </span>
        </div>
    </div>

    <!-- Main Panel -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <!-- Filter Buttons (acima do x_panel) -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        @php
                            $currentType = request()->route('type') ?? $type ?? null;
                            $visibility = request()->get('visibility');
                        @endphp

                        <div class="btn-group" role="group">

                            <a href="{{ route('admin.marketing.banners.index', ['type' => 'main']) }}"
                               class="btn btn-sm {{ $currentType === 'main' && !$visibility ? 'btn-primary' : 'btn-outline-primary' }}">
                                <i class="fa fa-sliders-h"></i> Principais
                            </a>

                            <a href="{{ route('admin.marketing.banners.index', ['type' => 'secondary']) }}"
                               class="btn btn-sm {{ $currentType === 'secondary' && !$visibility ? 'btn-success' : 'btn-outline-success' }}">
                                <i class="fa fa-layer-group"></i> Secundários
                            </a>

                            <a href="{{ route('admin.marketing.banners.index', ['type' => 'fit']) }}"
                               class="btn btn-sm {{ $currentType === 'fit' && !$visibility ? 'btn-warning' : 'btn-outline-warning' }}">
                                <i class="fa fa-dumbbell"></i> Fit
                            </a>

                            <a href="{{ route('admin.marketing.banners.index', ['type' => 'vegetarian']) }}"
                               class="btn btn-sm {{ $currentType === 'vegetarian' && !$visibility ? 'btn-success' : 'btn-outline-success' }}">
                                <i class="fa fa-leaf"></i> Vegetariano
                            </a>

                            <a href="{{ $visibility === '0'
                                    ? route('admin.marketing.banners.index', ['type' => $currentType])
                                    : route('admin.marketing.banners.index', ['type' => $currentType, 'visibility' => 0]) }}"
                               class="btn btn-sm {{ $visibility === '0' ? 'btn-danger' : 'btn-outline-danger' }}">
                                <i class="fa fa-eye-slash"></i> Invisíveis
                            </a>

                        </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 @if($type == 'main') fa-sliders-h @else fa-layer-group @endif mr-2"></i>
                                    Lista de Banners
                                    <span class="badge badge-info ml-2">{{ $banners->count() }} registos</span>
                                </h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li>
                                        <a href="{{ route('admin.marketing.banners.create', ['type' => $type]) }}" class="btn btn-primary btn-sm">
                                            <i class="fa fa-plus"></i> Novo Banner
                                        </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('message'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    {{ session('message') }}
                                    <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="{{ $type }}">

                                    <table class="table table-hover jambo_table bulk_action" id="bannerTable" style="width:100%">
                                        <thead class="thead-light">
                                            <tr>
                                                <th width="150" class="text-center align-middle">Imagem</th>
                                                <th class="align-middle">Título / Conteúdo</th>
                                                <th width="100" class="text-center align-middle">Estado</th>
                                                <th width="150" class="text-center align-middle">Ações</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($banners->sortBy('ban_sort') as $banner)
                                            <tr class="banner-row" data-visible="{{ $banner->ban_visible }}">
                                                <td class="text-center">
                                                    <div class="banner-image-container">
                                                        @if($banner->ban_img)
                                                        <img src="{{ $banner->image_url }}" 
                                                             alt="{{ $banner->ban_txt1_pt }}" 
                                                             class="img-thumbnail banner-thumb"
                                                             style="max-height: 60px; max-width: 100px; border-radius: 6px;">

                                                        @else
                                                        <div class="no-image-placeholder">
                                                            <i class="fas fa-image text-muted fa-2x"></i>
                                                            <small class="d-block text-muted">Sem imagem</small>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="banner-content-preview">
                                                        <!-- Título (locale atual) -->
                                                        @if($banner->ban_txt1_pt)
                                                        <strong class="d-block" style="font-size: 16px; color: #333;">
                                                            <i class="fas fa-heading mr-1 text-primary"></i> {{ $banner->ban_txt1_pt }}
                                                        </strong>
                                                        @endif

                                                        <!-- Subtítulo (locale atual) -->
                                                        @if($banner->ban_txt2_pt)
                                                        <small class="text-muted d-block mt-1">
                                                            <i class="fas fa-quote-right mr-1"></i> {{ Str::limit($banner->ban_txt2_pt, 60) }}
                                                        </small>
                                                        @endif

                                                        <!-- Idiomas disponíveis -->
                                                        <div class="mt-2">
                                                            @if($banner->ban_txt1_pt || $banner->ban_txt2_pt)
                                                            <span class="badge badge-light" data-toggle="tooltip" title="PT: {{ $banner->ban_txt1_pt ?? '' }} {{ $banner->ban_txt2_pt ?? '' }}">
                                                                <i class="flag-icon flag-icon-pt"></i>
                                                            </span>
                                                            @endif
                                                            @if($banner->ban_txt1_en || $banner->ban_txt2_en)
                                                            <span class="badge badge-light" data-toggle="tooltip" title="EN: {{ $banner->ban_txt1_en ?? '' }} {{ $banner->ban_txt2_en ?? '' }}">
                                                                <i class="flag-icon flag-icon-gb"></i>
                                                            </span>
                                                            @endif
                                                            @if($banner->ban_txt1_es || $banner->ban_txt2_es)
                                                            <span class="badge badge-light" data-toggle="tooltip" title="ES: {{ $banner->ban_txt1_es ?? '' }} {{ $banner->ban_txt2_es ?? '' }}">
                                                                <i class="flag-icon flag-icon-es"></i>
                                                            </span>
                                                            @endif
                                                            @if($banner->ban_txt1_fr || $banner->ban_txt2_fr)
                                                            <span class="badge badge-light" data-toggle="tooltip" title="FR: {{ $banner->ban_txt1_fr ?? '' }} {{ $banner->ban_txt2_fr ?? '' }}">
                                                                <i class="flag-icon flag-icon-fr"></i>
                                                            </span>
                                                            @endif
                                                        </div>

                                                        <!-- Tipo de Banner (para referência) -->
                                                        <div class="mt-2">
                                                            <span class="badge badge-secondary">
                                                                <i class="fas fa-tag mr-1"></i> {{ $banner->ban_type ?? 'sem tipo' }}
                                                            </span>
                                                        </div>

                                                        <!-- CTA Link -->
                                                        @if($banner->ban_cta_url)
                                                        <div class="mt-2 small">
                                                            <i class="fas fa-link text-info"></i>
                                                            <a href="{{ $banner->ban_cta_url }}" target="_blank" class="text-info">
                                                                {{ Str::limit($banner->ban_cta_url, 40) }}
                                                            </a>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td class="text-center align-middle">
                                                    <button type="button"
                                                            class="btn btn-sm btn-{{ $banner->ban_visible ? 'success' : 'danger' }} toggle-visibility"
                                                            data-id="{{ $banner->ban_id }}"
                                                            data-visible="{{ $banner->ban_visible }}"
                                                            data-topic="banner"
                                                            data-title="{{ $banner->ban_txt1_pt }}"
                                                            data-toggle="tooltip"
                                                            title="Clique para alterar o estado">
                                                        <i class="fa {{ $banner->ban_visible ? 'fa-eye' : 'fa-eye-slash' }} mr-1"></i>
                                                        {{ $banner->ban_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.banners.edit', [$type, $banner->ban_id]) }}" 
                                                           class="btn btn-outline-info" 
                                                           data-toggle="tooltip" 
                                                           title="Editar banner">
                                                            <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='{{ $banner->ban_txt1_pt }}'
                                                                data-id='{{ $banner->ban_id }}'
                                                                data-topic='banner'
                                                                title="Eliminar banner">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                @if($banners->isEmpty())
                                <div class="text-center py-5">
                                    <i class="fas fa-images fa-4x text-muted mb-3"></i>
                                    <h5 class="text-muted">Nenhum banner encontrado</h5>
                                    <p class="text-muted">Clique em "Adicionar Banner" para criar o primeiro.</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.banner.partial.visibility')
@include('admin.marketing.banner.partial.delete')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/flag-icon-css/css/flag-icons.min.css" rel="stylesheet">
<style>
/* Banner Thumbnail */
.banner-image-container {
    position: relative;
    display: inline-block;
}

.banner-thumb {
    border: 2px solid #f0f0f0;
    transition: all 0.3s ease;
    object-fit: cover;
}

.banner-thumb:hover {
    transform: scale(1.05);
    border-color: #26B99A;
    box-shadow: 0 5px 15px rgba(38, 185, 154, 0.2);
}

.no-image-placeholder {
    width: 80px;
    height: 60px;
    background-color: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Content Preview */
.banner-content-preview {
    background-color: #fafafa;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid #26B99A;
}

.banner-content-preview small.text-muted {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-content-preview strong {
    color: #333;
    margin: 3px 0;
}

/* 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;
}

/* Table Row Hover */
.banner-row:hover {
    background-color: rgba(38, 185, 154, 0.05);
}

.banner-row:hover .banner-thumb {
    border-color: #26B99A;
}

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

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

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

.sort-handle:hover {
    background-color: #26B99A;
    color: white;
    border-color: #26B99A;
}

/* Panel Toolbox Buttons */
.panel_toolbox .btn-outline-info,
.panel_toolbox .btn-outline-secondary,
.panel_toolbox .btn-outline-primary {
    margin-right: 5px;
    padding: 3px 10px;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .panel_toolbox {
        float: none !important;
        text-align: left;
        margin-top: 10px;
    }
    
    .panel_toolbox li {
        display: inline-block;
    }
    
    .banner-thumb {
        max-height: 40px;
        max-width: 60px;
    }
    
    .banner-content-preview {
        padding: 6px 8px;
    }
    
    .btn-group .btn {
        padding: 3px 6px;
    }
}
</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() {
        $('.banner-row').hide();
        $('.banner-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() {
        $('.banner-row').hide();
        $('.banner-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() {
        $('.banner-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.banners.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 
     ============================================================ */
    $(document).on('click', '.delete-item', function () {

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

        $('#record').val(id);
        $('#deleteItemDetails').html('Banner: <strong>' + title + '</strong>');

        $('#myModalDelete').modal('show');
    });
    
    $(document).on('click', '.delete-banner', function () {
        var id = $('#record').val();
        var row = $('button.delete-item[data-id="' + id + '"]').closest('tr');

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

        $.ajax({
            url: '{{ route("admin.marketing.banners.destroy", ":id") }}'.replace(':id', id),
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function (response) {

                if (response.success) {

                    row.fadeOut(300, function () {
                        $(this).remove();
                    });

                    toast.success('Banner eliminado com sucesso!', 'Sucesso');

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

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

    });
    
    /* ============================================================
     | SORTABLE DRAG AND DROP
     ============================================================ */
    var tableBody = document.querySelector('#bannerTable tbody');
    if (tableBody) {
        var sortable = new Sortable(tableBody, {
            handle: '.sort-handle',
            animation: 150,
            onEnd: function(evt) {
                var ids = [];
                $('#bannerTable 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.banners.reorder") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: ids,
                        type: $('#currentType').val()
                    },
                    success: function(response) {
                        if (response.success) {
                            // Update sort badges with new order
                            $('#bannerTable tbody tr').each(function(index) {
                                $(this).find('.badge-light').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 banners', 'Erro');
                        $('#dm-loader').fadeOut(200);
                    }
                });
            }
        });
    }
    
    /* ============================================================
     | UPDATE STATS
     ============================================================ */
    function updateStats() {
        var visibleCount = $('.banner-row[data-visible="1"]').length;
        var hiddenCount = $('.banner-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(1).find('.count').text(visibleCount);
    }
    
    /* ============================================================
     | TOOLTIP INIT
     ============================================================ */
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
@endpush

@endsection