@extends('front.layouts.main')
@section('content')

@if(count($data)>0)
<section class="slider-main gift-slider-js mb-0" id="giftcard_slider">
    @foreach($data[0]['giftCardImage'] as $slider)
    <div class="slide" style="background-image:url({{ $slider['card_image'] }})"></div>
    @endforeach
</section>

<section class="pt-30">
    <div class="container">
        <div class="d-flex flex-wrap">
            <div class="col s3 mb-30" id="select_gift">
                <div>{{ $data[0]['gift_card_title'] }}</div>
                <figure><img src="{{ $data[0]['giftCardImage'][0]['card_image'] }}" alt="{{ $data[0]['gift_card_title'] }}" /></figure>
            </div>
            <div class="col s9 mb-30">
                <div>
                    <h4 class="mt-0">SELECT YOUR GIFT CARD</h4>
                    <div class="d-flex gift-card flex-wrap" id="giftcards">
                        @foreach($data as $giftcard)
                        <div class="s3 mb-20">
                            <div>{{ $giftcard['gift_card_title'] }}</div>
                            <!--<figure><img src="{{ $giftcard['giftCardImage'][0]['card_image'] }}" alt="{{ $giftcard['gift_card_title'] }}" id="giftcard-{{ $giftcard['gift_card_id'] }}" onclick="giftcardSliderChange(this.id)"/></figure>-->
                            <figure><img src="{{ $giftcard['giftCardImage'][0]['card_image'] }}" alt="{{ $giftcard['gift_card_title'] }}" id="giftcard-{{ $giftcard['gift_card_id'] }}" class="gift-image" /></figure>
                        </div>
                        @endforeach

                    </div>
                    <input type="hidden" id="page" value="2" />
                    <div class="rightside"><button style="font-size: 30px;" class="btn btn-green" onclick="getMoreGiftCards($('#page').val())" id="more">More</button></div>
                </div>
                <div>
                    <h4>SELECT YOUR GIFT CARD DETAILS</h4>
                    <div class="d-flex select-card">
                        <div class="s3 mb-20" id="amt_1" onclick="setAmt(this.id)">
                            <div class="card-det-box fill">
                                <label>KES</label>
                                <input type="text" value="300" readonly="true" />
                            </div>
                        </div>
                        <div class="s3 mb-20" id="amt_2" onclick="setAmt(this.id)">
                            <div class="card-det-box fill">
                                <label>KES</label>
                                <input type="text" value="500" readonly="true" />
                            </div>
                        </div>
                        <div class="s3 mb-20" id="amt_3" onclick="setAmt(this.id)">
                            <div class="card-det-box fill">
                                <label>KES</label>
                                <input type="text" value="1000" readonly="true" />
                            </div>
                        </div>
                        <div class="s3 mb-20">
                            <div class="card-det-box">
                                <label>ENTER AMOUNT</label>
                                <input type="text" id="amount" value="{{ old('gift_amt') }}" onkeyup="enterGiftAmt()" autocomplete="off" />
                            </div>
                            <div class="error-text">{{ $errors->giftcardErrors->first('gift_amt', ':message') }}</div>
                        </div>
                    </div>
                    <div class="s9">
                        <!--<form>-->
                        {{ Form::open(['route'=>['giftcard.preview'],'method'=>'POST'])}}
                        <input type="hidden" name="gift_amt" id="gift_amt" />
                        <input type="hidden" name="gift_id" id="gift_id" value="{{$data[0]['gift_card_id'].','.$data[0]['giftCardImage'][0]['card_image'] }}" />
                        <div class="form-row mb-15">
                            <label>TO</label>
                            <input type="text" class="form-input" name="to_email" placeholder="Enter receiver's email" value="{{ old('to_email') }}" />
                            <div class="error-text">{{ $errors->giftcardErrors->first('to_email', ':message') }}</div>
                        </div>
                        <div class="form-row mb-15">
                            <label>FROM</label>
                            <input type="text" class="form-input" name="from_email" placeholder="Enter your email" value="{{ old('from_email') }}" />
                            <div class="error-text">{{ $errors->giftcardErrors->first('from_email', ':message') }}</div>
                        </div>
                        <div class="form-row mb-15">
                            <label>MESSAGE</label>
                            <input type="text" class="form-input" name="from_msg" placeholder="Your message here" value="{{ old('from_msg') }}" />
                            <div class="error-text">{{ $errors->giftcardErrors->first('from_msg', ':message') }}</div>
                        </div>
                        <button type="submit" class="btn btn-green">PREVIEW</button>
                        <!--</form>-->
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@else
<section class="pt-30">
    <div class="container">


        <h2 class="col mt-0 text-center">No Gift Card Found</h2>


    </div>
