@extends('layouts.app')

@section('title', 'Data Guru')

@section('content')
<div x-data="{
    showModal: false,
    formData: {},
    openCreate() { this.formData = {}; this.showModal = true; },
    openEdit(data) { this.formData = data; this.showModal = true; }
}">

    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Data Guru</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Total: {{ $teachers->total() ?? 0 }} guru</p>
        </div>
        <button @click="openCreate()"
            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 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700">
            <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 Guru
        </button>
    </div>

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

    {{-- Filter --}}
    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cari Nama/NIP</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari..."
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 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">Gender</label>
                <select name="gender"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua</option>
                    <option value="male" {{ request('gender')==='male' ? 'selected' : '' }}>Laki-laki</option>
                    <option value="female" {{ request('gender')==='female' ? 'selected' : '' }}>Perempuan</option>
                </select>
            </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 focus:ring-primary-500 focus:border-primary-500 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>

    {{-- Tabel --}}
    <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 w-12">Foto</th>
                <th class="px-4 py-3">NIP</th>
                <th class="px-4 py-3">Nama</th>
                <th class="px-4 py-3">Gender</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($teachers ?? [] as $teacher)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3">
                        @if($teacher->photo_url)
                        <img src="{{ $teacher->photo_url }}" class="w-10 h-10 rounded-full object-cover"
                            alt="{{ $teacher->full_name }}">
                        @else
                        <div
                            class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center text-white text-sm font-semibold">
                            {{ strtoupper(substr($teacher->full_name, 0, 1)) }}
                        </div>
                        @endif
                    </td>
                    <td class="px-4 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">{{
                        $teacher->employee_number }}</td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $teacher->full_name }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $teacher->gender->label() }}</td>
                    <td class="px-4 py-3">
                        <x-badge :color="$teacher->user->is_active ? 'green' : 'red'">
                            {{ $teacher->user->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 flex-wrap">
                            <button
                                @click="openEdit({{ json_encode(['id' => $teacher->id, 'full_name' => $teacher->full_name, 'employee_number' => $teacher->employee_number, 'gender' => $teacher->gender]) }})"
                                class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400">Edit</button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-400">Tidak ada data guru</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($teachers) && $teachers->hasPages())
            <x-slot:pagination>{{ $teachers->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    {{-- MODAL FORM GURU --}}
    <x-modal :show="'showModal'" title="Data Guru" size="lg">
        <form
            :action="formData.id ? '{{ url('admin/teachers') }}/' + formData.id : '{{ route('admin.teachers.store') }}'"
            method="POST" enctype="multipart/form-data" class="space-y-4" id="teacher-modal-form">
            @csrf
            <template x-if="formData.id">
                <input type="hidden" name="_method" value="PUT">
            </template>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama Lengkap</label>
                    <input type="text" name="full_name" x-model="formData.full_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">
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">NIP</label>
                    <input type="text" name="employee_number" x-model="formData.employee_number" 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">
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Gender</label>
                    <select name="gender" x-model="formData.gender"
                        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">
                        <option value="male">Laki-laki</option>
                        <option value="female">Perempuan</option>
                    </select>
                </div>
            </div>

            {{-- Photo Upload --}}
            <x-photo-upload name="photo" label="Foto Guru" :max-mb="2" />

            <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="teacher-modal-form"
                    class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600">Simpan</button>
            </x-slot:footer>
        </form>
    </x-modal>

</div>
@endsection