@extends('admin.layout.master')
@section('title', 'User Manager')
@section('content')
    <style>
        .image-input-placeholder {
            background-image: url({{ asset('assets/images/svg/files/blank-image.svg') }});
        }

        [data-theme="dark"] .image-input-placeholder {
            background-image: url({{ asset('assets/images/svg/files/blank-image-dark.svg') }});
        }
    </style>
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin_dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('user-list') }}" class="text-muted text-hover-primary">User
                                Manager</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Edit User</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="kt_app_content_container" class="app-container container-xxl index-container">
            <div class="card mb-5 mb-xl-8">
                <div class="card-header mb-4">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3">Edit User</span>
                    </h3>
                </div>
                <div class="card-body pt-0">
                    <form action="{{ route('user-update',$data->id) }}" method="post" id="createForm" enctype="multipart/form-data">
                        <div class="row">
                            @csrf

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">First Name</label>
                                <input type="text" autocomplete="off" name="first_name" value="{{ $data->first_name }}"
                                    class="form-control stop_first_space" placeholder="First Name" data-error="#first_name_error" />
                                <span class="error" id="first_name_error"></span>
                                @if ($errors->has('first_name'))
                                    <span class="text-danger">{{ $errors->first('first_name') }}</span>
                                @endif
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Last Name</label>
                                <input type="text" autocomplete="off" name="last_name" value="{{ $data->last_name }}"
                                    class="form-control stop_first_space" placeholder="Last Name" data-error="#last_name_error" />
                                <span class="error" id="last_name_error"></span>
                                @if ($errors->has('last_name'))
                                    <span class="text-danger">{{ $errors->first('last_name') }}</span>
                                @endif
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Phone Number</label>
                                <input type="text" autocomplete="off" maxlength="11" minlength="10" name="phone" value="{{ $data->phone }}" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" class="form-control stop_first_space" placeholder="Phone Number" data-error="#phone_error" />
                                <span class="error" id="phone_error"></span>
                                @if ($errors->has('phone'))
                                    <span class="text-danger">{{ $errors->first('phone') }}</span>
                                @endif
                            </div>
                            
                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Email</label>
                                <input type="text" autocomplete="off" name="email" disabled value="{{ $data->email }}"
                                    class="form-control stop_first_space" placeholder="Email" data-error="#email_error" />
                               
                            </div>

                             <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Address</label>
                                <input type="text" autocomplete="off" name="address" value="{{ $data->address }}"
                                    class="form-control stop_first_space" id="address_class" placeholder="address" data-error="#address_error" />
                                <span class="error" id="address_error"></span>
                                @if ($errors->has('address'))
                                    <span class="text-danger">{{ $errors->first('address') }}</span>
                                @endif
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">City</label>
                                <input type="text" autocomplete="off"  id="city_class" name="city" value="{{ $data->city }}"
                                    class="form-control stop_first_space" placeholder="City Name" data-error="#city_error" />
                                <span class="error" id="city_error"></span>
                                @if ($errors->has('city'))
                                    <span class="text-danger">{{ $errors->first('city') }}</span>
                                @endif
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">State</label>
                                <input type="text" autocomplete="off" id="state_class" name="state" value="{{ $data->state }}"
                                    class="form-control stop_first_space" placeholder="State" data-error="#state_error" />
                                <span class="error" id="state_error"></span>
                                @if ($errors->has('state'))
                                    <span class="text-danger">{{ $errors->first('state') }}</span>
                                @endif
                            </div>

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Country</label>
                                <input type="text" id="country_class" autocomplete="off" name="country" value="{{ $data->country }}"
                                    class="form-control stop_first_space" placeholder="Country" data-error="#country_error" />
                                <span class="error" id="country_error"></span>
                                @if ($errors->has('country'))
                                    <span class="text-danger">{{ $errors->first('country') }}</span>
                                @endif
                            </div>

                            <input type="hidden" name="latitude" id="latitude">
                            <input type="hidden" name="longitude" id="longitude">
                          

                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Zipcode</label>
                                <input type="text" id="zipcode_class" autocomplete="off" name="zipcode" value="{{ $data->zipcode }}"
                                    class="form-control stop_first_space" placeholder="Zipcode" data-error="#zipcode_error" />
                                <span class="error" id="zipcode_error"></span>
                                @if ($errors->has('zipcode'))
                                    <span class="text-danger">{{ $errors->first('zipcode') }}</span>
                                @endif
                            </div>
                           
                            <div class="col-md-12 fv-row mb-5">
                                <label class="form-label">Profile Image</label>
                            </div>
                            <div class="col-md-12 fv-row mb-5">
                                <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                    data-kt-image-input="true">
                                    <div class="image-input-wrapper w-150px h-150px" data-image_type="banner_image_"
                                        style="background-repeat: no-repeat; background-size: 140px; background-position: center;">
                                    </div>

                                    <label
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Upload">
                                        <i class="bi bi-pencil-fill fs-7"></i>
                                        <input type="file" name="image" id="image" data-name="banner_image_"
                                            data-error="#image_error" onChange="image_validation(this,event);" />
                                        <input type="hidden" name="avatar_remove" />
                                    </label>

                                    <span
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel">
                                        <i class="bi bi-x fs-2"></i>
                                    </span>
                                    <span
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove">
                                        <i class="bi bi-x fs-2"></i>
                                    </span>
                                </div>
                                <div>
                                    <span class="error" id="image_error"></span>
                                    @if ($errors->has('image'))
                                        <p class="text-danger">{{ $errors->first('image') }}</p>
                                    @endif
                                </div>

                                <div class="text-muted fs-7">Only *.png, *.jpg and *.jpeg image files are accepted</div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" id="kt_modal_new_address_submit" class="btn btn-primary me-3">
                                <span class="indicator-label">Save & Continue</span>
                            </button>
                            <a href="{{ route('user-list') }}" class="btn btn-light">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?key=AIzaSyCELyvXt034tQ_6Nf23e0cLWAvsh6JB88Y&libraries=places"></script>

    <script>
        function image_validation(tag, event) {
            const fileTypeAccepted = ['image/png', 'image/jpeg', 'image/jpg'];

            const fileSize = tag.files[0].size / 1024 / 1024;
            const fileType = tag.files[0].type;

            let image_name = $(tag).attr("data-name");
            if (fileSize > 5) {
                $("#image").val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', '');
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Image size should not be greater than 5MB.',
                });
            } else if (!fileTypeAccepted.includes(fileType)) {
                $("#image").val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', '');
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Only .png .jpeg .jpg file format accepted.',
                });
            } else {
                return true;
            }
        }


        function check_location() {
                let latitude = $('#latitude').val();
                let longitude = $('#longitude').val();
                if (!latitude || !longitude) {
                    $("#address_class").val('');
                }
            }

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

            function initialize() {

                var input = document.getElementById('address_class');
                var autocomplete = new google.maps.places.Autocomplete(input);

                autocomplete.addListener('place_changed', function() {
                    var place = autocomplete.getPlace();

                    $('#latitude').val(place.geometry['location'].lat());
                    $('#longitude').val(place.geometry['location'].lng());
                    let address_com = place.address_components;
                    if (address_com.length) {

                        let full_address = "";
                        for (let i = 0; i < address_com.length; i++) {
                            if (address_com[i].types.includes('postal_code')) {
                                $("#zipcode_class").val(address_com[i].long_name);
                            }
                            if (address_com[i].types.includes('country')) {
                                $("#country_class").val(address_com[i].long_name);
                            }
                            if (address_com[i].types.includes('administrative_area_level_1') || address_com[i].types
                                .includes('administrative_area_level_2')) {
                                let state = address_com[i].types.includes('administrative_area_level_1') ? address_com[
                                    i].long_name : address_com[i].long_name;
                                $("#state_class").val(state);

                            }
                            if (address_com[i].types.includes('locality') || address_com[i].types.includes(
                                    'sublocality') || address_com[i].types.includes('postal_town')) {
                                if (address_com[i].types.includes('locality')) {
                                    $("#city_class").val(address_com[i].long_name);
                                } else if (address_com[i].types.includes('sublocality')) {
                                    $("#city_class").val(address_com[i].long_name);
                                } else if (address_com[i].types.includes('postal_town')) {
                                    $("#city_class").val(address_com[i].long_name);
                                }
                            }
                            if (address_com[i].types.includes('street_number') || address_com[i].types.includes(
                                    'route') || address_com[i].types.includes('neighborhood')) {

                                if (address_com[i].types.includes('street_number')) {
                                    full_address += address_com[i].long_name;
                                }
                                if (address_com[i].types.includes('route')) {
                                    full_address += (full_address ? ", " + address_com[i].long_name : address_com[i]
                                        .long_name);
                                }
                                if (address_com[i].types.includes('neighborhood')) {
                                    full_address += (full_address ? ", " + address_com[i].long_name : address_com[i]
                                        .long_name);
                                }
                            }
                        }
                        $("#address_class").val(full_address);
                    }

                });

            }

        $(document).ready(function() {
            jQuery.validator.addMethod("email_verify", function(value, element) {
                return this.optional(element) || /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value);
            }, "Enter a valid email");
            $("#createForm").validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    first_name: {
                        required: true,
                        maxlength: 50,
                    },
                    last_name: {
                        required: true,
                        maxlength: 50,
                    },
                   
                    phone: {
                        required: true,
                        maxlength: 50,
                    },
                    city: {
                        required: true,
                        maxlength: 50,
                    },
                    state: {
                        required: true,
                        maxlength: 50,
                    },
                    country: {
                        required: true,
                        maxlength: 50,
                    },
                    zipcode: {
                        required: true,
                        maxlength: 50,
                    },

                },
                messages: {
                    first_name: {
                        required: "First Name field is required.",
                        maxlength: 'First Name must not be greater than 50 characters.',
                    },
                    last_name: {
                        required: "Last Name field is required.",
                        maxlength: 'Last Name must not be greater than 50 characters.',
                    },
                    phone: {
                        required: "Last Name field is required.",
                        maxlength: 'Last Name must not be greater than 50 characters.',
                    },
                    city: {
                        required: "City field is required.",
                        maxlength: 'City must not be greater than 50 characters.',
                    },
                    state: {
                        required: "State field is required.",
                        maxlength: 'State must not be greater than 50 characters.',
                    },
                    country: {
                        required: "Country field is required.",
                        maxlength: 'Country must not be greater than 50 characters.',
                    },
                    zipcode: {
                        required: "Zipcode field is required.",
                        maxlength: 'Country must not be greater than 50 characters.',
                    },
                   
                },
                submitHandler: function(form) {
                    document.getElementById('kt_modal_new_address_submit').disabled = true;
                    setTimeout(() => {
                        form.submit();
                    }, 200);
                },
                showErrors: function(errorMap, errorList) {
                    this.defaultShowErrors();
                    $('input').removeClass('error');
                },
            });
        });
    </script>
@endpush