@extends('donamarmita-admin')
@section('title', 'Templates de Vouchers - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="fas fa-palette text-primary"></i> 
                Templates de Vouchers
            </h1>
            <p class="text-muted">
                Gestão dos templates para geração de imagens de vouchers
            </p>
        </div>
        <div class="title_right">
            <div class="btn-group pull-right" role="group">
                <a href="{{ route('admin.marketing.vouchers.images.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Voltar à Lista
                </a>
            </div>
        </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="{{ route('admin.marketing.vouchers.images.index') }}">
                            <i class="fas fa-images mr-1"></i> Imagens
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="fas fa-palette mr-1"></i> Templates
                    </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-palette text-primary"></i> Total de Templates
            </span>
            <div class="count green">{{ $templates->count() }}</div>
            <span class="count_bottom">
                <i class="fas fa-check-circle mr-1"></i> <span id="activeCount">{{ $templates->where('cit_active', 1)->count() }}</span> ativos
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-images text-success"></i> Imagens Geradas
            </span>
            <div class="count">{{ $totalImages }}</div>
            <span class="count_bottom">
                <i class="fas fa-chart-line mr-1"></i> usando estes templates
            </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-info"></i> Template Mais Usado
            </span>
            <div class="count">{{ $mostUsedTemplate->cit_name ?? '—' }}</div>
            <span class="count_bottom">
                <i class="fas fa-download mr-1"></i> {{ $mostUsedTemplate->usage_count ?? 0 }} utilizaçõ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-calendar-alt text-warning"></i> Última Atualização
            </span>
            <div class="count">{{ $lastUpdate->updated_at_human ?? 'N/A' }}</div>
            <span class="count_bottom">
                <i class="fas fa-clock mr-1"></i> {{ $lastUpdate->updated_at_formatted ?? '—' }}
            </span>
        </div>
    </div>

    <!-- Main Panel -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="btn-group" role="group">
                            <!-- Quick Filter -->
                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <button class="btn btn-sm btn-outline-info" id="filterActive">
                                        <i class="fas fa-check-circle mr-1"></i> Ativos
                                    </button>
                                </li>
                                <li>
                                    <button class="btn btn-sm btn-outline-secondary" id="filterInactive">
                                        <i class="fas fa-times-circle mr-1"></i> Inativos
                                    </button>
                                </li>
                                <li>
                                    <button class="btn btn-sm btn-outline-primary" id="filterAll">
                                        <i class="fas fa-list mr-1"></i> Todos
                                    </button>
                                </li>
                            </ul>
                        </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>
                                    Templates de Vouchers
                                    <span class="badge badge-info ml-2">{{ $templates->count() }} registos</span>
                                </h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li>
                                        <a href="{{ route('admin.marketing.vouchers.templates.create') }}" class="btn btn-primary btn-sm setColor">
                                            <i class="fas fa-plus-circle mr-2"></i>
                                            Novo Template
                                        </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

                                <!-- Templates Grid -->
                                <div class="row">
                                    @forelse($templates as $template)
                                    <div class="col-md-4 col-sm-6 mb-4">
                                        <div class="card template-card h-100" data-active="{{ $template->cit_active ? 1 : 0 }}">
                                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                                <strong>{{ $template->cit_name }}</strong>
                                                <span class="badge badge-{{ $template->cit_active ? 'success' : 'danger' }}">
                                                    {{ $template->cit_active ? 'Ativo' : 'Inativo' }}
                                                </span>
                                            </div>

                                            <div class="card-body p-0">
                                                <!-- Template Preview -->
                                                <div class="template-preview" style="position: relative; min-height: 200px; background: #f5f5f5;">
                                                    @if($template->cit_background_image)
                                                    <img src="{{ asset('images/templates/' . $template->cit_background_image) }}" 
                                                         alt="{{ $template->cit_name }}"
                                                         class="img-fluid"
                                                         style="width: 100%; height: 200px; object-fit: cover;">

                                                    <!-- Preview do texto com as configurações -->
                                                    <div style="position: absolute; top: {{ $template->cit_text_position_y ?? 50 }}%; left: {{ $template->cit_text_position_x ?? 50 }}%; transform: translate(-50%, -50%); color: {{ $template->cit_font_color ?? '#000000' }}; font-size: {{ $template->cit_font_size ?? 24 }}px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">
                                                        EXEMPLO
                                                    </div>
                                                    @else
                                                    <div class="d-flex align-items-center justify-content-center" style="height: 200px;">
                                                        <i class="fas fa-image fa-3x text-muted"></i>
                                                    </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="card-body">
                                                <p class="text-muted small mb-2">
                                                    {{ $template->cit_description ?: 'Sem descrição' }}
                                                </p>

                                                <div class="row text-center">
                                                    <div class="col-6">
                                                        <small class="text-muted d-block">Fonte</small>
                                                        <span class="badge badge-light">{{ $template->cit_font_size ?? 24 }}px</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <small class="text-muted d-block">Cor</small>
                                                        <span class="badge badge-light" style="background: {{ $template->cit_font_color ?? '#000000' }}; width: 20px; height: 20px; border-radius: 50%;">&nbsp;</span>
                                                    </div>
                                                </div>

                                                <div class="row text-center mt-2">
                                                    <div class="col-6">
                                                        <small class="text-muted d-block">Posição X</small>
                                                        <span class="badge badge-light">{{ $template->cit_text_position_x ?? 50 }}%</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <small class="text-muted d-block">Posição Y</small>
                                                        <span class="badge badge-light">{{ $template->cit_text_position_y ?? 50 }}%</span>
                                                    </div>
                                                </div>

                                                @php
                                                    $usageCount = $template->images()->count();
                                                @endphp
                                                <div class="mt-2 text-center">
                                                    <span class="badge badge-info">
                                                        <i class="fas fa-images mr-1"></i> {{ $usageCount }} imagem{{ $usageCount != 1 ? 'ns' : '' }}
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="card-footer bg-transparent">
                                                <div class="btn-group btn-group-sm w-100" role="group">
                                                    <a href="{{ route('admin.marketing.vouchers.templates.edit', $template->cit_id) }}" 
                                                       class="btn btn-outline-info"
                                                       data-toggle="tooltip"
                                                       title="Editar Template">
                                                        <i class="fas fa-pencil-alt"></i>
                                                    </a>
                                                    <button type="button"
                                                            class="btn btn-outline-primary clone-template"
                                                            data-id="{{ $template->cit_id }}"
                                                            data-toggle="tooltip"
                                                            title="Duplicar Template">
                                                        <i class="fas fa-copy"></i>
                                                    </button>
                                                    <button type="button"
                                                            class="btn btn-outline-{{ $template->cit_active ? 'warning' : 'success' }} toggle-status"
                                                            data-id="{{ $template->cit_id }}"
                                                            data-active="{{ $template->cit_active }}"
                                                            data-toggle="tooltip"
                                                            title="{{ $template->cit_active ? 'Desativar' : 'Ativar' }}">
                                                        <i class="fas fa-{{ $template->cit_active ? 'ban' : 'check-circle' }}"></i>
                                                    </button>
                                                    <button type="button"
                                                            class="btn btn-outline-danger delete-template"
                                                            data-id="{{ $template->cit_id }}"
                                                            data-name="{{ $template->cit_name }}"
                                                            data-usage="{{ $usageCount }}"
                                                            data-toggle="tooltip"
                                                            title="Eliminar Template"
                                                            {{ $usageCount > 0 ? 'disabled' : '' }}>
                                                        <i class="fas fa-trash-alt"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <div class="col-12">
                                        <div class="text-center py-5">
                                            <i class="fas fa-palette fa-4x text-muted mb-3"></i>
                                            <h5 class="text-muted">Nenhum template encontrado</h5>
                                            <p class="text-muted">Clique em "Novo Template" para criar o primeiro.</p>
                                            <a href="{{ route('admin.marketing.vouchers.templates.create') }}" class="btn btn-primary mt-3">
                                                <i class="fas fa-plus-circle mr-2"></i>
                                                Novo Template
                                            </a>
                                        </div>
                                    </div>
                                    @endforelse
                                </div>

                                <!-- Pagination -->
                                @if(isset($templates) && $templates instanceof \Illuminate\Pagination\LengthAwarePaginator && $templates->hasPages())
                                <div class="row mt-4">
                                    <div class="col-md-12 text-center">
                                        {{ $templates->appends(request()->query())->links() }}
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação para Eliminar Template -->
<div class="modal fade" id="deleteTemplateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Confirmar Eliminação
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body text-center py-4">
                <i class="fas fa-palette fa-4x text-danger mb-3"></i>
                <p class="mb-2">
                    <strong id="deleteTemplateName"></strong>
                </p>
                <p class="text-muted">
                    Tem a certeza que deseja eliminar este template?<br>
                    <span class="text-danger">Esta ação não pode ser desfeita.</span>
                </p>
                <p id="deleteTemplateWarning" class="text-warning" style="display: none;">
                    <i class="fas fa-exclamation-circle mr-1"></i>
                    Este template tem <span id="usageCount"></span> imagem(ns) associada(s).
                </p>
                <input type="hidden" id="deleteTemplateId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times mr-1"></i> Cancelar
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteTemplate">
                    <i class="fas fa-trash-alt mr-1"></i> Eliminar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Duplicar Template -->
<div class="modal fade" id="cloneTemplateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="fas fa-copy mr-2"></i>
                    Duplicar Template
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body py-4">
                <div class="form-group">
                    <label class="font-weight-bold">Novo Nome</label>
                    <input type="text" class="form-control" id="cloneTemplateName" placeholder="Ex: Template Verão 2024">
                </div>
                <input type="hidden" id="cloneTemplateId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times mr-1"></i> Cancelar
                </button>
                <button type="button" class="btn btn-info" id="confirmCloneTemplate">
                    <i class="fas fa-copy mr-1"></i> Duplicar
                </button>
            </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>

@push('styles')
<style>
/* Template Card */
.template-card {
    transition: all 0.3s ease;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #26B99A;
}

.template-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e4e7ed;
    padding: 12px 15px;
}

