@extends('layouts.app')

@section('title', isset($user) ? 'Edit User' : 'Create User')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0">
                                <i class="fas fa-{{ isset($user) ? 'edit' : 'plus' }} me-1"></i>
                                {{ isset($user) ? 'Edit User' : 'Create New User' }}
                            </h4>
                            <small class="text-muted">
                                {{ isset($user) ? 'Update user information and permissions' : 'Add a new user to the system' }}
                            </small>
                        </div>
                        <div class="d-flex gap-1">
                            <a href="{{ route('users.index') }}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>Back to Users
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- User Form -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-user me-1"></i>
                        User Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <form method="POST" 
                          action="{{ isset($user) ? route('users.update', $user) : route('users.store') }}" 
                          enctype="multipart/form-data"
                          id="userForm">
                        @csrf
                        @if(isset($user))
                            @method('PUT')
                        @endif

                        <div class="row">
                            <!-- Basic Information -->
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">
                                            <i class="fas fa-user me-1"></i>Full Name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" 
                                               class="form-control custom-form-control @error('name') is-invalid @enderror" 
                                               id="name" 
                                               name="name" 
                                               value="{{ old('name', $user->name ?? '') }}"
                                               placeholder="Enter full name"
                                               required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">
                                            <i class="fas fa-envelope me-1"></i>Email Address (Login ID) <span class="text-danger">*</span>
                                        </label>
                                        <input type="email" 
                                               class="form-control custom-form-control @error('email') is-invalid @enderror" 
                                               id="email" 
                                               name="email" 
                                               value="{{ old('email', $user->email ?? '') }}"
                                               placeholder="Enter email address"
                                               {{ isset($user) ? 'readonly' : '' }}
                                               required>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label">
                                            <i class="fas fa-phone me-1"></i>Phone Number
                                        </label>
                                        <input type="text" 
                                               class="form-control custom-form-control @error('phone') is-invalid @enderror" 
                                               id="phone" 
                                               name="phone" 
                                               value="{{ old('phone', $user->phone ?? '') }}"
                                               placeholder="Enter phone number">
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="role" class="form-label">
                                            <i class="fas fa-user-tag me-1"></i>Role <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-select custom-form-control @error('role') is-invalid @enderror" 
                                                id="role" 
                                                name="role" 
                                                {{ isset($user) ? 'disabled' : '' }}
                                                required>
                                            <option value="">Select Role</option>
                                            @foreach($roles as $role)
                                                <option value="{{ $role->slug }}" 
                                                        {{ old('role') == $role->slug || (isset($user) && $user->role === $role->slug) ? 'selected' : '' }}>
                                                    {{ $role->name }}
                                                    @if($role->description)
                                                        - {{ $role->description }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        @if(isset($user))
                                            <input type="hidden" name="role" value="{{ $user->role }}">
                                        @endif
                                        @error('role')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        
                                        @if(!isset($user))
                                        <!-- Quick Create Options for Admin Role -->
                                        <div class="mt-2" id="adminQuickActions" style="display: none;">
                                            <small class="text-muted d-block mb-2">Quick Create:</small>
                                            <div class="d-flex gap-2">
                                                <a href="{{ route('users.create') }}?role=mac_reseller" 
                                                   class="btn btn-sm btn-info">
                                                    <i class="fas fa-network-wired me-1"></i>Create MAC Reseller
                                                </a>
                                                <a href="{{ route('users.create') }}?role=reseller" 
                                                   class="btn btn-sm btn-purple" 
                                                   style="background-color: #800080; color: white;">
                                                    <i class="fas fa-store me-1"></i>Create Reseller
                                                </a>
                                            </div>
                                        </div>
                                        @endif
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="status" class="form-label">
                                            <i class="fas fa-toggle-on me-1"></i>Status <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-select custom-form-control @error('status') is-invalid @enderror" 
                                                id="status" 
                                                name="status" 
                                                {{ isset($user) ? 'disabled' : '' }}
                                                required>
                                            <option value="">Select Status</option>
                                            @foreach($statuses as $status)
                                                <option value="{{ $status }}" 
                                                        {{ old('status', $user->status ?? '') === $status ? 'selected' : '' }}>
                                                    {{ ucfirst($status) }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if(isset($user))
                                            <input type="hidden" name="status" value="{{ $user->status }}">
                                        @endif
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="password" class="form-label">
                                            <i class="fas fa-lock me-1"></i>
                                            {{ isset($user) ? 'New Password' : 'Password' }}
                                            @if(!isset($user))
                                                <span class="text-danger">*</span>
                                            @endif
                                        </label>
                                        <input type="password" 
                                               class="form-control custom-form-control @error('password') is-invalid @enderror" 
                                               id="password" 
                                               name="password" 
                                               placeholder="{{ isset($user) ? 'Leave blank to keep current password' : 'Enter password' }}"
                                               {{ isset($user) ? '' : 'required' }}>
                                        @error('password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="password_confirmation" class="form-label">
                                            <i class="fas fa-lock me-1"></i>
                                            {{ isset($user) ? 'Confirm New Password' : 'Confirm Password' }}
                                            @if(!isset($user))
                                                <span class="text-danger">*</span>
                                            @endif
                                        </label>
                                        <input type="password" 
                                               class="form-control custom-form-control @error('password_confirmation') is-invalid @enderror" 
                                               id="password_confirmation" 
                                               name="password_confirmation" 
                                               placeholder="{{ isset($user) ? 'Confirm new password' : 'Confirm password' }}"
                                               {{ isset($user) ? '' : 'required' }}>
                                        @error('password_confirmation')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 mb-3">
                                        <label for="address" class="form-label">
                                            <i class="fas fa-map-marker-alt me-1"></i>Address
                                        </label>
                                        <textarea class="form-control custom-form-control @error('address') is-invalid @enderror" 
                                                  id="address" 
                                                  name="address" 
                                                  rows="3"
                                                  placeholder="Enter address">{{ old('address', $user->address ?? '') }}</textarea>
                                        @error('address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   id="is_active" 
                                                   name="is_active" 
                                                   value="1"
                                                   {{ isset($user) ? 'disabled' : '' }}
                                                   {{ old('is_active', $user->is_active ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_active">
                                                <i class="fas fa-check-circle me-1"></i>Active User
                                            </label>
                                        </div>
                                        @if(isset($user))
                                            <input type="hidden" name="is_active" value="{{ $user->is_active ? '1' : '0' }}">
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Profile Photo & Permissions -->
                            <div class="col-md-4">
                                <!-- Profile Photo -->
                                <div class="mb-4">
                                    <label class="form-label">
                                        <i class="fas fa-camera me-1"></i>Profile Photo
                                    </label>
                                    <div class="text-center">
                                        @if(isset($user) && $user->profile_photo)
                                            <div class="mb-2">
                                                <img src="{{ Storage::url($user->profile_photo) }}" 
                                                     alt="{{ $user->name }}" 
                                                     class="rounded-circle" 
                                                     width="120" height="120"
                                                     style="object-fit: cover;">
                                            </div>
                                        @else
                                            <div class="mb-2">
                                                <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center text-white mx-auto" 
                                                     style="width: 120px; height: 120px;">
                                                    <i class="fas fa-user fa-3x"></i>
                                                </div>
                                            </div>
                                        @endif
                                        <input type="file" 
                                               class="form-control custom-form-control @error('profile_photo') is-invalid @enderror" 
                                               id="profile_photo" 
                                               name="profile_photo"
                                               accept="image/*">
                                        @error('profile_photo')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Max size: 2MB. Formats: JPG, PNG, GIF</small>
                                    </div>
                                </div>

                                <!-- User Permissions section removed -->
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('users.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times me-1"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-{{ isset($user) ? 'warning' : 'success' }}">
                                        <i class="fas fa-{{ isset($user) ? 'save' : 'plus' }} me-1"></i>
                                        {{ isset($user) ? 'Update User' : 'Create User' }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Password confirmation validation
    const password = document.getElementById('password');
    const passwordConfirmation = document.getElementById('password_confirmation');
    
    function validatePassword() {
        if (password.value !== passwordConfirmation.value) {
            passwordConfirmation.setCustomValidity('Passwords do not match');
        } else {
            passwordConfirmation.setCustomValidity('');
        }
    }
    
    password.addEventListener('change', validatePassword);
    passwordConfirmation.addEventListener('keyup', validatePassword);
    
    // Form validation
    const form = document.getElementById('userForm');
    form.addEventListener('submit', function(e) {
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        form.classList.add('was-validated');
    });
    
    // Profile photo preview
    const profilePhoto = document.getElementById('profile_photo');
    profilePhoto.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            if (file.size > 2 * 1024 * 1024) { // 2MB
                alert('File size must be less than 2MB');
                this.value = '';
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.querySelector('.bg-secondary.rounded-circle');
                if (preview) {
                    preview.innerHTML = `<img src="${e.target.result}" class="rounded-circle" width="120" height="120" style="object-fit: cover;">`;
                }
            };
            reader.readAsDataURL(file);
        }
    });
    
    // Handle URL parameter for role pre-selection
    const urlParams = new URLSearchParams(window.location.search);
    const roleParam = urlParams.get('role');
    if (roleParam && roleSelect) {
        roleSelect.value = roleParam;
        roleSelect.dispatchEvent(new Event('change'));
    }
    
    // Show/hide quick actions based on role
    function toggleQuickActions() {
        const adminQuickActions = document.getElementById('adminQuickActions');
        if (!adminQuickActions) return;
        
        const selectedRole = roleSelect.value.toLowerCase();
        const selectedOption = roleSelect.options[roleSelect.selectedIndex];
        const roleName = selectedOption ? selectedOption.textContent.toLowerCase() : '';
        
        // Show quick actions only for admin role
        if (selectedRole === 'admin' || roleName.includes('admin')) {
            adminQuickActions.style.display = 'block';
        } else {
            adminQuickActions.style.display = 'none';
        }
    }
    
    // Auto-select permissions based on role
    roleSelect.addEventListener('change', function() {
        const roleId = this.value;
        const permissions = document.querySelectorAll('input[name^="permissions"]');
        
        // Toggle quick actions
        toggleQuickActions();
        
        // Reset all permissions
        permissions.forEach(permission => {
            permission.checked = false;
        });
        
        // Get role data from the selected option
        const selectedOption = this.options[this.selectedIndex];
        const roleName = selectedOption.textContent.toLowerCase();
        
        // Auto-select permissions based on role
        if (roleName.includes('admin') || roleName.includes('super admin')) {
            // Grant all permissions for admin
            permissions.forEach(permission => {
                if (permission.value === '1') {
                    permission.checked = true;
                }
            });
        } else if (roleName.includes('manager')) {
            // Grant most permissions for manager
            permissions.forEach(permission => {
                const permissionKey = permission.name.match(/\[(\d+)\]/);
                if (permissionKey) {
                    const permissionElement = document.querySelector(`#permission_${permissionKey[1]}_grant`);
                    if (permissionElement && !permission.name.includes('delete') && !permission.name.includes('force')) {
                        permissionElement.checked = true;
                    }
                }
            });
        } else if (roleName.includes('technician')) {
            // Grant technical permissions
            permissions.forEach(permission => {
                const permissionKey = permission.name.match(/\[(\d+)\]/);
                if (permissionKey) {
                    const permissionElement = document.querySelector(`#permission_${permissionKey[1]}_grant`);
                    if (permissionElement && (permission.name.includes('view') || permission.name.includes('edit'))) {
                        permissionElement.checked = true;
                    }
                }
            });
        }
    });
    
    // Initial check for quick actions
    toggleQuickActions();
});
</script>
@endsection