{{--{{ dd($plans) }}--}}
@extends('layouts.app')

@section('content')
    <section class="page-header page-header-xs">
        <div class="container">

            <h1>WebMoto.us&nbsp;<span>Promo Ads</span></h1>

            <!-- breadcrumbs -->
            <ol class="breadcrumb">
                <li><a href="{{ @url('/') }}">Home</a></li>
                <li>Add Promo Listing</li>
            </ol><!-- /breadcrumbs -->

        </div>
    </section>


    <section>
        <div class="container">

            <!-- LIST OPTIONS -->

            <div class="row pricetable-container">
                @foreach ($plans as $plan)
                    @if($plan->parent == null && $plan->parent != '0')
                        <div class="col-md-4 col-sm-4 price-table"
                             @if($plan->id == 4) style="background-color: #5bc0de" @endif>
                            @if($plan->id == 4)
                                <div class="ribbon hidden-sm">
                                    <div class="ribbon-inner">POPULAR</div>
                                </div>
                            @endif
                            <h3>{{ $plan->name }} </h3>

                            <p>{{ number_format($plan->cost, 2) }} &dollar;.</p>
                            <ul>
                                @foreach( json_decode($plan->params) as $key => $items)
                                    @if($key == 'vip')
                                        <li>{{ $items }} days promo ad</li>@endif
                                    @if($key == 'home')
                                        <li>{{ $items }} days home page listing</li>@endif
                                    @if($key == 'refresh')
                                        <li>{{ $items }} days renewal</li>@endif
                                @endforeach
                            </ul>
                            <div class="col-sm-12 nopadding">
                                <a href="{{ url('/plan', [$plan->slug, $addid, '1']) }}"
                                   class="btn btn-featured btn-green">
                                        <span>
                                            <img src="{{ asset('images/cc/Visa.png') }}" alt="">
                                            <img src="{{ asset('images/cc/Mastercard.png') }}" alt="">
                                            <img src="{{ asset('images/cc/Discover-Network.png') }}" alt="">
                                            <img src="{{ asset('images/cc/PayPal.png') }}" alt="">
                                        </span>
                                        <i class="fa fa-money"></i>
                                    </a>

                                </div>
                                {{--<div class="col-sm-12 nopadding">
                                    <a href="{{ url('/plan', [$plan->slug, $addid, '2']) }}" class="btn-featured btn-green margin-top-20">
                                        <span>
                                            <img src="{{ asset('images/cc/Maestro.png') }}" alt="">
                                            <img src="{{ asset('images/cc/ePay.png') }}" alt="">
                                        </span>
                                        <i class="fa fa-money"></i>
                                    </a>
                                </div>--}}
                        </div>
                    @endif
                @endforeach

                <hr>
                <div class="com-sm-12">
                    <h3 class="">More promo options</h3>
                    <form id="formoptions" method="get"
                          action="{{ url('promoplans', ['subscribe', request('addid')]) }}">
                        @foreach ($plans as $plan)
                            @if($plan->parent == '1')
                                <div id="" class="col-md-4 com-sm-12 panel panel-default">

                                    <div class="panel-heading">


                                        <label class="checkbox">
                                            <input type="checkbox" value="{{ $plan->id }}">
                                            <i></i>
                                            <span class="elipsis"><!-- panel title -->
                                            <strong>{{  $plan->name }}</strong>
                            </span>
                                        </label>
                                        <span class="elipsis pull-right" id="plan-cost-{{ $plan->id }}"
                                              cost="{{ $plan->cost }}"><!-- panel title -->
                                            <strong>{{  $plan->cost }} &dollar;</strong>
                                        </span>

                                    </div>

                                    <!-- panel content -->
                                    <div class="panel-body">

                                        <label class="pull-right"><!-- PER PAGE SELECTOR -->
                                            <select class="form-control pointer" id="change-plan-{{ $plan->id }}"
                                                    cost="{{ $plan->cost }}" planid="{{ $plan->id }}"
                                                    disabled="disabled" name="plansdays{{ $plan->id }}">
                                                <option value="7" selected>7 / days</option>
                                                <option value="14">14 / says</option>
                                            </select>
                                        </label><!-- /PER PAGE SELECTOR -->
                                        <p>Promo options <strong>{{  $plan->name }}</strong>! <i
                                                    class="fa fa-info-circle text-blue size-20"
                                                    onclick="ModalPromoInfo('{{  $plan->slug }}')"></i></p>

                                    </div>
                                    <!-- /panel content -->

                                </div>

                            @endif
                        @endforeach
                        <input type="hidden" name="planssum" id="planssum">
                        <input type="hidden" name="totalcost" id="totalcost">
                        <input type="hidden" name="type" id="paymenttype">
                        <div id="plansubmitdiv" class="col-sm-8 size-20 weight-700"></div>
                        <div class="col-sm-4">
                            <button type="submit" id="plansubmit" class="btn btn btn-featured btn-green pull-right"
                                    disabled="disabled">
                                <span>
                                    <img src="{{ asset('images/cc/Visa.png') }}" alt="">
                                    <img src="{{ asset('images/cc/Mastercard.png') }}" alt="">
                                    <img src="{{ asset('images/cc/Discover-Network.png') }}" alt="">
                                    <img src="{{ asset('images/cc/PayPal.png') }}" alt="">
                                </span>
                                <i class="fa fa-money"></i>
                            </button>
                            {{--<button id="plansubmitbg" type="submit" class="btn btn btn-featured btn-green pull-right margin-top-20" disabled="disabled">
                                <span>
                                    <img src="{{ asset('images/cc/Maestro.png') }}" alt="">
                                    <img src="{{ asset('images/cc/ePay.png') }}" alt="">
                                </span>
                                <i class="fa fa-money"></i>
                            </button>--}}
                        </div>
                    </form>
                    <!-- /panel content -->

                </div>

            </div>
        </div>

        <!-- /LIST OPTIONS -->


        </div>
    </section>
