@extends('layouts.master2')

@section('headerMobile')
<div class="bg-gd-primary d-block d-md-none py-3">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-2">
                <a href="{{ url('user') }}">
                    <i class="fa fa-arrow-left text-white cursor-pointer"></i>
                </a>
            </div>
            <div class="col-8 text-center">
                <span class="text-white font-weight-bold">Tukar Poin</span>
            </div>
            <div class="col-2">
                <a href="{{ url('user/redeem/history') }}">
                    <img src="{{ asset('img/icon/ic_history.svg') }}" class="img-max-25" alt="History">
                </a>
            </div>
        </div>
    </div>
</div>
<div class="bg-white py-2 d-block d-md-none">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-6">
                <img src="{{ asset('img/icon/ic_mypoin.svg') }}" alt="My poin">&nbsp;&nbsp;Poin Kamu
            </div>
            <div class="col-6 text-right">
                <span clas="font-weight-bold">{{ $user->available_balance }}</span>
            </div>
        </div>
    </div>
</div>
@endsection
@section('content')
<div class="container">
    <div class="pb-3 pb-md-0 py-md-3">
        <div class="row">
            @include('layouts.sidebar')
            <div class="col-md-9">
                <div class="bg-md-gd-white p-md-3">
                    <div class="row d-none d-md-block">
                        <div class="col-12">
                            <div class="pb-3 border-bottom">
                                <h5 class="mb-0">Tukar Poin</h5>
                                <span class="gd-font-sm">Tukarkan poin kamu dengan berbagai pilihan redeem</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <redeem-product 
                                :products="{{ json_encode($redeemProducts) }}" :points="'{{ $user->available_balance }}'" 
                                :accounts="{{ json_encode($redeemAccounts) }}"
                                :bankList="{{ json_encode($banklist) }}"
                                :hasPin="{{ json_encode($user->has_pin) }}"></redeem-product>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('mobileMenu')
@endsection

@section('modal')
@include('modal.modalRedeem')
@endsection