@extends('admin::layouts.app')

@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            <form class="form" role="post-data" method="POST" action="/api/admin/customers/{{ $user->id }}"
                redirect="/admin/customers" enctype="multipart/form-data">
                @csrf
                <div class="row titlepad publsih-sticky">
                    <div class="col-md-12">
                        <div class="mt-3 mb-3">
                            <div class="dashbed-border-bottom"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">
                                <h4>{{ __('label.customer') }}</h4>
                                <p class="page-sub-head">{{ __('admin.view_edit_customer') }}</p>
                            </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>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="tabData mt-4">
                            <h6>{{ __('admin.enter_the_details_below_for_update_business_artistis') }}</h6>
                            <div class="mt-2 mb-2">
                                <div class="dashbed-border-bottom"></div>
                            </div>
                            <div class="pb-4">
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="form-group custominnergroup">
                                            <label class="pay-label">First Name <span class="text-danger">*</span></label>
                                            <div class="search-group">
                                                <input type="text" class="form-control" name="first_name"
                                                    placeholder="Enter your First Name" value="{{ $user->first_name }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group custominnergroup">
                                            <label class="pay-label">Last Name <span class="text-danger">*</span></label>
                                            <div class="search-group">
                                                <input type="text" class="form-control" name="last_name"
                                                    placeholder="Enter your Last Name" value="{{ $user->last_name }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group custominnergroup">
                                            <label>Profile Image <span class="text-danger">*</span></label>
                                            <input type="file" class="form-control border"
                                                placeholder="Enter Package Name" name="user_profile" id="user-profile" />
                                            <div id="preview-user-profile">
                                                <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 class="col-md-6 col-12">
                                        <div class="form-group custominnergroup">
                                            <label class="pay-label">Email-Id <span class="text-danger">*</span></label>
                                            <div class="search-group">
                                                <input type="text" class="form-control" name="email"
                                                    placeholder="{{ __('placeholder.enter_email_id') }}" value="{{ $user->email }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label>{{ __('admin.mobile_no') }}<span class="text-danger">*</span></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 }}"
                                                                    {{ $user->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="{{ $user->mobile_number }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group custominnergroup">
                                            <label class="pay-label">Gender<span class="text-danger">*</span></label>
                                            <div class="search-group">
                                                <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>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group custominnergroup">
                                            <label class="pay-label">Date Of Birth <span
                                                    class="text-danger">*</span></label>
                                            <div class="search-group">
                                                <input type="date" class="form-control" name="dob"
                                                    placeholder="Enter your Dob" value="{{ @$user->userDetail->dob }}"
                                                    max="{{ \Carbon\Carbon::now()->subYears(18)->toDateString() }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group custominnergroup">
                                            <label class="pay-label">National ID Number <span
                                                    class="text-danger">*</span></label>
                                            <div class="search-group">
                                                <input type="text" class="form-control" name="national_id_number"
                                                    placeholder="Enter your National Id Number"
                                                    value="{{ @$user->userDetail->national_id_number }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group custominnergroup">
                                            <label>National ID Front Image <span class="text-danger">*</span></label>
                                            <input type="file" class="form-control border"
                                                placeholder="Enter Package Name" name="national_id_front_image"
                                                id="national-id-front-image" />
                                            <div id="preview-national-id-front-image">
                                                <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>National ID Back Image <span class="text-danger">*</span></label>
                                            <input type="file" class="form-control border"
                                                placeholder="Enter Package Name" name="national_id_back_image"
                                                id="national-id-back-image" />
                                            <div id="preview-national-id-back-image">
                                                <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" type="text"
                                                placeholder="{{ __('placeholder.search_address') }}" id="map-search"
                                                value="{{ isset($user->userDetail->address) ? $user->userDetail->address : '' }}" />
                                        </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>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection
@section('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">
        $('#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');
        });

        function initAutocomplete() {
            const latitude = parseFloat(document.getElementById("latitude").value);
            const longitude = parseFloat(document.getElementById("longitude").value);

            // 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) {
                    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");
                }
                document.getElementById("address").value = place.formatted_address;
                document.getElementById("latitude").value = place.geometry.location.lat();
                document.getElementById("longitude").value = place.geometry.location.lng();
            });
        }

        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>
@endsection