@extends('layouts.base')
@section('content')
<style>
    .ig-status-checker {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        color: white !important;
    }

    .ig-status-checker.success {
        background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    }

    .ig-status-checker.warning {
        background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    }

    .status-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .status-icon-wrapper {
        background: rgba(255, 255, 255, 0.1);
        padding: 8px;
        border-radius: 50%;
    }

    .status-item {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.1);
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .status-item:last-child {
        margin-bottom: 0;
    }

    .check-icon-wrapper {
        background: #34D399;
        padding: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .x-icon-wrapper {
        background: #EF4444;
        padding: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .completed-text {
        text-decoration: line-through;
        opacity: 0.7;
    }

    .form-label {
        font-weight: 500;
        margin-bottom: 0px;
        font-size: 14px;
    }

    .form-control {
        font-size: 16px !important;
        padding: 15px;
        margin: 7px 0 20px;
        border: 1px solid transparent;
        background-color: #f2f6f9;
        border-radius: 12px;
        color: #313336;
        font-weight: 400;
        box-shadow: none;
    }

    .form-control:focus {
        box-shadow: none;
        border: 1px solid #FF603C;
        color: #313336;
    }

    .send-review {
        width: auto;
    }

    .contact-form {
        box-shadow: 0px 0px 10px 0px #f1f1f1;
        border: 1px solid #EDEDED;
        border-radius: 10px;
        max-width: 750px;
        padding: 50px 30px;
        margin: 30px auto 0;
    }

    .form-label.required:after {
        content: "*";
        color: #ff603c;
        top: -2px;
        right: -11px;
        opacity: 1;
    }

    .status-check {
        display: inline-block;
        text-align: left;
        color: #333;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    @media only screen and (max-width: 998px) {
        h1 {
            margin-top: 25px;
        }
    }

    .kompletni .done-icon {
        display: block !important;
    }

    .kompletni .wait-icon {
        display: none !important;
    }

    .kompletni {
        opacity: 1 !important;
    }
</style>
<header class="header section app-landing-2-header" style="background-color:white !important;" data-aos="fade-up">
    <div class="shapes-container">
        <!-- diagonal shapes -->
        <div class="shape shape-animated" data-aos="fade-down-right" data-aos-duration="1500" data-aos-delay="100">
        </div>
        <div class="shape shape-animated" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="100"></div>
        <div class="shape shape-animated" data-aos="fade-up-left" data-aos-duration="500" data-aos-delay="200"></div>
        <div class="shape shape-animated" data-aos="fade-up" data-aos-duration="500" data-aos-delay="200"></div>
        <!-- static shapes -->
        <div class="static-shape shape-ring shape-ring-1">
            <div class="animation animation--rotating"></div>
        </div>
        <div class="static-shape shape-ring shape-ring-2">
            <div class="animation animation--rotating-clockwise"></div>
        </div>
        <div class="static-shape pattern-dots-1"></div>
        <!-- main shape -->

    </div>
    <div class="container">
        <div class="gap-y align-items-center text-center header-main">
            <h1 style="font-weight:600; font-size:25px;">Stav objednávky č. 100{{ $order->id }}</h1>

        </div>
        <div>
            <div class="contact-form">
                <div class="d-flex" style="justify-content: center; margin-bottom:30px;">
                    <div style="display:flex; align-items:center;">
                        <svg style="margin-right:8px;" xmlns="http://www.w3.org/2000/svg" fill="#23CF87" width="30"
                            height="30" viewBox="0 0 512 512">
                            <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
                            <path
                                d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z" />
                        </svg>
                    </div>
                    <div style="font-weight:600; text-align:center; font-size:23px; color:#313336;">Vaše objednávka byla
                        úspěšně zaplacena!</div>
                </div>
                <hr>
                <div style="text-align:center;">
                    <div class="status-check">
                        @if($order_type == "instagram-followers")
                            <div class="ig-status-checker {{ (!$isSpam && !$isPrivate) ? 'success' : 'warning' }}"
                                style="padding: 25px; border-radius: 15px; color: white !important;">

                                <div class="status-header">
                                    <h2 style="font-size: 20px; font-weight: 600; color: white !important;">
                                        @if(!$isSpam && !$isPrivate)
                                            Všechno v pořádku! 🎉
                                        @else
                                            Zbývá POSLEDNÍ krok!
                                        @endif
                                    </h2>
                                </div>

                                <div class="status-items">
                                    {{-- Public Profile Check --}}
                                    <div class="status-item">
                                        <div class="{{ !$isPrivate ? 'check-icon-wrapper' : 'x-icon-wrapper' }}">
                                            @if(!$isPrivate)
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 24 24" fill="none" stroke="#064E3B" stroke-width="2">
                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                </svg>
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 24 24" fill="none" stroke="#7F1D1D" stroke-width="2">
                                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                                </svg>
                                            @endif
                                        </div>
                                        <p style="font-weight: 500;" class="{{ !$isPrivate ? 'completed-text' : '' }}">
                                            Nastavte profil na veřejný.
                                        </p>
                                    </div>

                                    {{-- Spam Settings Check --}}
                                    <div class="status-item">
                                        <div class="{{ !$isSpam ? 'check-icon-wrapper' : 'x-icon-wrapper' }}">
                                            @if(!$isSpam)
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 24 24" fill="none" stroke="#064E3B" stroke-width="2">
                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                </svg>
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 24 24" fill="none" stroke="#7F1D1D" stroke-width="2">
                                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                                </svg>
                                            @endif
                                        </div>
                                        <div style="display: flex; align-items: center; gap: 10px; width: 100%;">
                                            <p style="font-weight: 500;" class="{{ !$isSpam ? 'completed-text' : '' }}">
                                                Vypněte speciální kontrolu sledujících.
                                            </p>
                                            @if($isSpam)
                                                <button onclick="openGuideModal()"
                                                    style="background: rgba(255,255,255,0.2); padding: 5px 12px; border-radius: 6px; font-size: 13px; border: none; color: white; cursor: pointer;">
                                                    Jak to udělat?
                                                </button>
                                            @endif
                                        </div>
                                    </div>

                                    @if($isSpam || $isPrivate)
                                        <div class="status-item" style="justify-content: center;">
                                            <button id="checkAgainBtn" onclick="checkAccountStatus()"
                                                style="background: rgba(255,255,255,0.2); padding: 8px 20px; border-radius: 8px; font-size: 14px; border: none; color: white; cursor: pointer; display: flex; align-items: center; gap: 8px;">
                                                <span id="checkButtonText">Zkontrolovat znovu</span>
                                                <div id="loadingSpinner"
                                                    style="display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 1s linear infinite;">
                                                </div>
                                            </button>
                                        </div>
                                        <div id="errorMessage"
                                            style="display: none; color: white; background: rgba(255,0,0,0.2); padding: 10px; border-radius: 8px; margin-top: 10px; text-align: center; font-size: 14px;">
                                            Podle naší kontroly je profil stále špatně nakonfigurovaný.
                                        </div>
                                    @endif

                                    @if(!$isSpam && !$isPrivate)
                                        <div class="status-item">
                                            <div class="check-icon-wrapper">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 24 24" fill="none" stroke="#064E3B" stroke-width="2">
                                                    <polyline points="20 6 9 17 4 12"></polyline>
                                                </svg>
                                            </div>
                                            <p style="font-weight: 700;">Sledující začnou brzy přibývat!</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @else
                            <div class="d-flex" style="width:auto; margin:0 auto;">
                                <div class="done-icon">
                                    <!--begin::Svg Icon | path: assets/media/icons/duotune/general/gen037.svg-->
                                    <span><svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24"
                                            fill="none">
                                            <rect x="2" y="2" width="20" height="20" rx="5" fill="#FFDFC7" />
                                            <path
                                                d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z"
                                                fill="#FF5D00" />
                                        </svg></span>
                                    <!--end::Svg Icon-->
                                </div>
                                <div style="font-size:17px; margin-left:10px; font-weight:400; margin-top:2px;">Přijali jsme
                                    vaší platbu.</div>
                            </div>
                            <div class="d-flex" style="width:auto; margin:0 auto; margin-top:8px;">
                                <div class="done-icon">
                                    <!--begin::Svg Icon | path: assets/media/icons/duotune/general/gen037.svg-->
                                    <span><svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24"
                                            fill="none">
                                            <rect x="2" y="2" width="20" height="20" rx="5" fill="#FFDFC7" />
                                            <path
                                                d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z"
                                                fill="#FF5D00" />
                                        </svg></span>
                                    <!--end::Svg Icon-->
                                </div>
                                <div style="font-size:17px; margin-left:10px; font-weight:400; margin-top:2px;">Odeslán
                                    email s potvrzením.</div>
                            </div>
                            <div class="d-flex" style="width:auto; margin:0 auto; margin-top:8px;">
                                <div class="done-icon">
                                    <!--begin::Svg Icon | path: assets/media/icons/duotune/general/gen037.svg-->
                                    <span><svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24"
                                            fill="none">
                                            <rect x="2" y="2" width="20" height="20" rx="5" fill="#FFDFC7" />
                                            <path
                                                d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z"
                                                fill="#FF5D00" />
                                        </svg></span>
                                    <!--end::Svg Icon-->
                                </div>
                                <div style="font-size:17px; margin-left:10px; font-weight:400; margin-top:2px;">Objednávka
                                    je nyní spuštěna.</div>
                            </div>
                            <div id="komp" class="d-flex" style="width:auto; margin:0 auto; margin-top:8px; opacity:0.3;">
                                <div class="done-icon" style="display:none;">
                                    <!--begin::Svg Icon | path: assets/media/icons/duotune/general/gen037.svg-->
                                    <span><svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24"
                                            fill="none">
                                            <rect x="2" y="2" width="20" height="20" rx="5" fill="#FFDFC7" />
                                            <path
                                                d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z"
                                                fill="#FF5D00" />
                                        </svg></span>
                                    <!--end::Svg Icon-->
                                </div>
                                <div class="wait-icon">
                                    <!--begin::Svg Icon | path: assets/media/icons/duotune/general/gen012.svg-->
                                    <span class="svg-icon svg-icon-muted svg-icon-2hx"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 14 21"
                                            fill="none">
                                            <path opacity="0.3"
                                                d="M12 6.20001V1.20001H2V6.20001C2 6.50001 2.1 6.70001 2.3 6.90001L5.6 10.2L2.3 13.5C2.1 13.7 2 13.9 2 14.2V19.2H12V14.2C12 13.9 11.9 13.7 11.7 13.5L8.4 10.2L11.7 6.90001C11.9 6.70001 12 6.50001 12 6.20001Z"
                                                fill="black" />
                                            <path
                                                d="M13 2.20001H1C0.4 2.20001 0 1.80001 0 1.20001C0 0.600012 0.4 0.200012 1 0.200012H13C13.6 0.200012 14 0.600012 14 1.20001C14 1.80001 13.6 2.20001 13 2.20001ZM13 18.2H10V16.2L7.7 13.9C7.3 13.5 6.7 13.5 6.3 13.9L4 16.2V18.2H1C0.4 18.2 0 18.6 0 19.2C0 19.8 0.4 20.2 1 20.2H13C13.6 20.2 14 19.8 14 19.2C14 18.6 13.6 18.2 13 18.2ZM4.4 6.20001L6.3 8.10001C6.7 8.50001 7.3 8.50001 7.7 8.10001L9.6 6.20001H4.4Z"
                                                fill="black" />
                                        </svg></span>
                                    <!--end::Svg Icon-->
                                </div>
                                <div style="font-size:17px; margin-left:10px; font-weight:400; margin-top:2px;">
                                    Objednávka
                                    je kompletně doručena.</div>
                            </div>
                        @endif
                    </div>
                </div>
                <hr>
                <div style="text-align:center; color:#333; padding-top:20px; font-size:20px;">TikTok Followers a TikTok
                    Likes mají momentálně větší zpoždění kvůli TikTok aktualizaci. Již pracujeme na urychlení. Dáme vám
                    zdarma 10% navíc jako omluvu.
                </div>
                <div style="text-align:center; color:#333; padding-top:20px;">Pokud máte jakýkoliv dotaz, kontaktujte
                    nás.<br><a href="/kontakt" class="btn btn-alternate btn-rounded"
                        style="color:white; font-size:14px; font-weight:600; background-color:#ff603c; padding: 10px 22px; border-radius:8px; margin-top:15px;">Kontaktovat</a>
                    <p>Spuštění probíhá
                        vždy automaticky ihned po přijetí platby. Sledující většinou začnou přibývat ihned, ale v
                        některých případech to může trvat i několik desítek minut.</p>
                </div>
            </div>

        </div>
    </div>
    <div id="guideModal" class="modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
        <div class="modal-content"
            style="position: relative; background: linear-gradient(to bottom, white, #FFF5EB); width: 90%; max-width: 600px; margin: 50px auto; padding: 20px; border-radius: 15px; max-height: 80vh; overflow-y: auto;">
            <span class="close" onclick="closeGuideModal()"
                style="position: absolute; right: 20px; top: 20px; font-size: 28px; cursor: pointer; color: #666;">&times;</span>

            <h2 style="text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px;">
                Jak to udělat?
            </h2>

            <div class="steps">
                @php
                    $steps = [
                        [
                            'title' => 'Klikněte na menu',
                            'description' => 'Klikněte na tři čárky pod sebou v pravém horním rohu',
                            'image' => 'https://utfs.io/f/xemfpzD8CwTkWlmEmqNl4FYbrafc1tVdoI257HuBUSNi3CTG'
                        ],
                        [
                            'title' => 'Klikněte na \'Sledujte a pozvěte přátele\'',
                            'description' => 'V menu scrollujte dolů a najděte položku Sledujte a pozvěte přátele',
                            'image' => 'https://utfs.io/f/xemfpzD8CwTkmyO0nxQxdOthDl1VKYyAcL5CpGB32FoZq60g'
                        ],
                        [
                            'title' => 'Odškrtněte \'Označit ke kontrole\'',
                            'description' => 'Odškrtněte políčko Označit ke kontrole',
                            'image' => 'https://utfs.io/f/xemfpzD8CwTky3jnxAg2PqEg0nQSTjlsUM32HN58Je7IKhzk'
                        ],
                        [
                            'title' => 'Vše je hotovo!',
                            'description' => 'Nastavení je hotovo.',
                            'image' => 'https://utfs.io/f/xemfpzD8CwTkFTvWsIwnJSs5WtmiXu8CdZz3HPG1fNO0wpeF'
                        ]
                    ];
                @endphp

                @foreach($steps as $index => $step)
                    <div class="step" style="position: relative; margin-bottom: 40px; padding-left: 50px;">
                        <div
                            style="position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: linear-gradient(135deg, #FF603C 0%, #FF8B6B 100%); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold;">
                            {{ $index + 1 }}
                        </div>

                        @if($index < count($steps) - 1)
                            <div
                                style="position: absolute; left: 15px; top: 40px; bottom: -20px; width: 2px; background: linear-gradient(to bottom, #FF603C 0%, #FF8B6B 100%); opacity: 0.2;">
                            </div>
                        @endif

                        <h3
                            style="font-size: 20px; font-weight: 600; margin-bottom: 8px; background: linear-gradient(135deg, #FF603C 0%, #FF8B6B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                            {{ $step['title'] }}
                        </h3>

                        <p style="color: #666; margin-bottom: 15px; font-size: 14px;">
                            {{ $step['description'] }}
                        </p>

                        <div
                            style="border-radius: 12px; overflow: hidden; border: 1px solid #FFE4D6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); max-width: 300px; margin: 0 auto;">
                            <img src="{{ $step['image'] }}" alt="{{ $step['title'] }}"
                                style="width: 100%; height: auto; display: block;">
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</header>
@endsection
@section('scripts')

<script>
    function openGuideModal() {
        document.getElementById('guideModal').style.display = 'block';
        document.body.style.overflow = 'hidden';
    }

    function closeGuideModal() {
        document.getElementById('guideModal').style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    // Zavře modal při kliknutí mimo něj
    window.onclick = function (event) {
        var modal = document.getElementById('guideModal');
        if (event.target == modal) {
            closeGuideModal();
        }
    }
    $(document).ready(function () {
        var status = "{{ $stav }}";
        if (status == "done") {
            $("#komp").addClass("kompletni");
        }
        setTimeout(function () {
            location.reload();
        }, 60 * 1000);
    });

    function checkAccountStatus() {
        const button = document.getElementById('checkAgainBtn');
        const buttonText = document.getElementById('checkButtonText');
        const spinner = document.getElementById('loadingSpinner');
        const errorMsg = document.getElementById('errorMessage');

        // Disable button and show loading state
        button.disabled = true;
        buttonText.textContent = '{{ __("Kontroluji...") }}';
        spinner.style.display = 'block';
        errorMsg.style.display = 'none';

        fetch('/check-account-status/{{ $order->id }}')
            .then(response => response.json())
            .then(response => {
                if (response.success) {
                    // Check if both values are false
                    if (!response.data.is_private && !response.data.spam_follower_setting_enabled) {
                        // Both are false, refresh the page
                        window.location.reload();
                    } else {
                        // At least one is true, show error message
                        errorMsg.style.display = 'block';
                        button.disabled = false;
                        buttonText.textContent = 'Zkontrolovat znovu';
                        spinner.style.display = 'none';
                    }
                } else {
                    // Show error message
                    errorMsg.style.display = 'block';
                    button.disabled = false;
                    buttonText.textContent = 'Zkontrolovat znovu';
                    spinner.style.display = 'none';
                }
            })
            .catch(error => {
                // Show error message
                errorMsg.style.display = 'block';
                button.disabled = false;
                buttonText.textContent = 'Zkontrolovat znovu';
                spinner.style.display = 'none';
            });
    }
</script>
@endsection