@extends('admin.layouts.app')
@section('title', isset($user) ? 'Edit User' : 'Register User')
@section('breadcrumb')
    <span>/</span>
    <a href="{{ route('admin.users.index') }}" style="color:inherit;text-decoration:none;">Users</a>
    <span>/</span> {{ isset($user) ? 'Edit' : 'Register' }}
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>{{ isset($user) ? 'Edit User' : 'User Registration' }}</h1>
        <p class="page-subtitle">{{ isset($user) ? 'Update user details and role' : 'Register a new system user' }}</p>
    </div>
    <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Users
    </a>
</div>

<form method="POST"
    action="{{ isset($user) ? route('admin.users.update', $user) : route('admin.users.store') }}"
    enctype="multipart/form-data" id="userForm">
    @csrf
    @if(isset($user)) @method('PUT') @endif

    <div class="row g-4">
        <!-- Left Column -->
        <div class="col-lg-8">
            <!-- Personal Info -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0 fw-700"><i class="fas fa-user text-primary me-2"></i>Personal Information</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                placeholder="Enter full name"
                                value="{{ old('name', $user->name ?? '') }}" required>
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Mobile <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">+91</span>
                                <input type="tel" name="mobile" class="form-control @error('mobile') is-invalid @enderror"
                                    placeholder="10-digit mobile number" maxlength="10"
                                    value="{{ old('mobile', $user->mobile ?? '') }}" required>
                            </div>
                            @error('mobile') <div class="text-danger" style="font-size:12px;">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                placeholder="user@example.com"
                                value="{{ old('email', $user->email ?? '') }}" required>
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Designation</label>
                            <input type="text" name="designation" class="form-control"
                                placeholder="e.g. Field Officer"
                                value="{{ old('designation', $user->designation ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Role & Access -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0 fw-700"><i class="fas fa-shield-alt text-warning me-2"></i>Role & Access</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Department</label>
                            <select name="department_id" class="form-select @error('department_id') is-invalid @enderror">
                                <option value="">Select Department</option>
                                @foreach($departments as $id => $name)
                                    <option value="{{ $id }}" {{ old('department_id', $user->department_id ?? '') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('department_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Role <span class="text-danger">*</span></label>
                            <select name="role_id" class="form-select @error('role_id') is-invalid @enderror" required>
                                <option value="">Select Role</option>
                                @foreach($roles as $id => $name)
                                    <option value="{{ $id }}" {{ old('role_id', $user->role_id ?? '') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('role_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">User Type <span class="text-danger">*</span></label>
                            <select name="user_type" class="form-select @error('user_type') is-invalid @enderror" required>
                                <option value="">Select Type</option>
                                @foreach(['super_admin'=>'Super Admin','admin'=>'Admin','manager'=>'Manager','csr_manager'=>'CSR Manager','accountant'=>'Accountant','volunteer'=>'Volunteer','staff'=>'Staff'] as $val => $label)
                                    <option value="{{ $val }}" {{ old('user_type', $user->user_type ?? '') === $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('user_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                                <option value="active"   {{ old('status', $user->status ?? 'active') === 'active'   ? 'selected':'' }}>Active</option>
                                <option value="inactive" {{ old('status', $user->status ?? '') === 'inactive' ? 'selected':'' }}>Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Password -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0 fw-700"><i class="fas fa-lock text-danger me-2"></i>
                        Password {{ isset($user) ? '(Leave blank to keep current)' : '' }}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Password {{ !isset($user) ? '<span class="text-danger">*</span>' : '' }}</label>
                            <div class="input-group">
                                <input type="password" name="password" id="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Min 8 chars" {{ !isset($user) ? 'required' : '' }}>
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePwd('password','eye1')">
                                    <i class="fas fa-eye" id="eye1"></i>
                                </button>
                            </div>
                            <small class="text-muted" style="font-size:11px;">Must have uppercase, lowercase and number</small>
                            @error('password') <div class="text-danger" style="font-size:12px;">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Confirm Password {{ !isset($user) ? '<span class="text-danger">*</span>' : '' }}</label>
                            <div class="input-group">
                                <input type="password" name="password_confirmation" id="confirmPwd"
                                    class="form-control" placeholder="Repeat password"
                                    {{ !isset($user) ? 'required' : '' }}>
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePwd('confirmPwd','eye2')">
                                    <i class="fas fa-eye" id="eye2"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column - Profile Photo + Actions -->
        <div class="col-lg-4">
            <!-- Profile Photo -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0 fw-700"><i class="fas fa-camera text-info me-2"></i>Profile Photo</h6>
                </div>
                <div class="card-body text-center">
                    <div class="mb-3">
                        <img id="photoPreview"
                            src="{{ isset($user) && $user->profile_image ? $user->profile_image_url : asset('admin/images/default-avatar.png') }}"
                            width="120" height="120"
                            style="border-radius:50%;object-fit:cover;border:3px solid #e2e8f0;">
                    </div>
                    <input type="file" name="profile_image" id="profileImageInput"
                        class="d-none" accept=".jpg,.jpeg,.png">
                    <button type="button" class="btn btn-sm btn-outline-primary"
                        onclick="document.getElementById('profileImageInput').click()">
                        <i class="fas fa-upload me-1"></i>Upload Photo
                    </button>
                    <small class="d-block text-muted mt-2" style="font-size:11px;">JPG, JPEG, PNG · Max 2MB</small>
                    @error('profile_image') <div class="text-danger" style="font-size:12px;">{{ $message }}</div> @enderror
                </div>
            </div>

            <!-- Action Card -->
            <div class="card">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2" id="submitBtn">
                        <i class="fas fa-save me-2"></i>
                        {{ isset($user) ? 'Update User' : 'Register User' }}
                    </button>
                    <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary w-100">
                        Cancel
                    </a>

                    @if(isset($user))
                    <hr>
                    <div class="text-muted" style="font-size:11px;">
                        <div><strong>User ID:</strong> {{ $user->user_id }}</div>
                        <div><strong>Registered:</strong> {{ $user->created_at->format('d M Y') }}</div>
                        <div><strong>Last Login:</strong> {{ $user->last_login_at ? $user->last_login_at->format('d M Y H:i') : 'Never' }}</div>
                        <div><strong>Login IP:</strong> {{ $user->last_login_ip ?? '—' }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
// Photo preview
document.getElementById('profileImageInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = e => document.getElementById('photoPreview').src = e.target.result;
        reader.readAsDataURL(file);
    }
});

// Password toggle
function togglePwd(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon  = document.getElementById(iconId);
    input.type  = input.type === 'password' ? 'text' : 'password';
    icon.classList.toggle('fa-eye');
    icon.classList.toggle('fa-eye-slash');
}

// Submit loading state
document.getElementById('userForm').addEventListener('submit', function() {
    const btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
});
</script>
@endpush