@extends('layouts.app')

@php
    $countries = $countries ?? config('member_registration.countries', []);
    $primaryAddress = $primaryAddress ?? null;
    $defaultCountry = old('country', $primaryAddress?->country ?? 'BE');
    $defaultDial = old('phone_dial_code', $user->phone_dial_code ?? ($countries[$defaultCountry]['dial'] ?? '+32'));
    $hasVatDefault = filled($user->tva_number) || $user->is_vat_registered;
@endphp

@section('title', __('member.account.profile_title'))

@section('content')
<div class="edu-breadcrumb-area bg-white">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('member.account.dashboard_breadcrumb') }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item"><a href="{{ LaravelLocalization::localizeUrl('/') }}">{{ __('navigation.home') }}</a></li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('member.account.profile_title') }}</li>
            </ul>
        </div>
    </div>
    <ul class="shape-group" aria-hidden="true">
        <li class="shape-1"><span></span></li>
        <li class="shape-2 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-13.png') }}" alt=""></li>
        <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-15.png') }}" alt=""></li>
        <li class="shape-4"><span></span></li>
        <li class="shape-5 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-07.png') }}" alt=""></li>
    </ul>
</div>

<section class="edu-section-gap account-page-area section-gap-equal contact-form-area edu-member-dashboard">
    <div class="container position-relative">
        <div class="row g-5">
            <div class="col-12 col-md-4 col-xl-3">
                @include('member.partials.account-sidebar', ['active' => 'profile'])
            </div>
            <div class="col-12 col-md-8 col-xl-9">
                <div class="login-form-box">
                    <h3 class="title edu-member-main-heading">{{ __('member.account.profile_title') }}</h3>
                    <p class="edu-member-main-intro">{{ __('member.account.profile_intro') }}</p>

                    @if(session('success'))
                        <div class="alert alert-success mb-3" role="alert">{{ session('success') }}</div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger mb-3" role="alert">{{ session('error') }}</div>
                    @endif

                    <div class="mb-4 pb-2 border-bottom">
                        @if($user->hasVerifiedEmail())
                            <span class="badge bg-success">{{ __('member.account.email_verified') }}</span>
                        @else
                            <span class="badge bg-warning text-dark">{{ __('member.account.email_not_verified') }}</span>
                            <a href="{{ route('verification.notice') }}" class="ms-2 small">{{ __('member.verification.title') }}</a>
                        @endif
                    </div>

                    <form method="post" action="{{ route('member.account.profile.update') }}" id="member-profile-form" novalidate>
                        @csrf

                        <div class="row row--10">
                            <div class="form-group col-md-6">
                                <label for="profile-firstname">{{ __('member.fields.firstname') }}*</label>
                                <input type="text" name="firstname" id="profile-firstname" value="{{ old('firstname', $user->firstname) }}" class="@error('firstname') is-invalid @enderror" required>
                                @error('firstname')
                                    <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="profile-lastname">{{ __('member.fields.lastname') }}*</label>
                                <input type="text" name="lastname" id="profile-lastname" value="{{ old('lastname', $user->lastname) }}" class="@error('lastname') is-invalid @enderror" required>
                                @error('lastname')
                                    <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row row--10">
                            <div class="form-group col-md-6">
                                <label for="profile-email">{{ __('member.fields.email') }}*</label>
                                <input type="email" name="email" id="profile-email" value="{{ old('email', $user->email) }}" class="@error('email') is-invalid @enderror" autocomplete="email" required>
                                @error('email')
                                    <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="profile-birthdate">{{ __('member.fields.birthdate') }}*</label>
                                <input type="date" name="birthdate" id="profile-birthdate" value="{{ old('birthdate', $user->birthdate?->format('Y-m-d')) }}" class="@error('birthdate') is-invalid @enderror" required>
                                @error('birthdate')
                                    <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row row--10">
                            <div class="form-group col-md-6">
                                <label for="profession">{{ __('member.fields.profession') }}*</label>
                                <select name="profession" class="form-select form-select-lg @error('profession') is-invalid @enderror" id="profession" required>
                                    <option value="">{{ __('member.select_placeholder') }}</option>
                                    @foreach(__('member.profession_options') as $val => $label)
                                        <option value="{{ $val }}" @selected(old('profession', $user->profession) === $val)>{{ $label }}</option>
                                    @endforeach
                                </select>
                                @error('profession')
                                    <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="member_country">{{ __('member.fields.country') }}*</label>
                                <select name="country" id="member_country" class="form-select form-select-lg @error('country') is-invalid @enderror" required>
                                    @foreach($countries as $code => $row)
                                        <option value="{{ $code }}" data-dial="{{ $row['dial'] }}" @selected(old('country', $primaryAddress?->country ?? 'BE') === $code)>
                                            {{ __('member.countries.'.$code) }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('country')
                                    <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group" id="professionautre" style="{{ old('profession', $user->profession) === 'Autre' ? '' : 'display:none;' }}">
                            <label for="profautre">{{ __('member.fields.profession_other') }}*</label>
                            <input type="text" name="profession_other" id="profautre" value="{{ old('profession_other', $user->profession_other) }}" class="form-control @error('profession_other') is-invalid @enderror" placeholder="{{ __('member.fields.profession_other') }}">
                            @error('profession_other')
                                <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                            @enderror
                        </div>

                        <h4 class="title h5 mt-4 mb-3">{{ __('member.account.address_section') }}</h4>
                        <div class="form-group">
                            <label for="address_line">{{ __('member.fields.address_line') }}*</label>
                            <input type="text" name="address_line" id="address_line" value="{{ old('address_line', $primaryAddress?->address ?? '') }}" class="@error('address_line') is-invalid @enderror" required>
                            @error('address_line')
                                <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="row row--10">
                            <div class="form-group col-md-4">
                                <label for="zipcode">{{ __('member.fields.zipcode') }}*</label>
                                <input type="text" name="zipcode" id="zipcode" value="{{ old('zipcode', $primaryAddress?->zipcode ?? '') }}" class="@error('zipcode') is-invalid @enderror" required>
                                @error('zipcode')
                                    <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group col-md-8">
                                <label for="city">{{ __('member.fields.city') }}*</label>
                                <input type="text" name="city" id="city" value="{{ old('city', $primaryAddress?->city ?? '') }}" class="@error('city') is-invalid @enderror" required>
                                @error('city')
                                    <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <input type="hidden" name="phone_dial_code" id="phone_dial_code" value="{{ $defaultDial }}">

                        <h4 class="title h5 mt-4 mb-3">{{ __('member.account.contact_prefs_section') }}</h4>
                        <div class="form-group">
                            <label>{{ __('member.fields.phone_local') }}*</label>
                            <div class="input-group">
                                <span class="input-group-text" id="dial-display">{{ $defaultDial }}</span>
                                <input type="text" name="phone_local" id="phone_local" value="{{ old('phone_local', $user->phone) }}" class="form-control @error('phone_local') is-invalid @enderror" inputmode="numeric" autocomplete="tel-national" required>
                            </div>
                            @error('phone_dial_code')
                                <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                            @enderror
                            @error('phone_local')
                                <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="newsletter_subscribed" value="0">
                            <div class="edu-form-check mb-0">
                                <input type="checkbox" name="newsletter_subscribed" id="newsletter_subscribed" value="1" @checked(old('newsletter_subscribed', $user->newsletter_subscribed ? '1' : '0') === '1')>
                                <label for="newsletter_subscribed">{{ __('member.fields.newsletter') }}</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="edu-form-check">
                                <input type="checkbox" name="has_vat_number" id="has_vat_number" value="1" @checked((string) old('has_vat_number', $hasVatDefault ? '1' : '') === '1')>
                                <label for="has_vat_number">{{ __('member.fields.has_vat') }}</label>
                            </div>
                        </div>
                        <div id="vat-fields" class="{{ (string) old('has_vat_number', $hasVatDefault ? '1' : '') === '1' ? '' : 'd-none' }}">
                            <div class="row row--10">
                                <div class="form-group col-md-6">
                                    <label for="tva_number">{{ __('member.fields.tva_number') }}*</label>
                                    <input type="text" name="tva_number" id="tva_number" value="{{ old('tva_number', $user->tva_number) }}" class="form-control @error('tva_number') is-invalid @enderror">
                                    @error('tva_number')
                                        <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="d-block mb-2">{{ __('member.fields.vat_liable') }}*</label>
                                    <div class="d-flex flex-column flex-sm-row flex-wrap align-items-start sfer-vat-radios">
                                        <div class="form-check mb-2 mb-sm-0 me-sm-4">
                                            <input class="form-check-input" type="radio" name="vat_liable" id="vat_yes" value="1" @checked((string) old('vat_liable', $user->is_vat_registered ? '1' : '0') === '1')>
                                            <label class="form-check-label" for="vat_yes">{{ __('member.fields.vat_subject') }}</label>
                                        </div>
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="vat_liable" id="vat_no" value="0" @checked((string) old('vat_liable', $user->is_vat_registered ? '1' : '0') === '0')>
                                            <label class="form-check-label" for="vat_no">{{ __('member.fields.vat_exempt') }}</label>
                                        </div>
                                    </div>
                                    @error('vat_liable')
                                        <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-0 mt-4 pt-4 border-top edu-member-profile-actions">
                            <button type="submit" class="edu-btn btn-medium d-inline-flex align-items-center justify-content-center gap-2" id="member-profile-save-btn">
                                <span class="spinner-border spinner-border-sm d-none" id="member-profile-save-spinner" role="status" aria-hidden="true"></span>
                                <span id="member-profile-save-label">{{ __('member.account.profile_save') }} <i class="icon-4" aria-hidden="true"></i></span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <ul class="shape-group" aria-hidden="true">
            <li class="shape-1 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-07.png') }}" alt=""></li>
            <li class="shape-2 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-13.png') }}" alt=""></li>
            <li class="shape-3 scene"><img data-depth="2" src="{{ asset('assets/images/counterup/shape-02.png') }}" alt=""></li>
        </ul>
    </div>
</section>
@endsection

@push('scripts')
<script>
(function () {
    var form    = document.getElementById('member-profile-form');
    var btn     = document.getElementById('member-profile-save-btn');
    var spinner = document.getElementById('member-profile-save-spinner');
    if (!form || !btn || !spinner) return;

    form.addEventListener('submit', function () {
        spinner.classList.remove('d-none');
        btn.disabled = true;
        btn.setAttribute('aria-busy', 'true');
    });
})();
</script>
@endpush