@extends('user.layouts.app-newui')

@section('content')
@php 
    $allow_image_ext = collect(config('common.allow_image_ext'))->implode(', ');
    $upload_image_ext = collect(config('common.allow_image_ext'))->implode('|');
    $upload_img_size = config("common.upload_img_size");
    $allowed_img_size = config("common.upload_img_size")*1024;
    $countries_phone_code = $data['countries_phone_code'];
    $profile_info = $data['profile_info'];
@endphp
<div class="main-card">
    <h1 class="text-center mb-5 page_title">My Profile</h1> 

    <div class="popup-body1 p-4 mb-5">
 
        <ul class="nav nav-tabs mb-4" role="tablist">

            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tb-details">
                    Details
                </button>
            </li>
            
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tb-password">
                    Password
                </button>
            </li>  
        </ul>
   
        <div class="tab-content text-start">

            <!-- DETAILS TAB -->
            <div class="tab-pane fade show active" id="tb-details">

                <form id="editProfileFrm" name="editProfileFrm">
		    <input type="hidden" name="action" value="editProfile"/>
                    <div class="row g-4 align-items-start">

                        <!-- Profile Upload -->
                        <div class="col-md-4">
                            <div class="profile-upload-wrapper">
				<div class="profile-upload-box">
                                     <img
					src="{{ $profile_photo_200x }}"
					id="profilePreview"
					class="profile-preview-img avatar-md"
					alt="Profile Picture">
					<a href="javascript:void(0);" id="editProfilePhoto" class="change-photo-btn">
					    <i class="fa fa-camera"></i> Change Photo
					</a>	
                                </div>

