@extends('donamarmita-admin')
@section('title', 'Imagens 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-images text-primary"></i> 
                Imagens de Vouchers
            </h1>
            <p class="text-muted">
                Gestão das imagens de vouchers geradas para campanhas
            </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="{{ route('admin.coupons.index') }}">
                            <i class="fas fa-tags mr-1"></i> Copões
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="fas fa-images mr-1"></i> Imagens de Vouchers
                    </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 Imagens
            </span>
            <div class="count green">{{ $images->total() }}</div>
            <span class="count_bottom">
                <i class="fas fa-calendar mr-1"></i> <span id="todayCount">{{ $todayCount }}</span> hoje
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-download text-success"></i> Downloads
            </span>
            <div class="count">{{ $totalDownloads }}</div>
            <span class="count_bottom">
                <i class="fas fa-chart-line mr-1"></i> média de <span id="avgDownloads">{{ number_format($avgDownloads, 1) }}</span> por imagem
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-tags text-info"></i> Vouchers Únicos
            </span>
            <div class="count">{{ $uniqueVouchers }}</div>
            <span class="count_bottom">
                <i class="fas fa-tag mr-1"></i> códigos diferentes
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-palette text-warning"></i> Templates
            </span>
            <div class="count">{{ $templatesCount }}</div>
            <span class="count_bottom">
                <i class="fas fa-layer-group mr-1"></i> disponíveis
            </span>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        <i class="fas fa-filter mr-2"></i>
                        Filtrar Imagens
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <div class="row">
                        <!-- Filtro por Período -->
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="font-weight-bold text-primary">
                                    <i class="fas fa-calendar-alt mr-1"></i> Período
                                </label>
                                <div class="input-group">
                                    <input type="text" 
                                           class="form-control" 
                                           id="daterange" 
                                           name="daterange"
                                           value="{{ request('daterange', now()->subDays(30)->format('d/m/Y') . ' - ' . now()->format('d/m/Y')) }}"
                                           readonly
                                           style="background-color: white; cursor: pointer;">
                                </div>
                            </div>
                        </div>

                        <!-- Filtro por Voucher -->
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="font-weight-bold text-primary">
                                    <i class="fas fa-tag mr-1"></i> Voucher
                                </label>
                                <select class="form-control select2" id="voucherFilter" style="width: 100%;">
                                    <option value="">Todos os Vouchers</option>
                                    @foreach($vouchers as $voucher)
                                    <option value="{{ $voucher->coup_id }}" {{ request('voucher') == $voucher->coup_id ? 'selected' : '' }}>
                                        {{ $voucher->coup_code }} - {{ $voucher->coup_value }}{{ $voucher->coup_discount_type == 'percentage' ? '%' : '€' }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Filtro por Template -->
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="font-weight-bold text-primary">
                                    <i class="fas fa-palette mr-1"></i> Template
                                </label>
                                <select class="form-control select2" id="templateFilter" style="width: 100%;">
                                    <option value="">Todos os Templates</option>
                                    @foreach($templates as $template)
                                    <option value="{{ $template->cit_id }}" {{ request('template') == $template->cit_id ? 'selected' : '' }}>
                                        {{ $template->cit_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Botões de Ação -->
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="font-weight-bold text-primary d-block"> </label>
                                <div class="btn-group w-100" role="group">
                                    <button type="button" class="btn btn-outline-info" id="applyFilters">
                                        <i class="fas fa-search mr-1"></i> Filtrar
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" id="resetFilters">
                                        <i class="fas fa-undo-alt"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Panel -->
    <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>
                        Imagens de Vouchers
                        <span class="badge badge-info ml-2">{{ $images->total() }} imagens</span>
                    </h2>
                                       
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a href="{{ route('admin.marketing.vouchers.templates.index') }}" class="btn btn-warning btn-sm" style="color: #000;">
                                <i class="fas fa-plus-circle mr-2"></i>
                                Gestão de Templates
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('admin.marketing.vouchers.images.create') }}" class="btn btn-primary btn-sm setColor">
                                <i class="fas fa-plus-circle mr-2"></i>
                                Gerar Nova Imagem
                            </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

                    <!-- Images Grid -->
                    <div class="row">
                        @forelse($images as $image)
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="card voucher-card h-100">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <span class="badge badge-primary">{{ $image->coupon->coup_code }}</span>
                                    <small class="text-muted">
                                        <i class="fas fa-download mr-1"></i> {{ $image->cpi_download_count }}
                                    </small>
                                </div>
                                
                                <div class="card-body p-2 text-center">
                                    <a href="{{ $image->public_url }}" 
                                       data-lightbox="vouchers"
                                       data-title="Voucher {{ $image->coupon->coup_code }}">
                                        <img src="{{ $image->public_url }}" 
                                             alt="Voucher {{ $image->coupon->coup_code }}"
                                             class="img-fluid voucher-thumb"
                                             style="max-height: 150px; object-fit: contain;">
                                    </a>
                                </div>
                                
                                <div class="card-footer bg-transparent">
                                    <div class="row">
                                        <div class="col-6">
                                            <small class="text-muted d-block">
                                                <i class="fas fa-calendar-alt"></i> {{ $image->cpi_generated_at->format('d/m/Y') }}
                                            </small>
                                            <small class="text-muted d-block">
                                                <i class="fas fa-clock"></i> {{ $image->cpi_generated_at->format('H:i') }}
                                            </small>
                                        </div>
                                        <div class="col-6 text-right">
                                            <small class="text-muted d-block">
                                                <i class="fas fa-palette"></i> {{ $image->template->cit_name ?? '—' }}
                                            </small>
                                            <small class="text-muted d-block">
                                                <i class="fas fa-user"></i> {{ $image->creator->name ?? 'Sistema' }}
                                            </small>
                                        </div>
                                    </div>
                                    
                                    <div class="btn-group btn-group-sm w-100 mt-2" role="group">
                                        <a href="{{ $image->public_url  }}" 
                                           target="_blank"
                                           class="btn btn-outline-info"
                                           data-toggle="tooltip"
                                           title="Ver Imagem">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.marketing.vouchers.images.download-image', $image->cpi_id) }}" 
                                           class="btn btn-outline-success"
                                           data-toggle="tooltip"
                                           title="Download">
                                            <i class="fas fa-download"></i>
                                        </a>
                                        <button type="button"
                                                class="btn btn-outline-danger delete-image"
                                                data-id="{{ $image->cpi_id }}"
                                                data-code="{{ $image->coupon->coup_code }}"
                                                data-toggle="tooltip"
                                                title="Eliminar">
                                            <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-images fa-4x text-muted mb-3"></i>
                                <h5 class="text-muted">Nenhuma imagem encontrada</h5>
                                <p class="text-muted">Clique em "Gerar Nova Imagem" para criar a primeira.</p>
                                <a href="{{ route('admin.marketing.vouchers.images.create') }}" class="btn btn-primary mt-3">
                                    <i class="fas fa-plus-circle mr-2"></i>
                                    Gerar Nova Imagem
                                </a>
                            </div>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação para Eliminar -->
<div class="modal fade" id="deleteImageModal" 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-image fa-4x text-danger mb-3"></i>
                <p class="mb-2">
                    <strong id="deleteImageCode"></strong>
                </p>
                <p class="text-muted">
                    Tem a certeza que deseja eliminar esta imagem?<br>
                    <span class="text-danger">Esta ação não pode ser desfeita.</span>
                </p>
                <input type="hidden" id="deleteImageId">
            </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="confirmDeleteImage">
                    <i class="fas fa-trash-alt mr-1"></i> Eliminar
                </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')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />
<style>
/* Voucher Card */
.voucher-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);
}

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

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

