@extends('superadmin::layouts.master')

@section('title', __('Update Profile'))

@section('extra-styles')
    <link href="{{ url('assets/css/plugins/imageUpload/style.css') }}" rel="stylesheet">
    <style>
        .file-upload {
            display: none;
        }
        .fa-camera{
            color: #188f7d !important;
            font-size: 40px !important;
        }
        .upload-button {
            font-size: 1.2em;
            cursor: pointer;
        }

        .upload-button:hover {
            transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
        }

        .profile-container {
            position: relative;
            width: 100%;
        }
        .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            opacity: 0;
            background-color: #a6a5a5c7;
            border-radius: 50%;
            width: 150px;
            height: 150px;
            margin-left: auto;
            margin-right: auto;
            right: 50%;
            transform: translateX(50%);
        }
        .profile-container:hover .overlay {
            opacity: 1;
        }
        .icon {
            color: white;
            font-size: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
@endsection

@section('content')
    <section id="horizontal-form-layouts">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body collapse in">
                    <!-- ADD MESSAGES FOR SUCCESS AND ERROR -->
                    <!-- END MESSAGE-->
                    <div class="add-form-section card-block filter-section-collapse">
                        <form action="{{ route('profile.update') }}" method="POST" class="form form-horizontal" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                        <div class="row">
                            <div class="col-lg-8  col-md-9 col-xs-12">
                                <div class="col-md-12 form-body">
                                    <h4 class="form-section"><i class="ft-user"></i>
                                        @lang('superadmin::Profile.superadmin profile')</h4>
                                    <div class="form-group row">
                                        <label for="uname" class="col-md-3 trol">@lang('superadmin::Profile.username')</label>
                                        <div class="col-md-9">
                                            <input type="text" name="uname" value="{{ $profile->uname }}" class="form-control">
                                            @error('uname')
                                            <span class="invalid-feedback text text-danger" role="alert">
                                                <p>{{ $message }}</p>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="email" class="col-md-3 trol">@lang('superadmin::Profile.email')</label>
                                        <div class="col-md-9">
                                            <input type="text" name="email" value="{{ $profile->email }}" class="form-control">
                                            @error('email')
                                            <span class="invalid-feedback text text-danger" role="alert">
                                                <p>{{ $message }}</p>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                            <label for="name" class="col-md-3 form-control-label">
                                                @lang('superadmin::User.mobile') <span class="text-danger">*</span>
                                            </label>

                                            @if(Lang::locale() == 'ar')
                                                <div class="col-md-6 locale-padding">
                                                    <input id="name" type="text" class="form-control hideArrow  @error('mobile') is-invalid @enderror"
                                                           name="mobile"  value="{{old('mobile', $profile->mobile)}}" autofocus=""
                                                           data-msg-required="Please enter mobile">
                                                    @error('mobile')
                                                    <span class="invalid-feedback" role="alert">
                                                    <p>{{ $message }}</p>
                                                </span>
                                                    @enderror
                                                </div>
                                                <div class="col-md-3">
                                                    @include('superadmin::includes.selectCountry', ['user' => $profile])
                                                    @error('country_code')
                                                    <span class="invalid-feedback" role="alert">
                                                    <p>{{ $message }}</p>
                                                </span>
                                                    @enderror
                                                </div>
                                            @else
                                                <div class="col-md-3">
                                                    @include('superadmin::includes.selectCountry' ,['user' => $profile])
                                                    @error('country_code')
                                                    <span class="invalid-feedback" role="alert">
                                                    <p>{{ $message }}</p>
                                                </span>
                                                    @enderror
                                                </div>

                                                <div class="col-md-6 locale-padding">
                                                    <input id="name" type="text" class="form-control hideArrow  @error('mobile') is-invalid @enderror"
                                                           name="mobile"  value="{{old('mobile', $profile->mobile)}}" autofocus=""
                                                           data-msg-required="Please enter mobile">
                                                    @error('mobile')
                                                    <span class="invalid-feedback" role="alert">
                                                    <p>{{ $message }}</p>
                                                </span>
                                                    @enderror
                                                </div>
                                            @endif
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 trol"
                                            for="projectinput3">@lang('superadmin::Profile.preferred language')</label>
                                        <div class="col-md-9">
                                            @php
                                                $userSelectedLanguage = optional($profile->userConfigurations->firstWhere('key', 'preferred_language'))['value'] ?? 'ar';
                                            @endphp
                                            <select name="configurations[preferred_language]" id="preferedLanguage" style="width: 100%;" class="form-control select2 select2-hidden-accessible @if($errors->has('configurations[preferred_language]')) is-invalid @endif" tabindex="-1" aria-hidden="true">
                                                @forelse($lanuages as $key => $language)
                                                    <option @if($userSelectedLanguage == $key) selected @endif value="{{ $key }}">{{ $language }}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-3 col-xs-12">
                                <div class="form-group row mb-1">
                                    <div class="col-md-3"></div>
                                    <div class="col-md-9 profile-container">
                                        <div id='img_contain' class="img_wrp">
                                            @if($profile->img)
                                                <button type="button" class="close remove-img-btn" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            @endif
                                            <img id="blah" align='middle' class="border-left-info border-bottom-info"
                                                 style="border-radius: 50%; width: 150px; height: 150px;"
                                                 src="{{old_input($profile, 'img', $errors->has('img') ) ?? asset('/assets/images/portrait/small/avatar.png') }}"
                                                 title=''  />

                                        </div>

                                        <div class="img_wrp deafult-img-after-delete d-none">
                                            {{--default image to show when user remove current image  --}}
                                            <img id="blah" align='middle' class="border-left-info border-bottom-info"
                                                 style="border-radius: 50%; width: 150px; height: 150px;"
                                                 src="{{ asset('/assets/images/portrait/small/avatar.png') }}"
                                                 title=''  />
                                            {{-- enable this button by js to be sent with request when user click on
                                                x icon to remove the image  --}}
                                            <input type="hidden" disabled name="delete_img" value="1" id="delete_flag">
                                        </div>
                                        <div class="overlay">
                                            <label for="inputGroupFile01"
                                                   class="icon"><i class="fa fa-camera upload-button"></i></label>
                                            <input id="inputGroupFile01" aria-describedby="inputGroupFileAddon01"
                                                   name="img" class="file-upload"
                                                   title="{{__('no file chosen')}}" type="file" accept="image/png, image/jpeg, image/jpg"/>
                                        </div>
                                        <label class="col-sm-12 text-center p-0" style="color:#e86321!important">{{__('superadmin::Profile.max_upload_msg')}}</label>
                                        @error('img')
                                            <br><br>
                                            <span class="col-sm-12 text-center p-0 invalid-feedback text text-danger" role="alert">
                                                <p>{{$message}}</p>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions  text-xs-center mt-0">
                            <a href="{{route('dashboard-home')}}" class="btn btn-warning mr-1 btnWidth text-white small-screen-profle-style">
                                    @lang('Cancel')
                            </a>
                            <button type="submit" class="btn btn-primary btnWidth">
                                    <i class="fa fa-check-square-o"></i>  @lang('Save')
                            </button>

                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('extra_scripts')
    <script src="{{ url('assets/js/plugins/imageUpload/script.js') }}" defer></script>

    <script>
        window.addEventListener('DOMContentLoaded', function() {
            (function($) {

                $(document).on('click',".remove-img-btn" ,function() {
                    // remove parent div that contains current image
                    $(this).closest("#img_contain" ).remove();
                    // empty file input value if exist ( to handle the scnario if user changed current image then clicked on x icon)
                    $('#inputGroupFile01').val('');
                    // show the other div that contains the default image and deosn't have x icon
                    $('.deafult-img-after-delete').removeClass("d-none");
                    // enable delete current image flag to delete current image from disk and database
                    $('#delete_flag').removeAttr('disabled');
                });

            })(jQuery);
        });
    </script>
@endsection