<!--                                <input
                                    type="file"
                                    id="profile_picture"
                                    name="profile_picture"
                                    class="d-none"
                                    accept=".jpg,.jpeg,.png">-->
                            </div>
			    <div id="crop-container" style="display:none"></div> 
                        </div>
			
                        <!-- Instructions -->
                        <div class="col-md-8">

                            <div class="upload-instruction">

                                <h6 class="mb-3 fw-bold">
                                    <i class="fa fa-info-circle text-info"></i>
                                    Instructions
                                </h6>

                                <ul class="mb-0 ps-3">
                                    <li>
                                        Upload a professional and friendly photo where your face is clearly visible.
                                    </li>

                                    <li>
                                        Supported formats: JPG, JPEG, PNG
                                    </li>

                                    <li>
                                        Maximum image size: 2MB
                                    </li>
                                </ul>

                            </div>

                        </div>

                    </div>

                    <hr class="my-5">

                    <!-- First & Last Name -->
                    <div class="row g-4">

                        <div class="col-md-6">
                            <label class="form-label">
                                First Name <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="first_name"
                                   class="form-control"
                                   value="{{ @$user->first_name }}"
                                   placeholder="First Name"
                                   required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">
                                Last Name <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="last_name"
                                   class="form-control"
                                   value="{{ @$user->last_name }}"
                                   placeholder="Last Name"
                                   required>
                        </div>

                    </div>

                    <!-- Phone & Email -->
                    <div class="row g-4 mt-1">

                        <div class="col-md-6">

                            <label class="form-label">
                                Phone Number <span class="text-danger">*</span>
                            </label>

                            <div class="row g-2">

                                <div class="col-4">
                                    <select name="country_phone_code"
                                            class="form-select"
                                            required>
                                        <option value="">Code</option>
					@foreach($countries_phone_code as $code)
					    <option value="{{ $code }}" @if($code == $profile_info->country_phone_code) selected="selected" @endif>{{ $code }}</option>						@endforeach    
                                    </select>
                                </div>

                                <div class="col-8">
                                    <input type="text"
                                           name="phone_number"
                                           class="form-control mask_ein"
                                           value="{{ $profile_info->phone_number }}"
                                           placeholder="Phone Number"
                                           required>
                                </div>

                            </div>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Email Address <span class="text-danger">*</span>
                            </label>

                            <input type="email"
                                   name="email"
                                   class="form-control"
                                   value="{{ @$user->email ?? $profile_info->email }}"
                                   {{ !empty($user->email) ? 'readonly' : '' }}
                                   placeholder="Email Address"
                                   required>

                        </div>

                    </div>

                    <!-- Secondary Email & Timezone -->
                    <div class="row g-4 mt-1">

                        <div class="col-md-6">

                            <label class="form-label">
                                Secondary Email Address
                            </label>

                            <input type="email"
                                   name="secondary_email"
                                   class="form-control"
                                   placeholder="Secondary Email Address"
				    value="{{$profile_info->secondary_email}}" >

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Timezone <span class="text-danger">*</span>
                            </label>
			     <select name="timezone" class="form-select" required>
				<option value="">-- Select Timezone --</option>
				    @foreach($timezones as $zone)
					<option value="{{ $zone->zone_id }}" @if($zone->zone_id == $profile_info->timezone) selected="selected" @endif>{{ $zone->zone_label }}</option>                                       @endforeach
			    </select> 
			    <div class="help-block with-errors">
				@if ($errors->has('timezone')){{ $errors->first('timezone') }}@endif
			    </div>
			    <div class="form-control-feedback"></div>
                        </div>

                    </div>

                    <!-- Street & City -->
                    <div class="row g-4 mt-1">

                        <div class="col-md-6">

                            <label class="form-label">
                                Street <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="street"
                                   class="form-control"
                                   placeholder="Street" value="{{ $profile_info->street }}">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                City <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="city"
                                   class="form-control"
                                   placeholder="City" value="{{ $profile_info->city }}">

                        </div>

                    </div>

                    <!-- Zip -->
                    <div class="row g-4 mt-1">

                        <div class="col-md-6">

                            <label class="form-label">
                                Zip Code <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="zip_code"
                                   class="form-control"
                                   placeholder="Zip Code" value="{{ $profile_info->zip_code }}">

                        </div>

                    </div>

                    <!-- Button -->
                    <div class="row mt-4">

                        <div class="col-md-12">
                            <button type="submit" name="editProfile-btn" id="editProfile-btn" class="btn btn-info px-4">
                                Save Details
                            </button>
			</div>

                    </div>

                </form>

            </div>

            <!-- PASSWORD TAB -->
            <div class="tab-pane fade" id="tb-password">

                <form id="changePasswordFrm" name="changePasswordFrm" class="">
		    <input type="hidden" name="action" value="changePassword"/> 
                    <div class="row g-4 align-items-start">

                        <!-- Password Fields -->
                        <div class="col-md-6">

                            <div class="row g-4">

                                <div class="col-md-12">

                                    <label class="form-label">
                                        Current Password
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="password" name="current_password"
                                           class="form-control" data-equals="nowhitespace"
                                           placeholder="Current Password" required>

                                </div>

                                <div class="col-md-12">

                                    <label class="form-label">
                                        New Password
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="password" name="new_password"
                                           class="form-control" data-equals="nowhitespace"
                                           placeholder="New Password" required>

                                </div>

                                <div class="col-md-12">

                                    <label class="form-label">
                                        Confirm New Password
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="password" name="new_confirm_password"
                                           class="form-control" data-equals="nowhitespace" data-match-error="Whoops, these don't match"
                                           placeholder="Confirm New Password" required>
                                     
                                </div>

                                <div class="col-md-12">

                                    <button type="submit" id="changePassword-btn" name="changePassword-btn" class="btn btn-info px-4">
                                        Change Password
                                    </button>

                                </div>

                            </div>

                        </div>

                        <!-- Instructions -->
                        <div class="col-md-6">

                            <div class="upload-instruction">

                                <h6 class="mb-3 fw-bold">
                                    <i class="fa fa-info-circle text-info"></i>
                                    Password Hint
                                </h6>
                                <p>Please remember to choose a secure password. It should have:</p>
                                <ul class="mb-0 ps-3">
                                    <li>No white space</li>
                                    <li>Min length 6 characters</li>
                                    <li>One digit</li>
                                </ul>

                            </div>

                        </div>

                    </div>

                </form>

            </div>

        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    $(".mask_ein").inputmask("999999999999");  //static mask
    ajaxFormValidator("#editProfileFrm", updateProfile);
    ajaxFormValidator("#changePasswordFrm", updateProfile);
});
function updateProfile(element){
    
    var formId = $(element).attr("id"); 
    var formID = $("#"+formId).serialize();
    var btn_ele = $(element).find('button[type="submit"]');
    var btn_name = $(btn_ele).html();
    btnLoader(btn_ele);
    
    $.ajax({
        type: 'post',
        url: "{{ route('update.profile-newui') }}",
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data: formID,
        dataType: 'json',
        success: function(response) { 
            btnLoader(btn_ele,'hide',btn_name);
            /* remove success box after display success message */
            var $has_success = $("#"+formId).find('.form-group'); 
            $has_success.removeClass('has-success');

            var $right_tick = $("#"+formId).find('.form-control-feedback');
            $right_tick.removeClass('form-control-feedback fa fa-check'); 
            if(response.type=='success')
            {   
                if(formId == "changePasswordFrm"){
                    $("#"+formId).trigger("reset");
                }
                var Html = '<div class="alert swl-alert-success"><ul><li>'+ response.message+ '</li></ul></div>'; 
                notifyResponseTimerAlert(Html,'','<div class="custom-success-icon"><i class="fa fa-check-square custom-check-square"></i></div>Success!',3000);
                if(response.redirectURL){
                    setTimeout(function(){
                        window.location.href= response.redirectURL;
                    }, 1500);
                }
                
            }else{
                var Html = '<div class="alert swl-alert-danger"><ul>'; 
                $.each( response.message, function( key, value ) {
                    Html += '<li>' + value+ '</li>';  
                });
                Html += '</ul></div>';  
                notifyResponseTimerAlert(Html,"","<div class='custom-danger-icon'><i class='fa fa-solid fa-times custom-check-square'></i></div>Error!",3000);
            }
        }
    }); 
}
 /** Profile picture cropping and update IT **/
