@extends('layouts.dashboardAdmin')

@section('content')
@php
    $namaBulan = [
        '01' => 'Januari', '02' => 'Februari', '03' => 'Maret', '04' => 'April',
        '05' => 'Mei', '06' => 'Juni', '07' => 'Juli', '08' => 'Agustus',
        '09' => 'September', '10' => 'Oktober', '11' => 'November', '12' => 'Desember'
    ];

    $jumlahHari = cal_days_in_month(CAL_GREGORIAN, (int) $bulan, (int) $tahun);
    $grupTanggal = [
        [1, min(10, $jumlahHari)],
        [11, min(20, $jumlahHari)],
        [21, $jumlahHari],
    ];
@endphp

<div class="relative p-4 pb-20 overflow-x-auto">
  <form action="{{ route('admin.laporan.index') }}" method="GET" class="flex items-center space-x-4 mb-4">
    <!-- Filter Bulan -->
    <div class="flex items-center space-x-2">
      <label for="bulan" class="font-semibold text-gray-800">Bulan</label>
      <select name="bulan" id="bulan" class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        @foreach (range(1, 12) as $i)
          <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}" @if (str_pad($i, 2, '0', STR_PAD_LEFT) == $bulan) selected @endif>
            {{ \Carbon\Carbon::create()->month($i)->format('F') }}
          </option>
        @endforeach
      </select>
    </div>
  
    <!-- Filter Tahun -->
    <div class="flex items-center space-x-2">
      <label for="tahun" class="font-semibold text-gray-800">Tahun</label>
      <select name="tahun" id="tahun" class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        @foreach ($tahunLaporan as $tahunItem)
          <option value="{{ $tahunItem }}" @if ($tahunItem == $tahun) selected @endif>{{ $tahunItem }}</option>
        @endforeach
      </select>
    </div>
  
    <!-- Tombol Filter -->
    <div>
      <button type="submit" class="bg-blue-900 text-white px-5 py-2 rounded-full hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
        Cari
      </button>
    </div>
  </form>

  <!-- Pagination -->
  <div class="absolute bottom-2 right-4 flex gap-2">
    @foreach ($grupTanggal as $index => [$startDate, $endDate])
      <button
        id="btn{{ $index + 1 }}"
        class="pagination-btn {{ $index === 0 ? 'active' : '' }}"
        onclick="showTable({{ $index + 1 }})">
        {{ $startDate }} - {{ $endDate }}
      </button>
    @endforeach
  </div>

  <div class="flex justify-end mb-4">
    <a href="{{ url('/export-laporan') }}?bulan={{ $bulan }}&tahun={{ $tahun }}" class="bg-green-500 text-white font-semibold py-2 px-4 rounded-lg shadow">Export ke Excel</a>
  </div>

  <!-- Tabel -->
  @foreach ($grupTanggal as $index => [$startDate, $endDate])
    <div id="table{{ $index + 1 }}" class="{{ $index !== 0 ? 'hidden' : '' }}">
      <h3 class="font-semibold text-lg mb-2">
        Tanggal {{ $startDate }} - {{ $endDate }} {{ $namaBulan[$bulan] }} {{ $tahun }}
      </h3>
      <table class="table-auto border-collapse w-full shadow-lg rounded-lg overflow-hidden">
        <thead class="bg-blue-900 text-white">
          <tr>
            <th class="px-4 py-2 text-sm border border-gray-300">Nama Pendamping</th>
            @for ($i = $startDate; $i <= $endDate; $i++)
              <th class="px-4 py-2 text-sm border border-gray-300">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }} {{ substr($namaBulan[$bulan], 0, 3) }}</th>
            @endfor
          </tr>
        </thead>
        
        <tbody>
          @foreach ($dataLaporan as $pendamping => $laporanPerTanggal)
            <tr class="border-t">
              <td class="px-4 py-2 text-sm border border-gray-300 sticky left-0 bg-white font-semibold border-b-2 border-r-2">
                {{ $pendamping }}
              </td>
              
              @for ($i = $startDate; $i <= $endDate; $i++)
              @php
                $tgl = str_pad($i, 2, '0', STR_PAD_LEFT);
                $laporanList = $laporanPerTanggal[$tgl] ?? [];
              @endphp
            
            <td class="px-4 py-2 text-xs text-center border border-gray-300 cursor-pointer hover:bg-blue-100 transition">
            @if (count($laporanList) > 0)
                @foreach ($laporanList as $laporan)
                <div>
                    <!-- Tautan ke halaman baru untuk melihat detail laporan -->
                    <a href="{{ route('admin.laporan.show', ['id' => $laporan->id]) }}" class="mb-1 bg-blue-50 hover:bg-blue-100 p-1 rounded cursor-pointer transition">
                    {{ $laporan->lokasi }}
                    </a>
                </div>
                @endforeach
            @else
                -
            @endif
            </td>

            @endfor
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endforeach
</div>

<!-- Style -->
<style>
  /* Menambahkan garis pemisah antar nama pendamping */
  table td.border-r-2 {
    border-right: 2px solid #D1D5DB; /* Garis pemisah yang lebih tebal */
  }

  .pagination-btn {
    background-color: white;
    color: #4B5563;
    font-weight: bold;
    padding: 8px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
  }
  .pagination-btn:hover {
    background-color: #E5E7EB;
  }
  .pagination-btn.active {
    background-color: #1E40AF;
    color: white;
    border: 1px solid #1E3A8A;
  }

  @media (max-width: 768px) {
    /* Form Filter */
    form.flex.items-center.space-x-4 {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    /* Pagination */
    .absolute.bottom-2.right-4 {
      position: static;
      margin-top: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* Table */
    table th, table td {
      font-size: 10px;
      padding: 4px;
    }
  }
</style>

<!-- Script -->
<script>
  function showTable(index) {
    const total = {{ count($grupTanggal) }}; 
    for (let i = 1; i <= total; i++) {
      const table = document.getElementById('table' + i);
      const btn = document.getElementById('btn' + i);

      if (i === index) {
        table.classList.remove('hidden');
        btn.classList.add('active');
      } else {
        table.classList.add('hidden');
        btn.classList.remove('active');
      }
    }
  }
</script>

@endsection