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

        <div class="row">

            <div class="col-lg-12 m-auto">
            <h6 class="mb-3 text-uppercase main_title_page">My Profile</h6>
                <div class="card main_card">
                    <div class="card-body 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" 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">
                                  <img src="{{ asset('admin/assets/images/main_img/camera.svg') }}" class="cursor" width="25px" height="25px" >
                                  <input id="inputTag" type="file"  accept="image/*" name='image' style="display: none"/>
                                  <br/>
                                </label>
                              </div>
                              <div class="col">
                                <button class="btn primary mt-3">{{ __('labels.Save') }}</button>
                            </div>
                            </form>
                            <div class="mt-3 d-flex  align-items-center">
                                <button type="button" class="border-0 bg-transparent" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                    <img src="{{ asset('admin/assets/images/main_img/edit.svg') }}"  class="mx-2 cursor" width="25px" height="25px" >
                                </button>
                                <p class="user_name mb-1 mx-2">{{ $data->name }}</p>
                            </div>
                        </div>
                        <div class="line w-50 mb-2 d-block m-auto"></div>
                        <div class="text-center main_card">
                            <li class="sub_name">
                                <span>{{ $data->email }}</span>
                                <img src="{{ asset('admin/assets/images/main_img/mail.svg') }}"  class="mx-2 cursor" width="15px" height="15px" >
                            </li>
                        </div>
                        <div class="text-center main_card">
                            <li class="sub_name">
                                <span>{{ $data->type }}</span>
                                <img src="{{ asset('admin/assets/images/main_img/operator.svg') }}"  class="mx-2 cursor" width="15px" height="15px" >
                            </li>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <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="modal-header border-0">
                                            <h5 class="modal-title" id="exampleModalLabel">Edit Name</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                                <div class="">
                                                    <label for="exampleFormControlInput1" class="form-label">{{ __('labels.Name') }}</label>
                                                    <input type="text" class="form-control" name="name" value="{{$data->name}}" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" />
                                                </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>
                                        <div class="modal-footer border-0 d-flex align-items-center justify-content-center">
                                            <button type="button" class="btn cancel" data-bs-dismiss="modal">Close</button>
                                            <button type="submit" class="btn primary">{{ __('labels.update') }}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </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