@extends('host.layout.master')

@section('title')
    {{ __('language.profile') }}
@endsection


@section('content')

    <main class="nxl-container">

        <!-- [ page-header ] start -->
        <div class="page-header">
            <div class="page-header-left d-flex align-items-center">
                <div class="page-header-title">
                    <h5 class="m-b-10">Home</h5>
                </div>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item">Edit Profile</li>
                </ul>
            </div>
            <div class="page-header-right ms-auto">
                <div class="page-header-right-items">
                    <div class="d-flex align-items-center gap-3 page-header-right-items-wrapper">
                        {{--                        <button class="btn btn-primary MyButton">--}}
                        {{--                            <i class="feather-save me-2"></i>--}}
                        {{--                            <span>{{ __('language.save_changes') }}</span>--}}
                        {{--                        </button>--}}
                    </div>
                </div>
            </div>
        </div>
        <!-- [ page-header ] end -->
        <!-- [ Main Content ] start -->
        <div class="main-content mt-4">
            <div class="row">
                <div class="col-xxl-4 col-xl-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="mb-4 text-center">
                                <div class="wd-150 ht-150 mx-auto mb-3 position-relative">
                                    <div class="avatar-image wd-150 ht-150 border border-5 border-gray-3">
                                        @if(empty($host->image))
                                            <img src="{{ URL::asset('/admin/assets/uploads/'.$host->image) }}"
                                                 alt="user-image"
                                                 class="img-fluid user-avtar"/>
                                        @else
                                            <img src="{{ URL::asset('/admin/assets/uploads/'.$host->image) }}"
                                                 alt="user-image" class="img-fluid user-avtar"/>
                                        @endif
                                    </div>
                                    <div class="wd-10 ht-10 text-success rounded-circle position-absolute translate-middle"
                                         style="top: 76%; right: 10px">
                                        <i class="bi bi-patch-check-fill"></i>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <a href="javascript:void(0);"
                                       class="fs-14 fw-bold d-block">{{ ($host->fname) ? $host->fname : '' }} {{ ($host->lname) ?$host->lname : '' }}</a>
                                    <a href="javascript:void(0);"
                                       class="fs-12 fw-normal text-muted d-block">{{ ($host->email) ? $host->email :'' }}</a>
                                </div>
                            </div>
                            <ul class="list-unstyled mb-4">
                                <li class="hstack justify-content-between mb-4">
                                    <span class="text-muted fw-medium hstack gap-3"><i
                                                class="feather-user"></i>Name</span>
                                    <a href="javascript:void(0);"
                                       class="float-end"> {{ ($host->fname) ? $host->fname : '' }} {{ ($host->lname) ?$host->lname : '' }}</a>
                                </li>
                                <li class="hstack justify-content-between mb-4">
                                    <span class="text-muted fw-medium hstack gap-3"><i
                                                class="feather-mail"></i>Email</span>
                                    <a href="javascript:void(0);"
                                       class="float-end">{{ ($host->email) ? $host->email :'' }}</a>
                                </li>
                                <li class="hstack justify-content-between mb-4">
                                    <span class="text-muted fw-medium hstack gap-3"><i
                                                class="feather-phone"></i>Phone</span>
                                    <a href="javascript:void(0);"
                                       class="float-end">{{ ($host->phone) ? $host->phone : '' }}</a>
                                </li>
                                <li class="hstack justify-content-between mb-4">
                                    <span class="text-muted fw-medium hstack gap-3"><i class="feather-map-pin"></i>Location</span>
                                    <a href="javascript:void(0);"
                                       class="float-end">{{ $host->address ? Str::limit($host->address, 30) : '' }}
                                    </a>
                                </li>
                                @if(!empty($host->about_me))
                                    <li class=" justify-content-between mb-4">
                                        <h4><b>About Profile</b></h4>
                                        <p>
                                            {{ ($host->about_me) ? $host->about_me : '' }}
                                        </p>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-8 col-xl-6">
                    <div class="card border-top-0">
                        <div class="card-header p-0">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs flex-wrap w-100 text-center customers-nav-tabs" id="myTab"
                                role="tablist">
                                <li class="nav-item flex-fill border-top" role="presentation">
                                    <a href="javascript:void(0);" class="nav-link active" data-bs-toggle="tab"
                                       data-bs-target="#overviewTab" role="tab">OVERVIEW</a>
                                </li>
                                <li class="nav-item flex-fill border-top" role="presentation">
                                    <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                       data-bs-target="#photosTab" role="tab">PHOTOS</a>
                                </li>
                                <li class="nav-item flex-fill border-top" role="presentation">
                                    <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                       data-bs-target="#mapTab" role="tab">MAP</a>
                                </li>
                                <li class="nav-item flex-fill border-top" role="presentation">
                                    <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                       data-bs-target="#interestsTab" role="tab">INTERESTS</a>
                                </li>
                                <li class="nav-item flex-fill border-top" role="presentation">
                                    <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                       data-bs-target="#detailsTab" role="tab">DETAILS</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content">

                            <div class="tab-pane fade show active p-4" id="overviewTab" role="tabpanel">
                                <div class="profile-details">
                                    <form action="{{ route('host.update_host_overview') }}" method="post" class="MyForm"
                                          enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">

                                            <div class="col-md-4">
                                                <label for="">First Name</label>
                                                <input type="text" class="form-control MyInput" placeholder="First Name"
                                                       required name="fname" value="{{ $host->fname }}">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="">Last Name</label>
                                                <input type="text" class="form-control MyInput" placeholder="Last Name"
                                                       required name="lname" value="{{ $host->lname }}">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="">Email</label>
                                                <input type="email" class="form-control MyInput" placeholder="Email"
                                                       readonly disabled value="{{ $host->email }}">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">New Password</label>
                                                <input type="text" class="form-control MyInput"
                                                       placeholder="New Password" name="password">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Phone</label>
                                                <input type="text" class="form-control MyInput" placeholder="Phone"
                                                       required name="phone" value="{{ $host->phone }}">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="">Country</label>
                                                <input type="text" class="form-control MyInput" placeholder="Country"
                                                       required name="country" value="{{ $host->country }}">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="">State</label>
                                                <input type="text" class="form-control MyInput" placeholder="State"
                                                       required name="state" value="{{ $host->state }}">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="">City</label>
                                                <input type="text" class="form-control MyInput" placeholder="City"
                                                       required name="city" value="{{ $host->city }}">
                                            </div>
                                            <div class="col-md-12">
                                                <label for="">Address</label>
                                                <input type="text" class="form-control MyInput" id="location"
                                                       placeholder="Address"
                                                       required name="address" value="{{ $host->address }}">
                                            </div>
                                            <div class="col-md-12">
                                                <label for="">About Profile</label>
                                                <textarea name="about_me" class="form-control"
                                                          placeholder="About your profile . . . ">{{ $host->about_me }}</textarea>
                                            </div>
                                            <div class="col-md-12">
                                                <label for="">Profile Picture</label>
                                                <input type="file" class="form-control MyInput" name="profile"
                                                       accept="image/*">
                                            </div>
                                            <div class="col-md-12 text-center justify-content-center">
                                                <center>
                                                    <button class="btn btn-primary MyButton">
                                                        <i class="feather-save me-2"></i>
                                                        <span>{{ __('language.save_changes') }}</span>
                                                    </button>
                                                </center>
                                            </div>

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

                            <div class="tab-pane fade show p-4" id="photosTab" role="tabpanel">
                                <div class="profile-details mb-5">
                                    <form action="{{ route('host.save_host_images') }}" method="post" class="MyForm"
                                          enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-10">
                                                <input type="file" name="profile" required class="form-control MyInput"
                                                       accept="image/*" style="padding-top: 20px">
                                            </div>
                                            <div class="col-md-2">
                                                <button class="btn btn-md bg-soft-success text-success MyButtonCss MyButton">
                                                    SAVE
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                    @if(!empty(Auth::guard('host')->user()->userimages))
                                        <div class="row">

                                            @forelse(Auth::guard('host')->user()->userimages as $img)
                                                <div class="col-md-4">
                                                    <img src="{{ URL::asset('/admin/assets/uploads/'.$img->image) }}"
                                                         alt="" style="width: 100%;max-height: 270px;min-height: 270px"
                                                         class="shadow">
                                                    <center>
                                                        <a href="{{ route('host.delete_host_images',[encrypt($img->id)]) }}"
                                                           onclick="return(confirm('{{ __("language.are_you_sure") }}'))"
                                                           class="avatar-text avatar-md"
                                                           style="margin-top: 8px;margin-left: 10px">
                                                            <i class="feather-trash-2"></i>
                                                        </a>
                                                    </center>
                                                </div>
                                            @empty
                                                <center><h2><b>No Record Found</b></h2></center>
                                            @endforelse

                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="tab-pane fade show p-4" id="mapTab" role="tabpanel">
                                <div class="profile-details mb-5">
                                    <div class="row">

                                        <div class="col-md-12">
                                            <label for="">Address</label>
                                            <input type="text" class="form-control MyInput" readonly disabled
                                                   value="{{ $host->address }}">
                                        </div>
                                        <div class="col-md-12">
                                            <div id="map" style="width:100%;height:500px"></div>
                                        </div>

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

                            <div class="tab-pane fade show p-4" id="interestsTab" role="tabpanel">
                                <div class="profile-details mb-5">
                                    <form action="{{ route('host.save_interests') }}" method="post" class="MyForm">
                                        @csrf
                                        <div class="row">
                                            <h3 class="mb-3"><b>Interests</b></h3>
                                            @forelse($intrests as $i=>$intrest)
                                                <div class="col-md-3 mb-3">
                                                    <div class="item-checkbox">
                                                        <div class="custom-control custom-checkbox">
                                                            <input
                                                                    type="checkbox"
                                                                    class="custom-control-input checkbox"
                                                                    id="intrest{{ $i }}"
                                                                    data-checked-action="show-options"
                                                                    name="intrests[]"
                                                                    value="{{ $intrest->id }}"
                                                                    @if(in_array($intrest->id,$userInterests)) checked @endif>
                                                            <label class="custom-control-label"
                                                                   for="intrest{{ $i }}">{{ $intrest->name }}</label>
                                                        </div>

                                                    </div>
                                                </div>
                                            @empty
                                            @endforelse
                                        </div>
                                        <div class="row mt-4">
                                            <h3 class="mb-3"><b>Hobbies</b></h3>
                                            @forelse($hobbies as $h=>$hobbie)
                                                <div class="col-md-3 mb-3">
                                                    <div class="item-checkbox">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input checkbox"
                                                                   id="hobbies{{ $h }}"
                                                                   data-checked-action="show-options" name="hobbies[]"
                                                                   value="{{ $hobbie->id }}"
                                                                   @if(in_array($hobbie->id,$userHobbies)) checked @endif>
                                                            <label class="custom-control-label"
                                                                   for="hobbies{{ $h }}">{{ $hobbie->name }}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            @empty
                                            @endforelse
                                        </div>
                                        <div class="row mt-4">
                                            <h3 class="mb-3"><b>Lifestyle</b></h3>
                                            @forelse($lifestyle as $l=>$lifestyl)
                                                <div class="col-md-3 mb-3">
                                                    <div class="item-checkbox">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input checkbox"
                                                                   id="lifestyle{{ $l }}"
                                                                   data-checked-action="show-options" name="lifestyle[]"
                                                                   value="{{ $lifestyl->id }}"
                                                                   @if(in_array($lifestyl->id,$userLifestyle)) checked @endif>
                                                            <label class="custom-control-label"
                                                                   for="lifestyle{{ $l }}">{{ $lifestyl->name }}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            @empty
                                            @endforelse
                                        </div>
                                        <div class="row mt-4">
                                            <div class="col-md-12 text-center justify-content-center">
                                                <center>
                                                    <button class="btn btn-primary MyButton">
                                                        <i class="feather-save me-2"></i>
                                                        <span>{{ __('language.save_changes') }}</span>
                                                    </button>
                                                </center>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="tab-pane fade show p-4" id="detailsTab" role="tabpanel">
                                <div class="profile-details">
                                    <form action="{{ route('host.update_host_detail') }}" method="post" class="MyForm">
                                        @csrf
                                        <div class="row">

                                            <div class="col-md-12">
                                                <label for="">Accommodation</label>
                                                <textarea name="accommodation" class="form-control"
                                                          placeholder="Accommodation . . . ">{{ (Auth::guard('host')->user()->accommodation) ? Auth::guard('host')->user()->accommodation : '' }}</textarea>
                                            </div>
                                            <div class="col-md-12">
                                                <label for="">What else</label>
                                                <textarea name="what_else" class="form-control"
                                                          placeholder="What else . . . ">{{ (Auth::guard('host')->user()->what_else) ? Auth::guard('host')->user()->what_else : '' }}</textarea>
                                            </div>
                                        </div>
                                        <h3><b>Languages</b></h3>
                                        @if(isset($userLanguages) && sizeof($userLanguages)>0)

                                            @forelse($userLanguages as $ul=>$userLanguage)

                                                @if($ul==0)
                                                    <div class="row">
                                                        <div class="col-md-10 mt-2">
                                                            <label> Languages </label>
                                                            <input type="text" name="languages[]"
                                                                   class="form-control MyInput"
                                                                   placeholder="Languages"
                                                                   value="{{ $userLanguage->name }}" required>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <button class="btn btn-info w-100" type="button"
                                                                    onclick="AddMore()"
                                                                    style="margin-top:28px;height:57px">{{ __('language.add_more') }}
                                                            </button>
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="row" id="append_{{ $ul }}">
                                                        <div class="col-md-10 mt-2">
                                                            <label> Languages </label>
                                                            <input type="text" name="languages[]"
                                                                   class="form-control MyInput"
                                                                   placeholder="Languages" required
                                                                   value="{{ $userLanguage->name }}">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <button class="btn btn-danger w-100" type="button"
                                                                    onclick="Remove('{{ $ul }}')"
                                                                    style="margin-top:28px;height:57px">{{ __('language.remove') }}
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endif
                                            @empty
                                            @endforelse

                                        @else
                                            <div class="row">
                                                <div class="col-md-10 mt-2">
                                                    <label> Languages </label>
                                                    <input type="text" name="languages[]" class="form-control MyInput"
                                                           placeholder="Languages" required>
                                                </div>
                                                <div class="col-md-2">
                                                    <button class="btn btn-info w-100" type="button" onclick="AddMore()"
                                                            style="margin-top:28px;height:57px">{{ __('language.add_more') }}
                                                    </button>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="row">
                                            <div id="append"></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 text-center justify-content-center">
                                                <center>
                                                    <button class="btn btn-primary MyButton">
                                                        <i class="feather-save me-2"></i>
                                                        <span>{{ __('language.save_changes') }}</span>
                                                    </button>
                                                </center>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ Main Content ] end -->

    </main>

