<x-guest-layout :maxWidthClass="'maxwidth-800'">
    @push('styles')
    <style>
        .re-agree-container {
            width: 100%;
            margin: 40px auto;
        }
        .re-agree-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px) saturate(180%);
            border-radius: 40px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            padding: 50px;
        }
        .legal-preview-box {
            height: 250px;
            overflow-y: auto;
            background: rgba(248, 249, 250, 0.8);
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 20px;
            padding: 25px;
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: 20px;
            color: #333;
            font-family: var(--adminuiux-content-font), sans-serif;
        }
        .legal-preview-box h1, .legal-preview-box h2 {
            font-family: var(--adminuiux-title-font);
            font-weight: 700;
            margin-bottom: 1rem;
            color: #000;
        }
        .step-badge {
            background: #1e1e1e;
            color: #fff;
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
            margin-right: 12px;
            font-size: 0.9rem;
        }
        .maxwidth-800 {
            max-width: 800px !important;
            width: 100% !important;
        }
        .form-check.custom-check {
            display: flex;
            align-items: center; /* Center the checkbox vertically with the text */
            padding-left: 1.5rem !important;
        }
        .form-check.custom-check .form-check-input {
            margin-top: 0 !important;
            margin-left: -0.75rem !important;
        }
        .btn-pill-primary {
            white-space: normal !important; /* Allow text to wrap if very long */
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
        }
    </style>
    @endpush

    <div class="re-agree-container">
        <div class="re-agree-card">
            <div class="text-center mb-5">
                <div class="avatar avatar-80 rounded-circle bg-primary-subtle text-primary mx-auto mb-4">
                    <i class="bi bi-shield-check fs-1"></i>
                </div>
                <h2 class="fw-bold text-dark mb-2" style="font-family: var(--adminuiux-title-font); font-size: clamp(1.5rem, 4vw, 2.25rem);">{{ __('Legal Update Required') }}</h2>
                <p class="text-muted mx-auto" style="max-width: 500px;">{{ __('We have updated our legal documents to improve our services and compliance with UU PDP regulations. please review and accept the latest terms to continue.') }}</p>
            </div>

            <form action="{{ route('legal.re-agree.post') }}" method="POST">
                @csrf

                @if($missingTos)
                    <div class="mb-5">
                        <h5 class="fw-bold mb-4 d-flex align-items-center">
                            <span class="step-badge">1</span> {{ __('Terms of Use Update') }} 
                            <span class="badge bg-light text-dark border ms-2 fw-normal fs-xs">v{{ $tosVersion }}</span>
                        </h5>
                        <div class="legal-preview-box">
                            @if(!empty($tosContent))
                                {!! strip_tags($tosContent, '<h1><h2><h3><h4><h5><h6><p><br><strong><em><u><s><ul><ol><li><a><blockquote><table><thead><tbody><tr><th><td><hr><span><div><img>') !!}
                            @else
                                <div class="text-center py-5 opacity-50 italic">
                                    <i class="bi bi-file-earmark-text fs-2 mb-2 d-block"></i>
                                    {{ __('Terms of Use content is being updated...') }}
                                </div>
                            @endif
                        </div>
                        <div class="form-check custom-check p-3 bg-light rounded-4 border">
                            <input type="checkbox" name="agree_tos" class="form-check-input flex-shrink-0" id="agree_tos" required>
                            <label class="form-check-label fw-bold ms-2 mb-0" for="agree_tos" style="cursor: pointer;">
                                {{ __('I have read and agree to the latest Terms of Use') }}
                            </label>
                        </div>
                    </div>
                @endif

                @if($missingPrivacy)
                    <div class="mb-5">
                        <h5 class="fw-bold mb-4 d-flex align-items-center">
                            <span class="step-badge">{{ $missingTos ? '2' : '1' }}</span> {{ __('Privacy Policy Update') }}
                            <span class="badge bg-light text-dark border ms-2 fw-normal fs-xs">v{{ $privacyVersion }}</span>
                        </h5>
                        <div class="legal-preview-box">
                            @if(!empty($privacyContent))
                                {!! strip_tags($privacyContent, '<h1><h2><h3><h4><h5><h6><p><br><strong><em><u><s><ul><ol><li><a><blockquote><table><thead><tbody><tr><th><td><hr><span><div><img>') !!}
                            @else
                                <div class="text-center py-5 opacity-50 italic">
                                    <i class="bi bi-shield-lock fs-2 mb-2 d-block"></i>
                                    {{ __('Privacy Policy content is being updated...') }}
                                </div>
                            @endif
                        </div>
                        <div class="form-check custom-check p-3 bg-light rounded-4 border">
                            <input type="checkbox" name="agree_privacy" class="form-check-input flex-shrink-0" id="agree_privacy" required>
                            <label class="form-check-label fw-bold ms-2 mb-0" for="agree_privacy" style="cursor: pointer;">
                                {{ __('I have read and agree to the latest Privacy Policy (UU PDP)') }}
                            </label>
                        </div>
                    </div>
                @endif

                <div class="mt-5">
                    <button type="submit" class="btn btn-pill-primary w-100 py-3 fs-5 shadow-sm">
                        {{ __('Update Agreements & Proceed') }} <i class="bi bi-arrow-right ms-2"></i>
                    </button>
                    <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="btn btn-link text-muted small w-100 mt-4 text-decoration-none">
                        {{ __('Logout and review later') }}
                    </a>
                </div>
            </form>

            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                @csrf
            </form>
        </div>
    </div>
</x-guest-layout>
