@extends('advertiser.layout.app')
@php($user = Auth::guard('web')->user())
@section('advertiser_title', trans('home.title'))

@section('advertiser_content')
@section('back_button')
<div class="right_wrapper">
    <div class="right_bar">
        <div class="right_back">
            <a href="{{ route('advertiser.user.profile', app()->getLocale()) }}" class="backBtn">{{ trans('landing.commen.backbtn') }}</a>
        </div>
    </div>
</div>
@stop
<div class="map_viewBg">
    <img src="{{asset('advertiser_user/images/map_bg.jpg')}}" alt="map-bg"/>
</div>
<!-- //CONTENT START// -->
<div class="content-wrap userProfileedit-page">
    <!-- //CONTAINER START// -->
    <div class="container">
        <div class="cloud_content">
            <div class="map_view_cldBox">
                <div class="cldMid_box">
                    <div class="cld_pro_wrap">
                        <div class="cld_pro_contBox">
                            <form class="cld_formBox" method="POST" id="update_user_form"  action="{{ route('advertiser.update.profile', [app()->getLocale(), 'user_id' => $user_data->id]) }}">
                                @csrf
                                @method('POST')
                                <div class="cld_pro_img">
                                    <div class="display_pic">
                                        <a class="overlay btn-image-upload" data-toggle="modal" href="#modal_image_uplaod" data-modal-name="Customer Profile Images" data-modal-field="customer_profile_pic_path">
                                            <i class="fa fa-camera"></i>
                                        </a>
                                        <img class="display_picture" src="{{($user_data->thumbnail && file_exists('uploads/user/thumbnail/' . $user_data->thumbnail)) ? asset('uploads/user/thumbnail/'.$user_data->thumbnail) : asset('advertiser_user/images/avatar_b.svg') }}">
                                    </div>
                                    <div class="display_name">
                                        <div class="pro_name_view">
                                            <h5 class="pro_name">{{!empty($user_data->userTranslation) ? $user_data->userTranslation->display_name : " "}}</h5>
                                            <span class="pro_dtsList">{{ trans('user.profile.advertiser') }}</span>
                                        </div>
                                    </div>
                                    <div class="dispaly_edit">
                                        <a href="" class="edit-icon">edit</a>
                                    </div>
                                </div>
                                <div class="cld_pro_cont">
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group prof_name">
                                                <input required type="text" name="name" id="name" value="{{!empty($user_data->userTranslation) ? !empty(old('name')) ? old('name') : $user_data->userTranslation->display_name : " "}}">
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                <label>{{ trans('user.profile.name') }}</label>
                                                @if($errors->has('name'))<span class="help-block"><strong>{{ $errors->first('name') }}</strong></span>@endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group prof_email">
                                                <input required type="e-mail" name="email" id="email" value="{{!empty($user_data) ? !empty(old('email')) ? old('email') : $user_data->email:" "}}">
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                <label>{{ trans('user.profile.e_mail') }}</label>
                                                @if($errors->has('email'))<span class="help-block"><strong>{{ $errors->first('email') }}</strong></span>@endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group prof_phoneNum">
                                                @if(!empty($user_data->work_phone))
                                                @php($number = str_replace("+966",'', $user_data->work_phone))
                                                @endif
                                                <input required type="Phonenumber" maxlength="10" class="phone_field" name="phone" id="phone" value="{{!empty($number) ? !empty(old('phone')) ? old('phone') : $number:" "}}" onkeypress="return isNumberKey(event)">
                                                <input type="text" class="country_code_field" required value="+966" readonly>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                <label>{{ trans('user.profile.phone') }}</label>
                                                @if($errors->has('phone'))<span class="help-block"><strong>{{ $errors->first('phone') }}</strong></span>@endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group prof_address">
                                                <input required type="address" name="address" id="address" value="{{!empty($user_data->userTranslation) ? $user_data->userTranslation->address:" "}}">
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                <label>{{ trans('user.profile.address') }}</label>
                                                @if($errors->has('address'))<span class="help-block"><strong>{{ $errors->first('address') }}</strong></span>@endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group prof_password">
                                                <input type="password" class="form-control inp_password" name="password"  id="password" value="" autocomplete="new-password">
                                                <span toggle="#password-field" class="field-icon pass-eye toggle-password"></span>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                <label>{{ trans('user.profile.password') }}</label>
                                                <p class="text-danger password hidden" style="position:relative;height: 30px;margin-bottom:10px;"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group prof_cnfPassword">
                                                <input type="password" class="form-control inp_password" name="password_confirmation" id="password_confirmation" value="">
                                                <span toggle="#password-field" class="field-icon pass-eye toggle-password-confirmation"></span>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                <label>{{ trans('user.profile.confirm_password') }}</label>
                                                @if($errors->has('password'))<span class="help-block"><strong>{{ $errors->first('password') }}</strong></span>@endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="cld_button cld_ftBtn">
                                                <button  class="btn button btn_save update_user" type="submit" value="">{{ trans('user.profile.save') }}</button>
                                                <a href="{{ route('advertiser.user.profile', app()->getLocale()) }}" class="btn button btn_cancel active" type="button" value="">{{ trans('user.profile.cancel') }}</a>
                                            </div>
                                        </div>
                                    </div>

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

        </div>



    </div>
    <!-- //CONTAINER END// -->
