@extends('page.account.layout')
@section('account.content')

<form action="" method="post" class="col-12 col-md-9" account-settings>
	@csrf
	<!-- recent activity section -->
	<div class="d-flex flex-column theme-border-radius theme-bg-white theme-box-shadow mb-4">
		<!-- title section -->
		<div class="d-flex justify-content-between p-3">
			<span class="fw-bold">@translate('profilePage', 'account_settings_title')</span>
			<input type="submit" account-settings-input value="@translate('profilePage', 'account_settings_edit')" style="color:#f23e00;border:none;background: none;font-size:1em;" onclick="enableSettings();return false;" class="fw-bold font-extra-small">
		</div>
		<!-- dashboard section -->
		<div class="row g-0">
			<div class="col-12 col-lg-6">
				<div class="d-flex flex-column p-3">
					<span class="small fw-bold mb-3">@translate('profilePage', 'account_settings_name')</span>
					<input class="form-control @error('name') is-invalid @enderror" type="text" value="{{ old('name', $currentUser->name) }}" name="name" disabled readonly>
					@error('name')<span class="invalid-feedback">{{ $message }}</span>@enderror
				</div>
			</div>
			<div class="col-12 col-lg-6">
				<div class="d-flex flex-column p-3">
					<span class="small fw-bold mb-3">@translate('profilePage', 'account_settings_surname')</span>
					<input class="form-control @error('surname') is-invalid @enderror" type="text" value="{{ old('surname', $currentUser->surname) }}" name="surname" disabled readonly>
					@error('surname')<span class="invalid-feedback">{{ $message }}</span>@enderror
				</div>
			</div>
			{{-- <div class="col-12 col-lg-12">
				<div class="p-3">
					<span class="small fw-bold theme-text-accent-one">Your Gender</span>
					<div class="d-flex mt-3">
						<div class="form-check">
							<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
							<label class="form-check-label" for="flexRadioDefault1">
								Male
							</label>
						</div>
						<div class="form-check ms-5">
							<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"
								checked>
							<label class="form-check-label" for="flexRadioDefault2">
								Female
							</label>
						</div>
					</div>
				</div>
			</div> --}}
			<div class="col-12 col-lg-6">
				<div class="d-flex flex-column p-3">
					<span class="small fw-bold mb-3">@translate('profilePage', 'account_settings_mobile')</span>
					<input class="form-control @error('phone_number') is-invalid @enderror" type="text" value="{{ old('phone_number',$currentUser->phone_number) }}" name="phone_number" disabled readonly>
					@error('phone_number')<span class="invalid-feedback">{{ $message }}</span>@enderror
				</div>
			</div>
			<div class="col-12 col-lg-6">
				<div class="d-flex flex-column p-3">
					<span class="small fw-bold mb-3">@translate('profilePage', 'account_settings_email')</span>
					<input class="form-control @error('email') is-invalid @enderror" type="text" value="{{ old('email',$currentUser->email) }}" name="email" disabled readonly>
					@error('email')<span class="invalid-feedback">{{ $message }}</span>@enderror
				</div>
			</div>
			{{-- <div class="col-12 col-lg-12 mb-3 mb-lg-0">
				<div class="d-flex flex-column p-3">
					<span class="small fw-bold theme-text-primary">Deactivate Account</span>
				</div>
			</div> --}}
		</div>
	</div>
</form>
<script>
	function enableSettings(){
		const btn = document.querySelector('[account-settings-input]');
		btn.value = window.languages.getText('profilePage', 'account_settings_save');
		btn.type = 'submit';
		btn.onclick = null;
		btn.href = '';
		
		document.querySelectorAll('[account-settings] .form-control').forEach(e=>{
			e.disabled = e.readOnly = false;
		});
	}
	{{ $errors->any() ? 'enableSettings()' :'' }}
</script>
@endsection