@extends('layouts.admin')

@section('title', 'Mis Tarjetas de Fidelización')

@php
    use SimpleSoftwareIO\QrCode\Facades\QrCode;
@endphp

@section('content')
<div class="container">
    <h2 class="mb-4">Mis Tarjetas de Fidelización</h2>

    <a href="{{ route('tarjetas.create') }}" class="btn btn-primary mb-4">+ Nueva Tarjeta</a>
    <a href="{{ route('tarjetas.exportar.pdf') }}" class="btn btn-danger mb-4">Exportar PDF</a>
    <a href="{{ route('tarjetas.estadisticas') }}" class="btn btn-info mb-4">Ver estadísticas</a>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="row">
        @forelse($tarjetas as $tarjeta)
        <div class="col-sm-6 col-md-4 col-lg-3 d-flex justify-content-center mb-4">
            <div class="card shadow-sm tarjeta-vertical text-center">
                @if($tarjeta->logo)
                    <img src="{{ asset('storage/' . $tarjeta->logo) }}" alt="Logo" class="card-img-top logo-tarjeta">
                @endif

                <div class="tarjeta">
                    <h5 class="card-text text-center">{{ $tarjeta->nombre_comercio }}</h5>
                    <p class="card-text text-muted mb-1"><strong>Puntos:</strong> {{ $tarjeta->puntos }}</p>
                    <p class="card-text text-muted mb-2"><strong>Categoría:</strong> {{ ucfirst($tarjeta->categoria ?? 'N/A') }}</p>
                    <div class="mt-3">
                        {!! QrCode::size(100)->generate(route('tarjetas.sumar.token', ['uuid' => $tarjeta->uuid])) !!}
                    </div>

                    <a href="{{ route('tarjetas.edit', $tarjeta) }}" class="btn btn-sm btn-outline-primary">Editar</a>
<form action="{{ route('tarjetas.destroy', $tarjeta) }}" method="POST" class="d-inline">
    @csrf @method('DELETE')
    <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('¿Eliminar tarjeta?')">Eliminar</button>
</form>
<a href="{{ route('tarjetas.exportar.individual', $tarjeta) }}" class="btn btn-sm btn-outline-success mt-2">Exportar PDF</a>
                </div>
            </div>
        </div>
        @empty
            <p class="text-muted">No tienes tarjetas registradas aún.</p>
        @endforelse
    </div>
</div>
@endsection

@push('css')
<style>
    .tarjeta-vertical {
        width: 100%;
        max-width: 260px;
        height: 420px;
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .tarjeta-vertical .logo-tarjeta {
        height: 140px;
        object-fit: contain;
        background-color: #f9f9f9;
        padding: 10px;
    }

    .tarjeta-vertical .card-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .tarjeta-vertical h5 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
</style>
@endpush