</section>
@endif

@endsection
@section('js')
<script>
    var giftCards = null;
    $(document).ready(function() {
        $('.gift-slider-js').slick({
            dots: true,
            infinite: true,
            speed: 500,
            autoplay: true,
            cssEase: "ease"
        });
    });
    $(document).on('click', '.gift-image', function() {
        var giftCardId = this.id;
        //      alert(giftCardId);
        var giftId = giftCardId.split('-')[1];
        //      alert(giftId);
        //      var giftCards = null;

        console.log(giftCards);

        $.each(giftCards, function(key, gift) {

            console.log(gift);
            if (gift.gift_card_id == giftId) {
                console.log('match');
                $('#gift_id').val('');
                $('#gift_id').val(giftId + "," + gift.giftCardImage[0].card_image);
                $('#select_gift').empty();
                $('#select_gift').append('<div>' + gift.gift_card_title + '</div>\n\
              <figure><img src="' + gift.giftCardImage[0].card_image + '" alt="' + gift.gift_card_title + '" /></figure>');
                $('.gift-slider-js').slick('removeSlide', null, null, true);
                $.each(gift.giftCardImage, function(key2, image) {
                    console.log(key2);
                    console.log(image.card_image);
                    $('.gift-slider-js').slick('slickAdd', '<div class="slide" style="background-image:url(' + image.card_image + ')"></div>');
                });
            }
        });
    });

    function giftcardSliderChange(giftCardId) {
        var giftId = giftCardId.split('-')[1];
        console.log(giftCards);
        $.each(giftCards, function(key, gift) {

            console.log(gift);
            if (gift.gift_card_id == giftId) {
                console.log('match');
                $('#giftcard_slider').empty();
                $.each(gift.giftCardImage, function(key2, image) {
                    console.log(key2);
                    console.log(image.card_image);
                    $('#giftcard_slider').append('<div class="slide" style="background-image:url(' + image.card_image + ')"></div>');
                });
            }
        });
    }

    function enterGiftAmt() {
        var amt = $('#amount').val();
        console.log(amt);
        $('#gift_amt').val('');
        $('#gift_amt').val(amt);
    }

    function setAmt(amt_id) {
        var id = amt_id.split('_')[1];
        var amt = 0;
        if (id == 1) {
            amt = '300';
        } else if (id == 2) {
            amt = '500';
        } else if (id == 3) {
            amt = '1000';
        }
		
		var finalAmt = amt.replace (/,/g, "");
		
        $('#amount').val('');
        $('#amount').val(finalAmt);
        $('#gift_amt').val('');
        $('#gift_amt').val(finalAmt);
    }

    //Function used to get all the notifications of a user
    function getMoreGiftCards(pageNo) {
        console.log(pageNo);
        $.ajax({
            url: "{{route('giftcard')}}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "pageNo": pageNo
            },
            success: function(result) {
                console.log(result);
                if ('success' in result) {
                    if (result.success.length > 0) {
                        $('#page').val('');
                        $('#page').val(result.next);
                        $.merge(giftCards, result.success);
                        $.each(result.success, function(g_key, g_value) {
                            $('#giftcards').append('<div class="s3 mb-20"><div>' + g_value.gift_card_title + '</div><figure><img src="' + g_value.giftCardImage[0].card_image + '" alt="' + g_value.gift_card_title + '" id="giftcard-' + g_value.gift_card_id + '" class="gift-image"/></figure></div>');
                        });
                    } else {
                        $('#more').text('No More Gift Cards');
                        $('#more').attr('disabled', true);
                    }
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus);
                alert("Error: " + errorThrown);
                console.log(errorThrown);
            }
        });
    }
</script>
@endsection