@extends('admin.layouts.app')

@section('title', 'Edit User')
@section('page-title', 'Edit User')

@section('content')
<div style="max-width: 900px;">
    <div class="card">
        <div class="card-header">
            <h3>Edit User: {{ $user->name }}</h3>
            <a href="{{ route('admin.users.index') }}" class="btn btn-sm" style="background: var(--border); color: var(--text);">
                ← Back
            </a>
        </div>
        <div class="card-body">
            @if(session('success'))
                <div id="successAlert" class="alert alert-success" style="margin-bottom: 1.5rem; transition: opacity 0.3s ease;">
                    {{ session('success') }}
                </div>
            @endif
            
            @if(session('error'))
                <div id="errorAlert" class="alert alert-danger" style="margin-bottom: 1.5rem; transition: opacity 0.3s ease;">
                    {{ session('error') }}
                </div>
            @endif
            
            @if($errors->any())
                <div id="validationAlert" class="alert alert-danger" style="margin-bottom: 1.5rem; transition: opacity 0.3s ease;">
                    <ul style="margin: 0; padding-left: 20px;">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            
            <script>
                // Auto-hide alerts after 2 seconds
                setTimeout(function() {
                    ['successAlert', 'errorAlert', 'validationAlert'].forEach(function(id) {
                        const el = document.getElementById(id);
                        if (el) {
                            el.style.opacity = '0';
                            setTimeout(function() { el.remove(); }, 300);
                        }
                    });
                }, 2000);
            </script>
            
            <style>
                .user-edit-grid {
                    display: grid;
                    grid-template-columns: 1fr 300px;
                    gap: 2.5rem;
                    align-items: start;
                }
                
                @media (max-width: 968px) {
                    .user-edit-grid {
                        grid-template-columns: 1fr;
                        gap: 1.5rem;
                    }
                    
                    .user-edit-grid > div:last-child {
                        order: -1; /* Move profile picture to top on mobile */
                    }
                }
            </style>
            
            <form id="userEditForm" action="{{ route('admin.users.update', $user) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="user-edit-grid">
                    <!-- Left Column: Inputs -->
                    <div>
                        <div style="margin-bottom: 1.5rem;">
                            <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">Name</label>
                            <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                                style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 1rem;">
                            @error('name')
                                <span style="color: #ef4444; font-size: 0.85rem;">{{ $message }}</span>
                            @enderror
                        </div>

                        <div style="margin-bottom: 1.5rem;">
                            <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">Email</label>
                            <input type="email" name="email" value="{{ old('email', $user->email) }}" required
                                style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 1rem;">
                            @error('email')
                                <span style="color: #ef4444; font-size: 0.85rem;">{{ $message }}</span>
                            @enderror
                        </div>

                        <div style="margin-bottom: 1.5rem;">
                            <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                                <input type="checkbox" name="is_admin" value="1" {{ $user->is_admin ? 'checked' : '' }}
                                    style="width: 18px; height: 18px; accent-color: var(--primary);"
                                    {{ $user->id === auth()->id() || ($user->is_admin && auth()->id() !== 1) ? 'disabled' : '' }}>
                                <span style="font-weight: 500;">Admin Access</span>
                            </label>
                            {{-- Hidden input to preserve admin status when checkbox is disabled --}}
                            @if($user->id === auth()->id() || ($user->is_admin && auth()->id() !== 1))
                                <input type="hidden" name="is_admin" value="{{ $user->is_admin ? '1' : '0' }}">
                            @endif
                            @if($user->id === auth()->id())
                                <span style="color: var(--text-light); font-size: 0.85rem;">You cannot change your own admin status</span>
                            @elseif($user->is_admin && auth()->id() !== 1)
                                <span style="color: var(--text-light); font-size: 0.85rem;">Only super admin can change admin status</span>
                            @endif
                        </div>

                        <!-- Password Change Section -->
                        <div style="margin-bottom: 1.5rem; padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;">
                            <h4 style="margin-bottom: 1rem; color: var(--primary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;">Change Password</h4>
                            <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem;">Leave blank to keep current password</p>
                            
                            <div style="margin-bottom: 1rem;">
                                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">New Password</label>
                                <input type="password" name="password" autocomplete="new-password"
                                    style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 1rem;">
                                @error('password')
                                    <span style="color: #ef4444; font-size: 0.85rem;">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <div>
                                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">Confirm Password</label>
                                <input type="password" name="password_confirmation" autocomplete="new-password"
                                    style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 1rem;">
                            </div>
                        </div>

                        <div style="display: flex; gap: 1rem;">
                            <button type="submit" class="btn btn-primary">
                                Save Changes
                            </button>
                            <a href="{{ route('admin.users.index') }}" class="btn" style="background: var(--border); color: var(--text);">
                                Cancel
                            </a>
                        </div>
                    </div>

                    <!-- Right Column: Profile Picture -->
                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
                        <label style="display: block; font-weight: 600; margin-bottom: 1.5rem; color: var(--text); font-size: 1.1rem; font-family: 'Courier New', monospace; letter-spacing: 1px;">TARGET ID: IMAGE</label>
                        
                        <!-- Hacker Style Avatar Container -->
                        <!-- Avatar Preview Container -->
                        <div class="avatar-preview-container">
                            
                            <!-- Scanline Overlay (Evil Only) -->
                            <div class="scanline-overlay"></div>
                            
                            <!-- Inner Glow (Evil Only) -->
                            <div class="inner-glow"></div>

                            @if($user->profile_picture)
                                <img id="profilePreview" src="{{ asset('uploads/profiles/' . $user->profile_picture) }}" alt="Profile" class="avatar-image">
                            @else
                                <div id="profilePreview" class="avatar-placeholder">
                                    <span class="avatar-initial">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                                </div>
                            @endif
                        </div>

                        <!-- Hidden File Input -->
                        <input type="file" id="profilePictureInput" name="profile_picture" accept="image/*" style="display: none;">

                        <!-- Upload/Remove Buttons -->
                        <div style="display: flex; gap: 10px; margin-top: 1.5rem;">
                            <button type="button" onclick="document.getElementById('profilePictureInput').click()" class="btn-hacker-outline">
                                {{ $user->profile_picture ? 'Change Picture' : '+ Add Picture' }}
                            </button>
                            @if($user->profile_picture)
                            <button type="button" onclick="removeProfilePicture()" class="btn-hacker-outline btn-hacker-danger">
                                Remove Picture
                            </button>
                            @endif
                        </div>

                        <style>
                            /* Base (Evil) Styles */
                            .avatar-preview-container {
                                position: relative; width: 240px; height: 240px; border-radius: 16px; 
                                overflow: hidden; border: 3px solid #00ff41; 
                                box-shadow: 0 0 20px rgba(0, 255, 65, 0.5); background: #000;
                            }
                            .scanline-overlay {
                                position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; 
                                background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px); 
                                background-size: 100% 2px;
                            }
                            .inner-glow {
                                position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; 
                                box-shadow: inset 0 0 30px rgba(0, 255, 65, 0.3);
                            }
                            .avatar-image {
                                width: 100%; height: 100%; object-fit: cover; 
                                filter: contrast(1.2) brightness(1.1) grayscale(0.2);
                            }
                            .avatar-placeholder {
                                display: flex; align-items: center; justify-content: center; 
                                width: 100%; height: 100%; background: #0f172a;
                            }
                            .avatar-initial {
                                font-size: 6rem; font-weight: 800; color: #00ff41; 
                                text-shadow: 0 0 10px rgba(0, 255, 65, 0.8); 
                                font-family: 'Courier New', monospace;
                            }
                            
                            .btn-hacker-outline {
                                background: transparent; border: 2px solid #00ff41; color: #00ff41;
                                font-family: 'Share Tech Mono', monospace; font-weight: 600; 
                                letter-spacing: 1px; text-transform: uppercase; padding: 10px 20px; 
                                border-radius: 4px; transition: all 0.3s ease; 
                                box-shadow: 0 0 10px rgba(0, 255, 65, 0.2); cursor: pointer; 
                                font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center;
                            }
                            .btn-hacker-outline:hover {
                                background: transparent; color: #00ff41; 
                                box-shadow: 0 0 20px rgba(0, 255, 65, 0.6); text-shadow: 0 0 10px #00ff41;
                            }
                            
                            .btn-hacker-danger { border-color: #ff0040; color: #ff0040; box-shadow: 0 0 10px rgba(255, 0, 64, 0.2); }
                            .btn-hacker-danger:hover { color: #ff0040; box-shadow: 0 0 20px rgba(255, 0, 64, 0.6); text-shadow: 0 0 10px #ff0040; }
                            
                            .btn-hacker-success { border-color: #00ff41; color: #00ff41; box-shadow: 0 0 10px rgba(0, 255, 65, 0.2); }
                            .btn-hacker-success:hover { color: #00ff41; box-shadow: 0 0 20px rgba(0, 255, 65, 0.6); text-shadow: 0 0 10px #00ff41; }
                            
                            /* ANGEL THEME OVERRIDES */
                            [data-theme="angel"] .avatar-preview-container {
                                border-color: #0ea5e9;
                                box-shadow: 0 0 30px rgba(14, 165, 233, 0.3);
                                background: #f0f9ff;
                            }
                            [data-theme="angel"] .scanline-overlay,
                            [data-theme="angel"] .inner-glow {
                                display: none;
                            }
                            [data-theme="angel"] .avatar-image {
                                filter: none;
                            }
                            [data-theme="angel"] .avatar-placeholder {
                                background: #e0f2fe;
                            }
                            [data-theme="angel"] .avatar-initial {
                                color: #0ea5e9;
                                text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
                                font-family: 'Quicksand', sans-serif;
                            }
                            
                            [data-theme="angel"] .btn-hacker-outline {
                                border-color: #0ea5e9;
                                color: #0ea5e9;
                                box-shadow: none;
                                border-radius: 999px;
                                font-family: 'Quicksand', sans-serif;
                            }
                            [data-theme="angel"] .btn-hacker-outline:hover {
                                background: #e0f2fe;
                                box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
                                transform: translateY(-1px);
                            }
                            
                            [data-theme="angel"] .btn-hacker-danger {
                                border-color: #ef4444; color: #ef4444;
                            }
                            [data-theme="angel"] .btn-hacker-danger:hover {
                                background: #fef2f2;
                                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
                            }
                            
                            [data-theme="angel"] .btn-hacker-success {
                                border-color: #0ea5e9; color: #0ea5e9;
                            }
                            [data-theme="angel"] .btn-hacker-success:hover {
                                background: #f0f9ff;
                            }
                        </style>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Reset Password -->
    <div class="card" style="margin-top: 1.5rem;">
        <div class="card-header">
            <h3>Reset Password</h3>
        </div>
        <div class="card-body">
            <p style="color: var(--text-light); margin-bottom: 1rem;">Reset this user's password to default: <strong>password123</strong></p>
            <form action="{{ route('admin.users.reset-password', $user) }}" method="POST">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-danger"
                    data-confirm="Reset password for {{ $user->name }} to 'password123'?">
                    Reset Password
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Custom Hacker Modal -->
<div id="hackerModal" class="hacker-modal-overlay">
    <div class="hacker-modal">
        <div class="hacker-modal-header">
            <h3>SYSTEM WARNING</h3>
        </div>
        <div class="hacker-modal-body">
            <p>CRITICAL ALERT: You are about to DELETE target identity image.</p>
            <p>This action cannot be undone. Confirm deletion?</p>
        </div>
        <div class="hacker-modal-footer">
            <button onclick="closeHackerModal()" class="btn-hacker-outline">CANCEL</button>
            <button onclick="confirmRemoveProfilePicture()" class="btn-hacker-outline btn-hacker-danger">CONFIRM DELETE</button>
        </div>
    </div>
</div>

<style>
    .hacker-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(5px);
    }
    
    .hacker-modal {
        background: #000;
        border: 2px solid #ff0040;
        width: 100%;
        max-width: 500px;
        box-shadow: 0 0 30px rgba(255, 0, 64, 0.3);
        position: relative;
        animation: modalSlideIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    .hacker-modal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: repeating-linear-gradient(90deg, #ff0040 0px, #ff0040 10px, transparent 10px, transparent 20px);
    }
    
    .hacker-modal-header {
        background: rgba(255, 0, 64, 0.1);
        padding: 15px 20px;
        border-bottom: 1px solid #ff0040;
    }
    
    .hacker-modal-header h3 {
        margin: 0;
        color: #ff0040;
        font-family: 'Courier New', monospace;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 1.2rem;
        font-weight: 800;
        text-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
    }
    
    .hacker-modal-body {
        padding: 25px 20px;
        color: #fff;
        font-family: 'Courier New', monospace;
    }
    
    .hacker-modal-body p {
        margin-bottom: 10px;
        line-height: 1.6;
    }
    
    .hacker-modal-footer {
        padding: 20px;
        display: flex;
        justify-content: flex-end;
        gap: 15px;
        border-top: 1px solid rgba(255, 0, 64, 0.3);
    }
    
    @keyframes modalSlideIn {
        from { transform: translateY(-50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    /* ANGEL MODAL OVERRIDES */
    [data-theme="angel"] .hacker-modal {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 40px rgba(14, 165, 233, 0.2);
        border-radius: 12px;
        animation: none; /* Soft fade instead? */
    }
    [data-theme="angel"] .hacker-modal::before {
        display: none;
    }
    [data-theme="angel"] .hacker-modal-header {
        background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
        border-bottom: 1px solid #e2e8f0;
        border-radius: 12px 12px 0 0;
    }
    [data-theme="angel"] .hacker-modal-header h3 {
        color: #0284c7;
        font-family: 'Quicksand', sans-serif;
        text-shadow: none;
        letter-spacing: 0.5px;
    }
    [data-theme="angel"] .hacker-modal-body {
        color: #334155;
        font-family: 'Inter', sans-serif;
    }
    [data-theme="angel"] .hacker-modal-footer {
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
        border-radius: 0 0 12px 12px;
    }
    /* Warning Modal Specifics for Angel */
    [data-theme="angel"] .hacker-modal-header h3 {
        /* If it's the deletion warning, keep it serious but cleaner */
    }
</style>

<script>
// Live image preview
document.getElementById('profilePictureInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
            const preview = document.getElementById('profilePreview');
            if (preview.tagName === 'IMG') {
                preview.src = event.target.result;
            } else {
                // Replace the div with an img element
                const img = document.createElement('img');
                img.id = 'profilePreview';
                img.src = event.target.result;
                img.alt = 'Profile';
                img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; filter: contrast(1.2) brightness(1.1) grayscale(0.2);';
                preview.parentNode.replaceChild(img, preview);
            }
        };
        reader.readAsDataURL(file);
    }
});

// Modal functions
function removeProfilePicture() {
    const modal = document.getElementById('hackerModal');
    modal.style.display = 'flex';
}

function closeHackerModal() {
    const modal = document.getElementById('hackerModal');
    modal.style.display = 'none';
}

function confirmRemoveProfilePicture() {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route("admin.users.remove-picture", $user) }}';
    
    const csrfToken = document.createElement('input');
    csrfToken.type = 'hidden';
    csrfToken.name = '_token';
    csrfToken.value = '{{ csrf_token() }}';
    
    const methodField = document.createElement('input');
    methodField.type = 'hidden';
    methodField.name = '_method';
    methodField.value = 'DELETE';
    
    form.appendChild(csrfToken);
    form.appendChild(methodField);
    document.body.appendChild(form);
    form.submit();
}

// Close modal when clicking outside
document.getElementById('hackerModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeHackerModal();
    }
});
</script>

