@extends('layouts.app')
@section('content')
@php
    $allowedTabs = ['active', 'completed'];
    $tab = request('tab', 'active');

    if (!in_array($tab, $allowedTabs)) {
        $tab = 'active';
    }
@endphp
    <div class="container">
        <section class="bonuses">

            <header class="page-header">
                <i class="icon-gift icon--lg"></i>
                <h3>Bonus</h3>
            </header>

		<header 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">

                @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