@extends('admin.layouts.master')

@section('title')
    User Vouchers - {{ $user->name }}
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-primary">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="card-title text-white">
                                <i class="bi bi-ticket-perforated me-2"></i>
                                Vouchers for {{ $user->name }}
                            </h3>
                            <a href="{{ route('admin.users.index') }}" class="btn btn-light">
                                <i class="bi bi-arrow-left me-1"></i>
                                Back to Users
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center" style="width: 50px">#</th>
                                        <th>
                                            <i class="bi bi-ticket me-1"></i>
                                            Voucher Name
                                        </th>
                                        <th>
                                            <i class="bi bi-currency-dollar me-1"></i>
                                            Points Cost
                                        </th>
                                        <th>
                                            <i class="bi bi-calendar me-1"></i>
                                            Purchase Date
                                        </th>
                                        <th>
                                            <i class="bi bi-check-circle me-1"></i>
                                            Status
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($vouchers as $index => $userVoucher)
                                        <tr>
                                            <td class="text-center">{{ $index + 1 }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if ($userVoucher->voucher->voucher_logo)
                                                        <img src="{{ asset('storage/' . $userVoucher->voucher->voucher_logo) }}"
                                                            alt="{{ $userVoucher->voucher->voucher_name }}" class="me-2"
                                                            style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">
                                                    @endif
                                                    {{ $userVoucher->voucher->voucher_name }}
                                                </div>
                                            </td>
                                            <td>{{ $userVoucher->voucher->voucher_points }}</td>
                                            <td>{{ $userVoucher->created_at->format('Y-m-d H:i') }}</td>
                                            <td>
                                                <span class="badge bg-success">Purchased</span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                                                    No vouchers found for this user
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer bg-light">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="text-muted">
                                Showing {{ $vouchers->count() }} vouchers
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: none;
        }

        .table> :not(caption)>*>* {
            padding: 1rem;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.02);
        }

        .badge {
            padding: 0.5em 0.75em;
            font-weight: 500;
        }
    </style>
@endsection