@extends('layouts.base')
@section('content')
    <link rel="stylesheet" href="{{ url('css/fontawesome.css') }}">
    <style>
        body {
            background-color: #F7FAFC;

        }

        .cart-obal {
            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: 50px;
        }

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

        .cart-obal h3 {
            font-weight: 600;
            font-size: 20px;
            margin-bottom: 20px;
            color: #000;
        }


        hr {
            outline: 0;
            height: 1px;
            background: #eaeaea;
            border-top: 0px solid #eaeaea;
            opacity: 1 !important;
            margin: 30px 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 16px;
            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;
            top: 5px !important;
            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;
        }

        .cart-block {
            padding-right: 30px;
        }

        @media (max-width: 768px) {


            .continue {
                font-size: 15px !important;
            }

            .mob-pad {
                padding-top: 40px !important;
            }

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

            .cart-obal h2 {
                font-size: 30px;
            }

            .cart-block {
                padding-right: calc(var(--bs-gutter-x) / 2);
            }
        }


        .checkout-image {
            height: 56px;
            width: 56px;
            border-radius: 28px;
            margin-right: 20px;
        }

        @media (max-width: 998px) {
            .order-1 {
                margin-bottom: 25px;
            }

            .cart-block {
                padding-right: calc(var(--bs-gutter-x) / 2);
            }

            .cart-resp {
                padding: 7px 30px 1px 30px !important;
                position: relative;
            }

            .upsell-btn {
                font-size: 15px !important;
            }

            .checkout-image {
                width: 48px;
                height: 48px;
            }

            .mob-icon {
                margin-left: 12px;
                margin-top: 3px;
            }

            .total-price {
                margin-bottom: 30px;
            }
        }

        .agree {
            text-align: center;
            font-size: 15px;
            line-height: 18px;
            font-weight: 400 !important;
            color: #535353;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
        }

        .checkout-name {
            font-weight: 500;
            font-size: 20px;
            line-height: 24px;
            margin-bottom: 7px;
            margin-top: 2px;
            color: #322f3b;
        }

        .checkout-change {
            font-weight: 500;
            font-size: 17px;
            margin-left: 2px;
            line-height: 17px;

        }

        .checkout-change a {
            color: #656565;
        }

        a:hover {
            text-decoration: underline;
        }

        .r-item {
            line-height: 24px;
            margin-bottom: 27px;
        }

        .checkout-icon {
            color: #fc591e;
            margin-right: 8px;
            line-height: 24px;
            height: 24px;
            width: 24px;
            font-size: 18px;
            text-align: center;
            font-weight: 400;
        }

        .checkout-amount {
            flex-grow: 1;
            color: #322f3b;
            font-size: 18px;
            font-weight: 400;
        }

        .checkout-amount strong {
            font-weight: 500;
        }

        .checkout-price {
            font-weight: 600;
            color: #322f3b;
            font-size: 18px;
            margin-top: 2px;
        }

        .upsell {
            background-color: #F0FCF5;
            padding: 24px 25px;
            border-radius: 15px;
            margin: 0 -25px 27px;
        }

        .btn-green {
            background-color: rgb(0, 201, 90);
            color: white;
            font-weight: 600;
            font-size: 17px;
            padding: 9px 35px;
        }

        .btn-green:hover {
            color: white;
            box-shadow: -1px 3px 10px 0 rgb(0 201 90 / 40%) !important;
        }

        .strike {
            display: inline-block;
            text-decoration: line-through;
            opacity: .6;
            margin-left: 6px;
        }

        .total-price {
            font-size: 22px;
            font-weight: 500;
            color: #322f3b;
        }

        .upsell-added {
            display: none;
            margin-top: -10px;
        }

        .mobile-down {
            font-size: 20px;
            height: 48px;
            width: 48px;
            background: #fff;
            border-radius: 24px;
            text-align: center;
            bottom: -6px;
            left: 50%;
            margin-left: -24px;
            z-index: 80;
            position: absolute;
            color: #5e5e5e;
        }

        .mobile-down .icon {
            text-align: center;
            vertical-align: top;
            display: inline-block;
            position: relative;
            left: 5px;
            top: 16px;
        }

        .rotate {
            transform: rotate(180deg);
            transition: .2s;
        }

        .rotate-reset {
            transform: rotate(0deg);
            transition: .2s;
        }

        .info-panel {
            color: #322f3b;
            background: #f0f0f0;
            padding: 19px 0;
            margin-top: 20px;
            margin-bottom: 28px;
            border-radius: 6px;
            width: 100%;
            text-align: center;
            font-size: 18px;
        }

        .info-panel b {
            font-weight: 500 !important;
        }

        .post-list {
            display: flex;
            justify-content: start;
            flex-wrap: wrap;
            user-select: none;
            margin: -8px;
        }

        .post-cell {
            user-drag: none;
            flex: 0 0 25%;
            display: flex;
            justify-content: center;
            align-items: stretch;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            filter: grayscale(100%);
        }

        @media only screen and (max-width: 767px) {
            .post-cell {
                flex: 0 0 33%;
            }

            .info-panel {
                font-size: 14px;
            }

            .order-info-card {
                display: none;
            }
        }

        @media only screen and (max-width: 500px) {
            .post-cell {
                flex: 0 0 50%;
            }
        }

        .post-cell:before {
            content: "";
            display: table;
            padding-top: 100%;
        }

        .post-cell-inner {
            margin: 8px;
        }

        .post-cell .post {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 8px;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
        }

        .post-cell .post img {
            width: 100%;
            height: auto;
            vertical-align: middle;
            border: 0;
        }

        .selectable {
            cursor: pointer;
            filter: none !important;
        }

        .selectable .img-check span {
            position: absolute;
            display: block;
            top: 12px;
            right: 12px;
            width: 28px;
            height: 28px;
            border-radius: 14px;
            background-color: transparent;
            border: 2px solid #fff;
            box-sizing: border-box;
            box-shadow: 0 0 5px rgb(0 0 0 / 30%);
        }

        .img-check .checked {
            background-color: #fc591e;
        }

        .checked .fajfka {
            content: "";
            position: absolute;
            top: 7px;
            left: 5px;
            width: 13px;
            height: 10px;
            background: url({{ url('/img/check_small.svg') }});
        }

        .post .img-check {
            width: 100%;
            height: 100%;
        }

        .post .img-check {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .likes-info {
            display: none;
            width: 100%;
            background-color: rgba(75, 75, 75, 0.6);
            color: white;
            font-size: 14px;
            text-align: center;
            position: absolute;
            left: 0;
            padding-top: 5px;
            padding-bottom: 5px;
            bottom: 0;
        }
    </style>
    <script src="https://js.stripe.com/v3/"></script>
    <div class="progress">
        <div class="bar"></div>
        <div class="value" style="width:75%"></div>
    </div>
    <input type="hidden" id="maxid" value="{{ session()->get('ig')[0]['maxId'] }}">
    <form action="/pay-views" method="POST">
        @csrf
        <input type="hidden" name="urls" class="url_input">
        <div class="container mob-pad" style="padding-top:90px; padding-bottom:180px;">
            <div class="row">
                <div class="col-lg-7 cart-block order-2 order-lg-1">
                    <div class="cart-obal">
                        <h2 style="text-align:center; font-family:'Source Sans Pro';">Zvolte videa</h2>
                        <div class="info-panel">
                            <b><span class="selected-posts">0</span> videí</b> vybráno / <b><span
                                    class="likes-count-total">{{ $pack->amount }}</span> views</b> na video
                        </div>
                        <div class="post-list" id="post-list">
                                                        @foreach (session()->get('ig') as $post)
                                @if ($loop->first)
                                    @continue
                                @endif
                                <div class="post-cell {{ $post['type'] == 2 ? 'selectable' : '' }}"
                                    data-id="{{ $forcount }}" data-checked="0" data-url="{{ $post['url'] }}"
                                    style="">
                                    <div class="post-cell-inner">
                                        <div class="post">
                                            <img src="{{ $cf . '/' . $post['img'] }}">
                                            <div class="likes-info info{{ $forcount }}">+<span
                                                    class="like-count">166</span> views</div>
                                        </div>

                                    </div>
                                    <div class="label img-check">
                                        <span class="stat{{ $forcount }} unchecked"><i class="fajfka"></i></span>
                                    </div>

                                </div>
                                                            @endforeach
                        </div>
                        <div style="margin-top:40px;">
                            @if (session()->get('ig')[0]['maxId'] != 'empty')
                                <div id="loadMoreDiv"
                                    style="text-align:center; border-bottom:1px solid #eaeaea; padding-bottom:10px; margin-bottom:15px; margin-top:-25px;">
                                    <button type="button" class="btn btn-rounded btn-alternate" id="loadMore"
                                        style="background: inherit; border:1px solid #ff603c; color:#ff603c;">
                                        <span class="spinner-border spinner-border-sm spinner-load" style="display: none;"
                                            role="status" aria-hidden="true"></span>
                                        Načíst starší příspěvky
                                    </button>
                                </div>
                            @endif
                            <button class="btn btn-alternate btn-rounded continue" type="submit"
                                style="color:white; font-weight:600; font-size:16px; width:100%; padding-top:15px; padding-bottom:15px;">
                                <span class="spinner-border spinner-border-sm" style="display: none;" role="status"
                                    aria-hidden="true"></span>
                                Pokračovat k zaplacení
                            </button>

                        </div>
                    </div>
                </div>
                <div class="col-lg-4 order-1 order-lg-2 order-info-card">
                    <div class="cart-obal cart-resp" style="padding:40px;">
                        <div class="mobile-down hide-block d-lg-none">
                            <div class="icon">
                                <i class="fas fa-angle-down"></i>
                            </div>
                        </div>
                        <div class="hide-block">
                            <div class="d-flex">
                                <img class="checkout-image" src="{{ $cf . '/' . session()->get('ig')[0]['picture'] }}"
                                    alt="">
                                <div style="flex-grow:1;">
                                    <div class="checkout-name">
                                        {{ '@' . session()->get('username') }}
                                    </div>
                                    <div class="checkout-change">
                                        <a href="/instagram-views/kosik">Změnit účet</a>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="r-item d-flex justify-content-start">
                                <div class="checkout-icon"><img src="{{ url('img/play.svg') }}"
                                        style="width:20px; height:20px;" alt="">
                                </div>
                                <div class="checkout-amount" style="margin-top:2px;"><strong>{{ $pack->amount }}</strong>
                                    Views</div>
                                <div class="checkout-price">{{ $pack->price }} Kč</div>
                            </div>
                            <hr>
                            <div>
                                <button class="btn btn-alternate btn-rounded continue" type="submit"
                                    style="color:white; font-weight:600; font-size:16px; width:100%; padding-top:15px; padding-bottom:15px;">
                                    <span class="spinner-border spinner-border-sm" style="display: none;" role="status"
                                        aria-hidden="true"></span>
                                    Pokračovat k zaplacení
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $('.continue').attr('disabled', true);
            var selected = 0;
            var totalLikes = {{ $pack->amount }};
            var likesPerPost = 0;
            var allUrls = {};

            $("#loadMore").click(function() {
                $(".spinner-load").show();
                $('#loadMore').attr('disabled', true);
                var maxId = $("#maxid").val();
                $.ajax({
                    type: 'POST',
                    url: "https://rychlelajky.cz/load-more-videos",
                    data: {
                        username: "{{ session()->get('ig')[0]['username'] }}",
                        max_id: maxId,
                    },
                    success: function(data) {
                        if(data[0].maxId===null){
                            $("#loadMoreDiv").hide();
                            return;
                        }
                        else{
                            $("#maxid").val(data[0].maxId);
                        }

                        if (data.hasOwnProperty('error')) {
                            alert(data.error);
                            $(".spinner-load").hide();
                            $('#loadMore').attr('disabled', false);
                        }
                        else{
                            var completeDiv = "";
                            for(var i = 1;i<data.length;i++){
                                var img = "{{$cf}}/"+data[i].img;
                                var div='<div class="post-cell" data-id="'+(i+11)+'" data-checked="0" data-url="'+data[i].url+'" style=""> <div class="post-cell-inner"> <div class="post"> <img src="'+img+'"> <div class="likes-info info'+(i+11)+'">+<span class="like-count">166</span> views</div> </div> </div> <div class="label img-check"> <span class="stat'+(i+11)+' unchecked"><i class="fajfka"></i></span> </div> </div>';
                                completeDiv+=div;
                            }
                            $("#post-list").append(completeDiv);

                            $(".spinner-load").hide();
                            $('#loadMore').attr('disabled', false);
                        }
                    }
                });
            });

            $("body").on("click", ".selectable", function() {
                console.log("clicked");
                var data = $(this).data("id");
                if (totalLikes / (selected + 1) < 25 && $(this).attr("data-checked") == 0) {
                    alert("Minimálně lze zakoupit 25 lajků na příspěvek.");
                } else {
                    if ($(this).attr("data-checked") == 0) {
                        $(this).attr("data-checked", 1);
                        selected++;
                        allUrls[data] = $(this).attr("data-url");
                        likesPerPost = totalLikes / selected;
                        $('.continue').attr('disabled', false);
                    } else {
                        $(this).attr("data-checked", 0);
                        selected--;
                        delete allUrls[data];
                        if (selected != 0) likesPerPost = totalLikes / selected;
                        else {
                            likesPerPost = totalLikes;
                            $('.continue').attr('disabled', true);
                        }
                    }
                    $(".url_input").val(JSON.stringify(allUrls));
                    $(".likes-count-total").text(parseInt(likesPerPost));
                    $(".like-count").text(parseInt(likesPerPost));
                    $(".selected-posts").text(parseInt(selected));
                    $(".stat" + data).toggleClass("unchecked");
                    $(".stat" + data).toggleClass("checked");
                    $(".info" + data).toggle();
                }

            });

            $("form").submit(function() {
                $(".spinner-border").show();
                $('.continue').attr('disabled', true);
            });
        });
    </script>
@endsection