@extends('simaju.layouts.main')
@section('title', 'Edit Anggota')
@section('page-title', 'Edit Anggota')
@section('page-subtitle', 'Perbarui data anggota perpustakaan')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <!-- Elegant Header -->
        <div class="relative bg-gradient-to-br from-orange-600 via-amber-600 to-yellow-700 px-8 py-8">
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white rounded-full -ml-24 -mb-24"></div>
            </div>
            <div class="relative flex items-center gap-5">
                <div class="w-16 h-16 bg-white bg-opacity-20 backdrop-blur-lg rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-user-edit text-white text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-white font-heading mb-1">Edit Anggota</h2>
                    <p class="text-orange-100">Perbarui informasi anggota: {{ $anggota->nama_anggota }}</p>
                </div>
            </div>
        </div>

        <!-- Form -->
        <form action="{{ route('perpustakaan.anggota.update', $anggota) }}" method="POST" class="p-8">
            @csrf
            @method('PUT')

            <!-- Section: Informasi Anggota -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-info-circle text-orange-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Informasi Anggota</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Jenis Anggota (Read Only) -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-3">
                            Jenis Anggota
                        </label>
                        <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                                    @if($anggota->jenis_anggota === 'siswa')
                                        <i class="fas fa-user-graduate text-orange-600"></i>
                                    @elseif($anggota->jenis_anggota === 'guru')
                                        <i class="fas fa-chalkboard-teacher text-orange-600"></i>
                                    @else
                                        <i class="fas fa-user text-orange-600"></i>
                                    @endif
                                </div>
                                <span class="font-semibold text-gray-700 capitalize">{{ $anggota->jenis_anggota }}</span>
                            </div>
                        </div>
                        <input type="hidden" name="jenis_anggota" value="{{ $anggota->jenis_anggota }}">
                    </div>

                    <!-- No Anggota -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            No. Anggota <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               name="no_anggota" 
                               value="{{ old('no_anggota', $anggota->no_anggota) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 @error('no_anggota') border-red-500 @enderror"
                               required>
                        @error('no_anggota')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">
                            Status <span class="text-red-500">*</span>
                        </label>
                        <select name="status" 
                                class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 @error('status') border-red-500 @enderror"
                                required>
                            <option value="aktif" {{ old('status', $anggota->status) === 'aktif' ? 'selected' : '' }}>Aktif</option>
                            <option value="nonaktif" {{ old('status', $anggota->status) === 'nonaktif' ? 'selected' : '' }}>Non-aktif</option>
                            <option value="suspend" {{ old('status', $anggota->status) === 'suspend' ? 'selected' : '' }}>Suspend</option>
                        </select>
                        @error('status')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>


            <!-- Section: Data Pribadi -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-user text-blue-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Data Pribadi</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Nama Lengkap <span class="text-red-500">*</span></label>
                        <input type="text" name="nama_anggota" value="{{ old('nama_anggota', $anggota->nama_anggota) }}" class="w-full px-4 py-3 border border-gray-300 rounded-xl" required>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Email <span class="text-red-500">*</span></label>
                        <input type="email" name="email" value="{{ old('email', $anggota->email) }}" class="w-full px-4 py-3 border border-gray-300 rounded-xl" required>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">No. Telepon <span class="text-red-500">*</span></label>
                        <input type="text" name="no_telepon" value="{{ old('no_telepon', $anggota->no_telepon) }}" class="w-full px-4 py-3 border border-gray-300 rounded-xl" required>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Jenis Kelamin <span class="text-red-500">*</span></label>
                        <div class="flex gap-6">
                            <label class="flex items-center gap-2"><input type="radio" name="jenis_kelamin" value="Laki-laki" {{ old('jenis_kelamin', $anggota->jenis_kelamin) === 'Laki-laki' ? 'checked' : '' }} required><span>Laki-laki</span></label>
                            <label class="flex items-center gap-2"><input type="radio" name="jenis_kelamin" value="Perempuan" {{ old('jenis_kelamin', $anggota->jenis_kelamin) === 'Perempuan' ? 'checked' : '' }} required><span>Perempuan</span></label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Tanggal Lahir</label>
                        <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', $anggota->tanggal_lahir) }}" class="w-full px-4 py-3 border border-gray-300 rounded-xl">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Alamat Lengkap <span class="text-red-500">*</span></label>
                        <textarea name="alamat" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-xl" required>{{ old('alamat', $anggota->alamat) }}</textarea>
                    </div>
                </div>
            </div>


            <!-- Section: Masa Keanggotaan -->
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-calendar-alt text-green-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800">Masa Keanggotaan</h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Tanggal Bergabung <span class="text-red-500">*</span></label>
                        <input type="date" name="tanggal_bergabung" value="{{ old('tanggal_bergabung', $anggota->tanggal_bergabung) }}" class="w-full px-4 py-3 border border-gray-300 rounded-xl" required>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Tanggal Berakhir</label>
                        <input type="date" name="tanggal_berakhir" value="{{ old('tanggal_berakhir', $anggota->tanggal_berakhir) }}" class="w-full px-4 py-3 border border-gray-300 rounded-xl">
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 pt-6 border-t-2 border-gray-100">
                <button type="submit" class="flex-1 px-8 py-4 bg-gradient-to-r from-orange-600 via-amber-600 to-yellow-600 text-white font-bold rounded-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-3">
                    <i class="fas fa-save text-xl"></i>
                    <span class="text-lg">Update Anggota</span>
                </button>
                <a href="{{ route('perpustakaan.anggota.index') }}" class="flex-1 px-8 py-4 bg-gray-100 text-gray-700 font-bold text-center rounded-xl hover:bg-gray-200 transition-all duration-200 flex items-center justify-center gap-3">
                    <i class="fas fa-arrow-left"></i>
                    <span class="text-lg">Kembali</span>
                </a>
            </div>
        </form>
    </div>
</div>
@endsection