@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mobile-container max-w-md mx-auto">
        <div class="mobile-profile">
            <div class="profile-header">
                <a href="{{ route('mobile.dashboard') }}" class="back-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 12H5"></path>
                        <path d="M12 19l-7-7 7-7"></path>
                    </svg>
                </a>
                <h1>{{ __('mobile.profile') }}</h1>
            </div>
            
            <div class="profile-content">
                <div class="profile-avatar-section">
                    <div class="avatar-container">
                        <img id="user-avatar" src="/img/default-avatar.png" alt="User Avatar" class="avatar">
                        <button type="button" class="change-avatar-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                                <circle cx="12" cy="13" r="4"></circle>
                            </svg>
                        </button>
                    </div>
                    <h2 id="user-name">Loading...</h2>
                    <p id="user-email" class="user-email">Loading...</p>
                </div>
                
                <form id="profile-form" class="space-y-6">
                    <div class="form-group">
                        <label for="name">{{ __('mobile.full_name') }}</label>
                        <input type="text" id="name" name="name" class="form-input" placeholder="{{ __('mobile.enter_full_name') }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="email">{{ __('mobile.email') }}</label>
                        <input type="email" id="email" name="email" class="form-input" placeholder="{{ __('mobile.enter_email') }}" readonly>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">{{ __('mobile.phone') }}</label>
                        <input type="tel" id="phone" name="phone" class="form-input" placeholder="{{ __('mobile.enter_phone') }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="company">{{ __('mobile.company') }}</label>
                        <input type="text" id="company" name="company" class="form-input" placeholder="{{ __('mobile.enter_company') }}">
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">
                            {{ __('mobile.save_profile') }}
                        </button>
                    </div>
                </form>
                
                <div class="account-actions">
                    <h3>{{ __('mobile.account_actions') }}</h3>
                    <div class="action-buttons">
                        <a href="{{ route('mobile.settings') }}" class="btn-secondary">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="3"></circle>
                                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                            </svg>
                            {{ __('mobile.settings') }}
                        </a>
                        <button type="button" id="logout-btn" class="btn-danger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                                <polyline points="16 17 21 12 16 7"></polyline>
                                <line x1="21" y1="12" x2="9" y2="12"></line>
                            </svg>
                            {{ __('mobile.logout') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Mobile-specific styles */
    @media (min-width: 768px) {
        .mobile-container {
            border: 12px solid #333;
            border-radius: 36px;
            padding: 8px;
            background: #fff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            height: 80vh;
            overflow-y: auto;
        }
    }
    
    .mobile-profile {
        padding: 1rem;
    }
    
    .profile-header {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .back-button {
        margin-right: 1rem;
    }
    
    .profile-header h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
    }
    
    .profile-avatar-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .avatar-container {
        position: relative;
        margin-bottom: 1rem;
    }
    
    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #4f46e5;
    }
    
    .change-avatar-btn {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #4f46e5;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
    }
    
    .profile-avatar-section h2 {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0.5rem 0 0.25rem;
    }
    
    .user-email {
        color: #6b7280;
        margin: 0;
        font-size: 0.875rem;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: #4b5563;
    }
    
    .form-input {
        width: 100%;
        padding: 0.75rem;
        border-radius: 0.375rem;
        border: 1px solid #d1d5db;
        font-size: 1rem;
    }
    
    .form-input:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
    }
    
    .form-input[readonly] {
        background-color: #f9fafb;
        cursor: not-allowed;
    }
    
    .btn-primary {
        background-color: #4f46e5;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.375rem;
        font-weight: 500;
        width: 100%;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .btn-primary:hover {
        background-color: #4338ca;
    }
    
    .form-actions {
        margin-top: 2rem;
    }
    
    .account-actions {
        margin-top: 3rem;
        border-top: 1px solid #e5e7eb;
        padding-top: 2rem;
    }
    
    .account-actions h3 {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #4b5563;
    }
    
    .action-buttons {
        display: flex;
        gap: 1rem;
    }
    
    .btn-secondary, .btn-danger {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem;
        border-radius: 0.375rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .btn-secondary {
        background-color: #f3f4f6;
        color: #4b5563;
        border: 1px solid #d1d5db;
        text-decoration: none;
    }
    
    .btn-secondary:hover {
        background-color: #e5e7eb;
    }
    
    .btn-danger {
        background-color: #fee2e2;
        color: #b91c1c;
        border: 1px solid #fecaca;
    }
    
    .btn-danger:hover {
        background-color: #fecaca;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Fetch user profile data
        axios.get('/api/mobile/profile')
            .then(response => {
                if (response.data.status === 'success') {
                    const user = response.data.data.user;
                    
                    // Update profile display
                    document.getElementById('user-name').textContent = user.name;
                    document.getElementById('user-email').textContent = user.email;
                    
                    // If user has avatar, update the image
                    if (user.avatar) {
                        document.getElementById('user-avatar').src = user.avatar;
                    }
                    
                    // Fill form fields
                    document.getElementById('name').value = user.name || '';
                    document.getElementById('email').value = user.email || '';
                    document.getElementById('phone').value = user.phone || '';
                    document.getElementById('company').value = user.company || '';
                }
            })
            .catch(error => {
                console.error('Error fetching profile:', error);
            });
        
        // Handle form submission
        document.getElementById('profile-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                name: document.getElementById('name').value,
                phone: document.getElementById('phone').value,
                company: document.getElementById('company').value
            };
            
            axios.post('/api/mobile/profile/update', formData)
                .then(response => {
                    if (response.data.status === 'success') {
                        // Show success message
                        alert(response.data.message || 'Profile updated successfully');
                        
                        // Update display name
                        document.getElementById('user-name').textContent = formData.name;
                    }
                })
                .catch(error => {
                    console.error('Error updating profile:', error);
                    alert('Failed to update profile. Please try again.');
                });
        });
        
        // Handle logout button
        document.getElementById('logout-btn').addEventListener('click', function() {
            axios.post('/logout')
                .then(() => {
                    window.location.href = '/login';
                })
                .catch(error => {
                    console.error('Error during logout:', error);
                });
        });
        
        // Handle avatar change button
        document.querySelector('.change-avatar-btn').addEventListener('click', function() {
            // This would typically open a file picker or avatar selection modal
            alert('Avatar change functionality will be implemented in a future update.');
        });
    });
</script>
@endpush