@extends('admin.layouts.app')

@section('title', 'My Profile')

@section('page-title', 'My Profile')

@section('content')

<!-- ============================================
   PROFILE PAGE - REDESIGNED
============================================ -->
<style>
    .form-control-custom {
   
    padding: 10px 33px;
    }
</style>
<div class="profile-page">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li><a href="{{ route('admin.dashboard') }}"><i class="bi bi-house-door"></i> Dashboard</a></li>
            <li class="active">My Profile</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>My Profile</h1>
            <p><i class="bi bi-person-circle"></i> Manage your personal information</p>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to Dashboard
        </a>
    </div>

    <!-- ===== ALERTS ===== -->
    @if(session('success'))
    <div class="alert-box alert-success">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ session('success') }}</span>
        <button class="alert-close-btn" data-dismiss="alert"><i class="bi bi-x"></i></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert-box alert-error">
        <i class="bi bi-exclamation-circle-fill"></i>
        <span>{{ session('error') }}</span>
        <button class="alert-close-btn" data-dismiss="alert"><i class="bi bi-x"></i></button>
    </div>
    @endif

    <!-- ===== MAIN PROFILE CARD ===== -->
    <div class="profile-main-card">
        <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data" class="profile-form-main">
            @csrf

            <div class="profile-layout">

                <!-- ===== LEFT - PROFILE PHOTO ===== -->
                <div class="profile-photo-section">
                    <div class="photo-wrapper">
                        @if($admin->image)
                        <img src="{{ asset($admin->image) }}" id="preview" alt="Profile Photo">
                        @else
                        <img src="https://ui-avatars.com/api/?name={{ urlencode($admin->name) }}&background=C1121F&color=ffffff&size=200&font-size=0.5" id="preview" alt="Profile Photo">
                        @endif
                        <div class="photo-overlay">
                            <i class="bi bi-camera"></i>
                            <span>Change Photo</span>
                        </div>
                    </div>

                    <div class="photo-upload">
                        <input type="file" name="image" id="profileImage" accept="image/*">
                        <label for="profileImage" class="upload-label">
                            <i class="bi bi-cloud-upload"></i> Upload  Photo
                        </label>
                        <span class="upload-hint">Square image, max 2MB</span>
                        @error('image')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="profile-status-badge">
                        <span class="status-indicator active"></span>
                        <span>Active </span>
                        <span class="role-tag">Super Admin</span>
                    </div>
                </div>

                <!-- ===== RIGHT - FORM ===== -->
                <div class="profile-form-section">

                    <!-- Personal Info -->
                    <div class="form-group-section">
                        <div class="section-title">
                            <i class="bi bi-person-fill"></i>
                            <h3>Personal Information</h3>
                        </div>

                        <div class="form-row">
                            <div class="form-col">
                                <div class="input-group-custom">
                                    <label>Full Name</label>
                                    <div class="input-wrapper">
                                        <i class="bi bi-person"></i>
                                        <input type="text" name="name" class="form-control-custom @error('name') error @enderror" value="{{ old('name', $admin->name) }}" placeholder="Enter your full name" required>
                                    </div>
                                    @error('name')
                                    <span class="error-text">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-col">
                                <div class="input-group-custom">
                                    <label>Email Address</label>
                                    <div class="input-wrapper">
                                        <i class="bi bi-envelope"></i>
                                        <input type="email" name="email" class="form-control-custom @error('email') error @enderror" value="{{ old('email', $admin->email) }}" placeholder="Enter your email" required>
                                    </div>
                                    @error('email')
                                    <span class="error-text">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                          

                            <div class="form-col d-none">
                                <div class="input-group-custom">
                                    <label>Username</label>
                                    <div class="input-wrapper">
                                        <i class="bi bi-person-badge"></i>
                                        <input type="text" name="username" class="form-control-custom @error('username') error @enderror" value="{{ old('username', $admin->username ?? '') }}" placeholder="Choose a username">
                                    </div>
                                    @error('username')
                                    <span class="error-text">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                          <div class="form-col mt-3">
                                <div class="input-group-custom">
                                    <label>Phone Number</label>
                                    <div class="input-wrapper">
                                        <i class="bi bi-telephone"></i>
                                        <input type="text" name="phone" class="form-control-custom @error('phone') error @enderror" value="{{ old('phone', $admin->phone) }}" placeholder="Enter your phone number">
                                    </div>
                                    @error('phone')
                                    <span class="error-text">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                    </div>

                    <!-- Change Password -->
                    <div class="form-group-section password-section">
                        <div class="section-title">
                            <i class="bi bi-shield-lock"></i>
                            <h3>Change Password</h3>
                            <span class="optional-badge">Optional</span>
                        </div>

                        <div class="form-row">
                            <div class="form-col">
                                <div class="input-group-custom">
                                    <label>Current Password</label>
                                    <div class="input-wrapper">
                                        <i class="bi bi-lock"></i>
                                        <input type="password" name="old_password" id="oldPassword" class="form-control-custom" placeholder="Enter current password">
                                        <button type="button" class="toggle-password" data-target="oldPassword">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-col">
                                <div class="input-group-custom">
                                    <label>New Password</label>
                                    <div class="input-wrapper">
                                        <i class="bi bi-key"></i>
                                        <input type="password" name="new_password" id="newPassword" class="form-control-custom" placeholder="Enter new password">
                                        <button type="button" class="toggle-password" data-target="newPassword">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-col">
                                <div class="input-group-custom">
                                    <label>Confirm Password</label>
                                    <div class="input-wrapper">
                                        <i class="bi bi-check-circle"></i>
                                        <input type="password" name="confirm_password" id="confirmPassword" class="form-control-custom" placeholder="Confirm new password">
                                        <button type="button" class="toggle-password" data-target="confirmPassword">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Password Strength -->
                        <div class="password-strength-wrap" id="strengthWrap">
                            <div class="strength-track">
                                <div class="strength-fill" id="strengthFill"></div>
                            </div>
                            <span class="strength-label" id="strengthLabel">Enter a new password</span>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions-wrap">
                        <button type="submit" class="btn-update">
                            <i class="bi bi-check2-circle"></i> Update Profile
                        </button>
                        <button type="reset" class="btn-reset">
                            <i class="bi bi-arrow-counterclockwise"></i> Reset
                        </button>
                    </div>

                </div>
            </div>
        </form>
    </div>

    <!-- ===== QUICK INFO CARDS ===== -->
    <div class="info-cards-grid">
        <div class="info-card-item">
            <div class="info-icon-box">
                <i class="bi bi-clock-history"></i>
            </div>
            <div>
                <span class="info-label">Last Login</span>
                <span class="info-value">{{ $admin->last_login_at ?? 'Just now' }}</span>
            </div>
        </div>

        <div class="info-card-item">
            <div class="info-icon-box">
                <i class="bi bi-calendar-check"></i>
            </div>
            <div>
                <span class="info-label">Member Since</span>
                <span class="info-value">{{ $admin->created_at->format('d M, Y') }}</span>
            </div>
        </div>

        <div class="info-card-item">
            <div class="info-icon-box">
                <i class="bi bi-shield-check"></i>
            </div>
            <div>
                <span class="info-label">Account Status</span>
                <span class="info-value status-active">Verified</span>
            </div>
        </div>
    </div>

