@extends('layout.mainlayout-empty')

@section('content')

    <style>

        body {
            background-color: #ede8f4;
        }

        .box {
            padding: 24px 36px;
            background-color: #FFFFFF;
            border-radius: 16px;
            box-shadow: 0px 4px 73px 0px rgba(0, 0, 0, 0.03);
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .frame {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .icon {
            width: 24px;
            height: 24px;
        }

        .text {
            height: 22px;
            font-size: 16px;
            line-height: 22px;
            text-align: center;
            font-weight: bold;
            color: black;
            font-family: 'sans' !important;
        }

        a {
            text-decoration: none;
            color: inherit;
            display: block;
            margin-bottom: 18px;
        }

        a:hover {
            text-decoration: none;
        }

        a .active{
            color: #242D3C; border-bottom: 1px solid #242D3C; text-decoration: underline;
        }

        .box:hover {
            cursor: pointer;
            border: 1px solid var(--blazma-primary);
            box-shadow: 0px 15px 27px 0px var(--blazma-primary)24;
        }

        .arrow-frame .icon {
            color: var(--blazma-primary);
            font-weight: bold;
        }

        [dir="rtl"] .container {
            direction: rtl;

        }

        .main-title{
            margin: 4rem;
        }

        .language-toggle{
            position: absolute;
            right: 1rem;
            top: -3rem;
        }
    </style>

    <main class="page-main checks">
        <div class="container text-center">
            <div class="main-title">
                <span class="font-weight-bold text-nowrap" style="color: black; font-size: 18px">{{trans('messages.thank_you_for_visiting')}}</span>
                <p class="font-weight-bold" style="color: black;font-size: 14px">{{trans('messages.your_reservation')}} <span
                            @if(!empty($profile) && $profile->COLOR) style="color:{{$profile->COLOR}}"
                            @else style="color: #007bff" @endif>{{trans('messages.no')}} {{$reservation->ID}}</span></p>
                <div class="language-toggle">
                    <div class="lang d-lg-none align-items-baseline" style="display: inline-flex">

                        <a href="javascript:void(0)" class="lang-btn  @if(!empty($lang) && $lang == 'en') active @endif"  onclick="toggleLanguage()" id="toggle-link"><span class="lang-text">EN</span></a>
                        <span class="m-1">/</span>
                        <a href="javascript:void(0)" class="lang-btn @if(!empty($lang) && $lang == 'ar') active @endif"  onclick="toggleLanguage()" id="toggle-link"><span class="lang-text">AR</span></a>
                    </div>

                </div>
            </div>
            @if($request->query('success'))
                <div class="alert alert-success">{{ $request->query('success') }}</div>
            @endif

            @if($request->query('error'))
                <div class="alert alert-danger">{{ $request->query('error') }}</div>
            @endif


            <a href="{{$qr_code_url}}">
                <div class="box">
                    <div class="frame">
                        <div class="icon"><img src="/images/tracking-qr.png" width="24" alt=""></div>
                        <div class="text">{{trans('messages.qr_code')}}</div>
                    </div>
                    <div class="arrow-frame" @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "ar")) style="transform: rotate(180deg)" @endif>
                        <span class="icon">⟶</span>
                    </div>
                </div>
            </a>

            @if(empty($reservation->HOSPITAL->IS_POWERED) && !empty($reservation->HOSPITAL->SEND_INVOICE) && !empty($reservation->eNDUSER->SEND_INVOICE))
                <a href="{{$invoice_url}}">
                    <div class="box">
                        <div class="frame">
                            <div class="icon"><img src="/images/tracking-invoice.png" width="24" alt=""></div>
                            <div class="text">{{trans('messages.invoice')}}</div>
                        </div>
                        <div class="arrow-frame" @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "ar")) style="transform: rotate(180deg)" @endif>
                            <span class="icon">⟶</span>
                        </div>
                    </div>
                </a>
            @endif

            @if($reservation->TYPE_ID != 2)
                <a href="{{$location_url}}">
                    <div class="box">
                        <div class="frame">
                            <div class="icon"><img src="/images/tracking-location.png" width="24" alt=""></div>
                            <div class="text">{{trans('messages.location')}}</div>
                        </div>
                        <div class="arrow-frame" @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "ar")) style="transform: rotate(180deg)" @endif>
                            <span class="icon">⟶</span>
                        </div>
                    </div>
                </a>
            @endif

            <a href="{{$result_url}}">
                <div class="box">
                    <div class="frame">
                        <div class="icon"><img src="/images/tracking-result.png" width="24" alt=""></div>
                        <div class="text">{{trans('messages.result_tracking')}}</div>
                    </div>
                    <div class="arrow-frame" @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "ar")) style="transform: rotate(180deg)" @endif>
                        <span class="icon">⟶</span>
                    </div>
                </div>
            </a>

            @if ($fillQuestionnaireByPatient)
                <a href="{{$questionnaire_url}}">
                    <div class="box">
                        <div class="frame">
                            <div class="icon"><img src="/images/questionnaire.png" width="24" alt=""></div>
                            <div class="text">{{trans('messages.questionnaire')}}</div>
                        </div>
                        <div class="arrow-frame" @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "ar")) style="transform: rotate(180deg)" @endif>
                            <span class="icon">⟶</span>
                        </div>
                    </div>
                </a>
            @endif
        </div>
    </main>

@endsection

<script>
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    window.onload = function () {
        var lang = getParameterByName('lang');
        if (lang === 'ar') {
            document.documentElement.setAttribute('dir', 'rtl');
            document.documentElement.setAttribute('lang', 'ar');
        } else {
            document.documentElement.setAttribute('dir', 'ltr');
            document.documentElement.setAttribute('lang', 'en');
        }

    }

    function toggleLanguage() {
        var url = window.location.href;
        var newUrl;

        if (url.indexOf('lang=ar') >= 0) {
            newUrl = url.replace('lang=ar', 'lang=en');
        } else if (url.indexOf('lang=en') >= 0) {
            newUrl = url.replace('lang=en', 'lang=ar');
        } else {
            newUrl = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'lang=en';
        }

        window.location.href = newUrl;
    }


</script>