<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Login') | {{ optional($settings)->website_name ?? config('app.name') }}</title>
    @if(optional($settings)->favicon_white)
    <link rel="shortcut icon" type="image/png" href="{{ asset($settings->favicon_white) }}">
    @endif
    <link rel="stylesheet" href="{{ asset('assets/frontend/css/auth.css') }}?v={{ file_exists(base_path('../assets/frontend/css/auth.css')) ? filemtime(base_path('../assets/frontend/css/auth.css')) : time() }}">
    <style>:root { --primary-color: {{ optional($settings)->website_color ?? '#ff8432' }}; }</style>
    <link rel="stylesheet" href="{{ asset('assets/frontend/css/izitoast.min.css') }}?v={{ time() }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.47.0/tabler-icons.min.css">
</head>
<body>
    <div class="auth-page">
        {{-- Left branding panel --}}
        <div class="auth-panel">
            <div class="auth-panel-brand">
                @if(optional($settings)->logo_white)
                    <img src="{{ asset($settings->logo_white) }}" class="auth-panel-logo" alt="{{ optional($settings)->website_name ?? '' }}">
                @else
                    <span class="auth-panel-logo-text">{{ optional($settings)->website_name ?? config('app.name') }}</span>
                @endif
                <h2 class="auth-panel-heading">Virtual Numbers,<br>OTP & Social Growth</h2>
                <p class="auth-panel-sub">Get temporary virtual numbers, receive OTPs instantly, and boost your social media presence — all in one place.</p>
            </div>
            <div class="auth-panel-features">
                <div class="auth-panel-feature">
                    <div class="auth-panel-feature-icon"><i class="ti ti-device-mobile"></i></div>
                    <span>Virtual numbers from 50+ countries</span>
                </div>
                <div class="auth-panel-feature">
                    <div class="auth-panel-feature-icon"><i class="ti ti-message-2"></i></div>
                    <span>Instant OTP & SMS delivery</span>
                </div>
                <div class="auth-panel-feature">
                    <div class="auth-panel-feature-icon"><i class="ti ti-brand-instagram"></i></div>
                    <span>Boost followers, likes & views</span>
                </div>
                <div class="auth-panel-feature">
                    <div class="auth-panel-feature-icon"><i class="ti ti-shield-check"></i></div>
                    <span>Keep your real number private</span>
                </div>
            </div>
        </div>

        {{-- Right form panel --}}
        <div class="auth-form-panel">
            @yield('content')
        </div>
    </div>

    <script src="{{ asset('assets/frontend/js/izitoast.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('assets/frontend/js/auth.js') }}?v={{ time() }}"></script>

    @if(Session::has('success'))
    <script>"use strict"; iziToast.success({ message: "{{ session('success') }}", position: 'topRight' });</script>
    @endif
    @if(Session::has('error'))
    <script>"use strict"; iziToast.error({ message: "{{ session('error') }}", position: 'topRight' });</script>
    @endif
    @if(session()->has('notify'))
        @forelse(session('notify') as $msg)
        <script>"use strict"; iziToast.{{ $msg[0] }}({ message: "{{ trans($msg[1]) }}", position: "topRight" });</script>
        @empty
        @endforelse
    @endif
    @if(@$errors->any())
    <script>"use strict";
        @forelse($errors->all() as $error)
        iziToast.error({ message: '{{ __($error) }}', position: "topRight" });
        @empty
        @endforelse
    </script>
    @endif
    @if(optional($settings)->live_chat_code)
    {!! $settings->live_chat_code !!}
    @endif
    @include('frontend.partial.contact-widget')
</body>
</html>
