@extends('layouts.app')

@section('content')
    <div class="mx-auto max-w-lg px-4 py-16">
        @include('customer.partials.nav')

        <h1 class="text-2xl font-bold text-slate-900 mb-6">Szerkesztés</h1>

        @if (session('profile_updated'))
            <div class="mb-4 rounded-md bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-700">Adatai mentve.</div>
        @endif
        @if (session('password_updated'))
            <div class="mb-4 rounded-md bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-700">Jelszava megváltoztatva.</div>
        @endif
        @if ($errors->any())
            <div class="mb-4 rounded-md bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
                <ul class="list-disc pl-4">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('customer.profile.update') }}" class="space-y-4">
            @csrf
            @method('PUT')
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Név</label>
                <input type="text" name="name" value="{{ old('name', $customer->name) }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">E-mail cím</label>
                <input type="email" value="{{ $customer->email }}" disabled class="w-full rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-500">
                <p class="mt-1 text-xs text-slate-400">Az e-mail cím módosítása jelenleg nem lehetséges.</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Telefonszám</label>
                <input type="text" name="phone" value="{{ old('phone', $customer->phone) }}" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <button type="submit" class="rounded-md bg-brand-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-800">Mentés</button>
        </form>

        <h2 class="mt-10 text-lg font-semibold text-slate-900">Jelszó módosítása</h2>
        <form method="POST" action="{{ route('customer.profile.password') }}" class="mt-3 space-y-4">
            @csrf
            @method('PUT')
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Jelenlegi jelszó</label>
                <input type="password" name="current_password" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Új jelszó</label>
                <input type="password" name="password" required minlength="8" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Új jelszó megerősítése</label>
                <input type="password" name="password_confirmation" required minlength="8" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <button type="submit" class="rounded-md bg-brand-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-800">Jelszó módosítása</button>
        </form>

        <div id="fiok-torlese" class="mt-12 rounded-lg border border-red-200 p-6">
            <h2 class="text-sm font-semibold text-red-700">Fiók törlése</h2>
            <p class="mt-1 text-xs text-slate-500">
                A törlés személyes adatait (név, e-mail, telefonszám) anonimizálja, a fiók a továbbiakban nem használható.
                Korábbi rendelései megmaradnak, de a fiókjához többé nem lesznek köthetők.
            </p>

            @if ($errors->has('password'))
                <div class="mt-3 rounded-md bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
                    {{ $errors->first('password') }}
                </div>
            @endif

            <form method="POST" action="{{ route('customer.destroy') }}" onsubmit="return confirm('Biztosan törli a fiókját? Ez nem vonható vissza.');" class="mt-3 flex flex-wrap items-end gap-3">
                @csrf
                @method('DELETE')
                <div>
                    <label class="block text-xs font-medium text-slate-700 mb-1">Jelszó megerősítése</label>
                    <input type="password" name="password" required class="rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
                <button type="submit" class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700">Fiók végleges törlése</button>
            </form>
        </div>
    </div>
@endsection