@extends('layouts.app')

@section('title', 'Secure Webmail - ' . $account->email)

@section('styles')
<style>
    .security-info {
        border-left: 4px solid #3490dc;
    }
    .session-info {
        background-color: #f8fafc;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .session-timer {
        font-size: 1.2rem;
        font-weight: bold;
        color: #e3342f;
    }
    .security-features {
        margin-top: 30px;
    }
    .security-feature-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    .security-feature-item i {
        font-size: 1.5rem;
        margin-right: 15px;
        color: #38c172;
    }
</style>
@endsection

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-envelope mr-2"></i> {{ $account->email }}
                    </h4>
                    <span class="badge badge-light">
                        <i class="fas fa-shield-alt"></i> Secure Session
                    </span>
                </div>

                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success" role="alert">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger" role="alert">
                            {{ session('error') }}
                        </div>
                    @endif

                    <div class="session-info">
                        <h5><i class="fas fa-key"></i> Secure Session Information</h5>
                        <p>A secure session has been created for your email account. This session will expire in <span class="session-timer" id="session-timer">02:00:00</span>.</p>
                        <p>For your security, the session will automatically end after this time period or when you log out.</p>
                        
                        <div class="d-flex justify-content-between mt-4">
                            <a href="{{ $sessionData['webmail_url'] }}" class="btn btn-primary">
                                <i class="fas fa-lock"></i> Access Secure Webmail
                            </a>
                            
                            <form action="{{ route('email.webmail.end-session') }}" method="POST">
                                @csrf
                                <input type="hidden" name="token" value="{{ $sessionData['token'] }}">
                                <button type="submit" class="btn btn-outline-danger">
                                    <i class="fas fa-sign-out-alt"></i> End Session
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="security-features">
                        <h5 class="mb-4">Security Features</h5>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="security-feature-item">
                                    <i class="fas fa-lock"></i>
                                    <div>
                                        <h6>End-to-End Encryption</h6>
                                        <p>All your emails are encrypted from end to end, ensuring that only you and the recipient can read them.</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="security-feature-item">
                                    <i class="fas fa-shield-alt"></i>
                                    <div>
                                        <h6>Phishing Protection</h6>
                                        <p>Advanced algorithms detect and block phishing attempts to protect your sensitive information.</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="security-feature-item">
                                    <i class="fas fa-virus-slash"></i>
                                    <div>
                                        <h6>Malware Scanning</h6>
                                        <p>All attachments are automatically scanned for malware before you can download them.</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="security-feature-item">
                                    <i class="fas fa-user-shield"></i>
                                    <div>
                                        <h6>Secure Authentication</h6>
                                        <p>Multi-layered authentication ensures that only you can access your emails.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Session timer countdown
        const expiresAt = new Date('{{ $sessionData["expires_at"] }}');
        const timerElement = document.getElementById('session-timer');
        
        function updateTimer() {
            const now = new Date();
            const diff = expiresAt - now;
            
            if (diff <= 0) {
                timerElement.textContent = '00:00:00';
                alert('Your secure session has expired. Please refresh the page to create a new session.');
                return;
            }
            
            const hours = Math.floor(diff / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            timerElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            setTimeout(updateTimer, 1000);
        }
        
        updateTimer();
    });
</script>
@endsection