@extends(getTemplate().'.view.layout.layout')

@section('page')


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


<div class="panel panel-info" style="margin-top: 15px;">
  <div class="panel-heading">
  <h3>My Payments</h3>
  </div>
  <div class="panel-body">
  

    @include('web.default.view.payments.search');

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  @if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
  @endif

  @if($errors->any())
    <div class="alert alert-danger">{{ $errors->first() }}</div>
  @endif

  @if(Auth::check() && Auth::user()->admin == 1)
    @if(session('prompt_create_user'))
      @php
        $promptData = session('prompt_create_user');
      @endphp
      <div class="alert alert-warning">
        <div><strong>User not found.</strong> Do you want to create this account and enroll the user?</div>
        <div class="mt-2">
          <form method="POST" action="{{ route('payments.add_user_to_course') }}" class="form-inline">
            @csrf
            <input type="hidden" name="email" value="{{ $promptData['email'] ?? old('email') }}">
            <input type="hidden" name="course_id" value="{{ $promptData['course_id'] ?? old('course_id') }}">
            <input type="hidden" name="create_user" value="1">
            <button type="submit" class="btn btn-warning btn-sm">
              <i class="bi bi-person-check"></i> Yes, Create User & Add To Course
            </button>
          </form>
        </div>
      </div>
    @endif

    <div class="col-md-12">
      <div class="panel panel-default" style="margin-bottom: 15px;">
        <div class="panel-heading"><b>Add User To Course</b></div>
        <div class="panel-body">
          <form method="POST" action="{{ route('payments.add_user_to_course') }}" class="row">
            @csrf
            <div class="col-md-5" style="margin-bottom: 10px;">
              <label for="payments_manual_user_email">User Email</label>
              <input type="email" id="payments_manual_user_email" name="email" class="form-control" value="{{ old('email') }}" required>
            </div>
            <div class="col-md-3" style="margin-bottom: 10px;">
              <label for="payments_manual_course_id">Course</label>
              <input type="text" id="payments_manual_course_id" name="course_id" class="form-control" required value="{{ old('course_id') }}" placeholder="Search by course number or title">
            </div>
            <div class="col-md-4" style="margin-bottom: 10px; margin-top: 25px;">
              <button type="submit" class="btn btn-success btn-block">
                <i class="bi bi-check-circle"></i> Add User To Course
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif




    @include('web.default.view.payments.request_cashout')

<ul class="nav nav-tabs mt-10 font-semibold text-3xl">
  <li class="active"><a data-toggle="tab" href="#home"><i class="bi bi-list-nested"></i>Pending Payments</a></li>
  <li><a data-toggle="tab" href="#menu1"><i class="bi bi-check2-circle"></i>Approved Courses</a></li>
  <li><a data-toggle="tab" href="#menu2"><i class="bi bi-cart-check"></i>Affiliate Earnings (₦{{number_format(Auth::user()->income)}})
     @if(Auth::user()->admin == 1)
    <li><a data-toggle="tab" href="#collab"><i class="bi bi-cart-check"></i>Collaboration 
    (₦{{number_format(Auth::user()->credit)}})</a></li>
 
  <li><a data-toggle="tab" href="#menu3"><i class="bi bi-cart-check"></i> Admin Affiliate ({{count($adminAffiliates)}})</a></li>
  @endif 
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3></h3>
    @include('web.default.view.payments.pending-students');

  </div>

  <div id="menu1" class="tab-pane fade">
    <h3></h3>
    @include('web.default.view.payments.paid-students');

  </div>
  <div id="menu2" class="tab-pane fade">
    <h3></h3>
    @include('web.default.view.payments.affiliate');
  </div>

  <div id="collab" class="tab-pane fade">
    <h3></h3>
    @include('web.default.view.payments.collaboration');
  </div>

  <div id="menu3" class="tab-pane fade">
    <h3></h3>
    @include('web.default.view.payments.admin-affiliate');
    

  </div>
</div>

<script>
// Simple AJAX autocomplete without Select2
document.addEventListener('DOMContentLoaded', function() {
    var courseInput = document.getElementById('payments_manual_course_id');
    var courseList = document.createElement('datalist');
    courseList.id = 'course_options';
    document.body.appendChild(courseList);
    courseInput.setAttribute('list', 'course_options');
    
    var timeout;
    courseInput.addEventListener('input', function() {
        clearTimeout(timeout);
        var query = this.value;
        
        if (query.length < 2) {
            courseList.innerHTML = '';
            return;
        }
        
        timeout = setTimeout(function() {
            fetch('{{ route('payments.search_courses') }}?q=' + encodeURIComponent(query), {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                courseList.innerHTML = '';
                if (data.results && data.results.length > 0) {
                    data.results.forEach(function(course) {
                        var option = document.createElement('option');
                        option.value = course.id;
                        option.textContent = course.text;
                        courseList.appendChild(option);
                    });
                }
            })
            .catch(error => console.error('Error:', error));
        }, 300);
    });
});
</script>






</div>
</div>


</div>
</div>
@endsection