@extends('admin.stakeholders.layout')

@section('title', 'Profil')

@section('content')
 <div class="flex justify-center items-center min-h-screen bg-gray-white">
    <div class="max-w-3xl w-full bg-white rounded-2xl p-10 border border-gray-200">
      <h2 class="text-3xl font-bold text-center text-blue-900 mb-8 tracking-wide">Profil Pengguna</h2>

      @if(session('success'))
      <div class="mb-6 px-4 py-3 bg-green-100 text-green-800 rounded-lg shadow-sm text-center font-semibold">
        {{ session("success") }}
      </div>
      @endif @if($errors->any())
      <div class="mb-6 px-4 py-3 bg-red-100 text-red-700 rounded-lg shadow-sm">
        <ul class="list-disc list-inside space-y-1 text-sm">
          @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
      @endif

      <form action="{{ route('profile.update') }}" method="POST" autocomplete="off" class="space-y-8">
        @csrf
        

        <!-- Nama dan Email berdampingan -->
        <div class="flex gap-8">
          <div class="flex-1">
            <label for="name" class="block mb-2 font-semibold text-gray-700">Nama</label>
            <input
              id="name"
              type="text"
              name="name"
              value="{{ old('name', auth()->user()->name) }}"
              required
              class="w-full rounded-lg border border-gray-300 px-5 py-4 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 transition"
              placeholder="Masukkan nama lengkap"
            />
          </div>

          <div class="flex-1">
            <label for="email" class="block mb-2 font-semibold text-gray-700">Email</label>
            <input
              id="email"
              type="email"
              name="email"
              value="{{ old('email', auth()->user()->email) }}"
              required
              class="w-full rounded-lg border border-gray-300 px-5 py-4 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 transition"
              placeholder="Masukkan email"
            />
          </div>
        </div>

        <h3 class="text-xl font-semibold text-blue-900 mb-4 mt-8 border-b border-blue-900 pb-2">Ubah Kata Sandi (Opsional)</h3>

        <!-- Kata Sandi Lama dan Kata Sandi Baru berdampingan -->
        <div class="flex gap-8">
          <div class="flex-1">
            <label for="current_password" class="block mb-2 font-semibold text-gray-700">Kata Sandi Lama</label>
            <input
              id="current_password"
              type="password"
              name="current_password"
              autocomplete="off"
              class="w-full rounded-lg border border-gray-300 px-5 py-4 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 transition"
              placeholder="Masukkan kata sandi lama"
            />
          </div>

          <div class="flex-1">
            <label for="new_password" class="block mb-2 font-semibold text-gray-700">Kata Sandi Baru</label>
            <input
              id="new_password"
              type="password"
              name="new_password"
              autocomplete="new-password"
              class="w-full rounded-lg border border-gray-300 px-5 py-4 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-600 transition"
              placeholder="Masukkan kata sandi baru"
            />
          </div>
        </div>

    <!-- Tombol Aksi -->
<div class="flex justify-start items-center mt-8 space-x-4">
  <!-- Tombol Kembali -->
  <a href="{{route('stakeholder.index')}}" class="bg-red-500 hover:bg-red-700 text-white px-6 py-3 rounded-xl transition font-semibold shadow-sm">
    Kembali
  </a>

  <!-- Tombol Simpan -->
  <button type="submit" class="bg-blue-900 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-xl shadow-md transition">
    Simpan
  </button>
</div>
      </form> 
    </div>
    </div>
@endsection