</div>


@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // IMAGE PREVIEW
        // ============================================
        const imageInput = document.getElementById('profileImage');
        const preview = document.getElementById('preview');

        if (imageInput && preview) {
            imageInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function() {
                        preview.src = reader.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        // ============================================
        // PASSWORD TOGGLE
        // ============================================
        document.querySelectorAll('.toggle-password').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const input = document.getElementById(targetId);
                if (input) {
                    const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                    input.setAttribute('type', type);
                    const icon = this.querySelector('i');
                    icon.classList.toggle('bi-eye');
                    icon.classList.toggle('bi-eye-slash');
                }
            });
        });

        // ============================================
        // PASSWORD STRENGTH
        // ============================================
        const newPassword = document.getElementById('newPassword');
        const strengthFill = document.getElementById('strengthFill');
        const strengthLabel = document.getElementById('strengthLabel');

        if (newPassword && strengthFill && strengthLabel) {
            newPassword.addEventListener('input', function() {
                const password = this.value;
                let score = 0;

                if (password.length === 0) {
                    strengthFill.style.width = '0%';
                    strengthFill.className = 'strength-fill';
                    strengthLabel.textContent = 'Enter a new password';
                    strengthLabel.className = 'strength-label';
                    return;
                }

                // Length
                if (password.length >= 6) score += 1;
                if (password.length >= 10) score += 1;

                // Complexity
                if (/[a-z]/.test(password)) score += 1;
                if (/[A-Z]/.test(password)) score += 1;
                if (/[0-9]/.test(password)) score += 1;
                if (/[^a-zA-Z0-9]/.test(password)) score += 1;

                let percent = Math.min((score / 6) * 100, 100);

                strengthFill.style.width = percent + '%';

                let label, level;
                if (percent < 33) {
                    level = 'weak';
                    label = 'Weak Password';
                } else if (percent < 66) {
                    level = 'medium';
                    label = 'Medium Password';
                } else {
                    level = 'strong';
                    label = 'Strong Password';
                }

                strengthFill.className = 'strength-fill ' + level;
                strengthLabel.textContent = label;
                strengthLabel.className = 'strength-label ' + level;
            });
        }

        // ============================================
        // ALERT AUTO-DISMISS
        // ============================================
        document.querySelectorAll('.alert-close-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const alert = this.closest('.alert-box');
                if (alert) {
                    alert.style.transition = 'all 0.3s ease';
                    alert.style.transform = 'translateX(40px)';
                    alert.style.opacity = '0';
                    setTimeout(function() {
                        if (alert.parentNode) alert.remove();
                    }, 300);
                }
            });
        });

        // Auto dismiss after 5 seconds
        document.querySelectorAll('.alert-box').forEach(function(alert) {
            setTimeout(function() {
                if (alert && alert.parentNode) {
                    alert.style.transition = 'all 0.4s ease';
                    alert.style.transform = 'translateX(40px)';
                    alert.style.opacity = '0';
                    setTimeout(function() {
                        if (alert.parentNode) alert.remove();
                    }, 400);
                }
            }, 5000);
        });

        console.log('✅ Profile page loaded successfully!');
    });
</script>
@endpush


@endsection