@extends('admin.master')

@section('content')
<div class="mx-auto max-w-4xl">
    <div class="bg-white border border-gray-300 rounded-md p-4 sm:p-5">

        <div class="mb-5">
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Edit Admin Profile</h2>
            <p class="mt-1 text-sm text-gray-600">Update your name and password</p>
        </div>

        <form action="{{ route('admin.profile.update') }}" method="POST">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           name="name"
                           value="{{ old('name', $user->name) }}"
                           class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-1 focus:ring-black"
                           placeholder="Enter name">
                    @error('name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                    <input type="email"
                           value="{{ $user->email }}"
                           class="w-full border border-gray-300 rounded px-4 py-2 bg-gray-100 text-gray-600"
                           readonly>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">New Password</label>
                    <input type="password"
                           name="password"
                           class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-1 focus:ring-black"
                           placeholder="Enter new password">
                    @error('password')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Confirm Password</label>
                    <input type="password"
                           name="password_confirmation"
                           class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none focus:ring-1 focus:ring-black"
                           placeholder="Confirm new password">
                </div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <button type="submit"
                        class="bg-black text-white px-5 py-2 rounded text-sm sm:text-base">
                    Update
                </button>

                <a href="{{ route('admin.profile.show') }}"
                   class="text-center bg-gray-200 text-gray-800 px-5 py-2 rounded text-sm sm:text-base">
                    Back
                </a>
            </div>
        </form>
    </div>
</div>
@endsection