@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <section class="profile-pg">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="prof-side">
                        <div class="profile-picture">
                            <img src="{{asset($user->photo ?? 'assets/web/images/profile-pic.png')}}" alt="">
                        </div>
                        <h5 class="username text-center mt-3 full_name">{{$fullName}}</h5>
                        <div class="nav flex-column nav-pills mt-5" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-selected="true"><img src="{{asset('assets/web/images/icons/profile/user.svg')}}" class="icon" alt=""> {{__('members.my_profile')}}</a>
                            <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/bookmark.svg')}}" class="icon" alt=""> {{__('members.my_address')}}</a>
                            <a class="nav-link d-flex align-items-center notifications_count_alert_tab" id="v-pills-tab5-tab" data-toggle="pill" href="#v-pills-tab5" role="tab" aria-controls="v-pills-tab5" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/bookmark.svg')}}" class="icon" alt="">{{__('members.notifications')}}
                                @if($notificationsCount)
                                    <div style="width: 25px;height:25px;border-radius:50%" class="bg-danger text-white ml-3 d-flex justify-content-center notifications_count_alert">{{$notificationsCount}}</div>
                                @endif
                            </a>
                            <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/list.svg')}}" class="icon" alt=""> {{__('members.my_orders')}}</a>
                            <a class="nav-link" href="{{route('user.logout')}}" aria-controls="v-pills-tab4" aria-selected="false"><img src="{{asset('assets/web/images/icons/profile/power.svg')}}" class="icon" alt="">{{__('main.logout')}}</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 m-auto">
                    <div class="profile-inner">
                        <div class="tab-content" id="v-pills-tabContent">
                            @include('web.users.includes.profile')
                            @include('web.users.includes.address')
                            @include('web.users.includes.notifications')
                            @include('web.users.includes.orders')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Info Modal-->
    <div class="modal info-modal fade" id="infoModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">{{__('members.edit_profile')}}</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <form action="{{route('user.updateProfile', $user)}}" method="post" class="update_profile_form">
                    <div class="modal-body">
                        <div class="image-container" id="imagePreview" style="background-image: url({{asset($user->photo ?? 'assets/web/images/profile-pic.png')}});">
                            <input name="photo" type="file" class="custom-file-input" id="imageUpload" required="" capture="">
                            <button><i class="far fa-edit"></i></button>
                        </div>
                        <div class="row mt-5">
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.first_name')}}</span>
                                    </div><input name="first_name" type="text" class="form-control enable-input" value="{{$firstName}}">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.second_name')}}</span>
                                    </div><input name="second_name" type="text" class="form-control enable-input" value="{{$secondName}}">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.third_name')}}</span>
                                    </div><input name="third_name" type="text" class="form-control enable-input" value="{{$thirdName}}">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.email')}}</span>
                                    </div><input name="email" type="email" class="form-control enable-input" value="{{$user->email}}">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.phone')}}</span></div>
                                    <input name="phone" type="tel" class="form-control enable-input" value="{{str_replace('00966', '', $user->phone)}}">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.gender')}}</span>
                                    </div>
                                    <select name="gender" class="form-control enable-input">
                                        <option {{$user->gender == 'male' ? 'selected' : ''}} value="male">{{__('members.male')}}</option>
                                        <option {{$user->gender == 'female' ? 'selected' : ''}} value="female"> {{__('members.female')}} </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="text position-relative">
                                    <div class="content"> <span> {{__('members.old_password')}} </span>
                                    </div><input name="old_password" id="old_password" type="password" class="form-control enable-input" value="">
                                    <span class="position-absolute" style="top: 57%; left: 2.5%; cursor:pointer;"><i class="far fa-eye" id="toggleOldPassword"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text position-relative">
                                    <div class="content"> <span> {{__('members.new_password')}} </span>
                                    </div><input name="password" id="password" type="password" class="form-control enable-input" value="">
                                    <span class="position-absolute" style="top: 57%; left: 5%; cursor:pointer;"><i class="far fa-eye" id="togglePassword"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.new_password_confirmation')}}</span>
                                    </div><input name="password_confirmation" id="password_confirmation" type="password" class="form-control enable-input password_confirmation" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('members.close')}}</button>
                    <button type="button" class="main-butn update_profile_button">{{__('members.save_change')}}</button>
                </div>

            </div>

        </div>

    </div>
    <!--address Modal-->
    <div class="modal info-modal fade" id="addressModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">{{__('members.edit_address')}}</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <form action="{{route('user.updateProfile', $user)}}" method="post" class="update_address_form">
                    <div class="modal-body">
                        <div class="row mt-4">
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.country_code')}}</span></div>
                                    <select name="country_code" class="form-control enable-input">
                                        <option value="">{{__('members.country_code')}}</option>
                                        @if(count($countries))
                                            @foreach($countries as $country)
                                                <option {{$user->country_code == $country->code ? 'selected' : ''}} value="{{$country->code}}">{{$country->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.city')}}</span></div>
{{--                                    <div class="form-group">--}}
{{--                                        <select name="city" class="form-control" autocomplete="off" autofocus required>--}}
{{--                                            <option value="{{$user->city}}">{{$user->city}}</option>--}}
{{--                                        </select>--}}
{{--                                    </div>--}}
                                    <div class="form-group">
                                        <div class="ui-widget">
                                            <select name="city" class="form-control" id="combobox">
                                                <option selected value="{{$user->city}}">{{$user->city}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.zip_code')}}</span></div>
                                    <input name="zip_code" type="text" class="form-control enable-input" value="{{$user->zip_code}}">
                                </div>
                            </div>
{{--                            <div class="col-lg-6">--}}
{{--                                <div class="text">--}}
{{--                                    <div class="content"> <span>{{__('members.state_id')}}</span></div>--}}
{{--                                    <select name="state_id" class="form-control enable-input">--}}
{{--                                        @if(count($states))--}}
{{--                                            @foreach($states as $state)--}}
{{--                                                <option {{$user->state_id == $state->id ? 'selected' : ''}} value="{{$state->id}}">{{$state->name}}</option>--}}
{{--                                            @endforeach--}}
{{--                                        @endif--}}
{{--                                    </select>--}}
{{--                                </div>--}}
{{--                            </div>--}}

                            <div class="col-lg-12">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.district')}}</span></div>
                                    <input name="district" type="text" class="form-control enable-input" value="{{$user->district}}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="text">
                                    <div class="content"> <span>{{__('members.address')}}</span></div>
                                    <input name="address" type="text" class="form-control enable-input" value="{{$user->address}}">
                                    <span class="text-danger register_hint">{{__('members.register_hint')}}<span class="counter">49</span> {{__('members.character')}}</span>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('members.close')}}</button>
                        <button type="button" class="main-butn update_profile_button update_address">{{__('members.save_change')}}</button>
                    </div>
                </form>

            </div>

        </div>

    </div>

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script>
        let refreshNotificationRoute = "{{route('user.refreshNotification')}}",
            markAsReadRoute = "{{route('user.markAsRead')}}",
            getStateRoute = "{{route('user.getState')}}";
        let fetchCitiesRoute = "{{route('aramex.fetchCities')}}";
        let cityTitle = "{{__('members.city')}}";
        let selectCityTitle = "{{__('members.select_city')}}";
        let male = "{{__('members.male')}}";
        let female = "{{__('members.female')}}";
        let userCity = "{{$user->city}}",
            noNotifications = "{{__('members.no_notifications')}}";

    </script>
    <script>

    </script>
    <script src="{{ asset('assets/web/js/users.profile.js') }}"></script>

    <script>
       $(document).ready(function () {
           $('.custom-combobox-input').val(userCity);
       });

       $(document).on('focus', '.custom-combobox-input', function () {
           $(this).val('');

       });
       $(document).on('blur', '.custom-combobox-input', function () {
           if($(this).val() !== cityTitle){
               $(this).val($('select[name="city"] option:selected').val())
           } else {
               $(this).val(cityTitle)
           }
       });

        let countryCode = $('select[name="country_code"]');
        countryCode.change(async function (e) {
            e.preventDefault();

            let data = {country_code: $(this).val()},
                url = fetchCitiesRoute,
                method = 'get';

            let city = $('select[name="city"]');
            city.html(`<option value="">${cityTitle}</option>`);


            $('.custom-combobox-input').val('');

            if($(this).val() === ''){
                return false;
            }

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                toasterError(response.errors);
            }

            if (response.cities) {
                city.html(`<option value="">${selectCityTitle}</option>`);
                for(let myCity of response.cities){
                    city.append(`<option value="${myCity}">${myCity}</option>`);
                }

                $('.custom-combobox-input').val(selectCityTitle);

                $('select[name="city"] option').each(function () {
                    if($(this).val() === userCity){
                        $(this).attr('selected', 'selected');
                        $('.custom-combobox-input').val(userCity);
                    }
                });
            }

        });
        countryCode.change();

        $('input[name="address"], input[name="district"]').on('keyup paste change', function () {
            let maxLength = 49,
                address = $('input[name="address"]'),
                district = $('input[name="district"]'),
                counter = $('.counter'),
                typedTextLength = parseInt(address.val().length)+parseInt(district.val().length);

            counter.html(parseInt(maxLength-typedTextLength));

            maxLength = maxLength-typedTextLength;

            if(maxLength < 0){
                address = address.val().substring(0, 49);
                $('input[name="address"]').val(address);
                $('input[name="district"]').val('');
                counter.html(0)
            }
            if(maxLength === 0){
                $('.register_hint').addClass('d-none');
            }
            if(maxLength > 0) {
                $('.register_hint').removeClass('d-none');
            }

        });


    </script>

@endsection