@extends('site.layouts.master')

@section('title')
    <title>{{__('site.Profile_Page')}} | {{$user->name}}</title>
@endsection
@section('metatags')
<link rel="canonical" href="{{str_replace('public/','',url()->current())}}">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
href="@if(app()->getLocale() == 'en' && str_contains(url()->current(),'/en/')){{str_replace('/en/','/ar/',str_replace('public/','',url()->current()))}}@else{{str_replace('/ar/','/en/',str_replace('public/','',url()->current()))}}@endif">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif" href="{{str_replace('public/','',url()->current())}}">
@endsection
@section('content')
    <div class="d-lg-flex px-lg-1 my-3 py-2 bg-f9f9f9">
        <div class="px-2 px-lg-4 col-12 col-lg-3">
            <div class="d-flex align-items-center">
                <div class="@if(Route::is('site.editProfile')) col-8 col-lg-12 image-container @else col-3 @endif" @if(Route::is('site.editProfile')) role="button" @endif>
                    <img loading="lazy" class="w-100 rounded-3 @if(Route::is('site.editProfile')) customHeight @endif" src="{{ $user->photo }}" alt="{{ $user->name }}">
                    @if(Route::is('site.editProfile'))
                    <div id="displayedImage" class="overlay-text d-flex justify-content-center align-items-center rounded-3">
                        @lang('site.change_profile_photo')
                    </div>
                    @endif
                </div>
                @if(Route::is('site.editProfile'))
                    <form id="myForm" class="d-none" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="p-image">
                            <i class="fa fa-pencil upload-button"></i>
                            <input id="userphoto" name="image" class="file-upload" type="file" accept="image/*" />
                        </div>
                    </form>
                @endif
                @if(!Route::is('site.editProfile'))
                <div class="col-9 px-2">
                    <p class="home_request_price text-3b3b3b mb-2">{{ $user->name }}</p>
                    <a class="SF18_24Light text-3b3b3b text-decoration-none"
                        href="mailto:{{ $user->email }}">{{ $user->email }}</a>
                </div>
                @endif
            </div>
            @if(!Route::is('site.editProfile'))
            <div class="d-lg-none owl-carousel my-2">
                <a class="text-decoration-none" href="{{ route('site.profile') }}">
                    <div
                        class="rounded-3 profileCarouselBorder py-2 px-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile') ? 'fw-bold text-red' : '' }}">
                        {{ __('site.Profile') }}
                    </div>
                </a>
                <a class="text-decoration-none" href="{{ route('site.profile.myproperties') }}">
                    <div
                        class="rounded-3 profileCarouselBorder py-2 px-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.myproperties') ? 'fw-bold text-red' : '' }}">
                        {{ __('site.My_Properties') }}
                    </div>
                </a>
                <a class="text-decoration-none" href="{{ route('site.profile.myrequests') }}">
                    <div
                        class="rounded-3 profileCarouselBorder py-2 px-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.myrequests') ? 'fw-bold text-red' : '' }}">
                        {{ __('site.my_request') }}
                    </div>
                </a>
                <a class="text-decoration-none" href="{{ route('site.profile.favorites') }}">
                    <div
                        class="rounded-3 profileCarouselBorder py-2 px-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.favorites') ? 'fw-bold text-red' : '' }}">
                        {{ __('site.Favorites_Properties') }}
                    </div>
                </a>
                <a class="text-decoration-none" href="{{ route('site.profile.favoritesRequests') }}">
                    <div
                        class="rounded-3 profileCarouselBorder py-2 px-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.favoritesRequests') ? 'fw-bold text-red' : '' }}">
                        {{ __('site.Favorites Requests') }}
                    </div>
                </a>
                <a class="text-decoration-none" href="{{ route('site.profile.searchHistory') }}">
                    <div
                        class="rounded-3 profileCarouselBorder py-2 px-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.searchHistory') ? 'fw-bold text-red' : '' }}">
                        {{ __('site.Search_History') }}
                    </div>
                </a>
            </div>
            <div class="d-none d-lg-block my-3">
                <div>
                    <a class="text-decoration-none" href="{{ route('site.profile') }}">
                        <div
                            class="mb-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile') ? 'fw-bold text-red' : '' }}">
                            {{ __('site.Profile') }}
                        </div>
                    </a>
                </div>
                <div>
                    <a class="text-decoration-none" href="{{ route('site.profile.myproperties') }}">
                        <div
                            class="mb-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.myproperties') ? 'fw-bold text-red' : '' }}">
                            {{ __('site.My_Properties') }}
                        </div>
                    </a>
                </div>
                <div>
                    <a class="text-decoration-none" href="{{ route('site.profile.myrequests') }}">
                        <div
                            class="mb-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.myrequests') ? 'fw-bold text-red' : '' }}">
                            {{ __('site.my_request') }}
                        </div>
                    </a>
                </div>
                <div>
                    <a class="text-decoration-none" href="{{ route('site.profile.favorites') }}">
                        <div
                            class="mb-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.favorites') ? 'fw-bold text-red' : '' }}">
                            {{ __('site.Favorites_Properties') }}
                        </div>
                    </a>
                </div>
                <div>
                    <a class="text-decoration-none" href="{{ route('site.profile.favoritesRequests') }}">
                        <div
                            class="mb-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.favoritesRequests') ? 'fw-bold text-red' : '' }}">
                            {{ __('site.Favorites Requests') }}
                        </div>
                    </a>
                </div>
                <div>
                    <a class="text-decoration-none" href="{{ route('site.profile.searchHistory') }}">
                        <div
                            class="mb-3 text-2b2b2b SF16_24Regular {{ request()->routeIs('site.profile.searchHistory') ? 'fw-bold text-red' : '' }}">
                            {{ __('site.Search_History') }}
                        </div>
                    </a>
                </div>
            </div>
            <a class="text-decoration-none my-3" href="{{ route('site.editProfile') }}">
                <div class="profileCarouselBorder text-707070 SF16_19Medium text-center py-2 px-3 rounded-3 col-lg-5">
                    @lang('site.Edit Profile')
                </div>
            </a>
            <div class="d-flex d-lg-block justify-content-between my-4">
                <div class="px-1 px-lg-0 mb-lg-4">
                    <a class="col-6 col-lg-8 bg-blue text-white rounded-3 p-3 px-lg-3 py-lg-2 text-center SF14_16Medium SF16_19Medium-lg text-decoration-none"
                        href="{{ route('site.add-property') }}">@lang('site.Submit_New_Property')</a>
                </div>
                <div class="px-1 px-lg-0 mb-lg-4">
                    <a class="col-6 col-lg-8 bg-red text-white rounded-3 p-3 px-lg-3 py-lg-2 text-center SF14_16Medium SF16_19Medium-lg text-decoration-none"
                        href="{{ route('site.add-request') }}">@lang('site.Submit_New_Request')</a>
                </div>
            </div>
            @endif
        </div>
        @if(!Route::is('site.editProfile'))
        <div class="line"></div>
        @endif
        <div class="col-12 col-lg-9 px-lg-3">
            @yield('profileContent')
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $(".owl-carousel").owlCarousel({
                margin: 10,
                autoWidth: true,
            });
        });
        $('.delete').parent('form:has(input[value="DELETE"]):not(".no-confirm")').click(function( e ) {
            e.preventDefault();
            var form = $(this).parents('form');
            swal({
                title: "@lang('site.Are_you_sure?')",
                text: "@lang('site.not_be_able_to_undo')",
                icon: "warning",
                buttons: true,
            }).then(result => {
                if (result) $(this).submit();
            });
        });
        $(".favoriteButton").on("click", function () {
            $(this).find('i').toggleClass('text-red flaticon-heart-shape-outline fa fa-heart');
        });
    </script>
    @include('site.layouts.js.favouriteButtonScript')
    <script>
        let myForm = document.getElementById('myForm');
        if(myForm){
            $("#displayedImage").click(function(){
                $('#userphoto').click();
            })
        }
        $('#userphoto').change(function() {
            // $('#userphoto').ready(function () {
            var formData = new FormData();
            formData.append('image', $('#userphoto')[0].files[0]);
            // data = formData.get(image);
            // console.log(data);

            $.ajax({
                type: "post",
                url: "{{ url('/profile/updateImage') }}",
                data: formData,
                processData: false,
                // cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                contentType: false,
                //   enctype: 'multipart/form-data',
                //   dataType: "json",
                success: function(response) {
                    // var toaster =
                    //     `<div class="toast fade" role="alert" aria-live="polite" aria-atomic="true" data-delay="5000">
                    //       <div class="toast-body">
                    //           <p>${response.message}</p>
                    //       </div>
                    //   </div>`;
                    // $(".toast-container").append(toaster);
                    // $('.toast').toast('show');
                    location.reload(true);
                }
            });
            // });
        });
    </script>
@endsection