@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;
        }

        @keyframes spin {
            to {transform: rotate(360deg);}
        }
    </style>

    <header class="header section app-landing-2-header" style="background-color:white !important;" data-aos="fade-up">
        <div class="shapes-container">
            <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>
            <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>
        </div>

        <div class="container">
            <div class="gap-y align-items-center text-center header-main">
                <h1 style="font-weight:600; font-size:25px;">
                    {{ __('Numer zamówienia') }} {{ sprintf('%05d', $order->id) }}
                </h1>
            </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">
                            <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;">
                        {{ __('Twoje zamówienie zostało pomyślnie opłacone!') }}
                    </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)
                                            {{ __('Wszystko w porządku!') }} 🎉
                                        @else
                                            {{ __('Pozostał już tylko OSTATNI 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' : '' }}">
                                            {{ __('Ustaw profil na publiczny.') }}
                                        </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' : '' }}">
                                                {{ __('Wyłącz specjalną weryfikację obserwujących.') }}
                                            </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 zrobić?') }}
                                                </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">{{ __('Sprawdź ponownie') }}</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;">
                                            {{ __('Według naszej kontroli konto Instagram nadal nie jest prawidłowo skonfigurowane.') }}
                                        </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;">{{ __('Obserwujący zaraz dotrą!') }}</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; text-align:left;">
                                    {{ __("Przyjęliśmy Twoją płatność.") }}</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; text-align:left;">
                                    {{ __('E-mail potwierdzający został wysłany.') }}
                                </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; text-align:left;">
                                    {{ __('Zamówienie zostało rozpoczęte.') }}
                                </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; text-align:left;">
                                    {{ __('Zamówienie zostało w pełni zrealizowane.') }}</div>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div style="text-align:center; color:#333; padding-top:35px;">
                        <div class="discount-box" style="background: linear-gradient(135deg, #FF603C 0%, #FF8B6B 100%); padding: 25px; border-radius: 15px; color: white; margin-bottom: 40px;">
                            <div style="font-size: 24px; font-weight: 600; margin-bottom: 15px;">
                                🎉 {{ __("Specjalny prezent tylko dla Ciebie!") }} 🎉
                            </div>
                            <p style="font-size: 17px; margin-bottom: 20px; line-height: 1.5;">
                                {{ __("Otrzymaj 15% zniżki na następne zamówienie! UWAGA, kod jest ważny tylko przez 3 godziny od ostatniego zakupu.") }}
                            </p>
                            <div style="background: rgba(255,255,255,0.15); padding: 15px; border-radius: 10px; display: inline-block;">
                                <div style="font-size: 14px; margin-bottom: 5px; opacity: 0.9;">TWÓJ KOD RABATOWY</div>
                                <span style="font-size: 28px; font-weight: 700; letter-spacing: 2px;">EM15</span>
                                <div style="margin-top: 10px;">
                                    <button onclick="copyToClipboard('EM15')" style="background: rgba(255,255,255,0.25); border: none; padding: 5px 15px; border-radius: 5px; color: white; cursor: pointer; font-size: 13px; transition: all 0.2s;">
                                        <span style="display: inline-flex; align-items: center;">
                                            <svg style="width: 15px; height: 15px; margin-right: 5px;" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M16 1H4C2.9 1 2 1.9 2 3v14h2V3h12V1zm3 4H8C6.9 5 6 5.9 6 7v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                                            </svg>
                                            Skopiuj kod
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <x-products />
                    <hr style="margin-top:30px;">
                    <div class="info-box" style="text-align: left; color: #333; padding: 25px; background: #f8f9fa; border-radius: 15px; margin-top: 20px;">
                        <div style="display: flex; align-items: start; margin-bottom: 15px;">
                            <div style="margin-right: 15px; margin-top: 3px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FF603C">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                                </svg>
                            </div>
                            <div>
                                <h4 style="font-weight: 600; margin-bottom: 10px; color: #FF603C;">Ważna informacja o zamówieniu</h4>
                                <p style="font-size: 15px; line-height: 1.6; margin: 0;">
                                    Uruchamianie każdego zamówienia jest całkowicie automatyczne. Mimo że w <span style="font-weight: 600;">99% przypadków realizacja odbywa się w ciągu 60 sekund</span>, może zdarzyć się opóźnienie. W takim wypadku prosimy o cierpliwość do <span style="font-weight: 600;">48 godzin</span>. Nie martw się, zdarza się to bardzo rzadko. Jeśli jednak tak się stanie, napisz do nas na wsparcie dopiero <span style="color: #FF603C; font-weight: 600;">po 48 godzinach.</span>
                                </p>
                            </div>
                        </div>
                    </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 zrobić?') }}</h2>
        
        <div class="steps">
            @php
                $steps = [
                    [
                        'title' => 'Kliknij w menu',
                        'description' => 'Kliknij w trzy kropki w prawym górnym rogu',
                        'image' => 'https://utfs.io/f/xemfpzD8CwTkDLFpbHWiUuCO0H2LT9F5pdmwx7lNBGMRgAZa'
                    ],
                    [
                        'title' => 'Kliknij \'Obserwuj i zapraszaj znajomych\'',
                        'description' => 'Przewiń w dół w menu i znajdź opcję \'Obserwuj i zapraszaj znajomych\'',
                        'image' => 'https://utfs.io/f/xemfpzD8CwTkQOS5cvsgmtW0lHXd8NuL1qihbEznMkjUP7p4'
                    ],
                    [
                        'title' => 'Odznacz \'Oznacz do przeglądu\'',
                        'description' => 'Odznacz pole \'Oznacz do przeglądu\'',
                        'image' => 'https://utfs.io/f/xemfpzD8CwTkVC0RZvyMJmW8fXtsRCzZByUgbaAlIcp4qPDx'
                    ],
                    [
                        'title' => 'Wszystko gotowe!',
                        'description' => 'Ustawienia zostały skonfigurowane.',
                        'image' => 'https://utfs.io/f/xemfpzD8CwTkmYWOT1QxdOthDl1VKYyAcL5CpGB32FoZq60g'
                    ]
                ];
            @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");
            }
        });

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                const btn = event.currentTarget;
                const originalText = btn.innerHTML;
                btn.innerHTML = '<span style="display: inline-flex; align-items: center;">✓ Skopiowano!</span>';
                setTimeout(() => {
                    btn.innerHTML = originalText;
                }, 2000);
            });
        }

        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 = '{{ __("Sprawdzam...") }}';
            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 = '{{ __("Sprawdź ponownie") }}';
                            spinner.style.display = 'none';
                        }
                    } else {
                        // Show error message
                        errorMsg.style.display = 'block';
                        button.disabled = false;
                        buttonText.textContent = '{{ __("Sprawdź ponownie") }}';
                        spinner.style.display = 'none';
                    }
                })
                .catch(error => {
                    // Show error message
                    errorMsg.style.display = 'block';
                    button.disabled = false;
                    buttonText.textContent = '{{ __("Sprawdź ponownie") }}';
                    spinner.style.display = 'none';
                });
        }
    </script>
@endsection