@extends('layouts.app')

@section('title', 'Data Mata Pelajaran')

@section('content')
<div
   x-data="{ showModal: false, formData: {}, showConfirm: false, showConfirmUrl: '', confirmToggle(url) { this.showConfirmUrl = url; this.showConfirm = true; } }">
   <div class="flex items-center justify-between mb-6">
      <div>
         <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Data Mata Pelajaran</h1>
         <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Kelola mata pelajaran aktif dan non-aktif</p>
      </div>
      <button @click="formData = {}; showModal = true"
         class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">
         <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd"
               d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
               clip-rule="evenodd" />
         </svg>
         Tambah Mapel
      </button>
   </div>

   @if(session('success'))<x-alert type="success">{{ session('success') }}</x-alert>@endif

   <x-filter-bar>
      <x-slot:fields>
         <div>
            <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cari</label>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Kode atau nama mapel"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
         </div>
         <div>
            <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Status</label>
            <select name="status"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
               <option value="">Semua</option>
               <option value="1" {{ request('status')==='1' ? 'selected' : '' }}>Aktif</option>
               <option value="0" {{ request('status')==='0' ? 'selected' : '' }}>Non-aktif</option>
            </select>
         </div>
      </x-slot:fields>
   </x-filter-bar>

   <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
      <x-data-table>
         <x-slot:heading>
            <th class="px-4 py-3">Kode</th>
            <th class="px-4 py-3">Nama Mapel</th>
            <th class="px-4 py-3">Status</th>
            <th class="px-4 py-3 text-right">Aksi</th>
         </x-slot:heading>
         <x-slot:body>
            @forelse($subjects ?? [] as $subject)
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
               <td class="px-4 py-3 font-mono text-sm text-gray-700 dark:text-gray-300">{{ $subject->code }}</td>
               <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $subject->name }}</td>
               <td class="px-4 py-3">
                  <x-badge :color="$subject->is_active ? 'green' : 'red'">{{ $subject->is_active ? 'Aktif' : 'Non-aktif'
                     }}</x-badge>
               </td>
               <td class="px-4 py-3 text-right">
                  <div class="flex items-center justify-end gap-2">
                     <button
                        @click="formData = {{ json_encode(['id' => $subject->id, 'name' => $subject->name, 'code' => $subject->code]) }}; showModal = true"
                        class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400">Edit</button>
                     <button type="button" @click="confirmToggle('{{ route('admin.subjects.toggle', $subject->id) }}')"
                        class="text-xs font-medium text-{{ $subject->is_active ? 'red' : 'green' }}-600 hover:underline">
                        {{ $subject->is_active ? 'Non-aktifkan' : 'Aktifkan' }}
                     </button>
                  </div>
               </td>
            </tr>
            @empty
            <tr>
               <td colspan="4" class="px-4 py-8 text-center text-gray-400">Tidak ada data mata pelajaran</td>
            </tr>
            @endforelse
         </x-slot:body>
         @if(isset($subjects) && $subjects->hasPages())
         <x-slot:pagination>{{ $subjects->withQueryString()->links() }}</x-slot:pagination>
         @endif
      </x-data-table>
   </div>

   <x-modal :show="'showModal'" title="Data Mata Pelajaran" size="md">
      <form :action="formData.id ? '{{ url('admin/subjects') }}/' + formData.id : '{{ route('admin.subjects.store') }}'"
         method="POST" class="space-y-4" id="subject-modal-form">
         @csrf
         <template x-if="formData.id">
            <input type="hidden" name="_method" value="PUT">
         </template>

         <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Kode Mapel</label>
            <input type="text" name="code" x-model="formData.code" required
               class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
               placeholder="Contoh: MTK10">
         </div>
         <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama Mapel</label>
            <input type="text" name="name" x-model="formData.name" required
               class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
               placeholder="Contoh: Matematika">
         </div>

         <x-slot:footer>
            <button type="button" @click="showModal = false"
               class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
            <button type="submit" form="subject-modal-form"
               class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Simpan</button>
         </x-slot:footer>
      </form>
   </x-modal>

   <x-confirm-dialog show="showConfirm" title="Konfirmasi Ubah Status Mata Pelajaran"
      message="Apakah Anda yakin ingin mengubah status mata pelajaran ini?" confirmText="Ya, Ubah" cancelText="Batal"
      method="PATCH" danger="false" />
</div>
@endsection