@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;
      min-height: 160px;
      height: auto;
    }
    .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.25rem;
      padding: 0 0.75rem;
    }
    .badge-visit {
      font-size: 0.65rem;
      padding: 0.2rem 0.6rem;
      background: #ecfdf5;
      color: #065f46;
      border-radius: 9999px;
      font-weight: 600;
      white-space: nowrap;
    }
    .action-btn {
      padding: 0.4rem 0.8rem;
      font-size: 0.75rem;
      white-space: nowrap;
    }
    .status-toggle { transform: scale(0.85); }
  </style>
@endpush

@section('admin_content')
<main class="app-main" style="background: #fff; min-height: 100vh;">
  <div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h4 class="fw-bold text-secondary mb-0" style="font-size: 1.5rem;">{{ $pageTitle ?? 'Telefonlar' }}</h4>
      <a href="{{ route('admin.phones.create') }}" class="btn btn-success rounded-3">+ Yeni Telefon Ekle</a>
    </div>

    @if(session('success'))
      <div class="mb-3 alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="row gx-4 gy-4">
      @forelse($phones as $phone)
        @php $title = $titles->firstWhere('id', $phone->titles)->title ?? '-' @endphp
        <div class="col-12 col-sm-6 col-md-4 col-xl-3">
          <div class="card-box mx-auto flex flex-col justify-between">

            <!-- Toplam Tıklanma & Durum -->
            <div class="info-row">
              <span class="badge-visit">Toplam Tıklanma: {{ $phone->visit }}</span>
              <div class="status-toggle">
                <label class="relative inline-flex items-center cursor-default">
                  <input type="checkbox" class="sr-only peer" {{ $phone->status ? 'checked' : '' }} disabled>
                  <div class="w-10 h-5 bg-gray-200 rounded-full peer-checked:bg-green-500 transition"></div>
                  <div class="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full transition peer-checked:translate-x-5"></div>
                </label>
              </div>
            </div>

            <!-- Başlık ve Numara -->
            <div class="info-row">
              <h3 class="text-base font-medium text-gray-900 truncate">#{{ $title }}</h3>
              <p class="text-xs text-gray-600 truncate">{{ $phone->phone }}</p>
            </div>

            <!-- Düğmeler -->
            <div class="d-flex justify-content-center align-items-center gap-2">
              <a href="{{ route('admin.phones.edit', $phone->id) }}"
                 class="action-btn bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition d-flex align-items-center gap-1">
                <i class="ri-edit-line"></i><span>Düzenle</span>
              </a>

              <form action="{{ route('admin.phones.destroy', $phone->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 align-items-center gap-1">
                  <i class="ri-delete-bin-line"></i><span>Sil</span>
                </button>
              </form>

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

          </div>
        </div>
      @empty
        <div class="col-12 text-center text-gray-500">Kayıt bulunamadı.</div>
      @endforelse
    </div>

    <div class="mt-4">
      {{ $phones->withQueryString()->links() }}
    </div>
  </div>
</main>
@endsection