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

@section('content')

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

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

<div id="editDistM" class="mo">
  <div class="md">
    <div class="mh">
      <span class="mt2">Edit District</span>
      <div class="mc3" onclick="cm('editDistM')">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <form method="POST" action="{{ route('admin.districts.update') }}">
      @csrf @method('PUT')
      <input type="hidden" name="id" id="editDistId">
      <div class="fgrid">
        <div class="fg">
          <label>State</label>
          <select name="state_id" id="editDistState" required>
            @foreach($states as $state)
              <option value="{{ $state->id }}">{{ $state->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="fg">
          <label>District Name</label>
          <input type="text" name="name" id="editDistName" required>
        </div>
      </div>
      <div class="ff">
        <button type="button" class="btn bo"
                onclick="cm('editDistM')">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 editDistrict(id, name, stateId) {
  document.getElementById('editDistId').value    = id;
  document.getElementById('editDistName').value  = name;
  document.getElementById('editDistState').value = stateId;
  om('editDistM');
}
</script>
@endsection