@extends('layouts.app')

@section('content')
    <div class="content container mt-3">
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">

            @component('components.breadcrumb', [
                'links' => [
                    ['name' => 'Manage Users', 'url' => ''],
                    ['name' => 'Users', 'url' => route('users.index')],
                    ['name' => 'Edit User', 'url' => ''],
                ],
            ])
            @endcomponent



            <div>
                <a href="{{ route('users.index') }}" class="btn btn-secondary me-2">Back</a>
                <button type="submit" class="btn btn-primary" style="background-color: #608ac4; border-color: #608ac4;"
                    id="updateButton">Update User</button>
            </div>
        </div>

        @include('layouts.partials.toast')

        <div class="card">
            <div class="card-body p-4">
                <form action="{{ route('users.update', $user->id) }}" method="POST" enctype="multipart/form-data"
                    id="editUserForm">
                    @csrf
                    @method('PUT')

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="first_name" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top"
                                    title="Enter the user's first name">First Name <span
                                        class="text-danger">*</span></label>
                                <input type="text"
                                    class="form-control @error('first_name') is-invalid @endif" id="first_name" name="first_name" value="{{ old('first_name', $user->first_name) }}" aria-required="true" aria-describedby="firstNameHelp">
                            <small id="firstNameHelp" class="form-text text-muted">e.g., John</small>
                            @error('first_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="last_name" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Enter the user's last name">Last Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('last_name') is-invalid @endif" id="last_name" name="last_name" value="{{ old('last_name', $user->last_name) }}" aria-required="true" aria-describedby="lastNameHelp">
                            <small id="lastNameHelp" class="form-text text-muted">e.g., Doe</small>
                            @error('last_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Enter the user's email address">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @endif" id="email" name="email" value="{{ old('email', $user->email) }}" aria-required="true" aria-describedby="emailHelp">
                            <small id="emailHelp" class="form-text text-muted">e.g., john.doe@example.com</small>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="mobile" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Enter the user's mobile number">Mobile <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('mobile') is-invalid @endif" id="mobile" name="mobile" value="{{ old('mobile', $user->mobile) }}" aria-required="true" aria-describedby="mobileHelp">
                            <small id="mobileHelp" class="form-text text-muted">e.g., +1-555-123-4567</small>
                            @error('mobile')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="password" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Leave blank to keep the current password">Password</label>
                            <input type="password" class="form-control @error('password') is-invalid @endif" id="password" name="password" placeholder="Enter your new password" aria-describedby="passwordHelp">
                            <small id="passwordHelp" class="form-text text-muted">Minimum 8 characters, leave blank to retain current password</small>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Toggle user activity status">Status</label>
                            <div class="form-check form-switch">
                                <input type="hidden" name="is_active" value="0">
                                <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" {{ $user->is_active ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">Status</label>
                            </div>
                            <small class="form-text text-muted">Toggle to activate or deactivate the user.</small>
                            @error('is_active')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="profile_photo_path" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Upload a new profile photo (optional)">Profile Photo</label>
                            <input type="file" class="form-control @error('profile_photo_path') is-invalid @endif" id="profile_photo_path" name="profile_photo_path" onchange="previewImage(event)">
                            @error('profile_photo_path')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                            <div class="mt-2" id="imagePreview">
                                @if ($user->profile_photo_path)
                                    <p>Current Photo: <img src="{{ asset($user->profile_photo_path) }}" alt="Profile" class="img-thumbnail" style="max-width: 150px;"></p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submission Progress -->
                <div id="submitProgress" class="mt-3" style="display: none;">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Image Preview
        function previewImage(event) {
            const file = event.target.files[0];
            const preview = document.getElementById('imagePreview');
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.innerHTML = `<p>New Photo Preview: <img src="${e.target.result}" alt="Preview" class="img-thumbnail" style="max-width: 150px;"></p>`;
                };
                reader.readAsDataURL(file);
            } else {
                preview.innerHTML = '@if ($user->profile_photo_path)<p>Current Photo: <img src="{{ asset($user->profile_photo_path) }}" alt="Profile" class="img-thumbnail" style="max-width: 150px;"></p>@endif';
            }
        }

        // Form Submission with Progress
        document.getElementById('updateButton').addEventListener('click', function() {
            const form = document.getElementById('editUserForm');
            const progress = document.getElementById('submitProgress');
            const updateButton = document.getElementById('updateButton');

            progress.style.display = 'block'; // Show progress bar
            updateButton.disabled = true; // Disable update button during submission
            form.submit(); // Submit the form directly
        });

        // Re-enable button and hide progress on page load or form reset
        window.addEventListener('load', function() {
            const progress = document.getElementById('submitProgress');
            const updateButton = document.getElementById('updateButton');
            progress.style.display = 'none';
            updateButton.disabled = false;
        });

        // Initialize Tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                                    var tooltipList=tooltipTriggerList.map(function (tooltipTriggerEl) { return new
                                    bootstrap.Tooltip(tooltipTriggerEl); }); </script>
                            @endsection