@extends('backend.layouts.app')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class="active">Profile</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    
  </div>
  
</section>
<!-- Main content -->
<section class="content pb-0">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="row">
    <div class="col-md-12">
      <div class="">
          <ul class="nav nav-tabs profile-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active fs-16" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Update Profile</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Change Password</button>
            </li>
            
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
              <form action="" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                
                    <div class="box-body px-0 profile-box-scroll">
                      <div class="row">
                        <div class="col-auto">
                          <div class="profile-image-box">
                            <img src="{{ asset('images/profile-dummy.png') }} " class="" alt="Profile Image"/>
                          </div>
                        </div>
                        <div class="col-auto">
                            <div class="row">
                              <div class="col-md-12">
                              
                                <div class="form-group">
                                    <label for="title" class="control-label">Name</label>
                                    <div class="col-field-wrapper">
                                        <input type="text" name="title" class="form-control" id="title" placeholder="Enter Name" value="{{ old('title', $pageData['title'] ?? '') }}">
                                        @if ($errors->has('title'))
                                        <span class="help-block">{{ $errors->first('title') }}</span>
                                        @endif
                                    </div>
                                </div>
                              </div>
                              <div class="col-md-12">
                              
                                <div class="form-group">
                                    <label for="description" class="control-label">Email</label>
                                    <div class="col-field-wrapper">
                                        <input type="text" name="title" class="form-control" id="title" placeholder="Enter Email" value="{{ old('title', $pageData['title'] ?? '') }}">
                                        @if ($errors->has('title'))
                                        <span class="help-block">{{ $errors->first('title') }}</span>
                                        @endif
                                    </div>
                                </div>
                              </div>
                            
                              
                              
                              
                            </div>
                        </div>
                      </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer px-0">    
                        <div class="col-sm-12 text-end">
                            <a href="" class="btn btn-outline-secondary me-3">Cancel</a>
                            <button type="submit" class="btn btn-primary">Update</button>
                            
                        </div>
                        
                    </div>
                  
                <!-- /.box-footer -->
              </form>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
              <form action="" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                
                    <div class="box-body px-0 profile-box-scroll">
                      <div class="row">
                        <div class="col-md-4">
                        
                          <div class="form-group">
                              <label for="title" class="control-label">Current Password</label>
                              <div class="position-relative">
                                <input id="password" type="password" autocomplete="off" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter current password">
                                <div class="pass-show-hide-btn" toggle="#password">
                                  <span class="eye-slash-icon active">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em>
                                  </span>
                                  <span class="eye-icon">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em>
                                  </span>
                                </div>
                                @if ($errors->has('password'))
                                <span class="invalid-feedback text-danger" role="alert">
                                  <strong>{{ $errors->first('password') }}</strong>
                                </span>
                                @endif
                              </div>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-4">
                        
                          <div class="form-group">
                              <label for="description" class="control-label">New Password</label>
                              <div class="position-relative">
                                <input id="password" type="password" autocomplete="off" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter new password">
                                <div class="pass-show-hide-btn" toggle="#password">
                                  <span class="eye-slash-icon active">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em>
                                  </span>
                                  <span class="eye-icon">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em>
                                  </span>
                                </div>
                                @if ($errors->has('password'))
                                <span class="invalid-feedback text-danger" role="alert">
                                  <strong>{{ $errors->first('password') }}</strong>
                                </span>
                                @endif
                              </div>
                          </div>
                        </div>
                        <div class="col-md-4">
                        
                          <div class="form-group">
                              <label for="description" class="control-label">Confirm New Password</label>
                              <div class="position-relative">
                                <input id="password" type="password" autocomplete="off" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Retype new password">
                                <div class="pass-show-hide-btn" toggle="#password">
                                  <span class="eye-slash-icon active">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em>
                                  </span>
                                  <span class="eye-icon">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em>
                                  </span>
                                </div>
                                @if ($errors->has('password'))
                                <span class="invalid-feedback text-danger" role="alert">
                                  <strong>{{ $errors->first('password') }}</strong>
                                </span>
                                @endif
                              </div>
                          </div>
                        </div>
                        
                        
                        
                      </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer px-0">    
                        <div class="col-sm-12 text-end">
                            <a href="" class="btn btn-outline-secondary me-3">Cancel</a>
                            <button type="submit" class="btn btn-primary">Update</button>
                            
                        </div>
                        
                    </div>
                  
                <!-- /.box-footer -->
              </form>
            </div>
          </div>
      </div>
    </div>
  </div>
  <!-- /.box -->

</section>




<script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable-error-message")}}');
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <select id="roleFilter" class="form-control max-w-200">
      <option value="">Status</option>
      <option value="Admin">Admin</option>
      <option value="User">User</option>
      <option value="Guest">Guest</option>
    </select>
  `);

  // Filter on change
  $('#roleFilter').on('change', function () {
    let selected = $(this).val();
    table.column(1).search(selected).draw(); // column index 1 = "Role"
  });
  });

  
  

  // function to show auto login popup with update link
  $(document).on('click', '.auto-login-link', function() {

    let id = $(this).attr('data-id');

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      type: 'POST',
      
      dataType: "html",
      data: {
        id: id
      },
      success: function(response) {
        $('#autologin').modal('show');
        $(".model-content-autologin").html(response);
      },
      beforeSend: function() {}
    });
  });

  $(document).on('click', '.copy-to-clipboard', function() {
    var copyText = document.getElementById("autologin_url_field");
    $("#autologin_url_field").focus();
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");
  });
</script>

@endsection