.voucher-card .card-body {
    padding: 15px;
    background-color: #fafafa;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voucher-thumb {
    border-radius: 4px;
    transition: all 0.3s ease;
}

.voucher-card:hover .voucher-thumb {
    transform: scale(1.02);
}

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

/* Stats Cards */
.tile_stats_count {
    border-bottom: 3px solid #26B99A;
}

/* Lightbox Customization */
.lb-outerContainer {
    background-color: #fff;
    border-radius: 8px;
}

.lb-caption {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.setColor:hover{
    color: #000;
}

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

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<script>
$(document).ready(function() {
    
    // Initialize Select2
    $('.select2').select2({
        width: '100%',
        allowClear: true
    });
    
    // Initialize DateRangePicker
    $('#daterange').daterangepicker({
        locale: {
            format: 'DD/MM/YYYY',
            separator: ' - ',
            applyLabel: 'Aplicar',
            cancelLabel: 'Cancelar',
            fromLabel: 'De',
            toLabel: 'Até',
            customRangeLabel: 'Personalizado',
            daysOfWeek: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            firstDay: 1
        },
        ranges: {
            'Hoje': [moment(), moment()],
            'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
            'Este mês': [moment().startOf('month'), moment().endOf('month')],
            'Mês passado': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    });
    
    /* ============================================================
     | FILTERS
     ============================================================ */
    $('#applyFilters').on('click', function() {
        var daterange = $('#daterange').val();
        var voucher = $('#voucherFilter').val();
        var template = $('#templateFilter').val();
        
        var url = new URL(window.location.href);
        
        if (daterange) {
            url.searchParams.set('daterange', daterange);
        } else {
            url.searchParams.delete('daterange');
        }
        
        if (voucher) {
            url.searchParams.set('voucher', voucher);
        } else {
            url.searchParams.delete('voucher');
        }
        
        if (template) {
            url.searchParams.set('template', template);
        } else {
            url.searchParams.delete('template');
        }
        
        window.location.href = url.toString();
    });
    
    $('#resetFilters').on('click', function() {
        window.location.href = window.location.pathname;
    });
    
    /* ============================================================
     | DELETE IMAGE
     ============================================================ */
    $(document).on('click', '.delete-image', function() {
        var id = $(this).data('id');
        var code = $(this).data('code');
        
        $('#deleteImageId').val(id);
        $('#deleteImageCode').text('Voucher ' + code);
        
        $('#deleteImageModal').modal('show');
    });
    
    $('#confirmDeleteImage').on('click', function() {
        var id = $('#deleteImageId').val();
        
        $('#dm-loader').fadeIn(200);
        $('#deleteImageModal').modal('hide');
        
        $.ajax({
            url: '{{ route("admin.marketing.vouchers.images.delete-image", ":id") }}'.replace(':id', id),
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    toast.success('Imagem eliminada com sucesso!');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    toast.error('Erro ao eliminar imagem');
                    $('#dm-loader').fadeOut(200);
                }
            },
            error: function(xhr) {
                toast.error('Erro ao eliminar imagem');
                $('#dm-loader').fadeOut(200);
            }
        });
    });
    
    /* ============================================================
     | LIGHTBOX CONFIG
     ============================================================ */
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true,
        'albumLabel': 'Imagem %1 de %2',
        'fadeDuration': 300,
        'imageFadeDuration': 300
    });
    
    /* ============================================================
     | TOOLTIP INIT
     ============================================================ */
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
@endpush

@endsection