@extends('layouts.main')
@section('content')
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header" style="height: 50px;">
                    <span class="modal-title"></span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3">
                            <h4 class="modal_category_title text-left"></h4>
                            {{--<h4 class="modal_category_price text-left" style="margin-bottom: 35px;"></h4>--}}
                            <div class="row form2 noshow">
                                <h4>Order Summary</h4>

                                <div class="form-group text-left form_productname">
                                    <label for="productname">Product</label>
                                    <input type="text" name="productname" id="productname" placeholder=""
                                           disabled class="form-control" required>
                                </div>

                                <div class="form-group text-left form_price">
                                    <h4 class="price_current" style="text-align: center"></h4>
                                    {{--<label for="productname">Price</label>--}}
                                    {{--<input type="text" name="pricename" id="pricename" placeholder=""--}}
                                           {{--disabled class="form-control" required>--}}
                                </div>
                                <div class="form-group text-left form_price">
                                    <label for="productname">Quantity</label>
                                    <input type="text" name="qantity" id="qantity" placeholder="" min="1" value="1"
                                            class="form-control" required>
                                </div>


                                <div class="form-group text-left">
                                    <label for="email">Email address</label>
                                    <input type="text" name="email" id="email" placeholder="" class="form-control"
                                           required>
                                </div>

                                <div class="form-group text-left">
                                    <label for="phone_no">Phone</label>
                                    <input type="tel" name="phone_no" id="phone_no" placeholder="" class="form-control"
                                           required>
                                </div>
                            </div>



                            <div class="sendformdiv noshow">
                                <button type="button"
                                        class="btn btn-large btn-primary pay_bills_btn custom_button_color">
                                    <i class="fa fa-spinner fa-spin off redeem_process_indicator"></i> Redeem
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="body-content">
                <div class='row'>
                    <div class="col-xs-12 col-sm-12 col-md-12 m-t-30">
                        <div class="breadcrumb">
                            <div class="container">
                                <div class="breadcrumb-inner">
                                    <ul class="list-inline list-unstyled">
                                        <li><a href="{{url('/')}}">Home</a></li>
                                        <li><a href="{{url('')}}">Vouchers</a></li>
                                        <li><a href="{{url('')}}">Uber Vouchers</a></li>
                                    </ul>
                                </div>
                                <!-- /.breadcrumb-inner -->
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12" style="margin-top: 50px; margin-bottom: 50px;">
                        <div class="container">
                            @if(isset($response))
                                @if($response->status == 1)
                                    <div class="row">
                                        <div class="col-sm-3 sidebar" style="margin-bottom: 50px; text-align: center">
                                            @if(isset($response->data[0]->image))
                                            <img src="{{$response->data[0]->image}}" alt="logo">
                                            @endif
                                        </div>
                                        <div class="col-sm-9">
                                            @foreach($response->data as $item)
                                                <div class="col-xs-12 col-md-3 col-sm-6">
                                                    <div class="bill_product">
                                                        <h5>{{ucwords(strtolower($item->product_name))}}</h5>
                                                        <button class="btn btn-xs custom_button_color">
                                                            <a href="#"
                                                               class="subscribe_bills_btn text-white btn btn-md btn-block"
                                                               data-signature="{{$item->signature}}"
                                                               data-price="{{$item->price}}"
                                                               data-max_quantity="{{$item->max_quantity}}"
                                                               data-packagename="{{$item->product_name}}"
                                                               data-price_name="{{Auth::user()->currency->is_currency_fixed == '1' ? '&#8358;'.transform_product_price($item->price, 1) : transform_product_price($item->price, Auth::user()->currency->rate ) .' '. Auth::user()->currency->currency }}"
                                                               style="color: #fff"
                                                            >
                                                                <span class="font-weight-bold">Redeem</span></a>
                                                        </button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @else
                                    <div class="container" style="margin-top: 10em; margin-bottom: 10em; text-align: center;">
                                        <img class="text-center" alt="" src="{{asset('sigma/images/not_found.png')}}" style="width: 200px;">
                                        <h3 class="text-center">No content found</h3>
                                        <h4 class="text-center">We currently do not have content for the selected category. Check again soon.</h4>
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
        </div>

@endsection
@push('style')
    <link rel="stylesheet" type="text/css" href="{{asset('sigma/css/alertui.min.css')}}">
    <style>
        body{
            background: #fff !important;
        }
        .bill_product{
            -webkit-box-shadow: 0px 0px 8px -7px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 8px -7px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 8px -7px rgba(0,0,0,0.75);
            margin-bottom: 20px;
            text-align: left;
            overflow-wrap: break-word;
            height: 120px;
            min-height: 120px;
            max-height: 120px;
            padding: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
    </style>
@endpush
@push('script')
    <script src="{{asset('sigma/js/alertui.min.js')}}"></script>
    <script src="{{asset('assets/js/theia-sticky-sidebar.js')}}"></script>
    <script>
        $('.sidebar').theiaStickySidebar({
            // Settings
            additionalMarginTop: 30
        });


        var conversionRate = "