@extends('admin.layouts.app')

@section('title', 'Settings')

@section('content')
    <div class="p-6">
        <div class="max-w-3xl mx-auto bg-white rounded-2xl shadow-md border border-slate-200 p-6">
            <h2 class="flex items-center gap-2 text-2xl font-semibold text-slate-800 mb-6">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.75" stroke="currentColor" class="w-6 h-6 text-[#1E293B]">
        <path stroke-linecap="round" stroke-linejoin="round"
            d="M16.5 10.5V6.75a4.5 4.5 0 0 0-9 0v3.75M4.5 10.5h15a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-15a1.5 1.5 0 0 1-1.5-1.5v-7.5a1.5 1.5 0 0 1 1.5-1.5z" />
    </svg>
    Account Settings
</h2>


            @if (session('success'))
                <div class="mb-4 p-3 rounded-lg bg-green-100 text-green-800 border border-green-300">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('password_success'))
                <div class="mb-4 p-3 rounded-lg bg-blue-100 text-blue-800 border border-blue-300">
                    {{ session('password_success') }}
                </div>
            @endif


            <form method="POST" action="{{ route('admin.settings.update') }}" class="space-y-6">

                @csrf

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Full Name</label>
                    <input type="text" name="name" value="{{ old('name', $admin->name) }}"
                        class="w-full border border-slate-300 rounded-xl px-4 py-2.5 focus:ring-4 focus:ring-[#0061F2]/30 focus:border-[#0061F2] outline-none"
                        placeholder="Enter your name">
                    @error('name')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
                    <input type="email" name="email" value="{{ old('email', $admin->email) }}"
                        class="w-full border border-slate-300 rounded-xl px-4 py-2.5 focus:ring-4 focus:ring-[#0061F2]/30 focus:border-[#0061F2] outline-none"
                        placeholder="Enter your email">
                    @error('email')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="border-t border-slate-200 pt-4">
                    <h3 class="text-lg font-semibold text-slate-800 mb-3">Change Password</h3>

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">New Password</label>
                            <input type="password" name="password"
                                class="w-full border border-slate-300 rounded-xl px-4 py-2.5 focus:ring-4 focus:ring-[#0061F2]/30 focus:border-[#0061F2] outline-none"
                                placeholder="Enter new password">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Confirm Password</label>
                            <input type="password" name="password_confirmation"
                                class="w-full border border-slate-300 rounded-xl px-4 py-2.5 focus:ring-4 focus:ring-[#0061F2]/30 focus:border-[#0061F2] outline-none"
                                placeholder="Confirm new password">
                        </div>
                    </div>
                </div>

                <div class="pt-4">
    <button type="submit"
        class="inline-flex items-center justify-center gap-2 bg-[#1E293B] text-white px-5 py-2.5 rounded-xl hover:bg-[#0F172A] focus:ring-4 focus:ring-[#1E293B]/30 transition">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" stroke-width="1.75">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M5 12.75l5 5L20 7.75" />
        </svg>
        Save Changes
    </button>
</div>

            </form>
        </div>
    </div>
@endsection