<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ lang()->currentDirection()  }}" style="background-color: transparent;">

<head>
    <meta charset="utf-8" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="store-id" content="{{ request()->segment(1) }}">
    <meta name="lang" content="{{ request()->segment(2) }}">
    <meta name="domain" content="{{ request()->getSchemeAndHttpHost() }}">
    <meta name="prefix" content="{{ ecom('url')->prefix() }}">
    @if(isset(request()->store['id']))<meta name="storeID" content="{{request()->store['id']}}">@endif

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{{--    <meta name="viewport" content="width=device-width, initial-scale=1" />--}}
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;600&family=Noto+Kufi+Arabic:wght@100;400;500;600;700&display=swap" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" rel="stylesheet">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet">
    <x-htmlhelpers-favicon prefix="/assets/favicon"></x-htmlhelpers-favicon>

    {{--    <script src="/js/packages-js/checkout/general.js"></script>--}}
{{--        <script src="/js/packages-js/profile/general.js"></script>--}}
    {{--    <script src="/js/packages-js/general/general.js"></script>--}}
{{--    <script src="/js/packages-js/auth/general.js"></script>--}}
    <script src="https://cdn.jsdelivr.net/gh/thewebaddicts/ecom-cdn@4.2/packages/js/checkout/general.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/thewebaddicts/ecom-cdn@4.2/packages/js/general/general.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/thewebaddicts/ecom-cdn@4.2/packages/js/profile/general.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/thewebaddicts/ecom-cdn@7.0/packages/js/auth/general.js"></script>

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <style>
        .common-loader-initial {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            margin: auto;
            background-color: #fff;
            z-index: 9999;
            background-image: url("/assets/loader.gif");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100px;
            box-sizing: border-box;
            color: inherit;
            font-size: 12px;
            user-select: inherit;
            display: block;
        }

        body,
        html {
            margin: 0;
            padding: 0;
            background-color: #FFF;
            max-width: 100%;
        }

        .icon-button{
            padding: 15px 20px !important;
            text-decoration: none !important;
        }

        .icon-button:hover{
                /*background-color: #000;*/
                /*color: #fff;*/
            /*text-decoration: none;*/
        }

        .icon-button .icon{
                flex : unset !important;

        }

        .text-seperator{

            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .text-seperator::after{
            content: "";
            height: 1px;
            width:50px;
            background-color: black;
        }

        .text-seperator::before{
            content: "";
            height: 1px;
            width:50px;
            background-color: black;
        }
    </style>


    @yield('title')

    <script type="text/javascript" src="/cms_assets/js/fa-kit.js"></script>
{{--    <link rel="stylesheet" href="/css/packages-{{ app()->getLocale() }}.css">--}}


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thewebaddicts/ecom-cdn@5.5/packages/css/packages-{{ lang()->list()->where('prefix',app()->getLocale())->first()->direction }}.css">
    @if(config('ecom-auth.boostrap_css.'.lang()->list()->where('prefix',app()->getLocale())->first()->direction))<link rel="stylesheet" href="{{ config('ecom-auth.boostrap_css.'.lang()->list()->where('prefix',app()->getLocale())->first()->direction) }}">@endif
</head>

<body class="twa-ecomauth-body" style="background-color: transparent">
{{--<div class="common-loader-initial common-loader-hide"></div>--}}
{{--<h2 class="title">{{isset($title) ? $title : "Login"}}</h2>--}}
<br />
<br />
<br />


@if(isset($withoutWrapper) && $withoutWrapper)
    @yield('content')
@else
<div class="twa-authentication-container">
    <div class="twa-authentication-form">
        @yield('content')
    </div>
</div>
@endif

@if(request()->input('webview') == "true")
    <style>
        .twa-social {
            display: none;
        }

        .twa-authentication-form{
            width: 100% !important;
        }



    </style>
@endif
<style>
    .password-group button {
        display :none;
    }
</style>


<script>
    $( document ).ready(function(){

        @if(request()->input('webview') == "true")
        var TWA_height = 10;
        @else
        var TWA_height = parseInt("{{env('AUTH_IFRAME_OFFSET' , 200)}}");
        @endif

        TWA_AUTH_postMessage({
            height : TWA_AUTH_GetHeight(TWA_height)
        });

        // AdjustIframeHeight();
    });
    $(document).find('body').on('resize',function(){
        AdjustIframeHeight();
    });
    // alert($(document).parents('iframe').attr('id'));

    function AdjustIframeHeight(){
        try {
            TWA_AUTH_postMessage({ height : TWA_AUTH_GetHeight(0) });
        }catch(e){

        }
    }

    @if(request()->input('toast_title')!=null && request()->input('toast_message')!=null)
    $.toast({
        heading: '{{request()->input('toast_title')}}',
        text: '{{request()->input('toast_message')}}',
        icon: 'error',
        loader: true,        // Change it to false to disable loader
        loaderBg: '#9EC600'  // To change the background
    })
    @endif
</script>
@yield('scripts')

{{--@if(isset(request()->store['scripts']))--}}
{{--    {!! request()->store['scripts'] !!}--}}
{{--@endif--}}



{{--{{ ecom('notifications')->showPopup() }}--}}
{{--{{ gtag()->track() }}--}}
</body>

</html>