<!-- Cropper.js Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>

<!-- Crop Modal -->
<div id="cropModal" class="hacker-modal-overlay">
    <div class="hacker-modal" style="max-width: 800px;">
        <div class="hacker-modal-header">
            <h3>IMAGE CROP INTERFACE</h3>
        </div>
        <div class="hacker-modal-body" style="padding: 20px;">
            <div style="max-height: 500px; overflow: hidden;">
                <img id="cropImage" style="max-width: 100%; display: block;">
            </div>
        </div>
        <div class="hacker-modal-footer">
            <button onclick="closeCropModal()" class="btn-hacker-outline">CANCEL</button>
            <button onclick="cropAndSave()" class="btn-hacker-outline btn-hacker-success">CROP & SAVE</button>
        </div>
    </div>
</div>

<script>
let cropper = null;
let croppedFile = null;

// Update the file input change handler
document.getElementById('profilePictureInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
            // Show crop modal
            const cropImage = document.getElementById('cropImage');
            cropImage.src = event.target.result;
            document.getElementById('cropModal').style.display = 'flex';
            
            // Initialize cropper
            if (cropper) {
                cropper.destroy();
            }
            
            cropper = new Cropper(cropImage, {
                aspectRatio: 1,
                viewMode: 1,
                autoCropArea: 1,
                responsive: true,
                background: false,
                guides: true,
                center: true,
                highlight: true,
                cropBoxMovable: true,
                cropBoxResizable: true,
                toggleDragModeOnDblclick: false,
            });
        };
        reader.readAsDataURL(file);
    }
});

