@extends('layouts.app')

@section('title', 'Manajemen Fitur')

@section('content')
<div class="container mx-auto py-4">
    <!-- Header -->
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-xl font-bold">Manajemen Fitur</h3>
        <button class="bg-blue-600 text-white px-3 py-1 rounded" data-bs-toggle="modal" data-bs-target="#modalTambah">
            <i class="bi bi-plus-lg mr-1"></i> Tambah Fitur
        </button>
    </div>

    <!-- Tabel Fitur -->
    <div class="bg-white rounded-lg shadow-sm">
        <div class="p-4">
<table class="w-full table-fixed border border-gray-300 text-left">
    <thead class="bg-gray-100">
        <tr>
            <th class="w-[10%] p-2 border border-gray-300">Nomor</th>
            <th class="w-[70%] p-2 border border-gray-300">Fitur</th>
            <th class="w-[20%] p-2 border border-gray-300 text-center">Aksi</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($fiturs as $key => $fitur)
        <tr class="hover:bg-gray-50">
            <td class="p-2 border border-gray-300">{{ $key + 1 }}</td>
            <td class="p-2 border border-gray-300 truncate whitespace-nowrap">{{ $fitur->nama_fitur }}</td>
            <td class="p-2 border border-gray-300 text-center">
                <div class="flex justify-center space-x-2">
                    <button class="text-blue-600 flex items-center pr-4" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $fitur->id }}">
                        <i class="bi bi-pencil mr-1"></i> Ubah
                    </button>
                    <form action="{{ route('admin.fitur.destroy', $fitur->id) }}"
                          method="POST"
                          class="inline"
                          onsubmit="return confirm('Yakin mau hapus fitur ini?')">
                        @csrf
                        @method('DELETE')
                        <button class="text-red-600 flex items-center">
                            <i class="bi bi-trash mr-1"></i> Hapus
                        </button>
                    </form>
                </div>
            </td>
        </tr>
        @empty
        <tr>
            <td colspan="3" class="p-2 text-center text-gray-500">Belum ada fitur</td>
        </tr>
        @endforelse
    </tbody>
</table>

        </div>
    </div>
</div>

<!-- Modal Tambah -->
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.fitur.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title text-lg font-medium">Tambah Fitur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <label class="block text-sm font-medium">Nama Fitur</label>
                    <input type="text" name="nama_fitur" class="w-full p-2 border rounded" required>
                </div>
            </div>
            <div class="modal-footer">
                <button class="bg-gray-300 text-black px-3 py-1 rounded" data-bs-dismiss="modal">Batal</button>
                <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Edit -->
@foreach ($fiturs as $fitur)
<div class="modal fade" id="modalEdit{{ $fitur->id }}" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.fitur.update', $fitur->id) }}" method="POST" class="modal-content">
            @csrf
            @method('PUT')
            <div class="modal-header">
                <h5 class="modal-title text-lg font-medium">Edit Fitur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <label class="block text-sm font-medium">Nama Fitur</label>
                    <input type="text" name="nama_fitur" value="{{ $fitur->nama_fitur }}" class="w-full p-2 border rounded" required>
                </div>
            </div>
            <div class="modal-footer">
                <button class="bg-gray-300 text-black px-3 py-1 rounded" data-bs-dismiss="modal">Batal</button>
                <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection