@extends('front.user.partials.layout' , ['active' => 'profile' , 'page' => __('profile')])

@push('css')
    <style>
        .filter-option-inner-inner svg {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        span.text svg {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    </style>
@endpush
@section('profile_content')

    <div class="portlet">
        <div class="portlet__head">
            <div class="portlet__head-label">
                <div class="portlet__head-title">@lang('profile')</div>
            </div>
        </div>
        <div class="portlet__body px-5 pt-5">
            {!! Form::open(['POST', 'url'=> url()->current() ,'to'=>url()->current() ,  'class'=>'form-horizontal','id'=>'formUserProfile']) !!}
            <div class="row">

                <div class="col-md-12 d-none" id="errors">

                </div>

                <div class="col-lg-12">
                    <div class="form-group text-center">
                        <div class="main-avatar">
                            <div class="main-avatar__holder">
                                <img class="imgShow" src="{{ auth()->user()->image ? url('image/' . auth()->user()->image . '/150x150') : asset('frontAssets/images/avatar.png') }}" alt=""/>
                            </div>
                            <label class="main-avatar__upload"><i class="fas fa-camera"></i>
                                <input class="imgload" type="file" name="avatar" accept="image/png, image/jpeg"/>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('name')</label>
                        <input class="form-control" type="text" name="name" value="{{ auth()->user()->name }}"/>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('designation')</label>
                        <input class="form-control" type="text" name="designation"
                               value="{{ auth()->user()->designation }}"/>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('email')</label>
                        <input class="form-control" type="email" name="email" value="{{ auth()->user()->email }}"/>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('username')</label>
                        <input class="form-control" type="text" name="username" value="{{ auth()->user()->username }}"/>
                    </div>
                </div>


                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('country')</label>
                        @if($counties = getCountry())
                            <select class="selectpicker" title="@lang('choose_country')" id="countries"
                                    name="country_id">
                                @foreach($counties as $country)
                                    <option
                                        value="{{ $country->id }}" data-code="{{ $country->code }}" {{ $country->id == auth()->user()->country->id ? 'selected' : ''}}>{{ ucfirst($country->name) }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('city')</label>
                        <input class="form-control" type="text" name="city" value="{{ auth()->user()->city }}"/>

                        {{--                        @if($cities = cities()->where('country_id' , auth()->user()->country->id))--}}
{{--                            <select class="selectpicker" title="@lang('choose_city')" id="cities" name="city_id">--}}
{{--                                @foreach($cities as $city)--}}
{{--                                    <option--}}
{{--                                        value="{{ $city->id }}" {{ $city->id == auth()->user()->city->id ? 'selected' : ''}}>{{ ucfirst($city->name) }}</option>--}}
{{--                                @endforeach--}}
{{--                            </select>--}}
{{--                        @endif--}}
                    </div>
                </div>




                <div class="col-lg-6">
                    <div class="form-group">
                        <label>Phone Number with Country & Area Code</label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text p-0" id="basic-addon1">{{ auth()->user()->country->code ?? getCountry()[0]->code }}
{{--                                @if($counties = getCountry())--}}
{{--                                        <select class="selectpicker selectPhone" data-width="150" name="country_code">--}}
{{--                                            @foreach($counties as $county)--}}
{{--                                                <option value="{{ $county->id }}" data-content="{{ $county->svg  . ' ' . $county->code }}">{{ $county->code }}</option>--}}
{{--                                            @endforeach--}}
{{--                                        </select>--}}

{{--                                    @endif--}}
                                </span>
                            </div>
                            <input class="form-control" type="text" name="phone" value="{{ auth()->user()->phone }}"/>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('postal_code')</label>
                        <input class="form-control" type="text" name="postal_code"
                               value="{{ auth()->user()->postal_code }}"/>
                    </div>
                </div>



                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('address')</label>
                        <input class="form-control" type="text" name="address" value="{{ auth()->user()->address }}"/>
                    </div>
                </div>


                <div class="col-lg-12">
                    <h4 class="border-bottom pb-2 mb-4">@lang('change_password')</h4>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('password')</label>
                        <input class="form-control" type="password" id="password" name="password"/>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('password_confirmation')</label>
                        <input class="form-control" type="password" name="password_confirmation"/>
                    </div>
                </div>
                <div class="col-lg-4 ml-auto mt-2">
                    <button class="general_btn_sm w-100">@lang('save')</button>
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>

@endsection

@push('js')
    <script>
        $('#countries').change(function (e) {
            $('#basic-addon1').text($(this).find(':selected').data('code'))
        })
    </script>
@endpush