@extends('layouts.app')

@push('styles')
  <script src="https://cdn.tailwindcss.com"></script>
  <link
    href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
    rel="stylesheet"
  />
  <style>
    /* Kartları daha net, basık ve modern yapar */
    .card-box {
      max-width: 360px;
      padding: 1rem;
      border-radius: 1.5rem;
      background: #fff;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      transition: transform .3s, box-shadow .3s;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }
    .card-box:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 12px 36px rgba(0,0,0,0.12);
    }
    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }
    .soft-badge {
      background: #d1fae5;
      color: #059669;
      font-size: 0.75rem;
      border-radius: 6px;
      padding: 0.2rem 0.6rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .action-btn {
      padding: 0.3rem 0.6rem;
      font-size: 0.75rem;
      white-space: nowrap;
    }
  </style>
@endpush

@section('admin_content')
<main class="app-main bg-white min-h-screen py-4">
  <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4 px-2">
      <h4 class="fw-bold text-secondary mb-0 text-xl">Başlıklar</h4>
      <a href="{{ route('admin.titles.create') }}" class="btn btn-success rounded-3">+ Yeni Başlık Ekle</a>
    </div>

    <div class="row gx-4 gy-4 px-2">
      @forelse($titles as $title)
        <div class="col-12 col-sm-6 col-md-4 col-xl-3">
          <div class="card-box mx-auto">
            <!-- Tip ve Telefon Linki -->
            <div class="info-row">
              <span class="soft-badge">{{ $title->type == 0 ? 'Doğrudan' : 'Whatsapp' }}</span>
              <a href="{{ route('admin.phones.index', ['titles' => $title->id]) }}" class="soft-badge">
                Telefon Numaraları
              </a>
            </div>

            <!-- Başlık ve ID -->
            <div class="mb-4 px-1">
              <h3 class="text-lg font-semibold text-gray-800 truncate">#{{ $title->title }}</h3>
              <p class="text-xs text-gray-500 mt-1">ID: {{ $title->id }}</p>
            </div>

            <!-- Düğmeler -->
            <div class="d-flex justify-center gap-2 flex-nowrap">
              <a href="{{ route('admin.titles.charts', $title->id) }}"
                 class="action-btn bg-purple-100 text-purple-700 rounded-full hover:bg-purple-200 transition d-flex items-center gap-1">
                <i class="ri-bar-chart-2-line"></i><span>Grafik</span>
              </a>

              <a href="{{ route('admin.messages.create', $title->id) }}"
                 class="action-btn bg-green-100 text-green-700 rounded-full hover:bg-green-200 transition d-flex items-center gap-1">
                <i class="ri-message-3-line"></i><span>Toplu Mesaj Ekle</span>
              </a>

              <a href="{{ route('admin.titles.edit', $title->id) }}"
                 class="action-btn bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition d-flex items-center gap-1">
                <i class="ri-edit-line"></i><span>Düzenle</span>
              </a>
              <form action="{{ route('admin.titles.destroy', $title->id) }}" method="POST" onsubmit="return confirm('Silmek istediğinize emin misiniz?');">
                @csrf @method('DELETE')
                <button type="submit"
                        class="action-btn bg-red-100 text-red-600 rounded-full hover:bg-red-200 transition d-flex items-center gap-1">
                  <i class="ri-delete-bin-line"></i><span>Sil</span>
                </button>
              </form>
            </div>
          </div>
        </div>
      @empty
        <div class="col-12 text-center text-gray-500">Kayıt bulunamadı.</div>
      @endforelse
    </div>

    {{-- Sayfalama yok: $titles bir Collection oluyor --}}
  </div>
</main>
@endsection