@extends('backend.admin-master')
@section('site-title')
    {{__('Dashboard')}}
@endsection
@section('content')
           <!-- Content wrapper -->
           <div class="content-wrapper">
            <!-- Content -->

            <div class="container-xxl flex-grow-1 container-p-y">
              <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">User /</span> Update Admin</h4>

              <div class="row">
                <div class="col-md-12">

                  <div class="card mb-4">
                    {{-- <h5 class="card-header">Profile Details</h5> --}}
                    <!-- Account -->
                <form id="formAccountSettings" method="POST" action="{{route('superadmin.admin_update')}}" method="POST" enctype="multipart/form-data">
                  @csrf
                  @method('PUT')
                  <input type="hidden" name="admin_id" value="">

                    <div class="card-body">
                      <div class="d-flex align-items-start align-items-sm-center gap-4">
                        <img
                          src="{{ asset('public/uploads/admin_profile/' . $admin_data->image) }}"
                          alt="user-avatar"
                          class="d-block rounded"
                          height="100"
                          width="100"
                          id="uploadedAvatar"
                        />
                        <div class="button-wrapper">
                          <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                            <span class="d-none d-sm-block">Upload new photo</span>
                            <i class="bx bx-upload d-block d-sm-none"></i>
                            <input
                              type="file"
                              id="upload"
                              class="account-file-input"
                              hidden
                              name="profilepic"
                              accept="image/png, image/jpeg"
                            />
                          </label>
                          <button type="reset" class="btn btn-outline-secondary account-image-reset mb-4" onclick="resetform();">
                            <i class="bx bx-reset d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">Reset</span>
                          </button>

                          <p class="text-muted mb-0">Allowed JPG, GIF or PNG. Max size of 800K</p>
                        </div>
                      </div>
                    </div>
                    <hr class="my-0" />
                    <div class="card-body">
                        <div class="row">
                          <div class="mb-3 col-md-12">
                          <div class="row">
                          <div class="mb-3 col-md-4">
                            <label for="firstName" class="form-label">Name<sup style="color:red;">*</sup></label>
                            <input
                              class="form-control"
                              type="text"
                              id="firstName"
                              placeholder=""
                              name="name"
                              value="{{$admin_data->name ?? old('name')}}"
                              autofocus
                              onkeyup="value=value.replace(/[^\a-\z\A-\Z ]/g,'')"
                            />
                          </div>
                        
                          <div class="mb-3 col-md-4">
                            <label for="email" class="form-label">E-mail<sup style="color:red;">*</sup></label>
                            <input
                              class="form-control"
                              type="text"
                              id="email"
                              name="email"
                              value="{{$admin_data->email ?? old('email')}}"
                              placeholder=""
                            />
                          </div>
                          <div class="mb-3 col-md-4">
                            <label for="language" class="form-label">Role<sup style="color:red;">*</sup></label>
                            <select id="role" class="select2 form-select telecaller_select" name="role">
                              <option value="" disabled selected>Select role</option>
                              <option value="accounts" @if ($admin_data->role === 'accounts' || old('role') === 'accounts') selected @endif>Accounts</option>
                              <option value="deals" @if ($admin_data->role === 'deals' || old('role') === 'deals') selected @endif>Deals</option>
                              <option value="support"  @if ($admin_data->role === 'support' || old('role') === 'support') selected @endif>Support</option>
                              <option value="operation" @if ($admin_data->role === 'operation' || old('role') === 'operation') selected @endif>Operation</option>
                               <option value="telecaller" @if ($admin_data->role === 'telecaller' || old('role') === 'telecaller') selected @endif>Telecaller</option>
                               <option value="rm" @if ($admin_data->role === 'rm' || old('role') === 'rm') selected @endif>Rm</option>

                               <option value="ProductManager" @if ($admin_data->role === 'ProductManager' || old('role') === 'ProductManager') selected @endif>ProductManager</option>
                               <option value="ProjectLead" @if ($admin_data->role === 'ProjectLead' || old('role') === 'ProjectLead') selected @endif>ProjectLead</option>
                               <option value="dm" @if ($admin_data->role === 'dm' || old('role') === 'dm') selected @endif>DM</option>
                               <option value="sm" @if ($admin_data->role === 'sm' || old('role') === 'sm') selected @endif>SM</option>
                               <option value="saleshead" @if ($admin_data->role === 'saleshead' || old('role') === 'saleshead') selected @endif>SalesHead</option>
                              
                              </select>
                          </div>
                          </div>
                           <div class="mb-3 col-md-4 assigned_rm"  @if ($admin_data->role === 'telecaller' || old('role') === 'telecaller') style="display:block" @endif>
                            <label for="language" class="form-label">Assigned Rm</label>
                            <select id="assigned_rm" class="select2 form-select" name="assigned_rm">
                              <option value="" disabled selected>Select Rm</option>
                               @foreach($rmlist as $rm)
                              <option value="{{$rm->id}}"  @if ($admin_data->assigned_rm === $rm->id || old('assigned_rm') === $rm->id) selected @endif>{{$rm->name}}</option>
                              @endforeach 
                            </select>
                          </div>
                         </div>
                          <div class="mb-3 col-md-6">
                            <label for="address" class="form-label">Password</label>
                            <input type="password" class="form-control" id="address" name="password" placeholder="" />
                          </div>
                          <div class="mb-3 col-md-6">
                            <label for="state" class="form-label">Confirm Password</label>
                            <input class="form-control" type="password" id="state" name="password_confirmation" placeholder="" />
                          </div>
                        
                      </div>

                     
                        <div class="mt-2">
                          <button type="submit" class="btn btn-primary me-2">Save changes</button>
                              <a href="{{url('superadmin/admins-list')}}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                      </form>
                    </div>
                    <!-- /Account -->
                  </div>

                
                </div>
              </div>
            </div>
            <!-- / Content -->

            <!-- Footer -->
           <footer class="content-footer footer bg-footer-theme">
              <div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
                <div class="mb-2 mb-md-0">
                  ©
                  <script>
                    document.write(new Date().getFullYear());
                  </script>
                  , Developed by
                  <a href="https://www.basicmantra.com" target="_blank" class="footer-link fw-bolder">Basic Mantra</a>
                </div>
              </div>
            </footer>
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
          </div>
          <!-- Content wrapper -->
        </div>
        <!-- / Layout page -->
      </div>

      <!-- Overlay -->
      <div class="layout-overlay layout-menu-toggle"></div>
    </div>

