@extends('layouts.app')

<!-- Main Content -->
@section('content')
<!-- Main content -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success panel-border">
                <div class="panel-heading">
                    <h3 class="panel-title"> User Profile</h3>
                </div>
                <div class="panel-body">
                    @if ($errors->has('avatar'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ $errors->first('avatar') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="color:white !important; padding:1px 24px 0px !important;">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if(session('message'))
                        <div class="alert alert-dismissible fade show" role="alert" style="background-color: #1667ad !important; border-color: #1667ad !important; color:white !important; padding: 8px !important;">
                            {{ session('message') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="color:white !important; padding:1px 24px 0px !important;">
                                <span aria-hidden="true" >&times;</span>
                            </button>
                        </div>
                    @endif

                    <form action="{{route('user.update_profile')}}" method="post" id="user_form" enctype="multipart/form-data">
                       @csrf
                        <div class="col-md-6 form-horizontal">
                            <div class="form-group">
                                <input type="text" name="id" value="{{$user->id}}" hidden>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">First Name <span style="color:red;">*</span></label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="FirstName" class="form-control" value="{{!empty($user->FirstName) ? $user->FirstName : ''}}"
                                     required
                                    data-parsley-required="true"
                                    data-parsley-required-message="First Name is required.">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">Last Name <span style="color:red;">*</span></label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="LastName" class="form-control" value="{{ !empty($user->LastName) ? $user->LastName : ''}}"
                                     required
                                    data-parsley-required="true"
                                    data-parsley-required-message="Last Name is required.">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">Address</label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="Address" class="form-control" value="{{ !empty($user->Address) ? $user->Address : '' }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">ZipCode</label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="PostalCode" class="form-control" value="{{!empty($user->PostalCode) ? $user->PostalCode : ''}}">
                                </div>
                            </div>

                            @if(auth()->user()->role->name !== 'Customers' || $user->user_type !== 'CUSTOMER')
                            @if(!\Auth::user()->is_super)
                                <div class="form-group">
                                    <label class="col-lg-6 col-md-6 col-sm-6 control-label">Business Name</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                        <input type="text" name="BusinessName" class="form-control" value="{{ !empty($user->BusinessName) ? $user->BusinessName : ''}}" readonly>
                                    </div>
                                </div>
                            @endif
                            @endif
                            <div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">Title</label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="Title" class="form-control" value="{{!empty($user->Title) ? $user->Title  :''}}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">Mobile</label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="Work" class="form-control phone" value="{{ !empty($user->Work) ? $user->Work : ''}}" data-parsley-pattern-message="Please enter a valid phone number." data-parsley-pattern="^\d{3}-\d{3}-\d{4}$">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">Home</label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="Home" class="form-control phone" value="{{!empty($user->Home) ? $user->Home : ''}}" data-parsley-pattern-message="Please enter a valid phone number." data-parsley-pattern="^\d{3}-\d{3}-\d{4}$">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">Cell</label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="Mobile" class="form-control phone" value="{{!empty($user->Mobile) ? $user->Mobile : ''}}" data-parsley-pattern-message="Please enter a valid phone number." data-parsley-pattern="^\d{3}-\d{3}-\d{4}$">
                                </div>
                            </div>
                            {{--<div class="form-group">
                                <label class="col-lg-6 col-md-6 col-sm-6 control-label">Fax</label>
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <input type="text" name="Fax" class="form-control phone" value="{{!empty($user->Fax) ? $user->Fax : ''}}" data-parsley-pattern-message="Please enter a valid phone number." data-parsley-pattern="^\d{3}-\d{3}-\d{4}$">
                                </div>
                            </div>--}}
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="text-center">
                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-new thumbnail img-file">
                                            @if($user->Photo && $user->photo_temporary_url)
                                            <img
                                            src="{{ $user->photo_temporary_url }}"
                                            id="imagePreview"
                                            alt="User Photo"
                                            style="width:128px; height: 128px; object-fit: contain; image-rendering: auto;"
                                            >
                                                {{--<img src="{{ $user->photo_temporary_url }}" id="imagePreview" width="115" class="img-responsive" height="128" alt="User Photo" style="width: 128px !important;height: 128px !important;">--}}
                                                {{--<img src="{{ $user->photo_temporary_url }}" id="imagePreview" width="115" class="img-responsive" height="128" alt="User Photo" style="width: 128px !important;height: 128px !important;">--}}
                                            @else
                                                <img src="{{ asset('img/users/icon/user_1.png') }}" id="imagePreview" width="115" class="img-responsive" height="128" alt="Add Photo" style="width: 128px !important;height: 128px !important;">
                                            @endif
                                        </div>
                                        <div class="fileinput-preview fileinput-exists thumbnail img-max" style="max-height: 150px; max-width: 200px;"> </div>
                                        <div>
                                            <span class="btn btn-default btn-file">
                                                <span class="fileinput-new">Select image</span>
                                                <span class="fileinput-exists">Change</span>
                                                <input type="file" name="avatar" id="avatarInput" accept="image/*">
                                            </span>
                                            <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                                            <input type="text" name="edit_file_name" hidden value="{{ $user->Photo }}">
                                            <p>
                                                <span class="text-danger" id="validationFileSize"></span>
                                            </p>
                                            <p>
                                                <span class="">Note: Image size should be less than 2 MB.</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-5"></div>
                                <div class="col-md-2" style="padding-right: 0px;">
                                    <button class="btn btn-success" style="width:100%;">Save</button>
                                </div>
                                <div class="col-md-5"></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<!-- end of page level js -->
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $('.phone').mask('999-999-9999');

        $('#user_form').parsley();

        $('#avatarInput').on('change', function(event) {
            const file = event.target.files[0];
            const maxSizeInBytes = 2 * 1024 * 1024;
            const reader = new FileReader();
            if (file) {
                if (file.size > maxSizeInBytes) {
                    $('#validationFileSize').html('File size cannot be greater than 2 MB.');
                    //$('#avatarInput').val('');
                    $('#imagePreview').attr('src', '{{ asset('img/users/icon/user_1.png') }}');
                    return;
                }
                reader.onload = function(e) {
                    $('#validationFileSize').html('');
                    $('#imagePreview').attr('src', e.target.result);
                };
                reader.readAsDataURL(file); // Read the file as a data URL
            } else {
                $('#validationFileSize').html('');
                $('#imagePreview').attr('src', '{{ asset('img/users/icon/user_1.png') }}');
            }
        });
    });
</script>

@endsection