@extends('layouts.app')
@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="px-sm-4">
                <div class="row mt-3">
                    <div class="col-md-6 col-8 mb-sm-0 mb-2">
                        <div class="titlepad">
                            <h4>Profile</h4>
                        </div>
                    </div>
                    <div class="col-md-6 col-4 text-right">
                        <p class="back-text"><a href="javascript:;" onclick="window.history.back()"><i class="fa fa-angle-left" aria-hidden="true"></i> Back</a>
                        </p>
                    </div>
                </div>
                @if(auth()->user()->hasRole(\App\Helpers\ConstantHelper::SUPER_ADMIN))
                <form class="form" role="post-data-job" method="POST"  redirect="/admin/profile" action="/admin/profile" enctype="multipart/form-data">
                @else
                <form class="form" role="post-data-job" method="POST"  redirect="/{{$workspaceAlias}}/profile" action="/{{$workspaceAlias}}/profile" enctype="multipart/form-data">
                @endif
                    <div class="row mt-3">
                        <div class="col-xl-4">
                            <div class="card mb-4">
                                <div class="card-header">Profile</div>
                                <div class="card-body text-center">
                                    {{-- @dd($user->profile_image_url) --}}
                                    <img height="200" width="200" class="img-account-profile rounded-circle" src="{{$user->profile_image_url}}" onerror="this.src='{{asset('assets/img/default-user.jpeg')}}'" alt="">
                                    {{-- <div class="small font-italic text-muted mt-2">Workspace Logo</div> --}}
                                    
                                    <div class="form-group mt-3">
                                        <label for="imageUpload" class="btn creat-btn">Upload</label>
                                        <input type="file" name="profile_image" class="form-control-file" id="imageUpload" style="display: none;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8">
                            <div class="card mb-4">
                                <div class="card-header">Account Details</div>
                                <div class="card-body">
                                   <div class="row gx-3 mb-3">
                                      <div class="col-md-6"> <label class="small mb-1" for="first_name">First name</label> <input name="first_name" class="form-control course-input" id="first_name" type="text" placeholder="Enter your first name" value="{{old('first_name') ?? $user->first_name}}"></div>
                                      <div class="col-md-6"> <label class="small mb-1" for="last_name">Last name</label> <input name="last_name" class="form-control course-input" id="last_name" type="text" placeholder="Enter your last name" value="{{old('last_name') ?? $user->last_name}}"></div>
                                   </div>
                                   <div class="row gx-3 mb-3">
                                      <div class="col-md-6"> <label class="small mb-1" for="email">Email</label> <input disabled name="email" class="form-control course-input" id="email" value="{{$user->email}}"></div>
                                      <div class="col-md-6"> <label class="small mb-1" for="mobile">Phone</label> <input name="mobile" class="form-control course-input" id="mobile" type="text" placeholder="Enter your mobile" value="{{$user->mobile}}"></div>
                                   </div>
                                   @if($user->hasRole(\App\Helpers\ConstantHelper::COLLEGE_ADMIN) || $user->hasRole(\App\Helpers\ConstantHelper::CORPORATE_ADMIN))
                                   <div class="row gx-3 mb-3">
                                      <div class="col-md-12"> <label class="small mb-1" for="workspace_name">Workspace name</label> <input name="workspace_name" class="form-control course-input" id="workspace_name" type="text" placeholder="Enter your Workspace name" value="{{old('workspace_name') ?? $user->currentWorkspace()->workspace_name}}"></div>
                                      {{-- <div class="col-md-6"> <label class="small mb-1" for="location">Location</label> <input class="form-control course-input" id="location" type="text" placeholder="Enter your organization name" value="Start Bootstrap"></div> --}}
                                   </div>
                                   <div class="row gx-3 mb-3">
                                        <div class="col-md-12">
                                        <label class="small mb-1" for="workspace_name">Workspace logo</label>
                                        <input type="file" name="workspace_logo"
                                            class="form-control course-input" accept="image/*"
                                            placeholder="You can drag and drop the logo from your files here...">

                                        </div>
                                        <label class="label d-none" id="file_error"><strong class="error-message text-danger">Please upload an image in JPG, PNG, GIF, WEBP format.</strong></label>
                                        <div class="row mt-3 {{$user->currentWorkspace()->workspace_logo ? '' : 'd-none'}}" id="upload_logo">
                                            <div class="col-md-12 col-6">
                                                <div class="upload-imgbox text-center">
                                                    <img src="{{ $user->currentWorkspace()->workspace_logo }}" class="user-uploadpic"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>
                                   </div>
                                   @endif
                                   <button type="button" class="btn creat-btn" data-request="ajax-submit" data-target="[role=post-data-job]">Update</button>
                                </div>
                            </div>
                        </div>
                    </div>                    
                </form>
            </div>
        </div>
    </section>
@endsection
@section('scripts')
<script>
/*Workspace Logo Preview file*/
$(document).on('change', '[name="workspace_logo"]', function() {
const fileInput = this;
const uploadLogoDiv = $('#upload_logo');
const allowedFormats = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
if (fileInput.files[0]) {
    if (!allowedFormats.includes(fileInput.files[0].type)) {
        $('#file_error').removeClass('d-none');
        uploadLogoDiv.addClass('d-none');
        $(this).val('');
        return false;
    } else {
        $('#file_error').addClass('d-none');
    }
}
const previewImg = uploadLogoDiv.find('.user-uploadpic');
if (fileInput.files && fileInput.files[0]) {
    console.log("dd",previewImg);
    previewImg.attr('src', URL.createObjectURL(fileInput.files[0]));
    uploadLogoDiv.removeClass('d-none');
} else {
    uploadLogoDiv.addClass('d-none');
    previewImg.attr('src', "{{ asset('assets/img/upload-img.svg') }}");
}
});

/*User Profile Preview*/
$(document).on('change','#imageUpload',(e) => {
    previewImage(e.target);
});
function previewImage(input) {
    let preview = document.querySelector('.img-account-profile');
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            preview.src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection