@extends('layouts.guest1')
@section('title', 'Login manager account')
@push('head')
    <style>
        html {
            background-color: transparent !important;
            background-image: none !important;
        }
        body {
            background-color: transparent !important;
            background-image: none !important;
        }
        main {
            background-color: transparent !important;
            background-image: none !important;
        }
        footer {
            display: none !important;
        }
    </style>
    <link rel="manifest" href="{{ route('admin.manifest') }}">
    <meta name="theme-color" content="{{ $settings->brand_dark_color ?? '#0f172a' }}">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="{{ $settings->site_name }} Admin">
    <script>
        window.adminInstallPrompt = null;
        window.addEventListener('beforeinstallprompt', function (event) {
            event.preventDefault();
            window.adminInstallPrompt = event;
            document.dispatchEvent(new CustomEvent('admin-app-install-ready'));
        });
        window.addEventListener('appinstalled', function () {
            window.adminInstallPrompt = null;
            document.dispatchEvent(new CustomEvent('admin-app-installed'));
        });
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('{{ route('admin.service-worker') }}', { scope: '/' }).catch(function () {});
            });
        }
    </script>
@endpush
@section('content')

<div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: url('{{ asset('temp/custom/images/4bd5d539f4e9d2fa00e3dbadc2dd9997.gif') }}') center center / cover no-repeat;"></div>
<div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(15,23,42,0.90);"></div>
<div style="position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;">
    <div style="max-width: 400px; width: 100%;">

        @if(session('message'))
        <div style="margin-bottom: 12px; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; padding: 10px 14px; border-radius: 10px; font-size: 13px;">{{ session('message') }}</div>
        @endif

        @if(session('success'))
        <div style="margin-bottom: 12px; background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); color: #86efac; padding: 10px 14px; border-radius: 10px; font-size: 13px;">{{ session('success') }}</div>
        @endif

        <div style="background: #fdfbf7; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;">

            <!-- Header -->
            <div style="padding: 24px 28px 16px; text-align: center;">
                <a href="/" style="display: inline-block; margin-bottom: 12px;">
                    <img src="{{ asset('storage/app/public/' . $settings->logo) }}" style="height: 48px; display: block; margin: 0 auto;">
                </a>
                <h1 style="margin: 0 0 4px 0; font-size: 20px; font-weight: 700; color: #0f172a;">Admin Dashboard</h1>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Access administrative controls</p>
                <button type="button" id="adminInstallAppBtn"
                    style="margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: #f7931a; color: #ffffff; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(247,147,26,0.3); transition: all 0.2s;"
                    onmouseover="this.style.background='#e67e00'" onmouseout="this.style.background='#f7931a'">
                    <svg style="width: 14px; height: 14px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4" />
                    </svg>
                    Install Admin App
                </button>
                <p id="adminInstallHint" style="margin-top: 8px; font-size: 11px; color: #94a3b8;">
                    Tap to install the admin app on this device.
                </p>
            </div>

            <!-- Form -->
            <div style="padding: 8px 28px 24px;">
                <h2 style="margin: 0 0 4px 0; font-size: 18px; font-weight: 700; color: #0f172a; text-align: center;">Sign In</h2>
                <p style="margin: 0 0 16px 0; font-size: 13px; color: #64748b; text-align: center;">Enter your credentials</p>

                <form method="POST" action="{{ route('adminlogin') }}" x-data="{ showPassword: false }">
                    @csrf

                    <div style="margin-bottom: 12px;">
                        <input type="email" name="email" value="{{ old('email') }}"
                            style="width: 100%; padding: 11px 14px; background: #f9f7f2; border: 1px solid #e8e4d9; border-radius: 10px; font-size: 14px; color: #0f172a; box-sizing: border-box;"
                            placeholder="Email address" required
                            onfocus="this.style.borderColor='#f7931a'" onblur="this.style.borderColor='#e2e8f0'">
                    </div>

                    <div style="margin-bottom: 16px; position: relative;">
                        <input :type="showPassword ? 'text' : 'password'" name="password"
                            style="width: 100%; padding: 11px 44px 11px 14px; background: #f9f7f2; border: 1px solid #e8e4d9; border-radius: 10px; font-size: 14px; color: #0f172a; box-sizing: border-box;"
                            placeholder="Password" required
                            onfocus="this.style.borderColor='#f7931a'" onblur="this.style.borderColor='#e2e8f0'">
                        <button type="button" @click="showPassword = !showPassword"
                            style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #94a3b8;">
                            <svg x-show="!showPassword" style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            <svg x-show="showPassword" style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
                        </button>
                    </div>

                    <button type="submit"
                        style="width: 100%; padding: 12px; background: linear-gradient(135deg, #f7931a 0%, #e67e00 100%); color: #ffffff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(247,147,26,0.3);">
                        Sign In
                    </button>
                </form>
            </div>

            <!-- Footer -->
            <div style="padding: 12px 28px; background: #f8fafc; border-top: 1px solid #e2e8f0; text-align: center;">
                <p style="margin: 0; font-size: 11px; color: #94a3b8;">&copy; {{ date('Y') }} {{ $settings->site_name }}</p>
            </div>
        </div>

        <div style="text-align: center; margin-top: 16px;">
            <a href="/" style="font-size: 13px; color: #94a3b8; text-decoration: none;">&larr; Back to Website</a>
        </div>
    </div>
</div>
</div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var installButton = document.getElementById('adminInstallAppBtn');
        var installHint = document.getElementById('adminInstallHint');
        if (!installButton) return;
        function setReadyState() {
            installButton.disabled = false;
            installButton.style.opacity = '1';
            installButton.style.cursor = 'pointer';
            if (installHint) installHint.textContent = 'Tap to install the admin app on this device.';
        }
        installButton.addEventListener('click', function () {
            if (!window.adminInstallPrompt) {
                if (installHint) installHint.textContent = 'Install prompt is not ready yet. Use your browser menu to install.';
                return;
            }
            window.adminInstallPrompt.prompt();
            window.adminInstallPrompt.userChoice.finally(function () { window.adminInstallPrompt = null; });
        });
        document.addEventListener('admin-app-install-ready', setReadyState);
        document.addEventListener('admin-app-installed', function () {
            installButton.disabled = true;
            installButton.style.opacity = '0.7';
            installButton.style.cursor = 'not-allowed';
            if (installHint) installHint.textContent = 'Admin app installed.';
        });
        if (window.adminInstallPrompt) setReadyState();
    });
</script>
@endsection
