{{-- resources/views/admin/kepegawaian/guru/index.blade.php --}}
@extends('layouts.admin')
@section('title', 'Manajemen Data Guru')

@section('content')
<div class="page-inner">
  <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
    <div>
      <h3 class="fw-bold mb-3">Manajemen Staf: Data Guru</h3>
      <h6 class="op-7 mb-2">Kelola data guru dan tenaga pengajar.</h6>
    </div>
  </div>

  <div class="row">
      <div class="col-sm-6 col-md-3">
          <div class="card card-stats card-round">
              <div class="card-body">
                  <div class="row align-items-center">
                      <div class="col-icon">
                          <div class="icon-big text-center icon-primary bubble-shadow-small">
                              <i class="fas fa-users"></i>
                          </div>
                      </div>
                      <div class="col col-stats ms-3 ms-sm-0">
                          <div class="numbers">
                              <p class="card-category">Total Guru</p>
                              <h4 class="card-title">{{ $totalGuru }}</h4>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-sm-6 col-md-3">
          <div class="card card-stats card-round">
              <div class="card-body">
                  <div class="row align-items-center">
                      <div class="col-icon">
                          <div class="icon-big text-center icon-info bubble-shadow-small">
                              <i class="fas fa-male"></i>
                          </div>
                      </div>
                      <div class="col col-stats ms-3 ms-sm-0">
                          <div class="numbers">
                              <p class="card-category">Laki-laki</p>
                              <h4 class="card-title">{{ $guruLaki }}</h4>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-sm-6 col-md-3">
          <div class="card card-stats card-round">
              <div class="card-body">
                  <div class="row align-items-center">
                      <div class="col-icon">
                          <div class="icon-big text-center icon-secondary bubble-shadow-small">
                              <i class="fas fa-female"></i>
                          </div>
                      </div>
                      <div class="col col-stats ms-3 ms-sm-0">
                          <div class="numbers">
                              <p class="card-category">Perempuan</p>
                              <h4 class="card-title">{{ $guruPerempuan }}</h4>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-sm-6 col-md-3">
          <div class="card card-stats card-round">
              <div class="card-body">
                  <div class="row align-items-center">
                      <div class="col-icon">
                          <div class="icon-big text-center icon-success bubble-shadow-small">
                              <i class="fas fa-user-tie"></i>
                          </div>
                      </div>
                      <div class="col col-stats ms-3 ms-sm-0">
                          <div class="numbers">
                              <p class="card-category">Guru Tetap</p>
                              <h4 class="card-title">{{ $guruTetap }}</h4>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card card-round shadow-sm border-0">
        <div class="card-header">
          <div class="d-flex align-items-center justify-content-between">
              <div class="card-title"><i class="fa fa-users me-2"></i> Daftar Guru</div>
          </div>
        </div>
        
        <div class="card-body">
            <div class="row mb-4">
                <div class="col-md-8">
                    <form action="{{ route('admin.guru.index') }}" method="GET" class="d-flex gap-2">
                        {{-- Filter Status --}}
                        <div class="form-group p-0">
                            <label class="small text-muted">Status</label>
                            <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                                <option value="">Semua Status</option>
                                <option value="Tetap" {{ request('status') == 'Tetap' ? 'selected' : '' }}>Tetap</option>
                                <option value="Tidak Tetap" {{ request('status') == 'Tidak Tetap' ? 'selected' : '' }}>Tidak Tetap</option>
                            </select>
                        </div>
                        <div class="form-group p-0 flex-grow-1">
                            <label class="small text-muted">Pencarian</label>
                            <div class="input-group input-group-sm">
                                <input type="text" name="search" class="form-control" placeholder="Cari Nama / NIP / NUPTK..." value="{{ request('search') }}">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4 text-end d-flex align-items-end justify-content-end gap-1">
                    <a href="{{ route('admin.guru.export.excel', ['search' => request('search'), 'status' => request('status')]) }}" 
                       class="btn btn-success btn-sm" title="Export Excel">
                        <i class="fa fa-file-excel me-1"></i> Excel
                    </a>
                    <a href="{{ route('admin.guru.export.pdf', ['search' => request('search'), 'status' => request('status')]) }}" 
                       class="btn btn-danger btn-sm" title="Export PDF" target="_blank">
                        <i class="fa fa-file-pdf me-1"></i> PDF
                    </a>
                    <button type="button" class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" data-bs-target="#importModal" title="Import Data">
                        <i class="fa fa-upload me-1"></i> Import
                    </button>
                    <a href="{{ route('admin.guru.create') }}" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus me-1"></i> Tambah
                    </a>
                </div>
            </div>

          <div class="table-responsive">
            <table class="table table-striped table-hover align-middle">
              <thead class="table-dark text-center">
                <tr>
                  <th>NO</th>
                  <th>FOTO</th>
                  <th>NAMA GURU</th>
                  <th>NIP / NUPTK</th>
                  <th>EMAIL / HP</th>
                  <th>LOGIN</th>
                  <th>AKSI</th>
                </tr>
              </thead>
              <tbody>
                @forelse ($gurus as $guru)
                  <tr class="text-center">
                    <td>{{ ($gurus->currentPage()-1) * $gurus->perPage() + $loop->iteration }}</td>
                    <td>
                      <img src="{{ ($guru->status && $guru->status->img) ? asset('storage/' . $guru->status->img) : asset('kaiadmin/assets/img/iconuser.png') }}" 
                           alt="{{ $guru->name }}" 
                           class="avatar-lg rounded-circle border bg-light"
                           style="width: 50px; height: 50px; object-fit: cover;">
                    </td>
                    <td class="text-start fw-bold text-uppercase">{{ $guru->name }}</td>
                    <td>
                        <span class="fw-bold">{{ $guru->status->nip ?? '-' }}</span>
                        <br>
                        <small class="text-muted">{{ $guru->status->nuptk ?? '-' }}</small>
                    </td>
                    <td class="text-start small">
                        <div><i class="fa fa-envelope me-1 text-muted"></i> {{ $guru->email ?? '-' }}</div>
                        <div><i class="fa fa-phone me-1 text-muted"></i> {{ $guru->handphone ?? '-' }}</div>
                    </td>
                    <td>
                      @if($guru->hak_akses)
                        <span class="badge badge-success">Aktif</span>
                      @else
                        <span class="badge badge-secondary">Non-Aktif</span>
                      @endif
                    </td>
                    <td>
                      <div class="btn-group" role="group">
                        <a href="{{ route('admin.guru.edit', $guru->id) }}" class="btn btn-warning btn-sm" title="Edit"><i class="fa fa-edit"></i></a>
                        <form action="{{ route('admin.guru.destroy', $guru->id) }}" 
                              method="POST" 
                              class="d-inline"
                              data-confirm-delete="true"
                              data-item-name="{{ $guru->name }}">
                          @csrf
                          @method('DELETE')
                          <button type="submit" class="btn btn-danger btn-sm" title="Hapus"><i class="fa fa-trash"></i></button>
                        </form>
                      </div>
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="7" class="text-center text-muted py-4">
                        <i class="fa fa-info-circle me-1"></i> Belum ada data guru.
                    </td>
                  </tr>
                @endforelse 
              </tbody>
            </table>
            
            <div class="mt-3 d-flex justify-content-end">
              {{ $gurus->withQueryString()->links('pagination::bootstrap-5') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="importModalLabel"><i class="fa fa-file-excel me-2"></i> Import Data Guru</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="{{ route('admin.guru.import') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
            
            <div class="alert alert-info small">
                <i class="fa fa-info-circle me-1"></i> 
                Pastikan format file sesuai dengan template. 
                <a href="{{ route('admin.guru.download-format') }}" class="fw-bold text-decoration-none">Download Format di sini.</a>
            </div>

            <div class="mb-3">
                <label for="file_import" class="form-label fw-bold">Pilih File Excel (.xlsx / .xls)</label>
                <input class="form-control" type="file" id="file_import" name="file_import" accept=".xlsx, .xls, .csv" required>
            </div>

            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked disabled>
                <label class="form-check-label small text-muted" for="flexCheckDefault">
                    Password default untuk guru baru adalah <strong>123456</strong>.
                </label>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary btn-sm">Upload & Import</button>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection