@extends('mobile.layouts.app')
@section('title', app_name() . ' | Elite Rewards')
@section('content')
    @php
        $customer = auth()->user()->customer;
    @endphp
    @include('mobile.includes.app-bar', ['navBarName' => __('mobile.rewards')])
    @include('mobile.includes.reward-filter-modal', ['merchants' => $merchants])
    <div class="container sm:mx-auto px-3">
        <!-- Rewards Start -->
        <div class="flex justify-between items-center   mt-4">
            <h4 class="text-xl font-bold"></h4>
            <a href="{{ route('mobile.my-rewards') }}"
                class="text-white block text-md bg-blue-800 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:bg-blue-800
            font-medium rounded-full  px-5 py-2 text-center mb-2 "><i
                    class="fa-solid fa-gift"></i> @lang('mobile.my_rewards')</a>
        </div>
        <div class="mt-4 flex items-start justify-between ">
            <div>
                <span class="text-md text-gray-500 font-bold">@lang('mobile.balance_points')</span>
                <h1 class="text-3xl font-bold">{{ $customer->balance_point }}</h1>
            </div>
            <div class="pe-2">
                <div class="flex flex items-center">
                    <div
                        class="bg-green-100 text-green-500 text-xl font-medium me-3 px-3 py-2 flex items-center justify-center  rounded dark:bg-green-900 dark:text-green-300">
                        <i class="fa-solid fa-arrow-up"></i>
                    </div>
                    <div class="text-green-500 font-bold">{{ $customer->balance_point + $customer->used_point }}</div>
                </div>
                <div class="flex flex items-center mt-3">
                    <div
                        class="bg-red-100 text-red-500 text-xl font-medium me-3 px-3 py-2 flex items-center justify-center  rounded dark:bg-red-900 dark:text-red-300">
                        <i class="fa-solid fa-arrow-down"></i>
                    </div>
                    <div class="text-red-500 font-bold">{{ $customer->used_point }}</div>
                </div>
            </div>
        </div>
        <!-- Available Rewards Start -->
        <div class="mt-5 flex items-start justify-between ">
            <h4 class="text-xl font-bold">@lang('mobile.available_rewards')</h4>
            <div data-modal-target="reward-filter-modal" data-modal-toggle="reward-filter-modal">
                @lang('mobile.filter')
                <i class="fa-solid fa-filter ms-2"></i>
            </div>
        </div>
        <div class="mt-4">
            <ul class="divide-y divide-gray-200 dark:divide-gray-700 block mt-3">
                @foreach ($rewards as $reward)
                    @include('mobile.includes.reward-card', [
                        'merchant' => $reward->client->merchant_name,
                        'merchantLogo' => asset('uploads/'.$reward->client->logo),
                        'giftImage' => asset('uploads/'.$reward->image),
                        'giftTitle' => $reward->name,
                        'giftSecondTitle' => "{$reward->redeem_points} Points",
                        'goToLink' => route('mobile.rewards.detail', $reward),
                    ])
                @endforeach
            </ul>
            {{ $rewards->appends($_GET)->links('mobile-pagination') }}
        </div>
    </div>
@endsection


@push('after-scripts')
<script>
    $(document).ready(function() {
        const params = new URLSearchParams(window.location.search);
            const keyArray = Array.from(params.keys());
            console.log(keyArray);
            if (keyArray.includes('sort')) {
                $('#sort_by option').each(function(){
                    if($(this).attr('value') == params.get('sort')) {
                        $(this).attr('selected', true);
                    }
                });
            }

            if (keyArray.includes('merchant')) {
                $('#filter_by option').each(function(){
                    if($(this).attr('value') == params.get('merchant')) {
                        $(this).attr('selected', true);
                    }
                });
            }
    });
</script>
@endpush