@extends('super_admin.layouts.master')

@section('title', 'Super Admin Settings')

@section('content')
<div style="padding: 20px;">
    
    <!-- Header -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <div>
            <h4 style="margin: 0; font-weight: bold;">Settings</h4>
            <p style="margin: 0; color: #6c757d; font-size: 14px;">Manage your profile and security</p>
        </div>
        <a href="{{ route('super_admin.dashboard') }}" style="text-decoration: none; color: #6c757d;">
            ← Back
        </a>
    </div>

    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
        
        <!-- Profile -->
        <div style="flex: 1; min-width: 300px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
            <div style="background: #0d6efd; color: white; padding: 15px;">
                <strong>Profile Information</strong>
            </div>
            <div style="padding: 20px; text-align: center;">
                
              <!-- Avatar -->
                <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 15px;">
                    <img src="{{ asset('storage/logo.png') }}" 
                        alt="Logo" 
                        style="width: 80px; height: 80px; border-radius: 50%; border: 2px solid #a4850a; object-fit: cover;">
                </div>
                
                <h5 style="margin: 0 0 5px 0;">{{ $superAdmin->name }}</h5>
                <span style="background: #198754; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">{{ ucfirst($superAdmin->role) }}</span>
                
                <div style="margin-top: 20px; text-align: left;">
                    <div style="display: flex; align-items: center; padding: 10px; background: #f8f9fa; border-radius: 6px; margin-bottom: 8px;">
                        <span style="margin-right: 10px;">📧</span>
                        <div>
                            <div style="font-size: 12px; color: #6c757d;">Email</div>
                            <div style="font-size: 14px;">{{ $superAdmin->email }}</div>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; padding: 10px; background: #f8f9fa; border-radius: 6px; margin-bottom: 8px;">
                        <span style="margin-right: 10px;">📞</span>
                        <div>
                            <div style="font-size: 12px; color: #6c757d;">Phone</div>
                            <div style="font-size: 14px;">{{ $superAdmin->phone ?? 'Not provided' }}</div>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; padding: 10px; background: #f8f9fa; border-radius: 6px;">
                        <span style="margin-right: 10px;">🕐</span>
                        <div>
                            <div style="font-size: 12px; color: #6c757d;">Last Login</div>
                            <div style="font-size: 14px;">
                                {{ $superAdmin->last_login_at ? $superAdmin->last_login_at->format('d M Y, h:i A') : 'Never' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Password -->
        <div style="flex: 2; min-width: 400px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
            <div style="border-bottom: 1px solid #dee2e6; padding: 15px;">
                <strong>🔒 Change Password</strong>
                <p style="margin: 0; color: #6c757d; font-size: 13px;">Update password to keep account secure</p>
            </div>
            
            <div style="padding: 20px;">
                
                @if(session('success'))
                    <div style="background: #d1e7dd; color: #0f5132; padding: 12px; border-radius: 6px; margin-bottom: 15px;">
                        ✅ {{ session('success') }}
                    </div>
                @endif

                @if($errors->any())
                    <div style="background: #f8d7da; color: #842029; padding: 12px; border-radius: 6px; margin-bottom: 15px;">
                        @foreach($errors->all() as $error)
                            <div>⚠️ {{ $error }}</div>
                        @endforeach
                    </div>
                @endif

                <form action="{{ route('super_admin.settings.password') }}" method="POST">
                    @csrf
                    
                    <div style="margin-bottom: 15px;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 5px;">
                            Current Password *
                        </label>
                        <input type="password" name="current_password" placeholder="Enter current password" required
                               style="width: 100%; padding: 10px; border: 1px solid #dee2e6; border-radius: 4px;">
                    </div>

                    <div style="margin-bottom: 15px;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 5px;">
                            New Password *
                        </label>
                        <input type="password" name="new_password" id="newP" placeholder="Enter new password" required
                               onkeyup="checkStr(this.value)"
                               style="width: 100%; padding: 10px; border: 1px solid #dee2e6; border-radius: 4px;">
                        <div style="height: 4px; background: #e9ecef; border-radius: 2px; margin-top: 5px;">
                            <div id="bar" style="height: 100%; width: 0%; background: #dc3545; border-radius: 2px; transition: all 0.3s;"></div>
                        </div>
                        <small id="txt" style="color: #6c757d;">Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 symbol</small>
                    </div>

                    <div style="margin-bottom: 20px;">
                        <label style="display: block; font-size: 13px; font-weight: bold; margin-bottom: 5px;">
                            Confirm Password *
                        </label>
                        <input type="password" name="new_password_confirmation" id="conP" placeholder="Confirm new password" required
                               onkeyup="checkM()"
                               style="width: 100%; padding: 10px; border: 1px solid #dee2e6; border-radius: 4px;">
                        <small id="mTxt" style="color: #198754; display: none;">✓ Passwords match!</small>
                    </div>

                    <div style="display: flex; gap: 10px;">
                        <button type="reset" style="padding: 10px 20px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
                            Reset
                        </button>
                        <button type="submit" style="padding: 10px 20px; background: #0d6efd; color: white; border: none; border-radius: 4px; cursor: pointer;">
                            Update Password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function checkStr(v) {
    let s = 0;
    if (v.length >= 8) s += 20;
    if (v.match(/[a-z]/)) s += 20;
    if (v.match(/[A-Z]/)) s += 20;
    if (v.match(/[0-9]/)) s += 20;
    if (v.match(/[^a-zA-Z0-9]/)) s += 20;
    
    const b = document.getElementById('bar');
    const t = document.getElementById('txt');
    b.style.width = s + '%';
    
    if (s <= 40) { b.style.background = '#dc3545'; t.innerHTML = 'Weak password'; }
    else if (s <= 80) { b.style.background = '#ffc107'; t.innerHTML = 'Fair password'; }
    else { b.style.background = '#198754'; t.innerHTML = 'Strong password!'; }
}

function checkM() {
    const p1 = document.getElementById('newP').value;
    const p2 = document.getElementById('conP').value;
    const m = document.getElementById('mTxt');
    m.style.display = (p2 && p1 === p2) ? 'block' : 'none';
}
</script>
@endsection