@php
    $uiThemeService = app(\App\Services\UiThemeService::class);
    $uiSettings = $uiThemeService->values();
    $uiVariables = $uiThemeService->cssVariables();
    $hasLegacyTheme = isset($color_theme) && $color_theme && isset($color_theme->colors);
    $themeBackgroundImage = '';

    if (!empty($uiSettings['background_image'])) {
        $themeBackgroundImage = asset($uiSettings['background_image']);
    } elseif ($hasLegacyTheme && ($color_theme->background_type ?? null) === 'image' && !empty($color_theme->background_image)) {
        $themeBackgroundImage = asset($color_theme->background_image);
    }
@endphp

<style>
    /* for toastr dynamic start*/
    .toast-success {
        background-color: var(--app-success) !important;
    }

    .toast-message {
        color: #ffffff;
    }

    .toast-title {
        color: #ffffff;

    }

    .toast {
        color: #ffffff;
    }

    .toast-error {
        background-color: var(--app-danger) !important;
    }

    .toast-warning {
        background-color: var(--app-warning) !important;
    }
</style>
<style>
:root {
    @php
        $cyan_one = '#1BC1E5';
        $cyan_two = '#1BC1E5';
        $cyan_one_hover = '#1BC1E5';
        $cyan_two_hover = '#1BC1E5';
        $violet_one = '#008FD4';
        $violet_one_hover = '#008FD4';
        $violet_two = '#008FD4';
        $violet_two_hover = '#008FD4';
        $blue_one = '#1BC1E5';
        $blue_one_hover = '#1BC1E5';
        $blue_two = '#1BC1E5';
        $blue_two_hover = '#1BC1E5';
        $fuchsia_one = '#008FD4';
        $fuchsia_one_hover = '#008FD4';
        $fuchsia_two = '#008FD4';
        $fuchsia_two_hover = '#008FD4';
    @endphp

    --base_font : {{ in_array(session()->get('locale', Config::get('app.locale')), ['ar']) ? 'Cairo,' : ''}}Poppins, sans-serif;
    --box_shadow : {{ $hasLegacyTheme && $color_theme->box_shadow ? 'var(--box_shadow)' : 'none' }};
    
    @if($hasLegacyTheme)
        @foreach($color_theme->colors as $color)
            --{{ $color->name}}: {{ $color->pivot->value }};
            
            @if(in_array($color->name, ['success', 'danger']))
                --{{ $color->name}}_with_opacity: {{ $color->pivot->value }}23;
            @endif

            @if ($color->name           == 'card-gradient-cyan_one')
                @php $cyan_one          = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-cyan_two')
                @php $cyan_two          = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-cyan_one_hover')
                @php $cyan_one_hover    = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-cyan_two_hover')
                @php $cyan_two_hover    = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-violet_one')
                @php $violet_one        = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-violet_one_hover')
                @php $violet_one_hover  = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-violet_two')
                @php $violet_two        = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-violet_two_hover')
                @php $violet_two_hover  = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-blue_one')
                @php $blue_one          = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-blue_one_hover')
                @php $blue_one_hover    = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-blue_two')
                @php $blue_two          = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-blue_two_hover')
                @php $blue_two_hover    = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-fuchsia_one')
                @php $fuchsia_one       = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-fuchsia_one_hover')
                @php $fuchsia_one_hover = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-fuchsia_two')
                @php $fuchsia_two       = $color->pivot->value; @endphp
            @elseif ($color->name       == 'card-gradient-fuchsia_two_hover')
                @php $fuchsia_two_hover = $color->pivot->value; @endphp
            @endif
        @endforeach
    @endif

    @foreach($uiVariables as $property => $value)
        {{ $property }}: {{ $value }};
    @endforeach

    --accent: var(--app-primary);
    --bg: var(--app-bg);
    --card: var(--app-card);
    --card-soft: var(--app-card-soft);
    --text-primary: var(--app-text);
    --text-secondary: var(--app-muted);
    --background: var(--app-bg);
    --base_color: var(--app-primary);
    --primary-color: var(--app-primary);
    --gradient_1: var(--app-primary);
    --gradient_2: var(--app-secondary);
    --gradient_3: var(--app-primary-hover);
    --sidebar_bg: var(--app-sidebar-bg);
    --sidebar-nav-link: var(--app-sidebar-text);
    --app-sidebar-muted: color-mix(in srgb, var(--app-sidebar-text) 70%, transparent);
    --app-sidebar-border: color-mix(in srgb, var(--app-border) 78%, transparent);
    --app-sidebar-active-bg: color-mix(in srgb, var(--app-primary) 18%, transparent);
    --app-sidebar-active-text: var(--app-text);
    --sidebar_active: var(--app-primary);
    --sidebar_hover: var(--app-primary);
    --text-color: var(--app-muted);
    --bg_white: var(--app-card);
    --text_black: var(--app-text);
    --border_color: var(--app-border);
    --input_bg: var(--app-card);
    --success: var(--app-success);
    --danger: var(--app-danger);
    --warning: var(--app-warning);
    --link-hover: var(--app-primary-hover);
    --notification_title: var(--app-text);
    --notification_time: var(--app-muted);
    --modalLink_color: var(--app-text);
    --profile_text_hover: var(--app-text);
    --table_header: var(--app-bg);
    --app-background-image: {{ $themeBackgroundImage ? "url('" . $themeBackgroundImage . "')" : 'none' }};
    --app-background-gradient-enabled: {{ ($uiSettings['enable_background_gradient'] ?? '0') === '1' ? '1' : '0' }};
    --app-glass-enabled: {{ ($uiSettings['enable_glass_effect'] ?? '0') === '1' ? '1' : '0' }};

    --card-gradient-cyan: linear-gradient(to right, {{ $cyan_one }}, {{ $cyan_two }});
    --card-gradient-cyan-hover: linear-gradient(to right, {{ $cyan_one_hover }}, {{ $cyan_two_hover }});
    --card-gradient-violet: linear-gradient(to right, {{ $violet_one }}, {{ $violet_two }});
    --card-gradient-violet-hover: linear-gradient(to right, {{ $violet_one_hover }}, {{ $violet_two_hover }});
    --card-gradient-blue: linear-gradient(to right, {{ $blue_one }}, {{ $blue_two }});
    --card-gradient-blue-hover: linear-gradient(to right, {{ $blue_one_hover }}, {{ $blue_two_hover }});
    --card-gradient-fuchsia: linear-gradient(to right, {{ $fuchsia_one }}, {{ $fuchsia_two }});
    --card-gradient-fuchsia-hover: linear-gradient(to right, {{ $fuchsia_one_hover }}, {{ $fuchsia_two_hover }});
    --app-bg-deep: #040b13;
    --app-card-strong: color-mix(in srgb, var(--app-card) 92%, #040b13);
    --app-primary-strong: var(--app-primary-hover);
    --app-primary-soft: color-mix(in srgb, var(--app-primary) 14%, transparent);
    --app-shadow: 0 32px 90px rgba(0, 0, 0, 0.40);
    --app-radius-xl: 32px;
    --app-radius-lg: 24px;
    --app-radius-md: 18px;
}

html[data-theme="light"],
body.theme-light {
    --app-bg: {{ $uiSettings['light_background_color'] }};
    --app-card: {{ $uiSettings['card_background_color'] }};
    --app-card-soft: color-mix(in srgb, {{ $uiSettings['card_background_color'] }} 88%, {{ $uiSettings['light_background_color'] }});
    --app-text: {{ $uiSettings['text_color'] }};
    --app-muted: {{ $uiSettings['muted_text_color'] }};
    --app-border: {{ $uiSettings['border_color'] }};
    --app-topbar-bg: {{ $uiSettings['topbar_background_color'] }};
    --app-sidebar-bg: color-mix(in srgb, {{ $uiSettings['card_background_color'] }} 96%, {{ $uiSettings['light_background_color'] }});
    --app-sidebar-text: {{ $uiSettings['text_color'] }};
    --app-sidebar-muted: {{ $uiSettings['muted_text_color'] }};
    --app-sidebar-border: {{ $uiSettings['border_color'] }};
    --app-sidebar-active-bg: color-mix(in srgb, {{ $uiSettings['primary_color'] }} 14%, transparent);
    --app-sidebar-active-text: {{ $uiSettings['text_color'] }};
    --bg: var(--app-bg);
    --card: var(--app-card);
    --card-soft: var(--app-card-soft);
    --text-primary: var(--app-text);
    --text-secondary: var(--app-muted);
    --background: var(--app-bg);
    --bg_white: var(--app-card);
    --text_black: var(--app-text);
    --text-color: var(--app-muted);
    --border_color: var(--app-border);
    --sidebar_bg: var(--app-sidebar-bg);
    --sidebar-nav-link: var(--app-sidebar-text);
    --sidebar_active: var(--app-primary);
    --sidebar_hover: var(--app-primary);
    --input_bg: var(--app-card);
    --table_header: color-mix(in srgb, var(--app-card) 94%, var(--app-bg));
    --notification_title: var(--app-text);
    --notification_time: var(--app-muted);
    --modalLink_color: var(--app-text);
    --app-bg-deep: #EAF0F7;
    --app-card-strong: color-mix(in srgb, {{ $uiSettings['card_background_color'] }} 96%, {{ $uiSettings['light_background_color'] }});
    --app-primary-strong: {{ $uiSettings['primary_hover_color'] }};
    --app-primary-soft: color-mix(in srgb, {{ $uiSettings['primary_color'] }} 14%, transparent);
    --app-shadow: 0 26px 64px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"],
body.theme-dark {
    --app-bg: {{ $uiSettings['dark_background_color'] }};
    --app-card: {{ $uiSettings['dark_card_background_color'] }};
    --app-card-soft: color-mix(in srgb, {{ $uiSettings['dark_card_background_color'] }} 78%, {{ $uiSettings['dark_background_color'] }});
    --app-text: {{ $uiSettings['dark_text_color'] }};
    --app-muted: {{ $uiSettings['dark_muted_text_color'] }};
    --app-border: {{ $uiSettings['dark_border_color'] }};
    --app-topbar-bg: {{ $uiSettings['dark_topbar_background_color'] }};
    --app-sidebar-bg: {{ $uiSettings['sidebar_background_color'] }};
    --app-sidebar-text: {{ $uiSettings['sidebar_text_color'] }};
    --app-sidebar-muted: color-mix(in srgb, {{ $uiSettings['sidebar_text_color'] }} 70%, transparent);
    --app-sidebar-border: color-mix(in srgb, {{ $uiSettings['dark_border_color'] }} 70%, transparent);
    --app-sidebar-active-bg: color-mix(in srgb, {{ $uiSettings['primary_color'] }} 20%, transparent);
    --app-sidebar-active-text: {{ $uiSettings['dark_text_color'] }};
    --bg: var(--app-bg);
    --card: var(--app-card);
    --card-soft: var(--app-card-soft);
    --text-primary: var(--app-text);
    --text-secondary: var(--app-muted);
    --background: var(--app-bg);
    --bg_white: var(--app-card);
    --text_black: var(--app-text);
    --text-color: var(--app-muted);
    --border_color: var(--app-border);
    --sidebar_bg: var(--app-sidebar-bg);
    --sidebar-nav-link: var(--app-sidebar-text);
    --sidebar_active: var(--app-primary);
    --sidebar_hover: var(--app-primary);
    --input_bg: var(--app-card);
    --table_header: color-mix(in srgb, var(--app-card) 82%, var(--app-bg));
    --notification_title: var(--app-text);
    --notification_time: var(--app-muted);
    --modalLink_color: var(--app-text);
    --app-bg-deep: #040b13;
    --app-card-strong: color-mix(in srgb, {{ $uiSettings['dark_card_background_color'] }} 88%, #040b13);
    --app-primary-strong: {{ $uiSettings['primary_hover_color'] }};
    --app-primary-soft: color-mix(in srgb, {{ $uiSettings['primary_color'] }} 13%, transparent);
    --app-shadow: 0 32px 90px rgba(0, 0, 0, 0.40);
}

body.login .fxt-form .fxt-btn-fill[type="submit"],
body.login .login-area form .primary-btn.fix-gr-bg[type="submit"]:not(.get-login-access),
body.login .form-wrap form .primary-btn.fix-gr-bg[type="submit"]:not(.get-login-access),
body.login .login-height form .primary-btn.fix-gr-bg[type="submit"]:not(.get-login-access) {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    max-width: 100%;
    width: 100%;
}
        
</style>
