@extends('admin.stakeholders.layout')

@section('title', 'Daftar Stakeholder')

@section('content')
  <div class="max-w-7xl mx-auto px-6 py-10 bg-white">
  <div class="bg-white  rounded-lg p-6 mb-8">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-3xl font-semibold text-gray-900">Daftar Stakeholder</h1>
    </div>
    
<div class="flex flex-wrap gap-3 sm:gap-4 items-start sm:items-center">
  <a href="{{ route('stakeholders.create') }}"
     class="inline-block bg-blue-900 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm transition-all shadow-sm">
    + Tambah Stakeholder
  </a>

  <a href="{{ url('/export-stakeholder-contact') }}"
     class="inline-block bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded-lg text-sm transition-all shadow-sm">
    <i class="fas fa-file-excel mr-1"></i> Download Excel
  </a>
</div>

  </div>

<!-- Tabel Stakeholders -->
<div class="overflow-x-auto mt-6 rounded-lg mx-5">
  <div class="min-w-full inline-block align-middle">
    <div class="shadow border border-gray-300 rounded-lg overflow-hidden ">
      <table class="min-w-full divide-y divide-blue-00 bg-white text-sm">
        <thead class="bg-blue-900 text-white font-semibold">
          <tr>
            <th class="px-6 py-3 text-left">Nama Stakeholder</th>
            <th class="px-6 py-3 text-left">Email</th>
            <th class="px-6 py-3 text-left">Contact Person 1</th>
            <th class="px-6 py-3 text-left">Tipe Instansi</th>
            <th class="px-6 py-3 text-left">Status BKK</th>
           <th class="px-6 py-3 text-left" style="max-width: 150px; word-wrap: break-word; white-space: normal;">Kelurahan</th>
            <th class="px-6 py-3 text-left">Aksi</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          @foreach ($stakeholders as $stakeholder)
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4">{{ $stakeholder->nama_stakeholder }}</td>
              <td class="px-6 py-4">{{ $stakeholder->email }}</td>
              <td class="px-6 py-4">
                @if($stakeholder->contactPersons->isNotEmpty())
                  {{ $stakeholder->contactPersons->first()->nama_contact_person }}
                @else
                  N/A
                @endif
              </td>
              <td class="px-6 py-4">{{ $stakeholder->tipe_instansi }}</td>
              <td class="px-6 py-4">
                @if(in_array($stakeholder->jenis_stakeholder, ['SMA/SMK', 'SLB', 'Perguruan Tinggi']))
                  @if($stakeholder->status_bkk === 'Terdaftar')
                    <span class="px-3 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">Terdaftar</span>
                  @else
                    <span class="px-3 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full">Belum Terdaftar</span>
                  @endif
                @else
                  <span class="text-gray-600 text-sm">{{ $stakeholder->status_bkk }}</span>
                @endif
              </td>
            <td class="px-6 py-4" style="max-width: 150px; word-wrap: break-word; white-space: normal;">
              {{ $stakeholder->kelurahan }}
            </td>       


                <td class="px-6 py-4">
                <div class="flex items-center space-x-3">
                 <!-- Tombol untuk membuka modal -->
                <a href="{{ route('admin.stakeholder.edit', $stakeholder->id) }}" class="text-black hover:text-blue-700" title="Edit">
                    <i class="fas fa-edit"></i>
                  </a>
                  <form action="{{ route('admin.stakeholders.destroy', $stakeholder->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus data ini?')" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="text-black hover:text-blue-700" title="Hapus">
                      <i class="fas fa-trash-alt"></i>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>

      @if($stakeholders->isEmpty())
        <div class="p-6 text-center text-gray-500">
          <p>Tidak ada data stakeholder ditemukan.</p>
        </div>
      @endif
    </div>
  </div>
</div>

 @endsection
</html>