@extends('web.layouts.main')

@push('stylesheets')
<link rel="stylesheet" type="text/css" href="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets_web/libraries/slick-1.8.1/slick-theme.min.css') }}">
@endpush

@section('content')

@include('web.components.page-header', ['heading' => trans('text.my-account')])

<div class="container mb-5">
	@include('web.layouts.header.my-account-nav')

	<div class="bg-quaternary custom-card">
		<form method="POST" action="{{ route('web.profile', $locale) }}" autocomplete="off">
			@csrf

			<div class="mb-5">
				<p class="h4 text-uppercase mb-4"><b>{{ trans('text.account-info') }}</b></p>

				<div class="row justify-content-between">
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.email'), 'type' => 'email', 'placeholder' => trans('text.please-specify'), 'name' => 'email', 'value' => $user->email, 'readonly' => true])
						</div>
					</div>
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.select-single', ['label' => trans('text.secret-question'), 'placeholder' => trans('text.please-specify'), 'name' => 'secret_question', 'attribute' => 'title', 'rows' => $secret_questions, 'value' => $user->secret_question_id, 'readonly' => true])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.secret-answer'), 'placeholder' => trans('text.please-specify'), 'name' => 'secret_answer', 'value' => $user->secret_answer, 'readonly' => true])
						</div>
					</div>
				</div>
			</div>

			<div class="mb-5">
				<p class="h4 text-uppercase mb-4"><b>{{ trans('text.personal-info') }}</b></p>
				<div class="row justify-content-between">
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.first-name'), 'placeholder' => trans('text.please-specify'), 'name' => 'first_name', 'value' => $user->first_name, 'readonly' => true])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.last-name'), 'placeholder' => trans('text.please-specify'), 'name' => 'last_name', 'value' => $user->last_name, 'readonly' => true])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.father-name'), 'placeholder' => trans('text.please-specify'), 'name' => 'father_name', 'value' => $user->father_name, 'readonly' => true])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.id-number'), 'placeholder' => trans('text.please-specify'), 'name' => 'id_number', 'value' => $user->id_number, 'readonly' => true])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.select-single', ['label' => trans('text.marital-status'), 'placeholder' => trans('text.please-specify'), 'name' => 'marital_status', 'attribute' => 'title', 'rows' => $marital_statuses, 'value' => $user->marital_status_id])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.date-of-birth'), 'type' => 'date', 'placeholder' => trans('text.please-specify'), 'name' => 'date_of_birth', 'readonly' => true])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.select-single', ['label' => trans('text.country-of-birth'), 'placeholder' => trans('text.please-specify'), 'name' => 'country_of_birth', 'attribute' => 'name', 'rows' => $countries, 'value' => $user->country_of_birth_id])
						</div>
					</div>
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.select-single', ['label' => trans('text.city-of-residence').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'city_of_residence', 'attribute' => 'title', 'rows' => $regions, 'value' => $user->city_of_residence_id])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.street'), 'placeholder' => trans('text.please-specify'), 'name' => 'street', 'value' => $user->street])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.building'), 'placeholder' => trans('text.please-specify'), 'name' => 'building', 'value' => $user->building])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.mobile-number'), 'type' => 'number', 'placeholder' => trans('text.please-specify'), 'name' => 'mobile_number', 'value' => $user->mobile_number])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.phone-number'), 'type' => 'number', 'placeholder' => trans('text.please-specify'), 'name' => 'phone_number', 'value' => $user->phone_number])
						</div>

						<div class="row justify-content-center mt-5">
							<div class="col-lg-10">
								<button type="submit" class="btn btn-custom font-weight-bold w-100">{{ trans('text.save') }}</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>


		<div class="mb-5">
			<form method="POST" action="{{ route('web.account.change-password', $locale) }}" autocomplete="off">
				@csrf

				<p class="h4 text-uppercase mb-4"><b>Change Password</b></p>

				<div class="row justify-content-between">
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => 'Current Password', 'type' => 'password', 'placeholder' => trans('text.please-specify'), 'name' => 'current_password'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => 'New Password', 'type' => 'password', 'placeholder' => trans('text.please-specify'), 'name' => 'new_password'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => 'Confirm Password', 'type' => 'password', 'placeholder' => trans('text.please-specify'), 'name' => 'confirm_password'])
						</div>

						<div class="row">
							<div class="col-lg-6">
								<button type="submit" class="btn btn-custom font-weight-bold w-100" onclick="confirm(trans('status.delete_account')) ? this.parentElement.submit() : event.preventDefault();">Change Password</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>


		<form method="POST" action="{{ route('web.account.delete', $locale) }}" autocomplete="off">
			@csrf

			<p class="h4 text-uppercase mb-4"><b>{{ trans('text.delete-account') }}</b></p>

			<div class="row justify-content-between">
				<div class="col-md-5">
					<div class="mb-3">
						@include('web.components.inputs.input', ['label' => trans('text.password'), 'type' => 'password', 'placeholder' => trans('text.please-specify'), 'name' => 'password'])
					</div>

					<div class="row">
						<div class="col-lg-6">
							<button type="submit" class="btn btn-custom font-weight-bold w-100" onclick="confirm(trans('status.delete_account')) ? this.parentElement.submit() : event.preventDefault();">{{ trans('text.delete') }}</button>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>

<div class="mb-5">
	@include('web.components.shortcuts')
</div>

<div class="mb-5 pb-5">
	@include('web.components.are-you-a-winner')
</div>

@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.js') }}"></script>
@endpush