</div>
@if(!empty($user->image))
{{-- {{ dd((asset('uploads/user/'.$user->image))) }} --}}
@php($file = file_get_contents(asset('uploads/user/'.$user->image)))

<div id="exist_image" style="display: none;">{{ base64_encode($file) }}</div>
@endif
<!-- //CONTENT END// -->
<!-- //UPLOAD SECTION START// -->
<div class="modal fade uplaod_wrap" id="modal_image_uplaod">
    <div class="modal-dialog modal-content uplodImg" style="width: 390px;">
        <form id="upload_pr_pc" class="modal-content" action="{{route('advertiser.image.store.session',app()->getLocale()) }}"
            enctype="multipart/form-data" method="POST">
            <input type="hidden" name="_token" value="">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">&nbsp;</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div id="upload-demo" style="width: 360px; position: relative;">
                            <button style="" id="upload1">Upload An Image
                                {{-- <i class="fa fa-upload"></i> --}}
                            </button>

                        </div>
                        <input type="file" id="upload" value="" name="image" style="display: none;">
                        <input type="hidden" name="old_thump_image" value="{{ $user_data->thumbnail }}">
                        <input type="hidden" name="old_image" value="{{ $user_data->image }}">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn upload-user-image btn_uplodeBtn active">{{ trans('user.image_uplaod.confirm') }}</button>
                <button type="button" class="btn btn-default pull-left btn_uplodeBtn" data-dismiss="modal">{{ trans('user.image_uplaod.exit') }}</button>
            </div>
        </form>
    </div>
</div>
<!-- //UPLOAD SECTION END// -->
@stop

@section('advertiser_styles')
    <style>
         .country_code_field {
            float: left;
            width: 17% !important;
            border-right: none !important;
            border-radius: 4px 0px 0px 4px !important;
        }
        .phone_field {
            float: right;
            width: 83% !important;
            border-left: none !important;
            border-radius: 0px 4px 4px 0px !important;
        }
        .prof_phoneNum {
            display: inline-block;
        }
        .prof_phoneNum label {
            left: 65px;
        }
        .screen_selected {
            display: block !important;
        }
         /* Phone field */

         .prof_phoneNum input:focus ~ label {
            left: 10px;
        }
        .prof_phoneNum input:focus {
            box-shadow: 0 0 0 0rem rgba(220, 220, 220, 0.25) !important;
        }
        .prof_phoneNum input:focus ~ .country_code_field {
            /* border-color: #6d6d6d !important; */
            box-shadow: 0 0 0 0rem rgba(220, 220, 220, 0.25) !important;
        }
        .help-block{
            color: #dc3545;
        }
        .cld_button .button:hover {
            background: none;
        }
        .cld_button .button.active, .cld_button .button.active:hover {
            background: #000000;
            color: #ffffff;
        }

        label.error {
            position: relative;
            left: 0;
            float: left;
            top: 3px;
            color: #dc3545;
            font-size: 13px;
            padding: 0px 0px;
            line-height: 22px;
            font-weight: 700;
        }
        .cld_formBox input:focus ~ label.error,
        .cld_formBox input:valid ~ label.error,
        .cld_formBox textarea:focus ~ label.error,
        .cld_formBox textarea:valid ~ label.error {
            position: relative;
            left: 0;
            float: left;
            top: 3px;
            color: #dc3545 !important;
            font-size: 13px;
            padding: 0px 0px;
            line-height: 22px;
            font-weight: 700;
        }
        input.error, input.error_field {
            border-color: #dc3545 !important;
        }
        .cld_formBox input.error:focus  {
            border-color: #dc3545 !important;
        }
        .prof_phoneNum input:focus ~ .error_field {
            border-color: #dc3545 !important
        }



        .prof_phoneNum input:valid ~ label {
            left: 10px;
        }
        #phone-error {
            position: absolute;
            bottom: 0;
            top: 68px;
        }

    </style>
@stop

@section('advertiser_js')
    @include('advertiser.modules.users.js.index')
@stop