@extends('admin::layouts.master')
@section('title', 'Languages')
@section('content')
<div class="container mx-auto px-4 py-6">
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Languages</h1>
    <a href="{{ route('admin.languages.create') }}" class="bg-primary text-white px-4 py-2 rounded-lg hover:opacity-90 transition">+ Add Language</a>
  </div>

  @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">{{ session('success') }}</div>
  @endif

  <div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="w-full">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Code</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Native Name</th>
          <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Default</th>
          <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Active</th>
          <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Order</th>
          <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
        @forelse($languages as $lang)
          <tr class="hover:bg-gray-50">
            <td class="px-4 py-3 font-mono font-bold">{{ $lang->code }}</td>
            <td class="px-4 py-3">{{ $lang->name }}</td>
            <td class="px-4 py-3">{{ $lang->native_name }}</td>
            <td class="px-4 py-3 text-center">{!! $lang->is_default ? '<span class="text-green-600 font-bold">✓</span>' : '' !!}</td>
            <td class="px-4 py-3 text-center">{!! $lang->is_active ? '<span class="text-green-600 font-bold">✓</span>' : '<span class="text-red-600">✗</span>' !!}</td>
            <td class="px-4 py-3 text-center">{{ $lang->sort_order }}</td>
            <td class="px-4 py-3 text-right space-x-2">
              <a href="{{ route('admin.languages.translations', $lang->code) }}" class="text-blue-600 hover:underline text-sm">Translations</a>
              <a href="{{ route('admin.languages.edit', $lang->id) }}" class="text-indigo-600 hover:underline text-sm">Edit</a>
              <form method="POST" action="{{ route('admin.languages.destroy', $lang->id) }}" class="inline" onsubmit="return confirm('Delete this language?')">
                @csrf @method('DELETE')
                <button class="text-red-600 hover:underline text-sm">Delete</button>
              </form>
            </td>
          </tr>
        @empty
          <tr><td colspan="7" class="px-4 py-8 text-center text-gray-500">No languages found.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection