@extends('Dashboard.layouts.app')
@section('style')


    <!-- dropzone css -->
    <link rel="stylesheet" href="{{ asset('assets/libs/dropzone/dropzone.css') }}" type="text/css" />
@endsection
@section('main_content')

    <div class="page-content">
        <div class="container-fluid">

           <div class="row">
               <div class="col-md-7 ">
                  <div class="card">

                      <div class="card-body" >
                          <form action="{{ route('user.update',$user->id) }}" method="post" enctype="multipart/form-data" class="">
                              @csrf @method('PUT')
                             <div class="text-center ">
                                 <img onclick="document.getElementById('photo').click()" id="previewPhoto" src="{{ $user->photo ?? 'https://cdn3d.iconscout.com/3d/premium/thumb/it-worker-male-7267559-5914549.png' }}"  width="200" height="200" class="rounded-circle " alt="">
                                 <input id="photo" type="file" onchange="changeImg()" name="photo" hidden>
                                 <h3 class="text-center fw-bolder mt-4  ">Edit Profile</h3>
                             </div>
                              <div class="mb-3 ">
                                  <label for="basiInput" class="form-label">Name</label>
                                  <input type="text" class="form-control" name="name" id="name" value="{{ $user->name }}">
                              </div>
                              <div class="mb-3 ">
                                  <label for="basiInput" class="form-label">Email</label>
                                  <input type="email" class="form-control" name="email" id="email" value="{{ $user->email }}">
                              </div>
                              <div class="mb-3 ">
                                  <label for="basiInput" class="form-label">Phone</label>
                                  <input type="text" class="form-control" name="phone" id="phone" value="{{ $user->phone }}">
                              </div>
                              <div class="mb-3 ">
                                  <label for="basiInput" class="form-label">Password</label>
                                  <input type="password" class="form-control" name="password" id="password" placeholder="****">
                              </div>


                              <div class="d-flex justify-content-end">
                                  <button class="btn btn-danger ">SUBMIT</button>
                              </div>
                          </form>
                      </div>
                  </div>
               </div>
               <div class="col-md-5">
                   <div class="card">
                       <div class="card-body" >
                           <h3 class="fw-bold mb-5 text-center"> Information</h3>
                           <form action="{{ route('user.detail') }}" method="post" class="">
                               @csrf

                               <div class="mb-3 ">
                                   <label for="messager_id" class="form-label">Messager ID</label>
                                   <input type="text" class="form-control" name="messager_id" id="messager_id" value="{{ \Illuminate\Support\Facades\Auth::user()->detail->messager_id ?? '' }}">
                               </div>
                               <div class="mb-3 ">
                                   <label for="page_id" class="form-label">Page ID</label>
                                   <input type="text" class="form-control" name="page_id" id="page_id" value="{{ \Illuminate\Support\Facades\Auth::user()->detail->page_id ?? '' }}">
                               </div>
                               <div class="mb-3 ">
                                   <label for="address" class="form-label">Address</label>
                                   <input type="text" class="form-control" name="address" id="address" value="{{ \Illuminate\Support\Facades\Auth::user()->detail->address ?? '' }}">
                               </div>


                               <div class="d-flex justify-content-end">
                                   <button class="btn btn-danger ">SUBMIT</button>
                               </div>
                           </form>
                       </div>
                   </div>
               </div>
           </div>
        </div>
        <!-- container-fluid -->
    </div>

@endsection

@section('script')
    <!-- dropzone min -->
{{--    <script src="{{ asset('assets/libs/dropzone/dropzone-min.js') }}"></script>--}}

    <script>

        function changeImg()
        {
            let previewImg = document.getElementById('previewPhoto');
            let file = document.getElementById('photo').files[0];
            let fileReader = new FileReader();

            fileReader.addEventListener("load",function (){
                console.log(fileReader.result);
                previewImg.src = fileReader.result;
            },false);

            if (file) {
                fileReader.readAsDataURL(file);
            }
        }
    </script>

@endsection