<style>
		.wrapper.mb-3 canvas {
		border: 1px solid;
	}

   .assigned_rm {
    display: none;
  }


</style>	
	<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script>

            var canvas = document.querySelector("canvas");

            // Adjust canvas coordinate space taking into account pixel ratio,
            // to make it look crisp on mobile devices.
            // This also causes canvas to be cleared.
            function resizeCanvas() {
                // When zoomed out to less than 100%, for some very strange reason,
                // some browsers report devicePixelRatio as less than 1
                // and only part of the canvas is cleared then.
                var ratio =  Math.max(window.devicePixelRatio || 1, 1);
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
            }

            window.onresize = resizeCanvas;
            resizeCanvas();

            var signaturePad = new SignaturePad(canvas, {
              backgroundColor: 'rgb(255, 255, 255)' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
            });


            
            var dataURL = canvas.toDataURL();
			
</script>
<script>
			function uploadEx() {
				var canvas = document.getElementById("canvas");
				var dataURL = canvas.toDataURL("image/png");
				document.getElementById('hidden_data').value = dataURL;
				alert(dataURL);
			};
		</script>

    <!-- / Layout wrapper -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
        $("#upload").on('change', function() {
            if (typeof(FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $("#uploadedAvatar").attr('src', e.target.result);
                }
                reader.readAsDataURL($(this)[0].files[0]);
            } else {
                alert("This browser does not support FileReader.");
            }
        });

        function resetform() {
            // var ipat = "{{asset('../assets/dashboard/assets/img/avatars/userlogo.png') }}"; 
            var ipat = "{{ asset('public/uploads/admin_profile/' . $admin_data->image) }}";
            $("#uploadedAvatar").attr('src', ipat);
        }


        $(".telecaller_select").change(function(e){
     var vls = $(this).val();
     if(vls =='telecaller') {
      $('.assigned_rm').show();
     }
     else {
      $('.assigned_rm').hide();
     }
     
    });
    </script>
@endsection