@extends('layouts.'.'profile'.'.master')
@section('title')
    {{$title}}
@endsection
@section('content')
    <div class="page-wrapper">
        <div class="page-content m-2">
            @include('message')
            {{-- @include('breadcrumb') --}}

            <div class="row">

                <div class="col-lg-8 m-auto">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-column align-items-center text-center">
                                <img src="{{ asset(auth()->user()->photo) }}" style="width: 110px; height: 110px;"id="imageView" alt="photo" class="rounded-circle p-1 bg-primary" width="110">
                                <form action="{{route($modelName.'.update')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                                    @method('PUT')
                                    @csrf
                                    <div style="margin-left:70px; margin-top:-19px">
                                        <label for="inputTag" style="cursor:pointer">
                                            <i class="fa fa-2x fa-camera"></i>
                                            <input id="inputTag" type="file"  accept="image/*" name='image' style="display: none"/>
                                            <br/>
                                        </label>
                                    </div>
                                    <div class="col">
                                        <button class="btn btn-primary">{{ __('labels.Save') }}</button>
                                    </div>
                                </form>
                                <div class="mt-3">
                                    <p class="text-secondary mb-1">{{ $data->name }}</p>

                                </div>
                            </div>
                            <hr class="my-12" />
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe me-2 icon-inline"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>{{ __('labels.Email') }}</h6>
                                    <span class="text-secondary">{{ $data->email }}</span>
                                </li>
                            </ul>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg> {{ __('labels.User-level') }}</h6>
                                    <span class="text-secondary">{{ $data->type }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-lg-10 m-auto">
                    <div class="card">
                        <div class="card-body">
                            <div class="border p-3 rounded">
                                <form action="{{route($modelName.'.update')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                                    @method('PUT')
                                    @csrf
                                    <input type="hidden" name="id" value="{{auth()->user()->id}}">
                                    <div class="row mb-3">
                                        <div class="col-sm-2">
                                            <h6 class="mb-0">{{ __('labels.Name') }}</h6>
                                        </div>
                                        <div class="col-sm-10 text-secondary">
                                            <input type="text" class="form-control" name="name" value="{{$data->name}}" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" />
                                        </div>
                                    </div>
                                    {{-- <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">{{ __('labels.Email') }}</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <input type="text" class="form-control" name="email" value={{ $data->email }} />
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">{{ __('labels.Type') }}</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                            <input type="text" disabled class="form-control" name="type" value={{ $data->type }} />
                                        </div>
                                    </div> --}}

                                    <div class="mb-3 row">
                                        <div class="col-xl-9 mx-auto">
                                            {{-- <h6 class="mb-0 text-uppercase">{{ __('profile.attachments') }}</h6> --}}
                                            {{-- <small class="text-danger">* {{ __('profile.Attachments_are_of_image_type_only')}}</small>--}}
                                            <hr />
                                            {{-- <div class="card">
                                                <div class="card-body">
                                                    <input id="image-uploadify" name="image" type="file" accept="image/*">
                                                </div>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <button class="btn btn-success">{{ __('labels.update') }}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </div>
    <script>

        function InvalidMsg(textbox) {
            if (textbox.value == '') {
                textbox.setCustomValidity("{{ trans('messages.this field is required') }}");
            }
            else {
                textbox.setCustomValidity('');
            }
            return true;
        }
        let input = document.getElementById("inputTag");
        let imageName = document.getElementById("imageName")

        input.addEventListener("change", ()=>{
            let inputImage = document.querySelector("input[type=file]").files[0];
            let photo =document.getElementById("imageView")

            var reader = new FileReader();

            reader.onload = function (e) {
                $('#imageView').attr('src', e.target.result);
            }
            reader.readAsDataURL(inputImage);
            //console.log(inputImage.name);

        })

    </script>
@endsection