@extends('layout')
@section('title')
    <title>{{ __('translate.Edit Profile') }}</title>
@endsection
@section('body-content')

<main>

    <!-- dashboard-part-start -->
    <section class="dashboard footer-top-pad ">
        <div class="container">
            <div class="row">

                @include('profile.sidebar')


                <div class=" col-xxl-9 col-xl-8 col-lg-8">
                    <form action="{{ route('user.update-profile') }}" enctype="multipart/form-data" method="POST">
                        @csrf
                        @method('PUT')
                    <div class="row g-3">
                        @if (! user_has_uploaded_resume($user))
                            <div class="col-lg-12">
                                <div class="alert alert-warning" role="alert">
                                    {{ __('translate.Resume required for job applications') }} — {{ __('translate.Resume required to apply help') }}
                                </div>
                            </div>
                        @endif
                        <div class="col-lg-12">
                            <div class="car-images">
                                <h3 class="car-images-taitel">{{ __('translate.Upload Avatar and Resume') }}</h3>

                                <div class="row ">
                                    <div class="col-md-4">
                                        <div class="car-images-inner two">
                                            <label class="form-label">{{ __('translate.My Avatar') }}

                                                <i 
                                                    class="fas fa-info-circle text-info"
                                                    data-toggle="tooltip"
                                                    data-placement="right"
                                                    title="Recommended size: 92x92"
                                                    style="cursor: pointer;"
                                                ></i>
                                                </label>
                                            <div class="uplode-thumb-main">
                                                <div class="uplode-thumb">
                                                    @if($user->image)
                                                        <img id="preview-user-avatar-edit-page" src="{{ custom_asset($user->image, '48x48') }}" alt="thumb">
                                                    @else
                                                        <img id="preview-user-avatar-edit-page" src="{{ custom_asset($setting->placeholder_image, '48x48') }}" alt="thumb">
                                                    @endif

                                                </div>
                                                <div class="uplode-thumb-main-item">
                                                    <p>{{ __('translate.Select') }} <span>{{ __('translate.New File') }}</span> {{ __('translate.to Upload') }}</p>
                                                    <input type="file" id="my-file" name="image" onchange="previewEditPageImage(event)">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-8 ">
                                        <div class="uplode-vedio das">
                                            <label class="form-label">{{ __('translate.My Resume') }}
                                                @if ($user->resume)
                                                <a href="{{ resume_download_url($user->resume) }}">({{ __('translate.Download Resume') }})</a> </label>
                                                @endif
                                            <div class="uplode-vedio-item">

                                                <div class="uplode-vedio-inner">
                                                    <div class="uplode-vedio-inner-img">
                                                        <img src="{{ custom_asset($setting->placeholder_image, '693x278') }}" alt="img" id="resume_preview">
                                                    </div>
                                                    <div class="uplode-vedio-inner-text">
                                                        <h6>{{ __('translate.Select') }} <span>{{ __('translate.New File') }}</span> {{ __('translate.to Upload') }} </h6>
                                                    </div>

                                                </div>

                                                <input type="file" class="uplode-vedio" name="resume" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="car-images">
                                <h3 class="car-images-taitel">{{ __('translate.Basic Information') }}</h3>

                                <div class="car-images-inner">
                                    <div class="description-item">

                                        <div class="description-item-inner">
                                            <label class="form-label">{{ __('translate.Name') }}
                                                <span>*</span> </label>
                                            <input type="text" class="form-control"
                                            placeholder="{{ __('translate.Name') }}" name="name" value="{{ html_decode($user->name) }}">
                                        </div>

                                        <div class="description-item-inner">
                                            <label class="form-label">{{ __('translate.Designation') }}
                                                 </label>
                                            <input type="text" class="form-control"
                                            placeholder="{{ __('translate.Designation') }}" name="designation" value="{{ html_decode($user->designation) }}">
                                        </div>
                                    </div>

                                    <div class="description-item">

                                        <div class="description-item-inner">
                                            <label class="form-label">{{ __('translate.Email Address') }}
                                                <span>*</span> </label>
                                            <input type="email" class="form-control"
                                                placeholder="{{ __('translate.Email Address') }}"  name="email" value="{{ html_decode($user->email) }}" readonly>
                                        </div>

                                        <div class="description-item-inner phone-verify-inner">
                                            <label class="form-label" for="profile_phone">{{ __('translate.Phone Number') }}
                                                <span>*</span> </label>
                                            <input type="text" class="form-control" id="profile_phone"
                                                placeholder="{{ __('translate.Phone Number') }}" value="{{ html_decode($user->phone) }}" name="phone"
                                                maxlength="12" inputmode="tel" autocomplete="tel">
                                            @if($phone_verify_active ?? false)
                                                <div class="phone-verify-icon dashboard-phone-verify-icon" id="profile_phone_icon" style="display: none;" aria-hidden="true">
                                                    <span></span>
                                                </div>
                                                <p class="phone-verify-message" id="profile_phone_message" style="display: none;"></p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="description-item">
                                        <div class="description-item-inner">
                                            <label class="form-label">{{ __('translate.County') }}
                                                <span>*</span> </label>
                                            <select class="form-select" name="county_id" id="profile_county_id">
                                                <option value="">{{ __('translate.Select County') }}</option>
                                                @foreach ($counties as $county)
                                                    <option value="{{ $county->id }}" {{ (string) old('county_id', $user->county_id) === (string) $county->id ? 'selected' : '' }}>{{ $county->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="description-item-inner">
                                            <label class="form-label">{{ __('translate.City') }}
                                                <span>*</span> </label>
                                            <select class="form-select" name="city_id" id="profile_city_id">
                                                <option value="">{{ __('translate.Select City') }}</option>
                                                @foreach ($cities as $city)
                                                    <option value="{{ $city->id }}" {{ (string) old('city_id', $user->city_id) === (string) $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="description-item-inner {{ $show_district ? '' : 'd-none' }}" id="profile_city_district_wrapper">
                                            <label class="form-label" id="profile_city_district_label">{{ $district_label }}
                                                <span class="district-required-star">*</span>
                                            </label>
                                            <select class="form-select" name="city_district_id" id="profile_city_district_id">
                                                <option value="">{{ __('translate.Select') }}</option>
                                                @foreach ($districts as $district)
                                                    <option value="{{ $district->id }}" {{ (string) old('city_district_id', $user->city_district_id) === (string) $district->id ? 'selected' : '' }}>{{ $district->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="description-item">
                                        <div class="description-item-inner">
                                            <label class="form-label">{{ __('translate.Whatsapp Number') }}
                                                 </label>
                                            <input type="text" class="form-control"
                                                placeholder="{{ __('translate.Whatsapp Number') }}" value="{{ html_decode($user->whatsapp_phone) }}"  name="whatsapp_phone">
                                        </div>

                                        <div class="description-item-inner">
                                            <label class="form-label">{{ __('translate.Address') }}
                                                <span>*</span> </label>
                                            <input type="text" class="form-control"
                                                placeholder="{{ __('translate.Address') }}" value="{{ html_decode($user->address) }}"  name="address">
                                        </div>

                                    </div>

                                    <div class="description-item">

                                        <div class="description-item-inner about_us_textarea">
                                            <label class="form-label">{{ __('translate.Google Embed Map Link') }}
                                                 </label>
                                            <textarea name="google_map" class="form-control" id="" cols="30" rows="5">{{ html_decode($user->google_map) }}</textarea>
                                        </div>

                                    </div>

                                    <div class="description-item">

                                        <div class="description-item-inner about_us_textarea">
                                            <label class="form-label">{{ __('translate.About Us') }}
                                                 </label>
                                            <textarea name="about_me" class="form-control" id="" cols="30" rows="5">{{ html_decode($user->about_me) }}</textarea>
                                        </div>

                                    </div>

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


                        <div class="col-lg-12">
                            <div class="car-images ">
                                <h3 class="car-images-taitel">{{ __('translate.Social networks and website') }}</h3>

                                <div class="join-a-dealer-form-main two">

                                    @if ($user->canSetCompanyWebsite())
                                    <div class="join-a-dealer-form-item">
                                        <div class="join-a-dealer-form-inner" style="width: 100%;">
                                            <label for="profile_website_url" class="form-label">{{ __('translate.Company website') }}</label>
                                            <input type="url" class="form-control" id="profile_website_url"
                                                name="website_url" value="{{ old('website_url', $user->website_url) }}"
                                                placeholder="https://www.exemplu.ro">
                                            <small class="text-muted">{{ __('translate.Company website help') }}</small>
                                        </div>
                                    </div>
                                    @endif

                                    <div class="join-a-dealer-form-item">

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput10" class="form-label">{{ __('translate.Instagram') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput10"
                                                placeholder="{{ __('translate.Instagram') }}" name="instagram" value="{{ html_decode($user->instagram) }}">

                                            <div class="icon">
                                                <span>
                                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                                            d="M5 0C2.23858 0 0 2.23858 0 5V15C0 17.7614 2.23858 20 5 20H15C17.7614 20 20 17.7614 20 15V5C20 2.23858 17.7614 0 15 0H5ZM16 5C16.5523 5 17 4.55228 17 4C17 3.44772 16.5523 3 16 3C15.4477 3 15 3.44772 15 4C15 4.55228 15.4477 5 16 5ZM15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10ZM10 13C11.6569 13 13 11.6569 13 10C13 8.34315 11.6569 7 10 7C8.34315 7 7 8.34315 7 10C7 11.6569 8.34315 13 10 13Z" />
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput11" class="form-label">{{ __('translate.Facebook') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput11"
                                            placeholder="{{ __('translate.Facebook') }}" name="facebook" value="{{ html_decode($user->facebook) }}">

                                            <div class="icon">
                                                <span>
                                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M16 0H4C1.79086 0 0 1.79086 0 4V16C0 18.2091 1.79086 20 4 20H8.5V14H5V11H8.5V9C8.5 6.79086 10.2909 5 12.5 5H15V8H12.5C11.9477 8 11.5 8.44772 11.5 9V11H15V14H11.5V20H16C18.2091 20 20 18.2091 20 16V4C20 1.79086 18.2091 0 16 0Z" />
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="join-a-dealer-form-item">

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput13" class="form-label">{{ __('translate.LinkedIn') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput13"
                                            placeholder="{{ __('translate.LinkedIn') }}" name="linkedin" value="{{ html_decode($user->linkedin) }}">

                                            <div class="icon">
                                                <span>
                                                    <svg width="19" height="20" viewBox="0 0 19 20" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                                            d="M4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM4 6.5V20H0V6.5H4ZM7 6.5H11V7.34141C11.6256 7.12031 12.2987 7 13 7C16.3137 7 19 9.68629 19 13V20H15V13C15 11.8954 14.1046 11 13 11C11.8954 11 11 11.8954 11 13V20H7V13V6.5Z" />
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput5" class="form-label">{{ __('translate.Twitter') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput5"
                                            placeholder="{{ __('translate.Twitter') }}" name="twitter" value="{{ html_decode($user->twitter) }}">

                                            <div class="icon">
                                                <span>
                                                    <svg width="18" height="16" viewBox="0 0 18 16" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M12.2863 0C10.1825 0 8.47695 1.79086 8.47695 4C8.47695 4.33382 8.5159 4.65809 8.58927 4.96808C6.56635 4.96808 3.51939 4.55908 0.974682 2.00961C0.636299 1.67059 0.0123287 1.89726 0.0358001 2.37567C0.412925 10.0627 3.70501 12.3049 5.40034 12.4444C4.3056 13.5257 2.71534 14.3791 1.11513 14.7622C0.692808 14.8633 0.58848 15.3256 1.00144 15.4599C2.14647 15.8323 3.78541 15.9758 4.66759 16C10.9084 16 15.9809 10.7471 16.0938 4.22229C16.9131 3.68945 17.438 2.5325 17.7329 1.71291C17.8047 1.5133 17.4775 1.28073 17.2817 1.36226C16.6696 1.61708 15.8926 1.67749 15.2306 1.46181C14.532 0.569266 13.4725 0 12.2863 0Z" />
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            </div>
                        </div>

                        @if (auth('web')->user()->canSetWorkingHours())
                        <div class="col-lg-12">
                            <div class="car-images ">
                                <h3 class="car-images-taitel">{{ __('translate.Working Days') }}</h3>
                                <div class="join-a-dealer-form-main two">

                                    <div class="join-a-dealer-form-item">

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput16" class="form-label">{{ __('translate.Sunday') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput16"
                                                placeholder="{{ __('translate.Sunday') }}" name="sunday" value="{{ html_decode($user->sunday) }}">
                                        </div>

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput17" class="form-label">{{ __('translate.Monday') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput17"
                                            placeholder="{{ __('translate.Monday') }}" name="monday" value="{{ html_decode($user->monday) }}">

                                        </div>

                                    </div>



                                    <div class="join-a-dealer-form-item">

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput18" class="form-label">{{ __('translate.Tuesday') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput18"
                                            placeholder="{{ __('translate.Tuesday') }}" name="tuesday" value="{{ html_decode($user->tuesday) }}">

                                        </div>

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput19" class="form-label">{{ __('translate.Wednesday') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput19"
                                            placeholder="{{ __('translate.Wednesday') }}" name="wednesday" value="{{ html_decode($user->wednesday) }}">

                                        </div>

                                    </div>

                                    <div class="join-a-dealer-form-item">

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput20" class="form-label">{{ __('translate.Thursday') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput20"
                                            placeholder="{{ __('translate.thursday') }}" name="thursday" value="{{ html_decode($user->thursday) }}">

                                        </div>

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput21" class="form-label">{{ __('translate.Friday') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput21"
                                            placeholder="{{ __('translate.Friday') }}" name="friday" value="{{ html_decode($user->friday) }}">

                                        </div>

                                    </div>

                                    <div class="join-a-dealer-form-item">

                                        <div class="join-a-dealer-form-inner">

                                            <label for="exampleFormControlInput22" class="form-label">{{ __('translate.Saturday') }}
                                                </label>

                                            <input type="text" class="form-control" id="exampleFormControlInput22"
                                            placeholder="{{ __('translate.Saturday') }}" name="saturday" value="{{ html_decode($user->saturday) }}">

                                        </div>


                                    </div>


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


                        @endif

                        <div class="col-lg-12">
                            <button type="submit" class="main-btn update_profile_btn">{{ __('translate.Update Profile') }}</button>
                        </div>
                    </form>



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

    <!-- dashboard-part-end -->


    @include('profile.logout')


</main>

@endsection



@push('js_section')
<script>
    "use strict";

    function previewEditPageImage(event) {
        var reader = new FileReader();
        reader.onload = function(){
            var output = document.getElementById('preview-user-avatar-edit-page');
            output.src = reader.result;
        }

        reader.readAsDataURL(event.target.files[0]);
    };

    (function($) {
        "use strict";
        $(document).ready(function () {
            function resetProfileDistrictField() {
                $("#profile_city_district_wrapper").addClass("d-none");
                $("#profile_city_district_id").html('<option value="">{{ __("translate.Select") }}</option>');
            }

            function loadProfileDistricts(cityId, selectedDistrictId) {
                resetProfileDistrictField();

                if (!cityId) {
                    return;
                }

                $.ajax({
                    type: "get",
                    url: "{{ url('districts-by-city') }}/" + cityId,
                    success: function(response) {
                        if (!response || !response.required) {
                            return;
                        }

                        $("#profile_city_district_label").html(
                            (response.label || "{{ __('translate.Sector or Commune') }}") + ' <span class="district-required-star">*</span>'
                        );
                        $("#profile_city_district_id").html(response.html);
                        $("#profile_city_district_wrapper").removeClass("d-none");

                        if (selectedDistrictId) {
                            $("#profile_city_district_id").val(String(selectedDistrictId));
                        }
                    }
                });
            }

            $("#profile_county_id").on("change", function() {
                let county_id = $(this).val();
                let empty_html = `<option value="">{{ __('translate.Select City') }}</option>`;
                $("#profile_city_id").html(empty_html);
                resetProfileDistrictField();

                if (county_id) {
                    $.ajax({
                        type: "get",
                        url: "{{ url('cities-by-county') }}/" + county_id,
                        success: function(response) {
                            $("#profile_city_id").html(response);
                        }
                    });
                }
            });

            $("#profile_city_id").on("change", function() {
                loadProfileDistricts($(this).val(), null);
            });

            let initialProfileCity = $("#profile_city_id").val();
            let initialProfileDistrict = "{{ old('city_district_id', $user->city_district_id) }}";
            if (initialProfileCity) {
                loadProfileDistricts(initialProfileCity, initialProfileDistrict || null);
            }
        });
    })(jQuery);

</script>

@include('partials.phone-verification-script', [
    'phone_verify_active' => $phone_verify_active ?? false,
    'phone_input_selector' => '#profile_phone',
    'phone_icon_selector' => '#profile_phone_icon',
    'phone_message_selector' => '#profile_phone_message',
    'county_selector' => '#profile_county_id',
    'verify_on_load' => true,
])

@endpush