@extends('layouts.app')
@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-4">
  <div class="max-w-4xl mx-auto">
    <!-- Header Section -->
    <div class="mb-8">
      <div class="flex items-center gap-4 mb-6">
        <a href="{{ route('admin.voters.index') }}" 
           class="group flex items-center gap-2 text-slate-600 hover:text-blue-600 transition-colors duration-200">
          <div class="bg-white group-hover:bg-blue-50 p-2 rounded-full shadow-sm border border-slate-200 group-hover:border-blue-300 transition-all duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/>
            </svg>
          </div>
          <span class="font-medium">Kembali ke Daftar Pemilih</span>
        </a>
      </div>
      
      <div>
        <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent mb-2">
          Edit Data Pemilih
        </h1>
        <p class="text-slate-600">Perbarui informasi pemilih yang sudah terdaftar</p>
      </div>
    </div>

    <!-- Success Message -->
    @if(session('status'))
    <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-r-lg p-4 animate-fade-in">
      <div class="flex items-center">
        <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
        </svg>
        <span class="text-green-700 font-medium">{{ session('status') }}</span>
      </div>
    </div>
    @endif

    <!-- Error Messages -->
    @if ($errors->any())
    <div class="mb-6 bg-red-50 border-l-4 border-red-500 rounded-r-lg p-4 animate-fade-in">
      <div class="flex items-start">
        <svg class="w-5 h-5 text-red-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
        </svg>
        <div>
          <h3 class="text-red-800 font-medium mb-2">Terdapat kesalahan dalam form:</h3>
          <ul class="text-red-700 space-y-1">
            @foreach ($errors->all() as $error)
              <li class="flex items-start">
                <svg class="w-4 h-4 mt-0.5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
                {{ $error }}
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
    @endif

    <!-- Form Card -->
    <div class="bg-white rounded-2xl shadow-lg border border-slate-200 overflow-hidden">
      <div class="bg-gradient-to-r from-emerald-500 to-teal-600 p-6 text-white">
        <div class="flex items-center">
          <div class="bg-white/20 p-3 rounded-full mr-4">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
              <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
            </svg>
          </div>
          <div>
            <h2 class="text-xl font-semibold">Edit Form Data Pemilih</h2>
            <p class="text-emerald-100 text-sm">Perbarui informasi pemilih: {{ $voter->name }}</p>
          </div>
        </div>
      </div>

      <form method="POST" action="{{ route('admin.voters.update', $voter) }}" class="p-6">
        @csrf 
        @method('PUT')
        
        <div class="grid md:grid-cols-2 gap-6">
          <!-- NIS Field -->
          <div class="space-y-2">
            <label class="block text-sm font-semibold text-slate-700 mb-2">
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-2 text-slate-500" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zM8 6a2 2 0 114 0v1H8V6z" clip-rule="evenodd"/>
                </svg>
                NIS
                <span class="text-red-500 ml-1">*</span>
              </span>
            </label>
            <input name="nis" 
                   type="text" 
                   class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-200 bg-white hover:border-slate-400" 
                   value="{{ old('nis', $voter->nis) }}" 
                   placeholder="Masukkan NIS siswa"
                   required>
            <p class="text-xs text-slate-500">Nomor Induk Siswa yang unik</p>
          </div>

          <!-- Nama Field -->
          <div class="space-y-2">
            <label class="block text-sm font-semibold text-slate-700 mb-2">
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-2 text-slate-500" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                </svg>
                Nama Lengkap
                <span class="text-red-500 ml-1">*</span>
              </span>
            </label>
            <input name="name" 
                   type="text" 
                   class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-200 bg-white hover:border-slate-400" 
                   value="{{ old('name', $voter->name) }}" 
                   placeholder="Masukkan nama lengkap siswa"
                   required>
            <p class="text-xs text-slate-500">Nama lengkap sesuai data sekolah</p>
          </div>

          <!-- Kelas Field -->
          <div class="space-y-2">
            <label class="block text-sm font-semibold text-slate-700 mb-2">
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-2 text-slate-500" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"/>
                </svg>
                Kelas
              </span>
            </label>
            <input name="class" 
                   type="text" 
                   class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-200 bg-white hover:border-slate-400" 
                   value="{{ old('class', $voter->class) }}" 
                   placeholder="Contoh: X-4, XI IPA 2, XII IPS 1">
            <p class="text-xs text-slate-500">Kelas siswa saat ini (opsional)</p>
          </div>

          <!-- Status Aktif -->
          <div class="space-y-2">
            <label class="block text-sm font-semibold text-slate-700 mb-3">
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-2 text-slate-500" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                Status Pemilih
              </span>
            </label>
            <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
              <label class="flex items-center justify-between cursor-pointer">
                <div class="flex items-center">
                  <span class="text-sm font-medium text-slate-700">Aktifkan pemilih?</span>
                  <span class="ml-2 text-xs text-slate-500">(Dapat memilih dalam pemilihan)</span>
                </div>
                <div class="relative">
                  <input type="hidden" name="is_active" value="0">
                  <input type="checkbox" 
                         name="is_active" 
                         value="1"
                         class="sr-only peer" 
                         {{ old('is_active', $voter->is_active) ? 'checked' : '' }}>
                  <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                </div>
              </label>
            </div>
          </div>
        </div>

        <!-- Current Data Display -->
        <div class="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
          <h4 class="text-blue-900 font-medium mb-3 flex items-center">
            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
            </svg>
            Data Saat Ini
          </h4>
          <div class="grid md:grid-cols-3 gap-4 text-sm">
            <div>
              <span class="text-blue-600 font-medium">NIS:</span>
              <span class="text-blue-800 font-mono">{{ $voter->nis }}</span>
            </div>
            <div>
              <span class="text-blue-600 font-medium">Nama:</span>
              <span class="text-blue-800">{{ $voter->name }}</span>
            </div>
            <div>
              <span class="text-blue-600 font-medium">Status:</span>
              @if($voter->is_active)
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                  <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                  </svg>
                  Aktif
                </span>
              @else
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                  <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                  </svg>
                  Tidak Aktif
                </span>
              @endif
            </div>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row gap-3 pt-6 mt-6 border-t border-slate-200">
          <a href="{{ route('admin.voters.index') }}" 
             class="flex-1 bg-white border-2 border-slate-300 hover:border-slate-400 text-slate-700 hover:text-slate-800 px-6 py-3 rounded-lg font-medium transition-all duration-200 text-center">
            <svg class="w-4 h-4 inline mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
            Batal
          </a>
          <button type="submit" 
                  class="flex-1 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
            <svg class="w-4 h-4 inline mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
            </svg>
            Update Data Pemilih
          </button>
        </div>
      </form>
    </div>

    <!-- Info Card -->
    <div class="mt-6 bg-amber-50 border border-amber-200 rounded-lg p-4">
      <div class="flex items-start">
        <svg class="w-5 h-5 text-amber-600 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
        </svg>
        <div>
          <h4 class="text-amber-900 font-medium mb-1">Perhatian</h4>
          <ul class="text-amber-800 text-sm space-y-1">
            <li>• Pastikan NIS baru tidak sama dengan pemilih lain</li>
            <li>• Perubahan status aktif akan mempengaruhi kemampuan voting</li>
            <li>• Data yang telah diubah tidak dapat dikembalikan secara otomatis</li>
            <li>• Pemilih yang tidak aktif tidak dapat melakukan voting</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* Custom toggle switch animations */
input[type="checkbox"]:checked + div {
  animation: toggle-on 0.2s ease-out;
}

@keyframes toggle-on {
  0% { background-color: #e2e8f0; }
  100% { background-color: #059669; }
}
</style>
@endsection