@extends('layouts/contentNavbarLayout')

@section('title', 'KPI Achievement')

@section('content')
<br>
<div class="container my-4">
  <div class="card">
    <div class="card-header">
      <h4 class="mb-0">Manage Indicator Type 2</h4>
    </div>

    <div class="card-body">

      <!-- SQL Query Section -->
      <div class="mb-4">
        <label for="sqlEditor4" class="form-label">SQL Query</label>
        <textarea id="sqlEditor4" class="form-control" rows="10" style="background-color: #1e1e1e; color: #fff; font-family: monospace;"></textarea>
      </div>

      <!-- Options Section -->
      <div class="mt-4">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sqlOption4" id="option1" value="companies">
          <label class="form-check-label" for="option1">No. of companies assisted</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sqlOption4" id="option2" value="programmes">
          <label class="form-check-label" for="option2">No. of programmes</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sqlOption4" id="option3" value="sales">
          <label class="form-check-label" for="option3">No. of export sales</label>
        </div>
        <!-- <div class="form-check">
          <input class="form-check-input" type="radio" name="sqlOption4" id="option4" value="budget">
          <label class="form-check-label" for="option4">Budget utilisation</label>
        </div> -->
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sqlOption4" id="option5" value="none" checked>
          <label class="form-check-label" for="option5">None</label>
        </div>
      </div>

      <!-- Buttons -->
      <div class="mt-4 d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-primary">Test Query</button>
        <button type="button" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-secondary">Back</button>
      </div>

    </div>
  </div>
</div>
@endsection