@extends('layouts.app')

@section('title', 'Profile Settings')
@section('heading', 'Profile Settings')

@section('content')
    <div class="mb-6 flex flex-wrap gap-4 border-b border-slate-200 pb-4">
        <a href="{{ route('superadmin.settings.index') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">Platform</a>
        <a href="{{ route('superadmin.settings.email') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">Email Settings</a>
        <a href="{{ route('superadmin.settings.sms') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">SMS Settings</a>
        <a href="{{ route('superadmin.settings.whatsapp') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">WhatsApp Settings</a>
        <a href="{{ route('superadmin.settings.profile') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-primary text-white">Profile</a>
    </div>

    <x-card>
        <h3 class="mb-4 text-sm font-semibold text-slate-700">Super Admin profile</h3>
        <p class="mb-4 text-sm text-slate-500">Update your name, email and password.</p>
        <form action="{{ route('superadmin.settings.profile.update') }}" method="post" class="max-w-md space-y-4">
            @csrf
            @method('PUT')
            <div>
                <label for="name" class="block text-sm font-medium text-slate-700">Name</label>
                <input type="text" name="name" id="name" value="{{ old('name', $user->name) }}" required
                       class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-slate-700">Email</label>
                <input type="email" name="email" id="email" value="{{ old('email', $user->email) }}" required
                       class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('email') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="password" class="block text-sm font-medium text-slate-700">New password</label>
                <input type="password" name="password" id="password" value="" autocomplete="new-password"
                       class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
                       placeholder="Leave blank to keep current">
                @error('password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="password_confirmation" class="block text-sm font-medium text-slate-700">Confirm new password</label>
                <input type="password" name="password_confirmation" id="password_confirmation" value="" autocomplete="new-password"
                       class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
            </div>
            <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Update profile</button>
        </form>
    </x-card>
@endsection