@extends('compte.layout')
@php use App\Support\Content; $u = auth()->user(); @endphp

@section('compte')
    <div class="panel">
        <div class="panel-head"><h2 style="font-size:1.1rem">Mes informations</h2></div>

        <form method="post" action="{{ url('/compte/profil') }}" class="stack">
            @csrf @method('put')

            <div class="grid grid-2" style="gap:14px">
                <div class="field-group">
                    <label class="label" for="name">Nom complet</label>
                    <input class="input @error('name') is-invalid @enderror" id="name" name="name"
                           value="{{ old('name', $u->name) }}" required>
                    @error('name')<span class="field-error">{{ $message }}</span>@enderror
                </div>
                <div class="field-group">
                    <label class="label" for="email">Adresse e-mail</label>
                    <div class="input-icon">
                        <x-icon name="mail"/>
                        <input class="input @error('email') is-invalid @enderror" id="email" type="email" name="email"
                               value="{{ old('email', $u->email) }}" required>
                    </div>
                    @error('email')<span class="field-error">{{ $message }}</span>@enderror
                    <span class="hint">Modifier votre adresse déclenchera une nouvelle vérification.</span>
                </div>
                <div class="field-group">
                    <label class="label" for="phone">Téléphone</label>
                    <div class="input-icon">
                        <x-icon name="phone"/>
                        <input class="input" id="phone" name="phone" value="{{ old('phone', $u->phone) }}">
                    </div>
                </div>
                <div class="field-group">
                    <label class="label" for="ville">Ville</label>
                    <div class="input-icon">
                        <x-icon name="pin"/>
                        <input class="input" id="ville" name="ville" list="liste-villes" value="{{ old('ville', $u->ville) }}">
                    </div>
                    <datalist id="liste-villes">
                        @foreach(Content::villes() as [$v, $c])<option value="{{ $v }}">{{ $c }}</option>@endforeach
                    </datalist>
                </div>
                <div class="field-group">
                    <label class="label" for="cp">Code postal</label>
                    <input class="input @error('cp') is-invalid @enderror" id="cp" name="cp"
                           maxlength="12" value="{{ old('cp', $u->cp) }}">
                    @error('cp')<span class="field-error">{{ $message }}</span>@enderror
                </div>
                <x-pays-select :value="old('pays', $u->pays)" />
            </div>

            <div class="field-group">
                <label class="label" for="bio">Présentation</label>
                <textarea class="textarea" id="bio" name="bio" rows="4" maxlength="600"
                          placeholder="Quelques mots affichés sur vos annonces.">{{ old('bio', $u->bio) }}</textarea>
            </div>

            <label class="check">
                <input type="checkbox" name="newsletter" value="1" @checked(old('newsletter', $u->newsletter))>
                Recevoir la newsletter hebdomadaire CityMag
            </label>

            <div><button class="btn btn-primary" type="submit"><x-icon name="check"/> Enregistrer</button></div>
        </form>
    </div>

    <div class="panel">
        <div class="panel-head"><h2 style="font-size:1.1rem">Mot de passe</h2></div>

        <form method="post" action="{{ url('/compte/mot-de-passe') }}" class="stack">
            @csrf @method('put')

            <div class="grid grid-3" style="gap:14px">
                <div class="field-group">
                    <label class="label" for="current_password">Mot de passe actuel</label>
                    <input class="input @error('current_password') is-invalid @enderror" id="current_password"
                           type="password" name="current_password" autocomplete="current-password" required>
                    @error('current_password')<span class="field-error">{{ $message }}</span>@enderror
                </div>
                <div class="field-group">
                    <label class="label" for="new_password">Nouveau mot de passe</label>
                    <input class="input @error('password') is-invalid @enderror" id="new_password"
                           type="password" name="password" autocomplete="new-password" required>
                    @error('password')<span class="field-error">{{ $message }}</span>@enderror
                </div>
                <div class="field-group">
                    <label class="label" for="new_password_confirmation">Confirmer</label>
                    <input class="input" id="new_password_confirmation" type="password"
                           name="password_confirmation" autocomplete="new-password" required>
                </div>
            </div>

            <div><button class="btn btn-outline" type="submit"><x-icon name="lock"/> Changer le mot de passe</button></div>
        </form>
    </div>

    <div class="panel" style="border-color:#F2C4BC">
        <div class="panel-head"><h2 style="font-size:1.1rem">Supprimer mon compte</h2></div>
        <p class="small muted">
            La suppression est définitive : vos annonces, photos et messages sont effacés.
            Les factures déjà émises sont conservées pour des raisons comptables.
        </p>

        <form method="post" action="{{ url('/compte') }}" class="row" style="gap:10px;margin-top:12px;align-items:flex-end"
              onsubmit="return confirm('Supprimer définitivement votre compte CityMag ?')">
            @csrf @method('delete')
            <div class="field-group" style="flex:1;max-width:320px">
                <label class="label" for="del_password">Confirmez avec votre mot de passe</label>
                <input class="input" id="del_password" type="password" name="password" required autocomplete="current-password">
            </div>
            <button class="btn btn-outline" type="submit" style="border-color:#D9563A;color:#9B2C15">
                <x-icon name="trash"/> Supprimer
            </button>
        </form>
    </div>
@endsection