@endsection

@section('footer_scripts')

    <script type="text/javascript">


        // правим субмит на формата с ajax, към урл в зависимот от типа на плащането



        $(document).ready(function () {


            $("#plansubmitbg").mouseover(function () {

                $("#paymenttype").val('2');
            });
            $("#plansubmit").mouseover(function () {

                $("#paymenttype").val('1');
            });


            $("input")
                .change(function () {
                    var $input = $(this);
                    var planid = $input.val();
                    var plancost = $("#plan-cost-" + planid).attr("cost");
                    $("#change-plan-" + planid).removeAttr('disabled');
                    $("#plansubmit").removeAttr('disabled');
                    $("#plansubmitbg").removeAttr('disabled');
                    var plansumvalue = $("#planssum").attr("value");
                    var planvalue = $("#change-plan-" + planid).val() + '-' + planid;

                    if ($("#plansubmitdiv").attr("value")) {
                        var plancostsum = $("#plansubmitdiv").attr("value");

                        var sum = 0;
                        if ($input.is(":checked")) {
                            sum = Number(plancostsum) + Number(plancost);

                        } else {
                            sum = Number(plancostsum) - Number(plancost);

                        }

                        $("#plansubmitdiv").attr("value", sum);
                        $("#totalcost").attr("value", sum);
                        $("#plansubmitdiv").html("AMOUNT: <b>" + sum + " &dollar;</b>");
                    } else {
                        $("#plansubmitdiv").attr("value", plancost);
                        $("#totalcost").attr("value", plancost);
                        $("#plansubmitdiv").html("AMOUNT: <b>" + plancost + " &dollar;</b>");
                    }

                    if ($("#plansubmitdiv").attr("value") == '0') {

                        $("#plansubmit").attr('disabled', true);
                        $("#plansubmitbg").attr('disabled', true);
                    }

                    if ($("#planssum").attr("value")) {
                        var plansidsum = 0;
                        if ($input.is(":checked")) {
                            plansidsum = planid + ',' + plansumvalue;
                        } else {

                            if ($.inArray(planid, [plansumvalue])) {
                                var plansidarr = null;
                                plansidarr = jQuery.grep(plansumvalue, function (value) {
                                    if (value !== planid) {
                                        value = value.replace(/,/g, '');
                                        return value;
                                    }

                                });

                            }
                            if (planid == plansumvalue) {
                                plansidarr = null;

                            }

                            plansidsum = plansidarr;

                        }

                        $("#planssum").attr("value", (plansidsum));

                    } else {

                        $("#planssum").attr("value", (planid));
                    }

                })

            $("select")
                .change(function () {
                    var $select = $(this);
                    var planid = $select.attr("planid");
                    var plancost = $select.attr("cost");
                    var selectval = $select.val();
                    var plancostsum = $("#plansubmitdiv").attr("value");

                    var sum = 0;

                    if (selectval == 14) {
                        sum = Number(plancostsum) + Number(plancost);

                    } else {
                        sum = Number(plancostsum) - Number(plancost);

                    }

                    $("#plansubmitdiv").attr("value", sum);
                    $("#totalcost").attr("value", sum);
                    $("#plansubmitdiv").html("AMOUNT: <b>" + sum + " &dollar;</b><br>");

                })


        });

        function ModalPromoInfo(id) {
            var titletxt;
            var texttxt;
            if (id == 'vip') {
                titletxt = 'Add Ads to Promo Option "FEATURED"!';
                texttxt = '<strong>FEATURED</strong> the ads are in special positions in a separate promo section located at the top of the page immediately after search.<br>' +
                    'Unlike the regular renewal, which places your ad at the top of the ad list once, <strong> PROMO </strong> ads appear at the top of the promo section for the period you choose';
            }
            if (id == 'home') {
                titletxt = 'Add Ads to Promo Option "HOME"!';
                texttxt = 'If you are looking for the most successful way to present your ad and reach the most people, promo option <strong>HOME</strong> is just for you! ' +
                    'There is no better way to speed up your sales than to show your ad on the homepage of <strong>WebMoto.us</strong>. '

            }
            if (id == 'refresh') {
                titletxt = 'Add Ads to Promo Option "FRESH"!';
                texttxt = 'Ads on <strong> WebMoto.us </strong> are sorted in the order of publication. Over time, each ad appears lower in search results because new ads are constantly published.' +
                    'Once you renew your ad, it will reappear at the top of the search results as a new one.'

            }
            swal({
                title: titletxt,
                type: "info",
                html: texttxt,
                showCancelButton: false

            });

        }

        function PromOptionsPay(formid, aadid, type) {
            console.log(formid);
            var postData = $("#" + formid).serializeArray();
            var token = jQuery("meta[name='csrf-token']").attr('content');


            $.ajax({
                method: 'POST', // Type of response and matches what we said in the route
                url: '/promoplans/subscribe/' + aadid + '/' + type, // This is the url we gave in the route
                data: {_token: token, '_data': postData, _type: type}, // a JSON object to send back
//            dataType: "json",
                success: function (response) { // What to do if we succeed
                    window.location.href = '/promoplans/subscribe/' + aadid + '/' + type;
                    console.log(response);
                },
                error: function (jqXHR, textStatus, errorThrown) { // What to do if we fail
                    console.log(JSON.stringify(jqXHR));
                    console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
                }
            });

        }


        $("#formoptions").submit(function (e) {

            frm = $(e.target).closest('form');
            var postData = $("#" + frm.attr('id')).serializeArray();
            var _type = $("#paymenttype").val();

            $.ajax({
                type: frm.attr('method'),
                url: frm.attr('action'),
                data: {_token: token, '_data': postData, type: _type}, // a JSON object to send back
                success: function (data) {
                    // alert(data); // show response from the php script.
                }
            });

            e.preventDefault(); // avoid to execute the actual submit of the form.
        });

    </script>

@endsection