@extends('admin.layouts.masterlayout')

@section('title')
    Add User
@endsection

@section('head_title')
    User Management
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="dashboard-breadcrumb-section">
            <h2>Add User</h2>
            <p><a href="{{ route('admin.user-management.index') }}"> User List </a> / Add User </p>
        </div>

        <div class="row">
            <div class="col-xxl-6 col-lg-12 mb-lg-0 ">
                <form id="addUserForm" method="POST" action="{{ route('admin.user-management.store') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="ct-admin-container mb-4">
                        <div class="card">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                <div class="card-title mb-0">
                                    <h2>User Detail</h2>
                                </div>
                                <div class="form-check form-check-toggle form-switch ps-3 ps-md-0">
                                    <input class="form-check-input" type="checkbox" name="status" id="active"
                                        role="switch" {{ old('active') ? 'checked' : '' }} checked>
                                    <label class="form-check-label" for="active">Active</label>
                                </div>
                            </div>
                            <div class="card-body ">
                                @if ($errors->any())
                                    <div class="alert alert-danger alert-dismissible fade show mb-5 hdo-alert">
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="btn-close"></button>
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li> <strong> {{ $error }} </strong> </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <div class="d-flex gap-4 mb-4 flex-wrap profile-image-user">
                                    <div>
                                        <div class="profile-image">
                                            <img src="{{ asset('assets/img/dashboard/user-image.png') }}" id="image_preview"
                                                class="profile-image" alt="">
                                            <div class="profile-image-position">
                                                <img src="{{ asset('assets/img/dashboard/camera.png') }}" alt="">
                                                <input type="file" class="file-input" name="profile" id="profile"
                                                    accept="image/png, image/gif, image/jpeg">
                                            </div>
                                        </div>
                                        <div class="profile_img_error_msg"></div>
                                    </div>

                                    <div class="input-file-main">
                                        <label for="name">Name<span class="required-block">*</span></label>
                                        <div class="auth-input-position">
                                            <input type="text" name="name" id="name" class="form-control"
                                                placeholder="Enter Name" value="{{ old('name') }}" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets') }}/img/role-icon.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="email">Email<span class="required-block">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="email" name="email" id="email" class="form-control"
                                            placeholder="Enter Email" value="{{ old('email') }}" required>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/mail.png" alt="">
                                        </div>

                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="phone">Phone Number<span class="required-block">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" name="phone" id="phone" class="form-control phone-number-restriction"
                                            placeholder="Enter Phone Number" value="{{ old('phone') }}" required>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/call.png" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="password">Password<span class="required-block">*</span></label>
                                    <div class="position-relative user-pwd">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/lock.png" alt="">
                                        </div>
                                        <input type="password" name="password" id="password"
                                            class="form-control password-input user-management-input"
                                            placeholder="Click to Generate" required>
                                        <div
                                            class="d-flex align-items-center gap-2 position-absolute user-management-password">
                                            <div class="">
                                                <button class="bg-transparent pt-1 generate-btn"> 
                                                    <img src="{{ asset('assets/img/generate-icon.png') }}" alt="eye" class="d-sm-none d-block">
                                                    <span class="d-sm-block d-none generate-span">Generate </span>
                                                </button>
                                            </div>
                                            <div class="auth-eye-icon toggle-password position-relative top-0 end-0">
                                                <img src="{{ asset('assets/img/eye.png') }}" alt="eye"
                                                    class="eye">
                                                <img src="{{ asset('assets/img/eye-close.png') }}" class="eye-close"
                                                    alt="eye">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="location">Location<span class="required-block">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" name="address" id="autocomplete"
                                            placeholder="Enter Address" class="form-control"
                                            value="{{ old('address') }}" required>

                                        {{-- Hidden Fields --}}
                                        <input type="hidden" name="city" id="city"
                                            value="{{ old('city') }}">
                                        <input type="hidden" name="state" id="state"
                                            value="{{ old('state') }}">
                                        <input type="hidden" name="country" id="country"
                                            value="{{ old('country') }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/location.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-3 submit-container">
                        <a href="{{ route('admin.user-management.index') }}" class="ct-outline-btn">Cancel</a>
                        <button type="submit" class="ct-btn add_user_btn"> <span>Save</span> </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places"></script>
    <script>
        // Profile image preview start
        document.getElementById('profile').addEventListener('change', function(e) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var imageElement = document.querySelector('.profile-image-user img');
                imageElement.src = event.target.result; // Update the image source with the file content
            };
            reader.readAsDataURL(e.target.files[0]); // Read the file as a data URL
        });

        function initAutocomplete() {
            const input = document.getElementById('autocomplete');
            const autocomplete = new google.maps.places.Autocomplete(input, {
                types: ['geocode']
            });

            autocomplete.addListener('place_changed', () => {
                const place = autocomplete.getPlace();

                if (!place.geometry) {
                    console.warn("No geometry returned from place autocomplete.");
                    return;
                }
                // Clear previous values
                document.getElementById('city').value = '';
                document.getElementById('state').value = '';
                document.getElementById('country').value = '';

                // Map address component types to input field IDs
                const componentMap = {
                    locality: 'city',
                    administrative_area_level_1: 'state',
                    country: 'country'
                };

                place.address_components.forEach(component => {
                    component.types.forEach(type => {
                        if (componentMap[type]) {
                            document.getElementById(componentMap[type]).value = component.long_name;
                        }
                    });
                });
            });
        }
        // Initialize when the page loads
        google.maps.event.addDomListener(window, 'load', initAutocomplete);

        $(document).ready(function() {

            // Strong password generator
            $('.generate-btn').on('click', function(e) {
                e.preventDefault();

                function generateStrongPassword() {
                    const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                    const lower = "abcdefghijklmnopqrstuvwxyz";
                    const numbers = "0123456789";
                    const special = "!@#$&*~";
                    const allChars = upper + lower + numbers + special;

                    let password = '';
                    password += upper[Math.floor(Math.random() * upper.length)];
                    password += lower[Math.floor(Math.random() * lower.length)];
                    password += numbers[Math.floor(Math.random() * numbers.length)];
                    password += special[Math.floor(Math.random() * special.length)];

                    // Add remaining characters randomly
                    for (let i = 4; i < 8; i++) {
                        password += allChars[Math.floor(Math.random() * allChars.length)];
                    }

                    // Shuffle the password
                    return password.split('').sort(() => 0.5 - Math.random()).join('');
                }

                // Set the generated password
                $('#password').val(generateStrongPassword());
            });

            // Check Unique Mail:
            jQuery.validator.addMethod("checkExistEmail", function(val, elem) {
                    var id = '';
                    $.ajax({
                        url: "{{ route('admin.user-management.check-unique-email') }}",
                        method: "POST",
                        data: {
                            "id": id,
                            "email": val
                        },
                        async: false,
                        success: function(response) {
                            result = (response.result == true) ? true : false;
                            if (response.result == false && response.message != "") {
                                jQuery.validator.messages.checkExistEmail = response.message;
                            }
                        }
                    })
                    return result;
                },
                function(params, element) {
                    return jQuery.validator.messages.checkExist;
                }
            );

            $('#addUserForm').validate({
                rules: {
                    profile: {
                        extension: "jpg|jpeg|png|gif"
                    },
                    name: {
                        required: true,
                        minlength: 2
                    },
                    email: {
                        email: true,
                        required: true,
                        checkExistEmail: true
                    },
                    phone: {
                        required: true,
                        minlength: 2,
                        maxlength: 20
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    address: {
                        required: true
                    },
                },
                messages: {
                    email: {
                        email: "Please enter a valid email",
                        checkExistEmail: "Email already exists!"
                    },
                    phone: {
                        minlength: "Phone must be at least 2 digits",
                        maxlength: "Phone must not exceed 20 digits"
                    },
                    password: {
                        minlength: "Password must be at least 8 characters"
                    },
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") === "profile") {
                        $(".profile_img_error_msg").html(error);
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    $('.add_user_btn').attr('disabled', true);
                    $('.add_user_btn').addClass('loader-active');
                    form.submit(); // Submit the form when valid
                }
            });

        });
    </script>
@endsection