@extends('member.layout.main')
@section('content')
<div class="row">
    <div class="col-lg-6 col-xl-3" >
        <div class="card border m-b-20" style="border: 2px dashed red !important;border-radius: 20px;">
            <div class="card-body" style="padding-top: 5px;padding-bottom: 5px;">
                <div class="row align-items-center">
                    <div class="col-12">
                        <h5 style="font-weight:bold;color: #000;margin-top: 1rem!important;margin-bottom: 2px;">Buy Voucher </h5> 
                        <span style="color:#000;" class="font-16 my-3">
                            Available Point: @if($member_data->point_bal > 0)<a style="color:blue;">{{$member_data->point_bal}}</a> @else <a style="color:red;">0.00</a> @endif
                        </span>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-12">
                        <p style="color:#000;" class="font-16 my-3">
                            Price: <a style="color:blue;">50 Point</a><br>
                            Bonus: <a style="color:blue;">100 Cash + 20 Point</a>
                        </p>

                        <form action="{{url('buyvoucher')}}" method="post">@csrf
                            <!-- <input style="width: 100%;border-radius:20px;margin-bottom: 10px;padding-left:10px;height: 34px; color: #000;font-size: 14px;border:1px dashed blue;" type="number" name="amount" min="50" max="200" placeholder="Enter Point" required> -->
                            <button type="submit" style="width: 100%; margin-bottom: 15px;height: 30px;background: #ff7b7b;color: #000;border-radius: 20px;font-size: 12px;line-height: 10px; padding: 2px 15px; " class="btn">Buy 1 Voucher</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6 col-xl-3" >
        <div class="card border m-b-20" style="border: 2px dashed red !important;border-radius: 20px;">
            <div class="card-body" style="padding-top: 5px;padding-bottom: 5px;">
                <div class="row align-items-center">
                    <div class="col-12">
                        <h5 style="font-weight:bold;color: #000;margin-top: 1rem!important;margin-bottom: 2px;">Voucher Status</h5> 
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-12">
                        <p style="color:#000;" class="font-16 my-3">
                            My Voucher: <a style="color:blue;">{{$vou_count}}</a><br>
                            Bonus Paid: <a style="color:blue;">{{$vou_bonus}}</a><br>
                            Paid Voucher: <a style="color:blue;">{{$vou_paid}}</a><br>


                        </p>

                        <a href="{{url('viewvou')}}" style="margin-bottom: 15px;height: 30px;background: #e9cf7f;color: #000;border-radius: 20px;font-size: 12px;line-height: 10px; padding: 8px 15px;width: 100%; " class="btn">View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6 col-xl-3" >
        <div class="card border m-b-20" style="border: 2px dashed red !important;border-radius: 20px;">
            <div class="card-body" style="padding-top: 5px;padding-bottom: 5px;">
                <div class="row align-items-center">
                    <div class="col-12">
                        <h5 style="font-weight:bold;color: #000;margin-top: 1rem!important;margin-bottom: 2px;">Voucher Summary</h5> 
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-12">
                        <p style="color:#000;" class="font-16 my-3">
                            <!-- Total Voucher: <a style="color:blue;">{{$total_vou}}</a><br> -->
                            Paid Voucher No: <a style="color:blue;">{{$vou_paid}}</a><br>
                            <!-- Paid Amount: <a style="color:blue;">{{$paid_amount}}</a><br> -->
                            @if(!empty($vou_no))
                            My Voucher No: <a style="color:blue;">{{$vou_no->id}}</a><br>
                            @else
                            My Voucher No: <br>
                            @endif
                        </p>

                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection