<x-guest-layout>
    @php
    $logo = get_setting('app_logo');
    @endphp

    {{-- Logo & Intro --}}
    <div class="text-center text-primary mb-5">
        <img src="{{ asset('assets/img/logo.png') }}" alt="logo" class="maxwidth-200 mx-auto"><br>
        <i class="fs-15 opacity-75">
            Start your journey with <b>biiproject.</b>
        </i>
    </div>

    {{-- Session Status (feedback setelah submit) --}}
    @if (session('status'))
    <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    {{-- Form Register User Baru --}}
    <form method="POST" action="{{ route('register') }}">
        @csrf

        {{-- Full Name --}}
        <div class="form-floating mb-3">
            <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror"
                placeholder="Full Name" value="{{ old('name') }}" required autocomplete="name" autofocus>

            <label for="name">Full Name</label>

            @error('name')
            <div class="text-danger small mt-1">{{ $message }}</div>
            @enderror
        </div>

        {{-- Email --}}
        <div class="form-floating mb-3">
            <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror"
                placeholder="Email Address" value="{{ old('email') }}" autocomplete="off" required>

            <label for="email">Email Address</label>

            @error('email')
            <div class="text-danger small mt-1">{{ $message }}</div>
            @enderror
        </div>

        {{-- Password --}}
        <div class="input-group mb-3">
            <div class="form-floating flex-grow-1">
                <input type="password" id="password" name="password"
                    class="form-control border-end-0 @error('password') is-invalid @enderror" placeholder="Password"
                    autocomplete="new-password" required minlength="{{ get_setting('password_min_length', 12) }}"
                        title="Minimum {{ get_setting('password_min_length', 12) }} characters">
                <label for="password">Password</label>
            </div>
            <button class="btn btn-outline-secondary bg-white border-start-0 password-toggle" type="button" style="border-color: #dee2e6;">
                <i class="bi bi-eye text-secondary"></i>
            </button>
        </div>

        @error('password')
        <div class="text-danger small mt-1 mb-3">{{ $message }}</div>
        @enderror

        {{-- Confirm Password --}}
        <div class="input-group mb-4">
            <div class="form-floating flex-grow-1">
                <input type="password" id="password_confirmation" name="password_confirmation"
                    class="form-control border-end-0 @error('password_confirmation') is-invalid @enderror" placeholder="Confirm Password"
                    autocomplete="new-password" required minlength="{{ get_setting('password_min_length', 12) }}"
                    title="Must match the new password exactly">
                <label for="password_confirmation">Confirm Password</label>
            </div>
            <button class="btn btn-outline-secondary bg-white border-start-0 password-toggle" type="button" style="border-color: #dee2e6;">
                <i class="bi bi-eye text-secondary"></i>
            </button>
        </div>

        @error('password_confirmation')
        <div class="text-danger small mt-1 mb-4">{{ $message }}</div>
        @enderror

        {{-- Consent Checkboxes (Fintech Style) --}}
        <div class="mb-4">
            <div class="p-3 rounded-4 border bg-white-50 shadow-sm consent-container" style="background: rgba(255,255,255,0.5); transition: all 0.3s ease;">
                <div class="form-check custom-check mb-2 d-flex align-items-center">
                    <input type="checkbox" name="agree_tos_pdp" class="form-check-input flex-shrink-0 mt-0" id="agree_legal" value="1" required>
                    <label class="form-check-label small lh-sm ms-2" for="agree_legal" style="cursor: pointer;">
                        {{ __('I have read and agree to the') }} 
                        <a href="javascript:void(0)" onclick="openLegalModal('tos')" class="text-primary text-decoration-none fw-bold">{{ __('Terms of Use') }}</a> 
                        {{ __('and') }} 
                        <a href="javascript:void(0)" onclick="openLegalModal('privacy')" class="text-primary text-decoration-none fw-bold">{{ __('Privacy Policy (UU PDP)') }}</a>.
                    </label>
                </div>
                <div class="form-check custom-check d-flex align-items-center">
                    <input type="checkbox" name="marketing_consent" class="form-check-input flex-shrink-0 mt-0" id="agree_marketing" value="1">
                    <label class="form-check-label small lh-sm ms-2" for="agree_marketing" style="cursor: pointer;">
                        {{ __('I consent to receive newsletters, marketing emails, and service updates.') }} <span class="text-muted">({{ __('Optional') }})</span>
                    </label>
                </div>
            </div>
            @error('agree_tos_pdp')
                <div class="text-danger small mt-1">{{ $message }}</div>
            @enderror
        </div>

        {{-- Submit --}}
        <button type="submit" class="btn btn-lg btn-primary theme-black w-100">
            Register
        </button>

        {{-- Redirect ke Login --}}
        <div class="text-center">
            <a href="{{ route('login') }}" class="text-primary small">
                Already registered? Login here
            </a>
        </div>
    </form>

    <div class="text-center text-primary mb-5">
        {{-- Footer --}}
        <small class="opacity-50 d-block mt-4"> {{ $footer_text }} </small>
    </div>

    @push('modals')
    {{-- Legal Viewer Modal --}}
    <div class="modal fade" id="legalModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 30px; overflow: hidden;">
                <div class="modal-header border-0 p-4 pb-0" style="padding: 2.5rem 2.5rem 0.5rem !important;">
                    <h4 class="modal-title fw-bold" id="legalModalTitle" style="font-family: var(--adminuiux-title-font);">{{ __('Legal Document') }}</h4>
                    <button type="button" class="btn-close me-1 mt-1" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4" style="padding: 1rem 2.5rem 2.5rem !important;">
                    <div id="legalModalContent" class="legal-content-preview">
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary spinner-border-sm mb-3"></div>
                            <p class="small text-muted">{{ __('Loading document...') }}</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0" style="padding: 0 2.5rem 2.5rem !important;">
                    <button type="button" class="btn btn-pill-standard-primary w-100 py-3" data-bs-dismiss="modal">{{ __('Close & Continue') }}</button>
                </div>
            </div>
        </div>
    </div>
    @endpush

    @push('scripts')
    <script>
        function openLegalModal(type) {
            const modalEl = document.getElementById('legalModal');
            const modal = new bootstrap.Modal(modalEl);
            const contentDiv = document.getElementById('legalModalContent');
            const titleEl = document.getElementById('legalModalTitle');
            
            // Set Titles
            titleEl.innerText = type === 'tos' ? "{{ __('Terms of Use') }}" : "{{ __('Privacy Policy') }}";
            
            // Show Modal
            modal.show();
            
            // Loader
            contentDiv.innerHTML = `
                <div class="text-center py-5">
                    <div class="spinner-border text-primary spinner-border-sm mb-3"></div>
                    <p class="small text-muted">{{ __('Loading document...') }}</p>
                </div>
            `;
            
            // Load Content via AJAX
            fetch(`/legal/${type}`)
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const actualContent = doc.querySelector('.legal-content') ? doc.querySelector('.legal-content').innerHTML : html;
                    contentDiv.innerHTML = actualContent;
                })
                .catch(err => {
                    contentDiv.innerHTML = '<div class="alert alert-danger">{{ __('Failed to load content.') }}</div>';
                });
        }
    </script>
    <style>
        .consent-container:hover {
            background: rgba(255,255,255,0.7) !important;
            border-color: var(--bs-primary) !important;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
        }
        .custom-check .form-check-input {
            width: 1.25em;
            height: 1.25em;
            border-radius: 6px;
            cursor: pointer;
            margin-right: 0 !important;
            border: 2px solid #dee2e6;
            transition: all 0.2s ease;
        }
        .custom-check .form-check-input:checked {
            background-color: #000;
            border-color: #000;
            transform: scale(1.1);
        }
        .legal-content-preview {
            font-size: 0.95rem;
            line-height: 1.7;
            color: #333;
        }
        .legal-content-preview h1, .legal-content-preview h2, .legal-content-preview h3 {
            font-family: var(--adminuiux-title-font);
            font-weight: 700;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            color: #1a1a1a;
        }
    </style>
    @endpush
</x-guest-layout>