@extends('layouts.home')

@section('title', 'Flexible pricing plans for keeping your secrets!')

@section('custom')
    <style>
    .center {
        border: 0 !important;
        text-align: center;
        padding: 5px 0 !important;
    }

    #slider {
        background: linear-gradient(to right, #740e17 0%, #740E17 25%, #fff 25%, #fff 100%);
        border: solid 1px #740E17;
        border-radius: 8px;
        height: 7px;
        width: 100%;
        outline: none;
        transition: background 450ms ease-in;
        -webkit-appearance: none;
    }

    #slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #740E17;
        cursor: pointer;
    }

    /** FF*/
    input[type="range"]::-moz-range-progress {
        background-color: #740e17;
    }
    input[type="range"]::-moz-range-track {
        background-color: #740e17;
    }
    /* IE*/
    input[type="range"]::-ms-fill-lower {
        background-color: #740e17;
    }

    .flex {
        display: flex;
        margin: auto;
        text-align: center;
        padding: 10px;
    }

    .bordered {
        border-bottom: 1px #ddd solid;
        vertical-align: middle;
    }
    </style>
@stop

@section('content')
    <br><br>
    <div class="center"><h2>@lang('pricing.choose')</h2></div>
    <div class="center"><h5>@lang('pricing.howmuch')</h5></div>
    <div class="center"><h4 id="mbsize">2 GB</h4></div>
    <div class="center"><input type="range" value="2" min="1" step="1" max ="10" id="slider"></div>
    <div class="well-lg" style="margin: 0 90px 0 90px; background-color: whitesmoke; position: relative; top: 40px; border-radius: 30px; height: auto; padding: 30px 20px 30px 20px;"><h2 style="color: #740e17; padding-left: 10px;" id="planName">@lang('pricing.p2')</h2><span style="width: 100%;border-bottom: 1px #740e17 solid;"></span>
        <div class="row bordered" id="col1" ></div>
        <div class="row bordered" id="col2"></div>
        <div class="row bordered" id="col3"></div>
        <div class="row bordered" id="col4"></div>
        <div class="row bordered" id="col6"></div>
        <div class="row bordered" id="col7"></div>
        <div id="col5"></div>
    </div>
@stop

@section('js')
    <script type="text/javascript">
        $(document).ready(function () {
            var plan = [@foreach($plans as $p) "{!! $p->name !!}", @endforeach];
            var space = [@foreach($plans as $p) "{!! $p->gb !!}", @endforeach];
            var mnr = [@foreach($plans as $p) "{!! $p->maxRecipients !!}", @endforeach];
            var mnm = [@foreach($plans as $p) "{!! $p->maxMessagesPerMonth !!}", @endforeach];
            var pinopt = [@foreach($plans as $p) @if($p->PINoption == '1') true @else false @endif, @endforeach];
            var prz = [@foreach($plans as $p) "{!! $p->priceMonth !!}", @endforeach];
            var przY = [@foreach($plans as $p) "{!! $p->priceYear !!}", @endforeach];

            $("#slider").on('input', function () {
                $(this).css('background', 'linear-gradient(to right, #740E17 0%, #740E17 ' + (this.value-1)*100/9 + '%, #fff ' + (this.value-1)*100/9 + '%, white 100%)');
                $('#planName').text(plan[this.value-1]);
                $('#mbsize').text(space[this.value-1]+" GB");
                $('#col1').html(" <div class=\"col-lg-3 flex\"><h5>@lang('pricing.id1_mbsize')</h5></div><div class=\"col-lg-2 flex\"><h5>"+space[this.value - 1]+" GB</h5></div> <div class=\"col-lg-7\"><span class=\"help-block\" style=\"font-size: 0.9em; color: #777;\">@lang('pricing.id1_hb')</span> </div>");
                $('#col2').html(" <div class=\"col-lg-3 flex\"><h5>@lang('pricing.id2_max_recs')</h5></div><div class=\"col-lg-2 flex\"><h5>"+mnr[this.value-1]+"/msg</h5></div> <div class=\"col-lg-7\"><span class=\"help-block\" style=\"font-size: 0.9em; color: #777;\">@lang('pricing.id2_hb')</span> </div>");
                $('#col4').html(" <div class=\"col-lg-3 flex\"><h5>@lang('pricing.id3_pin')</h5></div><div class=\"col-lg-2 flex\">"+((pinopt[this.value-1])? "<span style=\"border-radius: 50%; width: 10px; height: 10px; background-color: #0FA015;\"></span>":"<span style=\"top: -10px; position: relative; font-size: 2em; color: #740e17;\">&times;</span>")+"</div> <div class=\"col-lg-7\"><span class=\"help-block\" style=\"font-size: 0.9em; color: #777;\">@lang('pricing.id3_hb')</span> </div>");
                $('#col3').html(" <div class=\"col-lg-3 flex\"><h5>@lang('pricing.id4_max_msg')</h5></div><div class=\"col-lg-2 flex\"><h5>"+mnm[this.value-1]+"/@lang('pricing.id4_mo')</h5></div> <div class=\"col-lg-7\"><span class=\"help-block\" style=\"font-size: 0.9em; color: #777;\">@lang('pricing.id4_hb')</span> </div>");
                $('#col6').html(" <div class=\"col-lg-3 flex\"><h5>@lang('pricing.id5_priceM')</h5></div><div class=\"col-lg-2 flex\"><p style=\"background-color: #740e17; border-radius: 6px; color: white; font-weight: bold; padding: 3px 15px 3px 15px;\" class=\"flex\">"+prz[this.value-1]+" &euro;/@lang('pricing.id4_mo')</p></div> <div class=\"col-lg-7\"></div>");
                $('#col7').html(" <div class=\"col-lg-3 flex\"><h5>@lang('pricing.id6_priceY')</h5></div><div class=\"col-lg-2 flex\"><p style=\"background-color: #740e17; border-radius: 6px; color: white; font-weight: bold; padding: 3px 15px 3px 15px;\" class=\"flex\">"+przY[this.value-1]+" &euro;/@lang('pricing.id4_year')</p></div> <div class=\"col-lg-7\"></div>");

                $('#col5').html("<button class=\"btn btn-lg\" style=\"background-color: #740e17 !important; color: white;\" data-plan=\""+this.value+"\" id=\"buybtnm\" type=\"button\">@lang('pricing.buybtnm')</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button class=\"btn btn-lg\" style=\"background-color: #740e17 !important; color: white;\"  data-plan=\""+this.value+"\" id=\"buybtny\" type=\"button\">@lang('pricing.buybtny')</button> ");
            });

            $('#slider').trigger('input');

            $(document).on('click', '#buybtnm', function() {
               document.location.href = "/buy/"+$(this).data('plan');
            });
        })
    </script>
@stop