@extends('layouts.app')

@section('title', 'Home Page')


@section('script')
    @parent


    <script defer>

        var selectedVoucherSeries = "{!! Request::route('voucherseries') !!}";

        window.onload = function(e) {

            $('.voucher_card-tc .collapse').on('show.bs.collapse hide.bs.collapse', function () {
                $(this).siblings('[data-toggle="collapse"]').find('.arrow').toggleClass('right down')
            })

            $('.voucher_usage-input').on('keyup', function() {

                var key = event.keyCode || event.charCode;

                if( key == 8 || key == 46 ) {
                    // if the user press del or backspace
                    $(this).parent().prev().find('input').focus();

                } else {
                    if ($(this).parent().next().length <= 0) {
                        $('#transaction-amount').focus();
                    } else {
                        $(this).parent().next().find('input').focus();
                    }
                }

            })

            $('#voucher_usage-submit').on('click', function() {
                var valid = true;
                $('.voucher_usage-container .text').html('')

            // validate and find the data
                var code = "";
                $('#code .voucher_usage-input').each(function(i, input) {
                    if ($(input).val().trim() != '' ) {
                        code += $(input).val().trim();
                    } else {
                        valid = false;
                    }
                })

                if (!valid) {
                    $('.voucher_usage-container .text').append('<li>Code is incorrect</li>')
                }


                var voucherSeriesList =[];
                $('.voucher_checkbox-checkbox:checked').each(function(i, checkbox) {
                    var voucherseries = $(checkbox).parents('.voucher_checkbox').data('voucherseries');
                    voucherSeriesList.push(voucherseries)
                })

                if (voucherSeriesList.length <= 0) {
                    valid = false;
                    console.log('invalid length of voucher series')
                    $('.voucher_usage-container .text').append('<li>Please select a voucher</li>')
                }

                var transactionAmt = $('#transaction-amount').val().trim();
                if (transactionAmt == '' ) {
                    valid = false;
                    console.log('invalid transacion amt')
                    $('.voucher_usage-container .text').append('<li>Please input a transaction amount</li>')
                }
            // // //

                if(!valid) {
                    $('.voucher_usage-container .text').addClass('error')
                } else {
                    $('.voucher_usage-container .text').removeClass('error')
                }

                if (valid) {
                    var postData = {
                        code: code,
                        transaction_amount: transactionAmt,
                        vouchers: voucherSeriesList
                    }

                    console.log(postData);

                    var success = true;

                    if (success) {
                        $('.voucher_usage-container .text').append('SUCCESSFUL')
                        $('.voucher_usage-container .text').addClass('success')
                    } else {
                        $('.voucher_usage-container .text').append('<li>'+ 'response.error' +'</li>')
                        $('.voucher_usage-container .text').addClass('error')
                    }
                }


            })


            if (selectedVoucherSeries) {
                // append the selected voucher series to the top
                $('.voucher_checkbox[data-voucherseries='+selectedVoucherSeries+']').find('.voucher_checkbox-checkbox').prop('checked', true)
                $('.voucher_checkbox[data-voucherseries='+selectedVoucherSeries+']').prependTo('#voucher_checkbox-container');
            }
        };

    </script>

@endsection


@section('menu')
    @parent


@endsection

@section('content')

        <div class="voucher_usage-container">
            <ul class="m-0 text">
            </ul>
            <div id="voucher_usage">
                <img class="img-fluid"
                     width="135px"
                     src="{{$account['icon'] != '' ? $account['icon'] : '/assets/images/mytown/Mytown_logo-02.png'}}"
                     alt="">

                <h6>FOR STAFF USE</h6>
                <div class="form-row" id="code">
                    <div class="form-group">
                        <input class="form-control voucher_usage-input" type="text" placeholder="0">
                    </div>
                    <div class="form-group">
                        <input class="form-control voucher_usage-input" type="text" placeholder="0">
                    </div>
                    <div class="form-group">
                        <input class="form-control voucher_usage-input" type="text" placeholder="0">
                    </div>
                    <div class="form-group">
                        <input class="form-control voucher_usage-input" type="text" placeholder="0">
                    </div>
                </div>

                <div id="transaction-amount-div">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Rp</span>
                            </div>
                            <input id="transaction-amount" class="form-control voucher_usage-input" type="text" placeholder="Transaction Amount">
                        </div>
                    </div>
                </div>

                <button id="voucher_usage-submit" class="btn" type="submit">Submit</button>

            </div>
        </div>

    <div class="px-3" style="line-height: 1.2;">
        <small>
            Please select the vouchers applicable to your checkout
        </small>
    </div>
    <div class="row no-gutters" id="voucher_checkbox-container">

        @for ($i = 0; $i < 10; $i++)

        <div class="col-12 col-sm-6 col-md-4 voucher_checkbox" data-voucherseries="12345678-{{$i}}">
            <div class="voucher_card-wrapper">
                <label class="row no-gutters voucher_checkbox-label">
                    <div class="col-4">
                        <div class="voucher_checkbox-image" style="background-image: url('http://nzukorestaurant.com/wp-content/uploads/2017/09/placeholder-square.jpg');" alt=""></div>
                    </div>
                    <div class="col-7 px-2 py-1 voucher_checkbox-content">
                        <div>
                            <h6 class="voucher_checkbox-title">Buy 2 for the price ohe price ohe price of 1 {{$i}}</h6>
                        </div>
                    </div>
                    <div class="col-1 pr-2">
                        <div class="form-check-group">
                            <div class="form-check">

                                    <input class="voucher_checkbox-checkbox" type="checkbox">
                                    <span class="label">
                                        <span class="checkbox">
                                            <span class="tick"></span>
                                        </span>
                                    </span>
                            </div>
                        </div>
                    </div>
                </label>

                <div class="row no-gutters">
                    <div class="col-12 p-1">

                        <div class="voucher_checkbox-tc dropdown">

                            <div data-toggle="collapse" href="#abc-{{$i}}">
                                Terms and Conditions <span class="arrow right"></span>
                            </div>
                            <div class="collapse" id="abc-{{$i}}">
                                <p>kcsndcksjdcjknsdc</p>
                            </div>

                        </div>

                    </div>
                </div>

            </div>
        </div>

        @endfor

    </div>


    @component('components.voucher_register', [
        'account' => $account,
    ])
    @endcomponent



@endsection