@extends('layouts.app')

@section('content')
<div class="container-fluid py-5" style="padding:0 15px;">
  <div class="row">
    {{-- Left: Add New Position --}}
    <div class="col-md-4">
      <div class="card mb-4">
        <div class="card-header">New Position</div>
        <div class="card-body">
          @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
          @endif
          <form action="{{ route('leaders.secretaries.storeSecretary') }}" method="POST">
            @csrf
            <div class="mb-3">
              <input
                type="text"
                name="position"
                class="form-control @error('position') is-invalid @enderror"
                placeholder="enter position"
                value="{{ old('position') }}"
                required
              >
              @error('position')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
            <button class="btn btn-primary">Add</button>
          </form>
        </div>
      </div>
    </div>

    {{-- Right: List --}}
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Secretary Positions</div>
        <div class="card-body">
          {{-- Search & per‑page --}}
          <div class="row mb-3 align-items-center">
            <div class="col-md-6">
              <form method="GET" class="d-flex align-items-center">
                <label class="me-2 mb-0">Show</label>
                <select name="perPage" class="form-select w-auto" onchange="this.form.submit()">
                  @foreach([5,10,25,50] as $n)
                    <option value="{{ $n }}" {{ request('perPage',10)==$n?'selected':'' }}>
                      {{ $n }}
                    </option>
                  @endforeach
                </select>
                <label class="ms-2 mb-0">entries</label>
                <input type="hidden" name="search" value="{{ request('search') }}">
              </form>
            </div>
            <div class="col-md-6">
              <form method="GET" class="d-flex justify-content-end">
                <input
                  type="text"
                  name="search"
                  class="form-control w-50"
                  placeholder="Search..."
                  value="{{ request('search') }}"
                >
                <button type="submit" class="btn btn-primary ms-2">Search</button>
              </form>
            </div>
          </div>

          {{-- Table --}}
          <div class="table-responsive">
            <table class="table table-striped align-middle">
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Position</th>
                  
                </tr>
              </thead>
              <tbody>
                @forelse($positions as $pos)
                  <tr>
                    <td>{{ $pos->id }}</td>
                    <td>{{ $pos->position }}</td>
                    <td class="text-end">
                      <form
                        action="{{ route('leaders.secretaries.destroy', $pos->id) }}"
                        method="POST"
                        onsubmit="return confirm('Remove this position?')"
                        class="d-inline"
                      >
                       
                      </form>
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="3" class="text-center text-muted">No positions yet.</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>

          {{-- Pagination --}}
          <div class="d-flex justify-content-end mt-3">
            {{ $positions->links() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection