@extends('layouts.admin')
@section('title', 'Units')
@section('page_title', 'Units')

@section('content')

<div class="card">
  <div class="ch">
    <div class="ct"><i class="fas fa-building"></i>All Units</div>
    <button class="btn bp bsm" onclick="om('addUnitM')">
      <i class="fas fa-plus"></i>Add Unit
    </button>
  </div>
  <div class="tw">
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Unit Name</th>
          <th>District</th>
          <th>State</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($units as $unit)
        <tr>
          <td style="color:var(--text-dim)">{{ $loop->iteration }}</td>
          <td><b>{{ $unit->name }}</b></td>
          <td style="color:var(--text-dim)">
            {{ $unit->district->name }}
          </td>
          <td style="color:var(--text-dim)">
            {{ $unit->district->state->name }}
          </td>
          <td>
            <span class="badge {{ $unit->is_active ? 'bac' : 'brj' }}">
              {{ $unit->is_active ? 'Active' : 'Inactive' }}
            </span>
          </td>
          <td>
            <div class="abr">
              <div class="ab ed"
                onclick="editUnit(
                  {{ $unit->id }},
                  '{{ $unit->name }}',
                  {{ $unit->district_id }},
                  {{ $unit->district->state_id }})">
                <i class="fas fa-edit"></i>
              </div>
              <form method="POST"
                action="{{ route('admin.units.delete') }}"
                onsubmit="return confirm('Delete {{ $unit->name }}?')"
                style="display:inline">
                @csrf @method('DELETE')
                <input type="hidden" name="id" value="{{ $unit->id }}">
                <button type="submit" class="ab rej">
                  <i class="fas fa-trash"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="6"
            style="text-align:center;color:var(--text-dim);padding:30px;">
            No units yet
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div id="addUnitM" class="mo">
  <div class="md">
    <div class="mh">
      <span class="mt2">Add Unit</span>
      <div class="mc3" onclick="cm('addUnitM')">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <form method="POST" action="{{ route('admin.units.store') }}">
      @csrf
      <div class="fgrid c1">
        <div class="fg">
          <label>State</label>
          <select id="addUnitState"
                  onchange="loadDistricts(this.value)">
            <option value="">Select State</option>
            @foreach($states as $state)
              <option value="{{ $state->id }}">
                {{ $state->name }}
              </option>
            @endforeach
          </select>
        </div>
        <div class="fg">
          <label>District</label>
          <select name="district_id" id="addUnitDistrict" required>
            <option value="">Select State First</option>
          </select>
        </div>
        <div class="fg">
          <label>Unit Name</label>
          <input type="text" name="name"
                 placeholder="Enter unit name" required>
        </div>
      </div>
      <div class="ff">
        <button type="button" class="btn bo"
                onclick="cm('addUnitM')">Cancel</button>
        <button type="submit" class="btn bp">
          <i class="fas fa-plus"></i>Add Unit
        </button>
      </div>
    </form>
  </div>
</div>

<div id="editUnitM" class="mo">
  <div class="md">
    <div class="mh">
      <span class="mt2">Edit Unit</span>
      <div class="mc3" onclick="cm('editUnitM')">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <form method="POST" action="{{ route('admin.units.update') }}">
      @csrf @method('PUT')
      <input type="hidden" name="id" id="editUnitId">
      <div class="fgrid c1">
        <div class="fg">
          <label>Unit Name</label>
          <input type="text" name="name"
                 id="editUnitName" required>
        </div>
      </div>
      <div class="ff">
        <button type="button" class="btn bo"
                onclick="cm('editUnitM')">Cancel</button>
        <button type="submit" class="btn bp">
          <i class="fas fa-save"></i>Update
        </button>
      </div>
    </form>
  </div>
</div>

@endsection

@section('scripts')
<script>
function loadDistricts(stateId) {
  if (!stateId) return;
  fetch(`/api/states/${stateId}/districts`, {
    headers: {'Accept': 'application/json'}
  })
  .then(r => r.json())
  .then(data => {
    const select = document.getElementById('addUnitDistrict');
    select.innerHTML = '<option value="">Select District</option>';
    data.data.forEach(d => {
      select.innerHTML +=
        `<option value="${d.id}">${d.name}</option>`;
    });
  });
}

function editUnit(id, name) {
  document.getElementById('editUnitId').value   = id;
  document.getElementById('editUnitName').value = name;
  om('editUnitM');
}
</script>
@endsection