.template-card .card-body {
    padding: 15px;
}

.template-card .card-footer {
    background-color: #fff;
    border-top: 1px solid #e4e7ed;
    padding: 12px 15px;
}

/* Template Preview */
.template-preview {
    position: relative;
    background-color: #f5f5f5;
    overflow: hidden;
    cursor: pointer;
}

.template-preview:hover::after {
    content: '\f06e';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    background: rgba(0,0,0,0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Status Badge */
.badge-success {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
}

.badge-danger {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
}

/* Tooltips */
[data-toggle="tooltip"] {
    cursor: pointer;
}

/* Disabled Buttons */
.btn-outline-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.setColor:hover{
    color: #000;
}

/* Responsive */
@media (max-width: 768px) {
    .template-card {
        margin-bottom: 20px;
    }
    
    .template-preview {
        min-height: 150px;
    }
    
    .btn-group {
        flex-wrap: wrap;
    }
    
    .btn-group .btn {
        flex: 1;
        margin-bottom: 5px;
    }
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    
    /* ============================================================
     | FILTER BUTTONS
     ============================================================ */
    function resetFilterButtons() {
        $('#filterActive').removeClass('btn-info active').addClass('btn-outline-info');
        $('#filterInactive').removeClass('btn-secondary active').addClass('btn-outline-secondary');
        $('#filterAll').removeClass('btn-primary active').addClass('btn-outline-primary');
    }

    $('#filterActive').on('click', function() {
        $('.template-card').hide();
        $('.template-card[data-active="1"]').show();

        resetFilterButtons();
        $(this).removeClass('btn-outline-info').addClass('btn-info active');
    });

    $('#filterInactive').on('click', function() {
        $('.template-card').hide();
        $('.template-card[data-active="0"]').show();

        resetFilterButtons();
        $(this).removeClass('btn-outline-secondary').addClass('btn-secondary active');
    });

    $('#filterAll').on('click', function() {
        $('.template-card').show();

        resetFilterButtons();
        $(this).removeClass('btn-outline-primary').addClass('btn-primary active');
    });

    /* ============================================================
     | TOGGLE STATUS
     ============================================================ */
    $(document).on('click', '.toggle-status', function() {
        var button = $(this);
        var id = button.data('id');
        var currentActive = button.data('active');
        
        $('#dm-loader').fadeIn(200);
        
        $.ajax({
            url: '{{ route("admin.marketing.vouchers.templates.toggle-status") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: id,
                active: currentActive ? 0 : 1
            },
            success: function(response) {
                if (response.success) {
                    var card = button.closest('.template-card');
                    card.data('active', response.new_active);
                    card.attr('data-active', response.new_active);
                    
                    var badge = card.find('.badge');
                    var statusBtn = card.find('.toggle-status');
                    
                    if (response.new_active) {
                        badge.removeClass('badge-danger').addClass('badge-success').text('Ativo');
                        statusBtn.removeClass('btn-outline-warning btn-outline-success').addClass('btn-outline-warning');
                        statusBtn.data('active', 1);
                        statusBtn.attr('data-active', 1);
                        statusBtn.find('i').removeClass('fa-ban fa-check-circle').addClass('fa-ban');
                        statusBtn.attr('title', 'Desativar');
                    } else {
                        badge.removeClass('badge-success').addClass('badge-danger').text('Inativo');
                        statusBtn.removeClass('btn-outline-warning btn-outline-success').addClass('btn-outline-success');
                        statusBtn.data('active', 0);
                        statusBtn.attr('data-active', 0);
                        statusBtn.find('i').removeClass('fa-ban fa-check-circle').addClass('fa-check-circle');
                        statusBtn.attr('title', 'Ativar');
                    }
                    
                    updateStats();
                    toast.success('Status alterado com sucesso!');
                }
                $('#dm-loader').fadeOut(200);
            },
            error: function() {
                toast.error('Erro ao alterar status');
                $('#dm-loader').fadeOut(200);
            }
        });
    });
    
    /* ============================================================
     | DELETE TEMPLATE
     ============================================================ */
    $(document).on('click', '.delete-template', function() {
        var id = $(this).data('id');
        var name = $(this).data('name');
        var usage = $(this).data('usage');
        
        $('#deleteTemplateId').val(id);
        $('#deleteTemplateName').text(name);
        
        if (usage > 0) {
            $('#usageCount').text(usage);
            $('#deleteTemplateWarning').show();
        } else {
            $('#deleteTemplateWarning').hide();
        }
        
        $('#deleteTemplateModal').modal('show');
    });
    
    $('#confirmDeleteTemplate').on('click', function() {
        var id = $('#deleteTemplateId').val();
        
        $('#dm-loader').fadeIn(200);
        $('#deleteTemplateModal').modal('hide');
        
        $.ajax({
            url: '{{ route("admin.marketing.vouchers.templates.destroy", ":id") }}'.replace(':id', id),
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    toast.success('Template eliminado com sucesso!');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    toast.error(response.message || 'Erro ao eliminar template');
                    $('#dm-loader').fadeOut(200);
                }
            },
            error: function(xhr) {
                toast.error('Erro ao eliminar template');
                $('#dm-loader').fadeOut(200);
            }
        });
    });
    
    /* ============================================================
     | CLONE TEMPLATE
     ============================================================ */
    $(document).on('click', '.clone-template', function() {
        var id = $(this).data('id');
        $('#cloneTemplateId').val(id);
        $('#cloneTemplateName').val('');
        $('#cloneTemplateModal').modal('show');
    });
    
    $('#confirmCloneTemplate').on('click', function() {
        var id = $('#cloneTemplateId').val();
        var name = $('#cloneTemplateName').val();
        
        if (!name) {
            toast.warning('Por favor, insira um nome para o novo template');
            return;
        }
        
        $('#dm-loader').fadeIn(200);
        $('#cloneTemplateModal').modal('hide');
        
        $.ajax({
            url: '{{ route("admin.marketing.vouchers.templates.clone") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: id,
                name: name
            },
            success: function(response) {
                if (response.success) {
                    toast.success('Template duplicado com sucesso!');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    toast.error(response.message || 'Erro ao duplicar template');
                    $('#dm-loader').fadeOut(200);
                }
            },
            error: function() {
                toast.error('Erro ao duplicar template');
                $('#dm-loader').fadeOut(200);
            }
        });
    });
    
    /* ============================================================
     | UPDATE STATS
     ============================================================ */
    function updateStats() {
        var activeCount = $('.template-card[data-active="1"]').length;
        var inactiveCount = $('.template-card[data-active="0"]').length;
        var total = activeCount + inactiveCount;
        
        $('#activeCount').text(activeCount);
        $('.tile_stats_count .count.green').first().text(total);
    }
    
    /* ============================================================
     | TOOLTIP INIT
     ============================================================ */
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
@endpush

@endsection