@extends('layouts.public')
@section('content')
    @include('includes.corano-breadcrumb', [
        'crumbs' => [
            ['label' => __('public.account.my_profile')],
        ],
    ])

    <section class="account-area section-padding">
        <div class="container">
            <p class="section-kicker">{{ __('public.account.account') }}</p>
            <h1 class="account-title">{{ __('public.profile.profile_settings') }}</h1>
            <p class="account-lead">{{ Auth::user()->first_name }} {{ Auth::user()->last_name }} · {{ Auth::user()->email }}</p>

            <div class="account-card">
                <h2 class="account-card-title">{{ __('public.profile.personal_info') }}</h2>
                <form class="r-form" method="POST" action="{{ __url('/profile') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="auth-field">
                                <label class="form-label" for="first_name">{{ __('public.profile.first_name') }}</label>
                                <input class="form-control" type="text" value="{{ old('first_name') ?? $user->first_name }}" id="first_name" name="first_name" autocomplete="given-name">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="auth-field">
                                <label class="form-label" for="last_name">{{ __('public.profile.last_name') }}</label>
                                <input class="form-control" type="text" value="{{ old('last_name') ?? $user->last_name }}" id="last_name" name="last_name" autocomplete="family-name">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="auth-field">
                                <label class="form-label" for="email">{{ __('public.profile.email') }}</label>
                                <input class="form-control" type="email" value="{{ $user->email }}" id="email" disabled>
                                <div class="account-field-action">
                                    @if($user->email_verified_at)
                                        <button type="button" class="account-text-btn" data-bs-toggle="modal" data-bs-target="#emailChangeModal">
                                            {{ __('public.profile.change') }}
                                        </button>
                                    @else
                                        <button type="button" class="account-text-btn is-danger" data-bs-toggle="modal" data-bs-target="#emailChangeModal">
                                            {{ __('public.profile.confirm') }}
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="auth-field">
                                <label class="form-label" for="phone">{{ __('public.profile.phone') }}</label>
                                <input class="form-control telephone" name="phone" type="tel" autocomplete="tel" maxlength="20" value="{{ $user->phone }}" id="phone">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="auth-field">
                                <label class="form-label" for="gender">{{ __('public.profile.gender') }}</label>
                                <select class="form-select" name="gender" id="gender">
                                    <option value="{{ MALE }}" {{ (old('gender') ?? $user->gender) == MALE ? ' selected ' : '' }}>{{ __('public.portal.gender_male') }}</option>
                                    <option value="{{ FEMALE }}" {{ (old('gender') ?? $user->gender) == FEMALE ? ' selected ' : '' }}>{{ __('public.portal.gender_female') }}</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="auth-field">
                                <label class="form-label" for="birthday">{{ __('public.profile.dob') }}</label>
                                <input class="form-control"
                                       type="date"
                                       value="{{ $user->dob ? \Carbon\Carbon::parse($user->dob)->format('Y-m-d') : '' }}"
                                       id="birthday"
                                       name="dob"
                                       autocomplete="bday">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="auth-field">
                                <label class="form-label" for="checkout-country">{{ __('public.profile.country') }}</label>
                                <select name="country" id="checkout-country" class="form-select">
                                    <option value="">{{ __('public.select_country') }}</option>
                                    @foreach(COUNTRIES as $country)
                                        <option {{ (request()->get('country') ?? old('country') ?? $user->country) == $country ? ' selected ' : '' }} value="{{ $country }}">{{ __('countries.' . $country) }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="auth-field">
                                <label class="form-label" for="city">{{ __('public.profile.city') }}</label>
                                <input class="form-control" type="text" value="{{ old('city') ?? $user->city }}" id="city" name="city" autocomplete="address-level2">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="auth-field">
                                <label class="form-label" for="state">{{ __('public.profile.state') }}</label>
                                <input class="form-control" type="text" value="{{ old('state') ?? $user->state }}" id="state" name="state" autocomplete="address-level1">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="auth-field">
                                <label class="form-label" for="address">{{ __('public.profile.address') }}</label>
                                <input class="form-control" type="text" value="{{ old('address') ?? $user->address }}" id="address" name="address" autocomplete="street-address">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="auth-field">
                                <label class="form-label" for="zip">{{ __('public.profile.zip') }}</label>
                                <input class="form-control" type="text" value="{{ old('zip') ?? $user->zip }}" id="zip" name="zip" autocomplete="postal-code">
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="auth-field">
                                <label class="form-label" for="timezone">{{ __('public.profile.timezone') }}</label>
                                <select class="form-select" name="timezone" id="timezone">
                                    <option value="">{{ __('public.profile.select_timezone') }}</option>
                                    @foreach(config('profile.timezones', []) as $tz => $label)
                                        <option value="{{ $tz }}" {{ (old('timezone') ?? $user->timezone) == $tz ? ' selected ' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-danger d-none mb-3 mt-3" role="alert">
                        <div class="v-errors"></div>
                    </div>
                    <button class="btn btn-hero" type="submit">{{ __('public.profile.save') }}</button>
                </form>
            </div>

            <div class="account-card">
                <h2 class="account-card-title">{{ __('public.profile.change_password') }}</h2>
                <form action="{{ __url('/profile/password') }}" method="POST" class="r-form">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="auth-field">
                                <label class="form-label" for="old_password">{{ __('public.profile.old_password') }}</label>
                                <div class="password-toggle">
                                    <input class="form-control" type="password" id="old_password" name="old_password" autocomplete="current-password">
                                    <label class="password-toggle-btn" aria-label="{{ __('public.auth.show_hide_password') }}">
                                        <input class="password-toggle-check" type="checkbox">
                                        <span><i class="fas fa-eye"></i></span>
                                    </label>
                                </div>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="auth-field">
                                <label class="form-label" for="password">{{ __('public.profile.password') }}</label>
                                <div class="password-toggle">
                                    <input class="form-control" type="password" id="password" name="password" autocomplete="new-password">
                                    <label class="password-toggle-btn" aria-label="{{ __('public.auth.show_hide_password') }}">
                                        <input class="password-toggle-check" type="checkbox">
                                        <span><i class="fas fa-eye"></i></span>
                                    </label>
                                </div>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="auth-field">
                                <label class="form-label" for="password_confirmation">{{ __('public.profile.confirm_password') }}</label>
                                <div class="password-toggle">
                                    <input class="form-control" type="password" id="password_confirmation" name="password_confirmation" autocomplete="new-password">
                                    <label class="password-toggle-btn" aria-label="{{ __('public.auth.show_hide_password') }}">
                                        <input class="password-toggle-check" type="checkbox">
                                        <span><i class="fas fa-eye"></i></span>
                                    </label>
                                </div>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-danger d-none mb-3 mt-3" role="alert">
                        <div class="v-errors"></div>
                    </div>
                    <button class="btn btn-hero" type="submit">{{ __('public.profile.save') }}</button>
                </form>
            </div>

            <div class="account-card account-card-danger">
                <h2 class="account-card-title">{{ __('public.profile.remove_account') }}</h2>
                <p class="account-lead mb-4">{{ __('public.profile.remove_account_txt') }}</p>
                <form method="POST" action="{{ __url('/profile/deactivate') }}">
                    @csrf
                    <button type="submit" class="btn btn-hero-outline btn-hero-danger js-confirm-submit" data-confirm="{{ __('public.profile.remove_account_txt') }}">
                        {{ __('public.profile.deactivate') }}
                    </button>
                </form>
            </div>
        </div>
    </section>
    @include('partials.email-change-modal', ['emailModalUser' => $user])
@endsection