function closeCropModal() {
    document.getElementById('cropModal').style.display = 'none';
    if (cropper) {
        cropper.destroy();
        cropper = null;
    }
    // Reset file input
    document.getElementById('profilePictureInput').value = '';
}

function cropAndSave() {
    if (!cropper) return;
    
    // Get cropped canvas
    const canvas = cropper.getCroppedCanvas({
        width: 400,
        height: 400,
        imageSmoothingEnabled: true,
        imageSmoothingQuality: 'high',
    });
    
    // Convert to blob
    canvas.toBlob(function(blob) {
        // Create a new File object from the blob
        const fileName = 'cropped_profile_' + Date.now() + '.jpg';
        croppedFile = new File([blob], fileName, { type: 'image/jpeg' });
        
        // Update the file input with cropped file
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(croppedFile);
        document.getElementById('profilePictureInput').files = dataTransfer.files;
        
        // Update preview
        const preview = document.getElementById('profilePreview');
        const croppedUrl = canvas.toDataURL('image/jpeg');
        
        if (preview.tagName === 'IMG') {
            preview.src = croppedUrl;
        } else {
            // Replace the div with an img element
            const img = document.createElement('img');
            img.id = 'profilePreview';
            img.src = croppedUrl;
            img.alt = 'Profile';
            img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; filter: contrast(1.2) brightness(1.1) grayscale(0.2);';
            preview.parentNode.replaceChild(img, preview);
        }
        
        // Close modal and submit form
        document.getElementById('cropModal').style.display = 'none';
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }
        
        // Submit the form to save to server
        document.getElementById('userEditForm').submit();
    }, 'image/jpeg', 0.95);
}

// Close crop modal when clicking outside
document.getElementById('cropModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeCropModal();
    }
});
</script>
@endsection