@extends('layouts.master')
@section('page_title', 'Lifetime Value Calculator')
@section('content')
    <div class="container">
        {{ Form::page_header("Lifetime value calculator", "business") }}
        <div class="row col-md-10 col-md-offset-1 ">
            <div class="grey-bg curve_container">
                {{ Form::open(['url' => $post_url,'id' => 'ltv_form']) }}
                <div class="row">
                    <div class="col-md-6">
                        {{ Form::label_title('New leads') }}
                    </div>
                    <div class="col-md-6">
                        {{ Form::label_title('Average conversion rate') }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 input-box">
                        {{ Form::number_ex('leads', null, 4, null, null, null) }}
                    </div>
                    <div class="col-md-6 input-box">
                        {{ Form::percent_ex('avg_conversion', null, 4) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        {{ Form::label_styled('Total leads provided by boomtime services so far this year', 'box-label', \App\Helpers\FormComponentHelper::SIZE_SMALL) }}
                    </div>
                    <div class="col-md-6">
                        {{ Form::label_styled('The percentage of new leads your business typically closes', 'box-label', \App\Helpers\FormComponentHelper::SIZE_SMALL) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        {{ Form::label_title('Average customer spend') }}
                    </div>
                    <div class="col-md-6">
                        {{ Form::label_title("boomtime's yearly fees") }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 input-box">
                        {{ Form::row_dollar_inline('avg_year_spent', null, null, null, 4) }}
                    </div>
                    <div class="col-md-6 input-box">
                        {{ Form::row_dollar_inline('bt_cost', null, null, null, 4) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        {{ Form::label_styled('How much a typical client is worth in revenue per year', 'box-label', \App\Helpers\FormComponentHelper::SIZE_SMALL) }}
                    </div>
                    <div class="col-md-6">
                        {{ Form::label_styled('How much you paid boomtime over the last 12 months', 'box-label', \App\Helpers\FormComponentHelper::SIZE_SMALL) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        {{ Form::label_title('Average customer retention') }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        {{ Form::number_ex('retention', null, 4) }}
                        {{ Form::label('', 'Years', ['class'=>'bt-label bt-suffix']) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        {{ Form::label_styled('The typical number of years a customer stays with your business, rounded to the nearest whole number', 'box-label', \App\Helpers\FormComponentHelper::SIZE_SMALL) }}
                    </div>
                </div>
                <div class="row text-right">
                    {{ Form::button_right('Calculate', 'calculate_value()') }}
                </div>
            </div>
                <hr>
            @include('business._lifetime_value_total', compact('total_value', 'lifetime_value'))
            {!! Form::close() !!}
        </div>
    </div>
@endsection
@section('page_script')
    @include('shared_script._status_alert_notification_script')
    <script id="scriptId">
        function calculate_value() {
            let data = $('form').serialize();
            $.ajax({
                url: '{{ action('LifetimeValueController@post_lifetime_value_calculator', compact('business')) }}',
                method: 'POST',
                data: data,
                success: function (response) {
                    if (response.success) {
                        $('#ltv-total').html(response.view);
                    }
                    else {
                        status_alert(false, 'One or more fields are empty.', 10000);
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
    </script>
@endsection
@section('page_style')
    <style>
        .box-label {
            height: 40px;
            padding: 1px;
            color: darkgray;
            font-size: 10px;
            font-weight: lighter;
        }
        .input-box {
            height: 44px;
        }
    </style>
@endsection