@extends('layouts.user')

@include('User::frontend.reward.style-owl-crousel')
@include('User::frontend.reward.style-cupons')

<style>
    .img-container {
        max-width: 100%;
        margin: 0 auto;
        position: relative;
        text-align: center;
    }

    .img-responsive {
        max-width: 100%;
        height: auto;
    }

    .avaible-text {
        padding-bottom: 20px;
    }

    .orange-underline {
        border-bottom: 2px solid #FFA500;
        /* Add an orange underline */
    }

    .card-balance {
        flex: 1;
        border-radius: 1rem;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 0 5px rgba(255, 247, 0, 0.3);
        color: #FFA500;
        padding: 20px;
        text-align: center;
        font-size: 18px;
        margin-bottom: 20px;
        /* Add spacing between cards */
    }


    .card-balance a {
        color: #FFA500;
        text-decoration: none;
        margin-top: 10px;
    }

    .card-balance a:hover {
        color: #FF7F00;
        text-decoration: none;
        margin-top: 10px;
    }
</style>

@section('content')
    <h2 class="title-bar">
        {{ __('Reward') }}
    </h2>

    <div class="row">
        <div class="col-md-6">
            <div class="card-balance">
                <span>
                    {{ __('Your Account Balance') }}
                    <br>
                    Rp. {{ $user_point }}
                </span>
                <a href="{{ route(\Request::route()->getName()) }}" class="refresh-link">
                    <i class="fa fa-refresh" aria-hidden="true"></i>
                </a>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card-balance">
                <span>
                    {{ __('Status AKTIF') }}
                    <br>
                    Aktif
                </span>
            </div>
        </div>
    </div>

    <div class="avaible-text">
        <span class="orange-underline">My Referral Card</span>
    </div>

    <div class="owl-carousel" id="reward-card">
        <div class="item">
            <img src="{{ asset('images/voucher/user/' . $namafile_depan) }}" class="img-responsive" alt="Voucher Image">
        </div>
        <div class="item">
            <img src="{{ asset('images/voucher/user/' . $namafile_belakang) }}" class="img-responsive" alt="Voucher Image">
        </div>
    </div>

    @include('admin.message')
    @if ($data['rows']->total() > 0)
        <div class="bravo-list-item">
            <div class="avaible-text">
                <span class="orange-underline">Avaiable Reward</span>
            </div>
            <div class="owl-carousel">
                @foreach ($data['rows'] as $row)
                    <div class="item">

                        @include('User::frontend.reward.loop-list')
                    </div>
                @endforeach
            </div>

            <div class="bravo-pagination">
                <span
                    class="count-string">{{ __('Showing :from - :to of :total', ['from' => $data['rows']->firstItem(), 'to' => $data['rows']->lastItem(), 'total' => $data['rows']->total()]) }}</span>
                {{ $data['rows']->appends(request()->query())->links() }}
            </div>
        </div>
    @else
        {{ __('No Items') }}
    @endif
@endsection