@extends('layouts.app')
@section('content')

<div class="container">
    @include('desktop.partials.runningtext')
    @include('desktop.partials.breadcrumb')
    <section data-v-137ca970="" class="bonuses bonuses--d">
        <header class="page-header">
            <i class="icon-gift icon--lg"></i>
            <h3>Bonus</h3>
        </header>
        <header data-v-137ca970="" class="bonuses__header">
            <nav class="bonuses__nav">
                <ul class="surface">

                    <li class="{{ $tab == 'active' ? 'bonuses__nav--active' : '' }}">
                        <button class="btn btn--primary" onclick="window.location='?tab=active'">
                            Aktif
                        </button>
                    </li>

                    <li class="{{ $tab == 'completed' ? 'bonuses__nav--active' : '' }}">
                        <button class="btn btn--primary" onclick="window.location='?tab=completed'">
                            Completed
                        </button>
                    </li>

                </ul>
            </nav>
        </header>
        <div class="bonuses__content surface">

            @php
            $tab = request('tab', 'active');

            $filtered = $bonus->filter(function($b) use ($tab) {
            if ($tab === 'active') {
            return in_array($b->status, ['pending','active']);
            }

            if ($tab === 'completed') {
            return in_array($b->status, ['completed','expired']);
            }

            return true;
            });
            @endphp

            {{-- ================= EMPTY STATE ================= --}}
            @if($filtered->isEmpty())

            <div class="alert alert--info">
                <i class="icon-info icon--lg"></i>
                <p>
                    Saat ini belum ada bonus
                    {{ $tab === 'active' ? 'Aktif' : 'Completed' }}
                    pada akun anda.
                </p>
            </div>

            @else

            {{-- ================= LOOP BONUS ================= --}}
            @foreach($filtered as $b)

            <article data-v-137ca970="" class="bonus-item">

                <header>
                    <h5 class="bonus-item__name">
                        {{ $b->bonus_name }}
                    </h5>

                    <span>
                        Rp {{ number_format($b->amount,0,',','.') }}
                    </span>

                    <div>
                        <div data-v-5811de3b="" class="chip chip--md chip--muted">
                            {{ $b->status_label }}
                        </div>
                    </div>

                    <button class="bonus-item__toggle btn btn--sm-round btn--dark">
                        <i data-v-0e010622="" class="icon-arrow-down icon--md"></i>
                    </button>
                </header>

                <div class="bonus-item__details" style="max-height: 0px;">
                    <div>

                        <span>ID</span>
                        <span>#{{ $b->id }}</span>

                        <span>Turnover</span>
                        <span>
                            Rp {{ number_format($b->turnover,0,',','.') }}
                        </span>

                        <span>Expire at</span>
                        <span class="bonus-item__date">
                            {{ $b->expired_at 
                                        ? date('d/m/Y, H.i', strtotime($b->expired_at)) 
                                        : '-' 
                                    }}
                        </span>
                    </div>
                </div>
            </article>
            @endforeach
            @endif
        </div>
    </section>
</div>
@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {

        const items = document.querySelectorAll('.bonus-item');

        items.forEach(item => {
            const btn = item.querySelector('.bonus-item__toggle');
            const detail = item.querySelector('.bonus-item__details');
            const icon = btn.querySelector('i');

            detail.style.maxHeight = "0px";

            btn.addEventListener('click', function() {

                const isOpen = item.classList.contains('active');

                items.forEach(el => {
                    el.classList.remove('active');

                    const d = el.querySelector('.bonus-item__details');
                    const i = el.querySelector('.bonus-item__toggle i');

                    if (d) d.style.maxHeight = "0px";
                    if (i) {
                        i.classList.remove('icon-arrow-up');
                        i.classList.add('icon-arrow-down');
                    }
                });

                if (!isOpen) {
                    item.classList.add('active');

                    requestAnimationFrame(() => {
                        detail.style.maxHeight = detail.scrollHeight + "px";
                    });

                    icon.classList.remove('icon-arrow-down');
                    icon.classList.add('icon-arrow-up');
                }

            });
        });
        window.addEventListener('resize', () => {
            document.querySelectorAll('.bonus-item.active').forEach(item => {
                const detail = item.querySelector('.bonus-item__details');
                if (detail) {
                    detail.style.maxHeight = detail.scrollHeight + "px";
                }
            });
        });

    });
</script>
@endpush
@endsection