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

@section('main')
    <main class="add_usersPage container-fluid mt-2">
        <h3 class="d-none d-lg-block">
            <img src="{{ asset('images/home-2.svg') }}" alt="Home"> / Users / <span>Add Users</span>
        </h3>
        <section class="profile_information p-3 rounded-4">
            <h3 class="fw-bold mb-4">Profile Information</h3>
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger mb-3">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data" class="w-100">
                @csrf
                <div class="user_image d-flex justify-content-start align-items-center gap-2">
                    <img id="avatarImg" src="{{ asset('images/user.png') }}" alt="User avatar" width="60"
                        height="60" />
                    <!-- hidden file input -->
                    <input type="file" id="fileInput" name="image" accept="image/*" style="display: none" />
                    <!-- styled button to trigger it -->
                    <button type="button" class="change-btn rounded-3 p-2 fw-medium" id="changeBtn">
                        Change Picture
                        <img src="{{ asset('images/edit-03.svg') }}" alt="Edit" />
                    </button>
                </div>
                <div class="details row mt-2">
                    <div class="name col-12 col-sm-6 col-lg-3 mb-2">
                        <label for="name" class="fw-medium">Full Name</label><br />
                        <input type="text" name="name" id="name" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                            value="{{ old('name') }}" required />
                    </div>
                    <div class="email col-12 col-sm-6 col-lg-3 mb-2">
                        <label for="email" class="fw-medium">Email</label><br />
                        <input type="email" name="email" id="email" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                            value="{{ old('email') }}" required />
                    </div>
                    <div class="role col-12 col-sm-6 col-lg-3 mb-2">
                        <label for="role" class="fw-medium">Role</label><br />
                        <select name="role" id="role" class="p-2 w-100 rounded-3 mt-1 bg-transparent" required>
                            <option value="" disabled selected hidden>Select Role</option>
                            <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                            <option value="customer" {{ old('role') == 'customer' ? 'selected' : '' }}>Customer</option>
                            <option value="driver" {{ old('role') == 'driver' ? 'selected' : '' }}>Driver</option>
                            <option value="employee_center" {{ old('role') == 'employee_center' ? 'selected' : '' }}>
                                Employee Center
                            </option>
                        </select>
                    </div>
                    <div class="pass col-12 col-sm-6 col-lg-3 mb-2">
                        <label for="pass" class="fw-medium">Password</label><br />
                        <input type="password" name="password" id="pass"
                            class="p-2 w-100 rounded-3 mt-1 bg-transparent" required />
                    </div>
                    <div class="pass2 col-12 col-sm-6 col-lg-3 mb-2">
                        <label for="password_confirmation" class="fw-medium">Confirm Password</label><br />
                        <input type="password" name="password_confirmation" id="password_confirmation"
                            class="p-2 w-100 rounded-3 mt-1 bg-transparent" required />
                    </div>
                    <div class="phone col-12 col-sm-6 col-lg-3 mb-2">
                        <label for="phone" class="fw-medium">Phone Number</label><br />
                        <input type="tel" name="phone" id="phone" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                            value="{{ old('phone') }}">
                    </div>
                    <div class="address col-12 col-sm-6 col-lg-3 mb-2">
                        <label for="address" class="fw-medium">Address</label><br />
                        <input type="text" name="address" id="address" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                            value="{{ old('address') }}">
                    </div>
                </div>
                <footer class="row justify-content-center justify-content-md-evenly mt-3 gap-2">
                    <button type="submit" class="add btn rounded-3 fw-medium col-7 col-md-3 btn-primary">Add a new
                        user</button>
                </footer>
            </form>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        // عند الضغط على زر تغيير الصورة
        document.getElementById('changeBtn').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('fileInput').click();
        });

        // عند اختيار صورة جديدة
        document.getElementById('fileInput').addEventListener('change', function() {
            const [file] = this.files;
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('avatarImg').src = e.target.result;
            }
            reader.readAsDataURL(file);
        });
    </script>
@endpush