@endsection
@section('script')

    {{--    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABXn0Dg5Bkbn8UnQFbMaaqbAQBMAsivEc&callback=initMap" async defer></script>--}}
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyABXn0Dg5Bkbn8UnQFbMaaqbAQBMAsivEc&libraries=places"></script>

    <script>
        function initMap() {
            const address = "{{ ($host->address) ? $host->address : '' }}";

            console.log("Address to geocode:", address); // Debugging

            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: {lat: -34.397, lng: 150.644}
            });

            if (!address) {
                console.error("No address provided");
                return;
            }

            const geocoder = new google.maps.Geocoder();
            geocodeAddress(geocoder, map, address);
        }

        function geocodeAddress(geocoder, map, address) {
            geocoder.geocode({'address': address}, (results, status) => {
                if (status === 'OK') {
                    console.log("Geocoding successful:", results);
                    map.setCenter(results[0].geometry.location);
                    new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    console.error('Geocode failed:', status);
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        // Ensure initMap is called after script load
        window.onload = initMap;
    </script>

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

        function initialize() {
            var input = document.getElementById('location');
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
            });
        }
    </script>

    <script>


        var count = {{ sizeof($userLanguages) }};

        function AddMore() {

            var detail = `<div class="row" id="append_` + count + `">
                                    <div class="col-md-10">
                                        <label> Languages </label>
                                                <input type="text" name="languages[]" class="form-control MyInput" placeholder="Languages" required>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-danger w-100" type="button" onclick="Remove(` + count + `)"
                                                style="margin-top:21px;height:57px"> {{ __('language.remove') }}
            </button>
        </div>
    </div>`;
            $("#append").append(detail);
            count++;
        }

        function Remove(id) {
            $("#append_" + (count - 1)).remove();
            count--;
        }

    </script>
@endsection