@view('header', [ 'title' => 'Settings' ])

<div class="breadcrumb">
    <ul>
        <li><a href="/">Banq</a></li>
        <li class="is-active"><a href="/auth/settings">Settings</a></li>
    </ul>
</div>

<h1 class="title">Settings</h1>

@view('messages')
@view('errors')

<form class="box" method="post" action="/auth/settings/change_details">
    @view('csrf_token')

    <h2 class="title is-4">Change user details</h2>

    <div class="columns">
        <div class="column">
            <div class="field">
                <label class="label" for="firstname">First name</label>
                <input class="input" type="text" id="firstname" name="firstname" value="{{ old('firstname', Auth::user()->firstname) }}" required>
            </div>
        </div>
        <div class="column">
            <div class="field">
                <label class="label" for="lastname">Last name</label>
                <input class="input" type="text" id="lastname" name="lastname" value="{{ old('lastname', Auth::user()->lastname) }}" required>
            </div>
        </div>
    </div>

    <div class="field">
        <label class="label" for="username">Username</label>
        <input class="input" type="text" id="username" name="username" value="{{ old('username', Auth::user()->username) }}" required>
    </div>

    <div class="field">
        <label class="label" for="email">Email address</label>
        <input class="input" type="email" id="email" name="email" value="{{ old('email', Auth::user()->email) }}" required>
    </div>

    <div class="field">
        <label class="label" for="phone_number">Phone number</label>
        <input class="input" type="tel" id="phone_number" name="phone_number" value="{{ old('phone_number', Auth::user()->phone_number) }}" required>
    </div>

    <div class="columns">
        <div class="column">
            <div class="field">
                <label class="label" for="sex">Sex</label>
                <select class="input" id="sex" name="sex" required>
                    <option value="" disabled {{ old('sex', Auth::user()->sex) == '' ? 'selected' : '' }}>Choose a sex</option>
                    <option value="M" {{ old('sex', Auth::user()->sex) == 'M' ? 'selected' : '' }}>Male</option>
                    <option value="F" {{ old('sex', Auth::user()->sex) == 'F' ? 'selected' : '' }}>Female</option>
                    <option value="X" {{ old('sex', Auth::user()->sex) == 'X' ? 'selected' : '' }}>Complicated / other</option>
                </select>
            </div>
        </div>
        <div class="column">
            <div class="field">
                <label class="label" for="birth_date">Birth date</label>
                <input class="input" type="date" id="birth_date" name="birth_date" value="{{ old('birth_date', Auth::user()->birth_date) }}" required>
            </div>
        </div>
    </div>

    <div class="columns">
        <div class="column">
            <div class="field">
                <label class="label" for="address">Address (street with house number)</label>
                <input class="input" type="text" id="address" name="address" value="{{ old('address', Auth::user()->address) }}" required>
            </div>
        </div>
        <div class="column">
            <div class="field">
                <label class="label" for="postcode">Postcode</label>
                <input class="input" type="text" id="postcode" name="postcode" value="{{ old('postcode', Auth::user()->postcode) }}" required>
            </div>
        </div>
    </div>

    <div class="columns">
        <div class="column">
            <div class="field">
                <label class="label" for="city">City</label>
                <input class="input" type="text" id="city" name="city" value="{{ old('city', Auth::user()->city) }}" required>
            </div>
        </div>
        <div class="column">
            <div class="field">
                <label class="label" for="region">Region</label>
                <select class="input" id="region" name="region" required>
                    <option value="" disabled {{ old('region', Auth::user()->region) == '' ? 'selected' : '' }}>Choose a region</option>
                    <option value="Drenthe" {{ old('region', Auth::user()->region) == 'Drenthe' ? 'selected' : '' }}>Drenthe</option>
                    <option value="Flevoland" {{ old('region', Auth::user()->region) == 'Flevoland' ? 'selected' : '' }}>Flevoland</option>
                    <option value="Friesland" {{ old('region', Auth::user()->region) == 'Friesland' ? 'selected' : '' }}>Friesland</option>
                    <option value="Gelderland" {{ old('region', Auth::user()->region) == 'Gelderland' ? 'selected' : '' }}>Gelderland</option>
                    <option value="Groningen" {{ old('region', Auth::user()->region) == 'Groningen' ? 'selected' : '' }}>Groningen</option>
                    <option value="Limburg" {{ old('region', Auth::user()->region) == 'Limburg' ? 'selected' : '' }}>Limburg</option>
                    <option value="Noord-Brabant" {{ old('region', Auth::user()->region) == 'Noord-Brabant' ? 'selected' : '' }}>Noord-Brabant</option>
                    <option value="Noord-Holland" {{ old('region', Auth::user()->region) == 'Noord-Holland' ? 'selected' : '' }}>Noord-Holland</option>
                    <option value="Overijssel" {{ old('region', Auth::user()->region) == 'Overijssel' ? 'selected' : '' }}>Overijssel</option>
                    <option value="Utrecht" {{ old('region', Auth::user()->region) == 'Utrecht' ? 'selected' : '' }}>Utrecht</option>
                    <option value="Zeeland" {{ old('region', Auth::user()->region) == 'Zeeland' ? 'selected' : '' }}>Zeeland</option>
                    <option value="Zuid-Holland" {{ old('region', Auth::user()->region) == 'Zuid-Holland' ? 'selected' : '' }}>Zuid-Holland</option>
                </select>
            </div>
        </div>
    </div>

    <div class="field">
        <button class="button is-link" type="submit">Save</button>
    </div>
</form>

<form class="box" method="post" action="/auth/settings/change_password">
    @view('csrf_token')

    <h2 class="title is-4">Change password</h2>

    <div class="field">
        <label class="label" for="old_password">Old password</label>
        <input class="input" type="password" id="old_password" name="old_password" required>
    </div>

    <div class="field">
        <label class="label" for="password">New password</label>
        <input class="input" type="password" id="password" name="password" required>
    </div>

    <div class="field">
        <label class="label" for="password_confirmation">Confirm new password</label>
        <input class="input" type="password" id="password_confirmation" name="password_confirmation" required>
    </div>

    <div class="field">
        <button class="button is-link" type="submit">Save</button>
    </div>
</form>

<div class="box">
    <h2 class="title is-4">Active sessions</h2>
    @foreach ($active_sessions as $session):
        <div class="box">
            <h1 class="title is-5">
                <a href="https://ipinfo.io/{{ $session->ip }}" target="_blank" rel="noreferrer">{{ $session->ip }}</a> using {{ $session->browser }} {{ $session->version }} on {{ $session->platform }}
                @if ($session->session == $_COOKIE[SESSION_COOKIE_NAME]):
                    <div class="tag is-link" style="margin-left: 16px;">Current session</div>
                @endif
            </h1>
            <p style="margin-bottom: 16px;">Created on {{ $session->created_at }}, last used on {{ $session->updated_at }} and expires on {{ $session->expires_at }}</p>
            <p><a class="button is-danger" href="/auth/sessions/{{ $session->id }}/revoke">Revoke session</a></p>
        </div>
    @endforeach
</div>

<div class="box">
    <h2 class="title is-4">Delete account</h2>
    <p><a class="button is-danger" href="/auth/settings/delete">Delete account</a></p>
</div>

@view('footer')