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

@section('content')

<div class="card">
  <div class="ch">
    <div class="ct"><i class="fas fa-map"></i>All States</div>
    <button class="btn bp bsm" onclick="om('addStateM')">
      <i class="fas fa-plus"></i>Add State
    </button>
  </div>
  <div class="tw">
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>State Name</th>
          <th>Districts</th>
          <th>Units</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($states as $state)
        <tr>
          <td style="color:var(--text-dim)">{{ $loop->iteration }}</td>
          <td><b>{{ $state->name }}</b></td>
          <td>{{ $state->districts_count }}</td>
          <td>{{ $state->units_count }}</td>
          <td>
            <span class="badge {{ $state->is_active ? 'bac' : 'brj' }}">
              {{ $state->is_active ? 'Active' : 'Inactive' }}
            </span>
          </td>
          <td>
            <div class="abr">
              <div class="ab ed"
                onclick="editState({{ $state->id }},'{{ $state->name }}')">
                <i class="fas fa-edit"></i>
              </div>
              <form method="POST"
                action="{{ route('admin.states.delete') }}"
                onsubmit="return confirm('Delete {{ $state->name }}?')"
                style="display:inline">
                @csrf @method('DELETE')
                <input type="hidden" name="id" value="{{ $state->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 states yet
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div id="addStateM" class="mo">
  <div class="md">
    <div class="mh">
      <span class="mt2">Add State</span>
      <div class="mc3" onclick="cm('addStateM')">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <form method="POST" action="{{ route('admin.states.store') }}">
      @csrf
      <div class="fgrid c1">
        <div class="fg">
          <label>State Name</label>
          <input type="text" name="name"
                 placeholder="Enter state name" required>
        </div>
      </div>
      <div class="ff">
        <button type="button" class="btn bo"
                onclick="cm('addStateM')">Cancel</button>
        <button type="submit" class="btn bp">
          <i class="fas fa-plus"></i>Add State
        </button>
      </div>
    </form>
  </div>
</div>

<div id="editStateM" class="mo">
  <div class="md">
    <div class="mh">
      <span class="mt2">Edit State</span>
      <div class="mc3" onclick="cm('editStateM')">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <form method="POST" action="{{ route('admin.states.update') }}">
      @csrf @method('PUT')
      <div class="fgrid c1">
        <div class="fg">
          <label>State Name</label>
          <input type="hidden" name="id" id="editStateId">
          <input type="text" name="name"
                 id="editStateName" required>
        </div>
      </div>
      <div class="ff">
        <button type="button" class="btn bo"
                onclick="cm('editStateM')">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 editState(id, name) {
  document.getElementById('editStateId').value   = id;
  document.getElementById('editStateName').value = name;
  om('editStateM');
}
</script>
@endsection