@extends('admin.admin_dashboard')

@section('customcss')
<style>
.list-group-item strong { float: right; }
.small-text { font-size: 12px; color:#666; }
</style>
@endsection

@section('admin')
<div class="content-body">
<div class="container-fluid">
  <div class="row page-titles">
      <div class="col-md-9">
          <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{ route('pf.withdrawals.index') }}">Withdrawals</a></li>
              <li class="breadcrumb-item active">New Request</li>
          </ol>
      </div>
  </div>

  <div class="card shadow-sm">
      <div class="card-header"><h5>Request Withdrawal</h5></div>
      <div class="card-body">
            {{-- Employee Selector --}}
          <div class="row g-2 align-items-end mb-3">
              <div class="col-md-6">
                <label class="form-label">Select Employee</label>
                <select id="employeeSelect" class="form-select">
                      <option value="">-- Choose --</option>
                  @foreach($employees as $employee)
                  <option value="{{ $employee->id }}">{{ $employee->name }} ({{ $employee->e_id }})</option>
                      @endforeach
                  </select>
              </div>
              <div class="col-md-6 small-text">
                <em>Choose an employee to load Provident Fund summary & eligibility.</em>
              </div>
          </div>

          {{-- Summary + Eligibility --}}
          <div id="summaryBox" class="mb-3" style="display:none;">
              <div class="card mb-2">
                <div class="card-header bg-light"><strong>Provident Fund Summary</strong></div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Current Balance <strong id="sumCurrent">0.00</strong></li>
                        <li class="list-group-item">Locked Balance <strong id="sumLocked">0.00</strong></li>
                        <li class="list-group-item">Withdrawable <strong id="sumWithdrawable">0.00</strong></li>
                    </ul>
                </div>
              </div>

              <div id="eligibilityAlert" class="alert" role="alert"></div>

              <div class="small-text">
                  Policy: Min Years = <span id="polYears">0</span>,
                  Min Balance = <span id="polBalance">0.00</span>
              </div>
          </div>

          {{-- Request Form --}}
          <form id="reqForm" method="POST" action="{{ route('pf.withdrawals.store') }}" enctype="multipart/form-data" style="display:none;">
              @csrf
              <input type="hidden" name="employee_id" id="employee_id">

              <div class="mb-3">
                  <label>Requested Amount</label>
                  <input type="number" name="requested_amount" step="0.01" min="1" class="form-control" required>
              </div>
              <div class="mb-3">
                  <label>Note</label>
                  <textarea name="request_note" class="form-control" rows="2"></textarea>
              </div>
              <div class="mb-3">
                  <label>Supporting Documents</label>
                  <input type="file" name="documents[]" multiple class="form-control">
              </div>
              <button id="submitBtn" class="btn btn-primary" disabled>
                  <i class="fas fa-paper-plane"></i> Submit Request
              </button>
          </form>
      </div>
  </div>
</div>
</div>
@endsection

@section('customjs')
<script>
(function(){
  const sel = document.getElementById('employeeSelect');
  const summaryBox = document.getElementById('summaryBox');
  const reqForm = document.getElementById('reqForm');
  const employeeIdInput = document.getElementById('employee_id');
  const sumCurrent = document.getElementById('sumCurrent');
  const sumLocked = document.getElementById('sumLocked');
  const sumWithdrawable = document.getElementById('sumWithdrawable');
  const polYears = document.getElementById('polYears');
  const polBalance = document.getElementById('polBalance');
  const alertBox = document.getElementById('eligibilityAlert');
  const submitBtn = document.getElementById('submitBtn');

  sel.addEventListener('change', async function(){
    submitBtn.disabled = true;
    reqForm.style.display = 'none';
    summaryBox.style.display = 'none';
    employeeIdInput.value = '';

    const employeeId = this.value;
    if(!employeeId) return;

    try{
      const url = "{{ route('pf.withdrawals.eligibility') }}?employee_id="+encodeURIComponent(employeeId);
      const res = await fetch(url, {headers:{'X-Requested-With':'XMLHttpRequest'}});
      if(!res.ok) throw new Error('Network error');
      const data = await res.json();

      // fill summary
      sumCurrent.textContent = Number(data.account.current).toFixed(2);
      sumLocked.textContent = Number(data.account.locked).toFixed(2);
      sumWithdrawable.textContent = Number(data.account.withdrawable).toFixed(2);
      polYears.textContent = data.policy.min_years ?? 0;
      polBalance.textContent = Number(data.policy.min_balance ?? 0).toFixed(2);

      // eligibility (OR condition)
      summaryBox.style.display = 'block';
      employeeIdInput.value = data.employee.id;

      if(data.has_pending){
        alertBox.className = 'alert alert-warning';
        alertBox.textContent = 'Pending/Approved request already exists for this employee.';
        return;
      }

      if(data.eligibility.final){
        alertBox.className = 'alert alert-success';
        alertBox.textContent = 'Eligible (meets YEAR or BALANCE condition).';
        reqForm.style.display = 'block';
        submitBtn.disabled = false;
      }else{
        alertBox.className = 'alert alert-danger';
        alertBox.textContent = 'Not eligible: needs minimum years OR minimum balance.';
      }
    }catch(e){
      alert('Failed to load employee summary');
    }
  });
})();
</script>
@endsection