@extends('admin.layouts.masterlayout')

@section('title')
    Edit Shop User
@endsection

@section('head_title')
    Shop Users
@endsection

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

        <div class="row">
            <div class="col-xxl-6 col-lg-12 mb-lg-0 ">
                <form id="editUserForm" method="POST" action="{{ route('admin.shop-user.update', $user->id) }}"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <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>Shop 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('status', $user->status) === 'active' ? '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="{{ $user->profile ? $user->profile : 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', $user->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 Mail" value="{{ old('email', $user->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"
                                            placeholder="Enter Phone Number" value="{{ old('phone', $user->phone) }}"
                                            required>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/call.png" alt="">
                                        </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', $user->address) }}" required>

                                        {{-- Hidden Fields --}}
                                        <input type="hidden" name="city" id="city"
                                            value="{{ old('city', $user->city) }}">
                                        <input type="hidden" name="state" id="state"
                                            value="{{ old('state', $user->state) }}">
                                        <input type="hidden" name="country" id="country"
                                            value="{{ old('country', $user->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.shop-user.index') }}" class="ct-outline-btn">Cancel</a>
                        <button type="submit" class="ct-btn add_shop_user_btn"> <span>Update</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>
        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;
                }

                document.getElementById('city').value = '';
                document.getElementById('state').value = '';
                document.getElementById('country').value = '';

                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;
                        }
                    });
                });
            });
        }

        google.maps.event.addDomListener(window, 'load', initAutocomplete);

        $(document).ready(function() {
            var id = "{{ $user->id }}";

            jQuery.validator.addMethod("checkExistEmail", function(val, elem) {
                let result = false;
                $.ajax({
                    url: "{{ route('admin.shop-user.check-unique-email') }}",
                    method: "POST",
                    data: {
                        "id": id,
                        "email": val
                    },
                    async: false,
                    success: function(response) {
                        result = response.result === true;
                        if (!result && response.message) {
                            jQuery.validator.messages.checkExistEmail = response.message;
                        }
                    }
                });
                return result;
            }, "Email already exists!");

            $('#editUserForm').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
                    },

                    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"
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") === "profile") {
                        $(".profile_img_error_msg").html(error);
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    $('.add_shop_user_btn').attr('disabled', true);
                    $('.add_shop_user_btn').addClass('loader-active');
                    form.submit(); // Submit the form when valid
                }
            });
        });
    </script>
@endsection