@extends('layouts.page')

@section('title', 'Pricing and Plans')
@section('logo', 'logo/logo.svg')
@section('header_type','contained')
@section('container')

<div>
    <style>
        body {
            background: rgb(242, 245, 247);
        }
    </style>
    <div class="pt-5 container pricing-cards">
        <div class="row">
            <h1 class="m-auto">Pricing & Plans</h1>
        </div>
        <div class="row mt-4 px-2">
            <div class="col-lg px-1 py-3 mt-auto">
                <div class="card p-4">
                    <h2>Developer</h2>
                    <p>Try it out before you ask your boss.</p>
                    <span class="d-flex">
                        <h2>$0</h2>
                        <h3 class="pt-3">/mo</h3>
                    </span>
                    <p class="text-muted">Free</p>
                    <br>
                    <h3>Highlights:</h3>
                    <p>Error and Performance monitoring <br>
                        Support for all languages <br>
                        Release tracking</p>

                    <button class="btn btn-primary text-primary bg-white ">GET STARTED</button>
                </div>
            </div>
            <div class="col-lg px-1 py-3 mt-auto">
                <div class="card p-4">
                    <h2>Team</h2>
                    <p>Your boss said yes. Let’s find out what's broken.</p>
                    <span class="d-flex">
                        <h2>$26</h2>
                        <h3 class="pt-3">/mo</h3>
                    </span>
                    <p class="text-muted">When billed annually with default pre-paid data</p>
                    <br>
                    <h3>Highlights:</h3>
                    <p>Unlimited members <br>
                        Third-party integrations <br>
                        Metric alerts</p>

                    <button class="btn btn-primary ">START TRIAL</button>
                </div>
            </div>
            <div class="col-lg px-1 py-3 mt-auto">
                <div class="card p-4">
                    <h2>Business</h2>
                    <p>Looks like everyone could benefit from those insights</p>
                    <span class="d-flex">
                        <h2>$80</h2>
                        <h3 class="pt-3">/mo</h3>
                    </span>
                    <p class="text-muted">When billed annually with default pre-paid data</p>
                    <br>
                    <h3>Highlights:</h3>
                    <p>Advanced analytics with Discover <br>
                        Cross-project visibility <br>
                        Distributed tracing</p>

                    <button class="btn btn-primary ">START TRIAL</button>
                </div>
            </div>
            <div class="col-lg px-1 py-3 mt-auto">
                <div class="card p-4">
                    <h2>Enterprise</h2>
                    <p>Get Enterprise features on Team and Business plans.</p>
                    <br>
                    <h3>Highlights:</h3>
                    <p>High volume pricing <br>
                        Priority support and SLAs <br>
                        Single tenant options</p>

                    <button class="btn btn-primary text-primary bg-white ">CONTACT US</button>
                </div>
            </div>
        </div>
    </div>
    <div class="container mt-5 pt-3 prepaid">
        <h2>Pay Ahead, Save Money</h2>
        <p>Each of our plans comes with a default data-use quota. Once you reach that quota, you'll pay for any additional data used as you go. If you regularly exceed your quota, that means you're regularly paying-as-you-go, which regularly costs you more. Instead, you can reduce your costs when you pre-pay for data. It's that classic volume discount: when you use more, you pay less.</p>
        <div class="card p-4">
            <h4>Number of endpoints</h4>
            <span class="d-flex">
                <p class="text-muted pt-2">Errors are sent every time an SDK catches a bug. You can send them manually too, if you want.</p>
                <h3 id="errors-price" class="ml-auto mr-1">+$0</h3>
            </span>
            <input type="range" min="0" max="9" value="0" class="slider" id="errors-range">
            <!-- <br> -->
            <span class="d-flex"><span class="mr-auto ml-1">50K</span><span class="ml-auto mr-1">3M</span></span>
        </div>
        <div class="card p-4">
            <h4>Ping frequency</h4>
            <span class="d-flex">
                <p class="text-muted pt-2">Errors are sent every time an SDK catches a bug. You can send them manually too, if you want.</p>
                <h3 id="apis-price" class="ml-auto mr-1">+$0</h3>
            </span>
            <input type="range" min="0" max="9" value="0" class="slider" id="apis-range">
            <!-- <br> -->
            <span class="d-flex"><span class="mr-auto ml-1">50K</span><span class="ml-auto mr-1">3M</span></span>
        </div>
        <div class="bg-transparent p-4">
            <div class="row">
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg">
                            <h4>which plan would you like?</h4>
                            <input class="rd-btn" type="radio" id="team" name="plan" value="team" checked>
                            <label for="team">Team - <span id="team-price">$26</span>/mo</label><br>
                            <input class="rd-btn" type="radio" id="business" name="plan" value="business">
                            <label for="business">Business - <span id="business-price">$80</span>/mo</label><br>
                        </div>
                        <div class="col-lg">
                            <h4>How often do you want to pay?</h4>
                            <input class="durations rd-btn" type="radio" id="anually" name="duration" value="anually" checked>
                            <label for="anually">Anually</label><br>
                            <input class="durations rd-btn" type="radio" id="monthly" name="duration" value="monthly">
                            <label for="monthly">Monthly</label><br>
                        </div>
                    </div>
                </div>
                <div class="col-lg mr-1 pr-1">
                    <div class="row d-flex">
                        <div class="col p-0 mr-0">
                            <div class="card p-3">
                                <h4 class="mx-auto">Savings vs on-demand:</h4>
                                <h3 class="m-auto" style="color: #7352d3;">$64</h3>
                            </div>
                        </div>
                        <div class="col p-0  mr-0">
                            <div class="card p-3">
                                <h4 class="mx-auto">Total monthly cost:</h4>
                                <h3 class="m-auto">$87</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(window).on('load', function() {
        $('#errors-range').on("input", function() {
            var errorsprice = [0, 14, 29, 40, 60, 90, 113, 180, 240, 297];
            $('#errors-price').text('+$' + errorsprice[$('#errors-range').val()]);
        })
        $('#apis-range').on("input", function() {
            var apisprice = [0, 14, 29, 40, 60, 90, 113, 180, 240, 297];
            $('#apis-price').text('+$' + apisprice[$('#apis-range').val()]);
        })
        $(".durations").on('click', () => {
            if ($('#monthly').prop("checked")) {
                $('#team-price').text('$29');
                $('#business-price').text('$89');
            } else {
                $('#team-price').text('$26');
                $('#business-price').text('$80');
            }
        })
    });
</script>
@endsection