@extends('layouts.base')
@section('content')
    <style>
        .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;">Status zamówienia nr {{ sprintf('%05d', $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;">Twoje zamówienie
                            zostało pomyślnie opłacone!</div>

                    </div>
                    <div style="color:white; background-color:#c0392b; padding:20px; margin:0 auto; text-align:center;">
                        Jeśli zapłaciłeś za pomocą PayPal i nie jesteś zadowolony lub oczekiwanie trwa zbyt długo, NAJPIERW
                        napisz do nas e-mail, zanim złożysz wniosek o zwrot! TO SZYBSZE I LEPSZE DLA CIEBIE!</div>
                    <hr>
                    <div style="text-align:center;">
                        <div class="status-check">
                            <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;">Zaakceptowaliś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;">E-mail z potwierdzeniem 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;">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;">
                                    Zamówienie zostało w pełni zrealizowane.</div>
                            </div>
                        </div>
                    </div>
                    <div style="text-align:center; color:#333; padding-top:20px;">
                        Jeśli masz pytania, prosimy o kontakt z nami.<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;">Kontakt</a>
                        <p>Rozpoczęcie zamówienia jest zawsze automatyczne, gdy tylko wpłata zostanie otrzymana. Obserwujący zazwyczaj zaczynają przybywać natychmiast, ale w niektórych przypadkach może to zająć kilkadziesiąt minut.</p>
                    </div>
                </div>

            </div>
        </div>

    </header>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            var status = "{{ $stav }}";
            if (status == "done") {
                $("#komp").addClass("kompletni");
            }
            setTimeout(function() {
                location.reload();
            }, 60 * 1000);
        });
    </script>
@endsection