@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>{{__('Select your account')}}</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 @username" aria-label="Username"
                            value="{{ session()->has('username') ? session()->get('username') : '' }}"
                            aria-describedby="basic-addon1">
                        <div style="margin-top:3px; margin-left:5px; font-size:14px; display:none;"><a href="#" id="clickable"
                                data-bs-toggle="modal" data-bs-target="#tuto" type="button">Where I find TikTok username?</a></div>
                    </div>
                    <div id="ex11" class="modal">
        <p>You have to enter your TikTok Username, not name. If you click your profile, you find it with @.</p>
        <a href="#" rel="modal:close">Close</a>
    </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="{{__('Your Email')}}" aria-label="Email" aria-describedby="basic-addon1"
                            value="{{ session()->has('email') ? session()->get('email') : '' }}">
                        <div style="margin-left:4px; font-size:14px; margin-top:5px;">{{__('We only use your email to send you confirmation of payment. We never send spam.')}}</div>
                    </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;">{{ number_format($pack->price, 2, ",") }}€
                                </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">{{ number_format($p->price, 2, ",") }}€</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>
                            <span id="text-inside">{{__('Load and continue')}}</span>
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </div>

@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $("#clickable").click(function() {
                $("#ex11").modal({
                    fadeDuration: 100
                });
            });


            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);
                $("#text-inside").html("{{__('Loading profile...')}}");
            });

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