@extends('layouts.base')
@section('content')
<style>
    body {
        background-color: #F7FAFC;

    }

    h2 {
        font-family: 'Source Sans Pro';
    }

    .cart-obal {
        max-width: 640px;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 6px 6px rgb(0 0 0 / 4%), 0 0 42px rgb(0 0 0 / 4%);
        padding: 40px;
        margin: 0 auto;
    }

    .cart-obal h2 {
        text-align: center;
        font-weight: 700;
        font-size: 38px;
        color: #322f3b;
        margin-bottom: 0;
    }

    hr {
        outline: 0;
        height: 1px;
        background: #eaeaea;
        border-top: 0px solid #eaeaea;
        opacity: 1 !important;
        margin: 40px 0;
    }

    .progress {
        background-color: #efefef;
        height: 6px;
    }

    .bar {
        background: #efefef;
    }

    .value {
        height: 6px;
        background: #fc591e;
    }

    .form-control {
        font-family: 'Source Sans Pro', sans-serif;
        display: block;
        height: 56px;
        width: 100%;
        padding: 15px 16px 16px 53px;
        line-height: 24px;
        outline: 0;
        background: #fff;
        border: 1px solid #e5e5e5;
        font-size: 18px !important;
        text-align: left;
        font-weight: 400;
        color: #000 !important;
        box-sizing: border-box;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }

    .form-control.active,
    .form-control:focus {
        border-color: #fc654b;
        box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
    }

    .input-icon {
        z-index: 100;
        pointer-events: none;
        margin: 0;
        position: absolute;
        top: 18px;
        left: 17px;
        width: 20px;
    }

    .form-group {
        position: relative;
        margin-bottom: 16px;
        box-sizing: border-box;
    }

    ::placeholder {
        color: #757575 !important;
        font-size: 18px !important;
        opacity: 1 !important;
    }

    .selector {
        position: relative;
        font-size: 18px;
        color: #000;
        font-weight: 400;
    }

    .selector strong {
        font-weight: 600;
    }

    .selector>button.form-control {
        position: relative;
        margin-bottom: 6px;
        padding-right: 56px;
        background-color: white;
    }


    .selector .alt:last-child {
        margin-left: 0;
    }

    .selector .alt {
        margin-left: 10px;
        float: right;
        font-size: 17px;
        font-weight: 600;
        color: #000;
        text-align: right;
    }

    .selector>button.form-control:after {
        content: "";
        position: absolute;
        top: 25px;
        right: 18px;
        width: 0;
        height: 0;
        border-color: #464b4d transparent transparent;
        border-style: solid;
        border-width: 6px 5px 0;
    }

    .selector .dropdown-stylized {
        position: absolute;
        margin: 0;
        padding-top: 0px;
        padding-bottom: 0px;
        width: 100%;
        left: 0;
        right: 0;
    }

    .dropdown-stylized a:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .dropdown-stylized a {
        position: relative;
        padding: 12px 22px;
        box-sizing: border-box;
        display: block;
        color: #000;
        text-decoration: none;
        white-space: nowrap;
        width: 100%;
        font-size: 16px;
        line-height: 22px;
        background-color: #fff;
        transition: background-color .15s ease-in-out;
    }

    .dropdown-stylized a:hover {
        background-color: #e9e9e9;
    }

    .dropdown-stylized a:after {
        content: "";
        display: block;
        position: absolute;
        height: 1px;
        background: #dfdfdf;
        bottom: 0;
        left: 0;
        right: 0;
    }

    @media (min-width: 768px) {
        .animate {
            animation-duration: 0.3s;
            -webkit-animation-duration: 0.3s;
            animation-fill-mode: both;
            -webkit-animation-fill-mode: both;
        }
    }

    @keyframes slideIn {
        0% {
            transform: translateY(1rem);
            opacity: 0;
        }

        100% {
            transform: translateY(0rem);
            opacity: 1;
        }

        0% {
            transform: translateY(1rem);
            opacity: 0;
        }
    }

    @-webkit-keyframes slideIn {
        0% {
            -webkit-transform: transform;
            -webkit-opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            -webkit-opacity: 1;
        }

        0% {
            -webkit-transform: translateY(1rem);
            -webkit-opacity: 0;
        }
    }

    .slideIn {
        -webkit-animation-name: slideIn;
        animation-name: slideIn;
    }

    .checkbox label:before {
        border-radius: 6px;
        border: 1px solid #c4c4c4 !important;
        font-size: 15px;
        line-height: 6px;
        padding-left: 6px;
        content: "\2713";
        color: white;
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

    .checkbox input:checked+label:before {
        background: #ff603c;
    }

    .checkbox input:checked+label:before,
    .radio input:checked+label:before {
        text-align: center;
        border-color: #ff603c !important;
    }

    @media (max-width: 768px) {
        .mob-pad {
            padding-top: 40px !important;
        }

        .cart-obal {
            padding: 50px 35px;
        }

        .cart-obal h2 {
            font-size: 30px;
        }
    }
</style>
<div class="progress">
    <div class="bar"></div>
    <div class="value" style="width:25%"></div>
</div>
<div class="container mob-pad" style="padding-top:90px; padding-bottom:180px;">
    <div class="cart-obal">
        <form action="/tik-step" method="POST">
            @csrf
            <h2>Objednávka služby</h2>
            <hr>
            <div>
                @error('account')
                <div class="alert alert-danger" style="text-align:center;">
                    {{ $message }}
                </div>
                @enderror
                <div class="form-group mb-3">
                    <img src="{{ url('img/tiktok.svg') }}" class="input-icon" alt="">
                    <input type="text" class="form-control" id="username" name="username" required placeholder="Tiktok @přezdívka" aria-label="Username" value="{{ session()->has('username') ? session()->get('username') : '' }}" aria-describedby="basic-addon1">
                </div>
                <div class="form-group mb-3">
                    <img src="{{ url('img/email.svg') }}" class="input-icon" alt="">
                    <input type="email" class="form-control" id="email" name="email" required placeholder="Email" aria-label="Email" aria-describedby="basic-addon1" value="{{ session()->has('email') ? session()->get('email') : '' }}">
                </div>
                <div class="form-group mb-3">
                    <img class="input-icon" src="{{ url('/img/user.svg') }}">
                    <div class="selector dropdown">
                        <input type="hidden" name="plan" value="112">
                        <button type="button" class="form-control dropdown-toggle" data-bs-display="static" data-bs-toggle="dropdown"><strong class="amount">{{ $pack->amount }}</strong> Followers<span class="alt price-flw" style="font-size:19px; font-weight:700;">{{ $pack->price }}
                                Kč</span></button>
                        <div class="dropdown-menu dropdown-stylized">
                            @foreach ($packs as $p)
                            <a href="#" data-id="{{ $p->id }}" data-price="{{ $p->price }}" data-amount="{{ $p->amount }}" class="package-selector"><span class="desc"><strong>{{ $p->amount }}</strong>
                                    Followers</span><span class="alt">{{ $p->price }} Kč</span></a>
                            @endforeach
                        </div>
                    </div>
                </div>
                <input type="hidden" name="pack_id" id="pack_id" value="{{ $pack->id }}">

                <div style="text-align:center; margin-top:40px;">
                    <button class="btn btn-alternate btn-rounded continue" type="submit" style="color:white; font-weight:600; font-size:18px; width:100%; padding-top:15px; padding-bottom:15px;" disabled>
                        <span class="spinner-border spinner-border-sm" style="display: none;" role="status" aria-hidden="true"></span>
                        Pokračovat
                    </button>
                </div>

            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(document).ready(function() {
        if ($("#username").val().length != 0 && $("#email").val().length != 0) {
            $('.continue').attr('disabled', false);
        } else {
            $('.continue').attr('disabled', true);
        }
        $(".form-control").keyup(function() {
            if ($("#username").val().length != 0 && $("#email").val().length != 0) {
                $('.continue').attr('disabled', false);
            } else {
                $('.continue').attr('disabled', true);
            }
        });

        $("form").submit(function() {
            $(".spinner-border").show();
            $('.continue').attr('disabled', true);
        });

        $(".package-selector").click(function() {
            event.preventDefault();
            $("#pack_id").val($(this).data("id"));
            $(".price-flw").html($(this).data("price") + " Kč");
            $(".amount").html($(this).data("amount"));
        });
    });
</script>
@endsection