@extends('Component.layout')

@section('title', 'Settings - Iqra Parent Portal')
@section('breadcrumb', 'Parent Portal / Settings')

@section('content')
<div class="space-y-6 max-w-3xl mx-auto">

    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-100 text-emerald-800 text-xs font-semibold flex items-center gap-2">
        <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current shrink-0" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ session('success') }}
    </div>
    @endif

    @if($errors->any())
    <div class="bg-red-50 border border-red-100 text-red-700 p-4 rounded-2xl text-xs font-semibold flex items-start gap-3">
        <svg class="w-4 h-4 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <ul class="list-disc list-inside space-y-1">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="flex items-center gap-4">
        <a href="{{ route('parent.dashboard') }}" class="w-10 h-10 bg-white border border-slate-200 rounded-xl flex items-center justify-center text-slate-500 hover:text-indigo-600 hover:border-indigo-100 hover:bg-indigo-50 transition-all shadow-sm">
            <svg class="w-5 h-5 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        </a>
        <div>
            <h2 class="text-xl font-extrabold text-slate-800 tracking-tight">Parent Settings</h2>
            <p class="text-[11px] font-medium text-slate-500 mt-1">Manage your login credentials</p>
        </div>
    </div>

    <!-- Update Credentials Form -->
    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 flex items-center gap-3">
            <div class="w-8 h-8 rounded-xl bg-indigo-100 flex items-center justify-center">
                <svg class="w-4 h-4 text-indigo-600 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
            </div>
            <h3 class="text-sm font-extrabold text-slate-800">Update Credentials</h3>
        </div>
        <div class="p-6">
            <form action="{{ route('parent.settings.update') }}" method="POST" class="space-y-6">
                @csrf
                <div>
                    <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-2">Mobile Number (Username)</label>
                    <input type="text" name="mobile_number" value="{{ old('mobile_number', $student->mobile_number) }}" required
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-sm text-slate-800 font-semibold">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-2">Date of Birth (Password)</label>
                    <input type="date" name="dob" value="{{ old('dob', $student->dob->format('Y-m-d')) }}" required
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-sm text-slate-800 font-semibold">
                    <p class="text-[10px] text-slate-400 mt-2 font-medium bg-slate-50 p-2 rounded-lg border border-slate-100">
                        <span class="text-amber-500 font-bold uppercase tracking-widest mr-1">Note:</span> 
                        Changing this date of birth will instantly change your password for the parent portal. You must use the new Date of Birth as your password the next time you log in.
                    </p>
                </div>
                <div class="pt-2">
                    <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs rounded-xl transition-all shadow-md shadow-indigo-600/20">
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection