@extends('layouts.app')

@section('content')
    <section class="pay-booking py-4 py-sm-5">
        <div class="container">
            <div class="row align-items-end">
                <div class="col-md-8">
                    <div class="top-head">
                        <h2>{{ __('static.my_profile') }}</h2>
                        <p class="top-sub-ttile mb-0">{{ __('static.view_your_profile') }}</p>
                    </div>
                </div>
                <div class="col-md-4 text-sm-right mt-2">
                    <button type="button" class="btn-md px-3 py-2 btn-primary" role="button" data-request="ajax-submit"
                        data-target="[role=post-data]"><i class="fa fa-check-square-o"></i>
                        {{ __('admin.submit') }}</button>
                    <a href="javascript:history.back()" class="btn-md px-3 py-2 btn-secondary"><i
                            class="fa fa-chevron-circle-left"></i> {{ __('static.cancel') }}</a>
                </div>
            </div>
        </div>
    </section>

    <section class="py-2 py-sm-4">
        <div class="container">
            <form class="form" role="post-data" method="POST" action="/api/profile" redirect="/home"
                enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-8 mb-3 mb-sm-0">
                        <div class="personal-detailstext">
                            <h3>{{ __('static.personal_details') }}</h3>
                        </div>
                        <div class="row mt-2 mt-sm-4">
                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label class="pay-label">{{ __('label.first_name') }} <span
                                            class="text-danger">*</span></label>
                                    @if ($user->first_name)
                                        <div class="form-control">{{ $user->first_name }}</div>
                                    @else
                                        <div class="search-group">
                                            <input type="text" class="form-control" name="first_name"
                                                placeholder="Enter your First Name" value="{{ $user->first_name }}">
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label class="pay-label">{{ __('label.last_name') }} <span
                                            class="text-danger">*</span></label>
                                    @if ($user->last_name)
                                        <div class="form-control">{{ $user->last_name }}</div>
                                    @else
                                        <div class="search-group">
                                            <input type="text" class="form-control" name="last_name"
                                                placeholder="Enter your Last Name" value="{{ $user->last_name }}">
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label class="pay-label">{{ __('label.email_id') }} </label>
                                    <div class="search-group d-flex align-items-center">
                                        <div class="form-control mr-2">{{ $user->email }}</div>
                                        <a href="#" onclick="setModal('email')"><i class="fa fa-edit"
                                                style="color:green"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('admin.mobile_no') }}</label>
                                    <div class="row">
                                        <div class="col-3 pr-0">
                                            <div class="form-control mr-2">
                                                {{ isset($user->mobileCode->dial_code) ? $user->mobileCode->dial_code : '' }}
                                            </div>
                                        </div>
                                        <div class="col-9 pl-0  d-flex align-items-center">
                                            <div class="form-control mr-2">
                                                {{ $user->mobile_number ? $user->mobile_number : '' }}</div>
                                            <a href="#" onclick="setModal('mobile')"><i class="fa fa-edit"
                                                    style="color:green"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label class="pay-label">{{ __('label.gender') }}<span
                                            class="text-danger">*</span></label>
                                    <div class="search-group">
                                        @if (isset($user->userDetail->gender))
                                            <div class="form-control">
                                                {{ $user->userDetail->gender }}
                                            </div>
                                        @else
                                            <select class="form-control" name="gender">
                                                @foreach ($genderdropdown as $gender)
                                                    <option value="{{ $gender }}"
                                                        {{ isset($user->userDetail->gender) && $user->userDetail->gender == $gender ? 'selected' : '' }}>
                                                        {{ ucfirst($gender) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        @endif
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label class="pay-label">{{ __('label.date_of_birth') }} <span
                                            class="text-danger">*</span></label>
                                    <div class="search-group">
                                        @if (isset($user->userDetail->dob))
                                            <div class="form-control">
                                                {{ @$user->userDetail->dob }}
                                            </div>
                                        @else
                                            <input type="date" class="form-control" name="dob"
                                                placeholder="Enter your Dob" value="{{ @$user->userDetail->dob }}"
                                                max="{{ \Carbon\Carbon::now()->subYears(18)->toDateString() }}">
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-12">
                                <div class="form-group custominnergroup">
                                    <label class="pay-label">{{ __('label.national_id_number') }} <span
                                            class="text-danger">*</span></label>
                                    <div class="search-group">
                                        @if (isset($user->userDetail->national_id_number))
                                            <div class="form-control">{{ @$user->userDetail->national_id_number }}</div>
                                        @else
                                            <input type="text" class="form-control" name="national_id_number"
                                                placeholder="Enter your National Id Number"
                                                value="{{ @$user->userDetail->national_id_number }}">
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label>{{ __('label.national_id_front_image') }} <span
                                            class="text-danger">*</span></label>
                                    @if ($user->national_id_front_image == null)
                                        <input type="file" class="form-control border"
                                            placeholder="Enter Package Name" name="national_id_front_image"
                                            id="national-id-front-image" />
                                    @endif
                                    <div id="preview-national-id-front-image"
                                        style="display: {{ $user->national_id_front_image ? 'block' : 'none' }}">
                                        <img src="{{ $user->national_id_front_image ? $user->national_id_front_image : url('/assets/images/user-img.jpg') }}"
                                            class="mt-2" height="150" width="150" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label>{{ __('label.national_id_back_image') }} <span
                                            class="text-danger">*</span></label>
                                    @if ($user->national_id_back_image == null)
                                        <input type="file" class="form-control border"
                                            placeholder="Enter Package Name" name="national_id_back_image"
                                            id="national-id-back-image" />
                                    @endif
                                    <div id="preview-national-id-back-image"
                                        style="display: {{ $user->national_id_back_image ? 'block' : 'none' }}">
                                        <img src="{{ $user->national_id_back_image ? $user->national_id_back_image : url('/assets/images/user-img.jpg') }}"
                                            class="mt-2" height="150" width="150" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-12">
                                <div class="form-group custominnergroup">
                                    <label>{{ __('admin.address') }} <span class="text-danger">*</span></label>
                                    <input name="address" class="form-control search-address controls" type="text"
                                        placeholder="{{ __('placeholder.search_address') }}" id="map-search"
                                        value="{{ isset($user->userDetail->address) ? $user->userDetail->address : '' }}" />
                                </div>
                                <div id="map" style="height: 350px;"></div>
                            </div>
                            <input type="text" id="latitude" name="latitude" placeholder="Latitude"
                                value="{{ isset($user->userDetail->latitude) ? $user->userDetail->latitude : '' }}"
                                hidden />
                            <input type="text" id="longitude" name="longitude" placeholder="Longitude"
                                value="{{ isset($user->userDetail->longitude) ? $user->userDetail->longitude : '' }}"
                                hidden />

                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label>{{ __('admin.country') }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control border"
                                        placeholder="{{ __('placeholder.enter_country') }}" id="country"
                                        name="country"
                                        value="{{ isset($user->userDetail->country) ? $user->userDetail->country : '' }}" />
                                </div>
                            </div>

                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label>{{ __('admin.state') }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control border"
                                        placeholder="{{ __('placeholder.enter_state') }}" id="state" name="state"
                                        value="{{ isset($user->userDetail->state) ? $user->userDetail->state : '' }}" />
                                </div>
                            </div>

                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label>{{ __('admin.city') }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control border"
                                        placeholder="{{ __('placeholder.enter_city') }}" id="city" name="city"
                                        value="{{ isset($user->userDetail->city) ? $user->userDetail->city : '' }}" />

                                </div>
                            </div>

                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label>{{ __('admin.area') }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control border"
                                        placeholder="{{ __('placeholder.enter_area') }}" id="area" name="area"
                                        value="{{ isset($user->userDetail->area) ? $user->userDetail->area : '' }}" />

                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group custominnergroup">
                                    <label>{{ __('admin.postal_code') }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control border"
                                        placeholder="{{ __('placeholder.enter_postal_code') }}" id="postal_code"
                                        name="postal_code"
                                        value="{{ isset($user->userDetail->postal_code) ? $user->userDetail->postal_code : '' }}" />
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="col-md-4">
                        <div class="pt-sm-5 mt-sm-4">
                            <div class="row whishlistboxes mt-sm-2">
                                <div class="col-md-12">
                                    <div class="makeup-bordr">
                                        <div class="row align-items-center justify-content-center">
                                            <div class="col-md-12">
                                                <div class="makeup-item-content">

                                                    <div class="makeup-item-inner">
                                                        <div class="makeup-img-circle mb-3">
                                                            <div class="col-md-12">
                                                                <div class="form-group custominnergroup">
                                                                    <label>{{ __('admin.photo') }} <span
                                                                            class="text-danger">*</span></label>
                                                                    @if (!$user->user_profile)
                                                                        <input type="file" class="form-control border"
                                                                            placeholder="Enter Package Name"
                                                                            name="user_profile" id="user-profile" />
                                                                    @endif
                                                                    <div id="preview-user-profile"
                                                                        style="display: {{ $user->user_profile ? 'block' : 'none' }}">
                                                                        <img src="{{ $user->user_profile ? $user->user_profile : url('/assets/images/user-img.jpg') }}"
                                                                            class="mt-2" height="150"
                                                                            width="150" />
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>

                                                        <div class="makeup-context">
                                                            <h3>{{ $user->name }} <i
                                                                    class="far fa-check-circle text-success"></i>
                                                            </h3>
                                                            <p class="my-1">
                                                                {{ isset($user->userDetail->address) ? $user->userDetail->address : '' }}
                                                            </p>
                                                            <p class="my-2"><i class="fas fa-phone-alt"></i>
                                                                {{ isset($user->mobileCode->dial_code) ? $user->mobileCode->dial_code : '' }}
                                                                {{ $user->mobile_number }}</p>
                                                            <p class="my-1"><i class="fas fa-envelope"></i>
                                                                {{ $user->email }}</p>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <div class="modal fade new-modal show" id="email-mobile-modal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-modal="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header align-items-center">
                    <h5 class="modal-title" id="modalHeading"> </h5>
                    <button type="button" class="close close-btn-filter close-modal" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" role="post-email-mobile-data" method="POST"
                        action="/api/users/update-email-mobile-request"
                        redirect="/verify-email-mobile-request/{{ $user->id }}" id="email-mobile-update-form">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="hidden" name="type" id="request-type">
                                        <input type="hidden" name="user_id" id="user-id"
                                            value="{{ $user->id }}">

                                        <div class="search-group search-group-1 form-group" id="emailDiv"
                                            style="display: none">
                                            <label>{{ __('label.email') }}:</label>
                                            <input type="text" class="form-control mr-2" name="email"
                                                placeholder="{{ __('placeholder.enter_email_id') }}" value="{{ old('email') }}">
                                        </div>
                                        <div class="search-group search-group-1 form-group input-group" id="mobileDiv"
                                            style="display: none">
                                            <label>{{ __('admin.mobile_no') }}:</label>
                                            <div class="row">
                                                <div class="col-3 pr-0">
                                                    <select class="form-control mobile-code-select" name="mobile_code_id">
                                                        @if (count($countries) > 0)
                                                            @foreach ($countries as $country)
                                                                <option value="{{ $country->id }}"
                                                                    {{ old('mobile_code_id') == $country->id ? 'selected' : '' }}>
                                                                    {{ $country->dial_code }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                                <div class="col-9 pl-0">
                                                    <input type="text" class="form-control mobile-select numberonly"
                                                        placeholder="{{ __('placeholder.enter_mobile_no') }}"
                                                        name="mobile_number" value="{{ old('mobile_number') }}">
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary close-modal"
                        data-dismiss="modal">{{ __('button.close') }}</button>
                    <button type="button" class="btn-md px-3 py-2 btn-primary" role="button"
                        data-request="ajax-submit" data-target="[role=post-email-mobile-data]">
                        {{ __('button.submit') }}</button>
                </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script type="text/javascript">
        $('#user-profile').on('change', function(event) {
            handleFileChange(event, 'preview-user-profile');
        });
        $('#national-id-front-image').on('change', function(event) {
            handleFileChange(event, 'preview-national-id-front-image');
        });
        $('#national-id-back-image').on('change', function(event) {
            handleFileChange(event, 'preview-national-id-back-image');
        });
    </script>

    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ config('app.MAP_API_KEY') }}&callback=initAutocomplete&libraries=places&v=weekly"
        defer></script>

    <script type="text/javascript">
        let marker; // Declare marker globally
        document.addEventListener("DOMContentLoaded", function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        curlatitude = position.coords.latitude;
                        curlongitude = position.coords.longitude;
                        initMap(curlatitude, curlongitude);

                    },
                    (error) => {
                        console.error("Error getting current location:", error);
                        // Handle error here if needed
                    }
                );
            }
        });

        function initAutocomplete() {
            const latitude = parseFloat(document.getElementById("latitude").value);
            const longitude = parseFloat(document.getElementById("longitude").value);
            if (latitude && longitude) {
                initMap(latitude, longitude);
            }

            // Create the search box and link it to the UI element.
            const input = document.getElementById("map-search");
            const searchBox = new google.maps.places.SearchBox(input);

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener("places_changed", () => {
                const places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }
                const place = places[0];
                if (place.address_components) {
                    updateAddress(place);
                }
                document.getElementById("latitude").value = place.geometry.location.lat();
                document.getElementById("longitude").value = place.geometry.location.lng();

                initMap(place.geometry.location.lat(), place.geometry.location.lng());
            });
        }

        function initMap(latitude, longitude) {
            if (isNaN(latitude) || isNaN(longitude)) {
                latitude = 0; // Default latitude if not provided
                longitude = 0; // Default longitude if not provided
            }

            const map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: latitude,
                    lng: longitude
                },
                zoom: 13,
                mapTypeId: "roadmap",
            });

            // Show the bounce map
            marker = new google.maps.Marker({
                map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: {
                    lat: latitude,
                    lng: longitude
                },
            });

            marker.addListener("click", toggleBounce);

            map.addListener("click", (mapsMouseEvent) => {
                clickedLocation = mapsMouseEvent.latLng;
                const geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    location: clickedLocation
                }, (results, status) => {
                    if (status === "OK") {
                        if (results[0]) {
                            const place = results[0];
                            // Extracting components like latitude and longitude
                            if (place.address_components) {
                                updateAddress(place);
                            }
                            document.getElementById("map-search").value = place.formatted_address;
                            document.getElementById("latitude").value = clickedLocation.lat();
                            document.getElementById("longitude").value = clickedLocation.lng();
                            initMap(clickedLocation.lat(), clickedLocation
                                .lng()); // Assuming initMap exists
                        } else {
                            console.error("No results found");
                        }
                    } else {
                        console.error("Geocoder failed due to: " + status);
                    }
                    console.log(mapsMouseEvent.latLng);
                });
            });
        }

        function updateAddress(place) {
            document.getElementById("state").value = getComponentValue(place,
                "administrative_area_level_1");
            document.getElementById("city").value = getComponentValue(place,
                "locality");
            document.getElementById("country").value = getComponentValue(place,
                "country");
            document.getElementById("postal_code").value = getComponentValue(place,
                "postal_code");
            document.getElementById("area").value = getComponentValue(place,
                "sublocality_level_1");
        }

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        function getComponentValue(place, type) {
            for (const component of place.address_components) {
                for (const componentType of component.types) {
                    if (componentType === type) {
                        return component.long_name;
                    }
                }
            }
            return "";
        }

        window.initAutocomplete = initAutocomplete;
    </script>
    <script>
        function setModal(type) {
            console.log(type);
            $('#email-mobile-modal').show();
            $('#request-type').val(type);
            let redirect = '/verify-email-mobile-request/' + type + '/{{ $user->id }}';
            $("#email-mobile-update-form").attr("redirect", redirect);
            if (type == 'email') {
                $('#modalHeading').text("Update Email");
                $('#emailDiv').show();
                $('#mobileDiv').hide();
            }

            if (type == 'mobile') {
                $('#modalHeading').text("Update Mobile Number");
                $('#mobileDiv').show();
                $('#emailDiv').hide();
            }
        }

        $('.close-modal').on("click", function() {
            $('#email-mobile-modal').hide();
        })

        if ("{{ session('success') }}") {
            Swal.fire({
                icon: 'success',
                text: "{{ session('success') }}",
            })
        }
    </script>
@endsection