@extends('admin.layouts.home.main')

@section('main')
    <main class="add_usersPage container-fluid mt-2">

        <h3 class="d-none d-lg-block mb-4">
            <img src="{{ asset('images/home-2.svg') }}" alt="Home" /> /
            Users / <span>Edit User</span>
        </h3>

        <section class="profile_information p-4 rounded-4 bg-white shadow-sm">
            <h3 class="fw-bold mb-4">Edit Profile</h3>

            {{-- Validation Errors --}}
            @if ($errors->any())
                <div class="alert alert-danger mb-4">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('admin.users.update', [$role, $user->getKey()]) }}" method="POST"
                enctype="multipart/form-data" class="mt-3">
                @csrf
                @method('PUT')

                {{-- Avatar preview & file picker --}}
                <div class="user_image d-flex align-items-center gap-4 mb-4">
                    @php use Illuminate\Support\Facades\Storage; @endphp
                    <img id="avatarImg" src="{{ $user->image ? Storage::url($user->image) : asset('images/user.png') }}"
                        alt="Avatar" class="rounded-circle border" width="100" height="100" />

                    <div>
                        <input type="file" name="image" id="image" accept="image/*" class="d-none" />
                        <label for="image" class="btn btn-outline-secondary">
                            Change Picture
                            <img src="{{ asset('images/edit-03.svg') }}" alt="Edit" class="ms-1" />
                        </label>
                    </div>
                </div>

                {{-- Other fields --}}
                <div class="row gy-3">
                    <div class="col-md-3">
                        <label for="name" class="form-label">Full Name</label>
                        <input type="text" name="name" id="name" class="form-control"
                            value="{{ old('name', $user->name) }}" required />
                    </div>

                    <div class="col-md-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" name="email" id="email" class="form-control"
                            value="{{ old('email', $user->email) }}" required />
                    </div>

                    <div class="col-md-3">
                        <label for="role" class="form-label">Role</label>
                        <select name="role" id="role" class="form-select" required>
                            <option value="admin" {{ old('role', $role) == 'admin' ? 'selected' : '' }}>Admin</option>
                            <option value="customer" {{ old('role', $role) == 'customer' ? 'selected' : '' }}>Customer</option>
                            <option value="driver" {{ old('role', $role) == 'driver' ? 'selected' : '' }}>Driver</option>
                            <option value="employee_center" {{ old('role', $role) == 'employee_center' ? 'selected' : '' }}>
                                Center Employee</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label for="password" class="form-label">New Password</label>
                        <input type="password" name="password" id="password" class="form-control"
                            placeholder="Leave empty to keep current" />
                    </div>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-warning text-white">
                        Save Changes
                    </button>
                    <a href="{{ route('admin.users.index') }}" class="btn btn-secondary ms-2">
                        Cancel
                    </a>
                </div>
            </form>
        </section>
    </main>
@endsection

@section('scripts')
    <script>
        document.getElementById('image').addEventListener('change', function() {
            const [file] = this.files;
            if (!file) return;
            document.getElementById('avatarImg').src = URL.createObjectURL(file);
        });
    </script>
@endsection