var eyeCandy = $('#crop-container');
var croppedOptions = {
    rotateControls: false,
    cropUrl: '{{ route("crop") }}', 
    cropData: { 
        'width' : eyeCandy.width(),
        'height': eyeCandy.height()
    },
    modal: true,
    customUploadButtonId : 'editProfilePhoto',
    loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div>',
    processInline:true,
    onBeforeImgUpload: function (){
        var that = this;
        if ( /\.({{$upload_image_ext}})$/i.test(that.form.find("input[type=file]")[0].files[0].name) === false ) { 
            notifyResponseTimerAlert("Profile Picture must be a file of type: {{$allow_image_ext}}.","","<div class='custom-danger-icon'><i class='fa fa-solid fa-times custom-check-square'></i></div>Error!"); 
            $("#editProfilePhoto .loader").remove();
            setTimeout( function(){ that.reset(); },100);
            return;
        } 
        var FileSize = Math.round(that.form.find("input[type=file]")[0].files[0].size / 1024);
        if (FileSize > {{$allowed_img_size}}) {
            notifyResponseTimerAlert("Profile Picture must be below {{$upload_img_size}} MB.","","<div class='custom-danger-icon'><i class='fa fa-solid fa-times custom-check-square'></i></div>Error!"); 
            $("#editProfilePhoto .loader").remove();
            var is_chrome = /chrome/i.test( navigator.userAgent );
            if(is_chrome)
            {
                setTimeout( function(){ that.reset(); },50);
            }else{
                $(".cropControlReset")[0].click();
            }
            return;
        } 
    },
    onAfterImgUpload: function (){
        $("#editProfilePhoto .loader").remove();
    },
    onError : function(){
        $("#editProfilePhoto .loader").remove();
    },
    onAfterImgCrop : function () {
        var that = this;
        $(".avatar-md").attr("src","{{url('assets/images/loader.gif')}}"); 
        $.ajax({
            url: '{{ route("avatar") }}',
            type: 'get',
            dataType: 'json', 
            success: function (response) { 
                if(response.type=='success')
                {  
                    var Html = '<div class="alert swl-alert-success"><ul><li>'+ response.message+ '</li></ul></div>'; 
                    notifyResponseTimerAlert(Html,"","<div class='custom-success-icon'><i class='fa fa-check-square custom-check-square'></i></div>Success!");
                    setTimeout(function(){ 
                        $(".avatar-md").attr("src",response.imgsrc);
                    }, 100); 
                    /*$( ".showResponseMesssage" ).html(Html);*/
                }
                else{ 
                    var Html = '<div class="alert swl-alert-danger"><ul>'; 
                    $.each( response.message, function( key, value ) { 
                        Html += '<li>' + value+ '</li>';  
                    });
                    Html += '</ul></div>';
                    notifyResponseTimerAlert(Html,"","<div class='custom-danger-icon'><i class='fa fa-solid fa-times custom-check-square'></i></div>Error!");
                    /*$( ".showResponseMesssage" ).html(Html); */
                }
                that.hideLoader();
                setTimeout( function(){ that.reset(); },100)
            },
            complete: function () {
            }
        });
    } 
};
var cropperBox = new Croppic('crop-container', croppedOptions);
/** Load Notification Switch **/
</script>
@endsection