@extends('layouts.panel')

@section('content')
<div class="mx-auto max-w-4xl px-4 py-6">
  <div>
    <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Ayarlar</h1>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Profil ve güvenlik ayarları.</p>
  </div>

  @if(session('success'))
    <div class="mt-4 rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-900/40 dark:bg-green-900/20 dark:text-green-200">
      {{ session('success') }}
    </div>
  @endif

  @if($errors->any())
    <div class="mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-200">
      <ul class="list-disc pl-5">
        @foreach($errors->all() as $e)
          <li>{{ $e }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="mt-6 grid gap-4 lg:grid-cols-2">
    <div class="rounded-3xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
      <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Profil</h2>

      <form class="mt-4 space-y-3" method="POST" action="{{ route('settings.profile.update') }}">
        @csrf
        <div>
          <label class="text-sm text-gray-600 dark:text-gray-300">Ad Soyad</label>
          <input name="name" value="{{ old('name', $user->name) }}"
                 class="mt-1 w-full rounded-2xl border border-gray-200 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-gray-200 dark:border-gray-800 dark:bg-gray-950 dark:focus:ring-gray-800" />
        </div>

        <div>
          <label class="text-sm text-gray-600 dark:text-gray-300">E-posta</label>
          <input name="email" value="{{ old('email', $user->email) }}"
                 class="mt-1 w-full rounded-2xl border border-gray-200 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-gray-200 dark:border-gray-800 dark:bg-gray-950 dark:focus:ring-gray-800" />
        </div>

        <button class="mt-2 inline-flex items-center justify-center rounded-2xl bg-gray-900 px-4 py-2 text-sm font-semibold text-white dark:bg-gray-100 dark:text-gray-900">
          Kaydet
        </button>
      </form>
    </div>

    <div class="rounded-3xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
      <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">Şifre</h2>

      <form class="mt-4 space-y-3" method="POST" action="{{ route('settings.password.update') }}">
        @csrf
        <div>
          <label class="text-sm text-gray-600 dark:text-gray-300">Mevcut şifre</label>
          <input type="password" name="current_password"
                 class="mt-1 w-full rounded-2xl border border-gray-200 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-gray-200 dark:border-gray-800 dark:bg-gray-950 dark:focus:ring-gray-800" />
        </div>

        <div>
          <label class="text-sm text-gray-600 dark:text-gray-300">Yeni şifre</label>
          <input type="password" name="password"
                 class="mt-1 w-full rounded-2xl border border-gray-200 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-gray-200 dark:border-gray-800 dark:bg-gray-950 dark:focus:ring-gray-800" />
        </div>

        <div>
          <label class="text-sm text-gray-600 dark:text-gray-300">Yeni şifre (tekrar)</label>
          <input type="password" name="password_confirmation"
                 class="mt-1 w-full rounded-2xl border border-gray-200 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-gray-200 dark:border-gray-800 dark:bg-gray-950 dark:focus:ring-gray-800" />
        </div>

        <button class="mt-2 inline-flex items-center justify-center rounded-2xl bg-gray-900 px-4 py-2 text-sm font-semibold text-white dark:bg-gray-100 dark:text-gray-900">
          Şifreyi Güncelle
        </button>
      </form>
    </div>
  </div>
</div>
@endsection