110 lines
4.4 KiB
PHP
110 lines
4.4 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('styles')
|
|
<style>
|
|
.soft-glow-btn {
|
|
box-shadow: 0 4px 14px 0 rgba(0, 105, 72, 0.3);
|
|
}
|
|
.focused-input-glow:focus-within {
|
|
box-shadow: 0 0 0 4px rgba(0, 105, 72, 0.1);
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('header-back')
|
|
<div class="w-10"></div>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<main class="flex-grow pt-2xl px-container-padding pb-xl flex flex-col mt-16 max-w-md mx-auto w-full">
|
|
<!-- Progress Indicator -->
|
|
<div class="flex gap-xs mb-2xl justify-center">
|
|
<div class="h-1.5 w-8 rounded-full bg-primary"></div>
|
|
<div class="h-1.5 w-8 rounded-full bg-outline-variant"></div>
|
|
<div class="h-1.5 w-8 rounded-full bg-outline-variant"></div>
|
|
</div>
|
|
|
|
<!-- Headline & Subtext -->
|
|
<section class="space-y-base mb-2xl">
|
|
<h2 class="font-headline-xl text-headline-xl text-on-background">Telefon belgiňizi giriziň</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Hasabyňyzy tassyklamak üçin 4 sanly kod ibereris.</p>
|
|
</section>
|
|
|
|
<!-- Phone Input Block -->
|
|
<form action="{{ route('verification.send') }}" method="POST" class="flex-grow flex flex-col" id="phone-form">
|
|
@csrf
|
|
<div class="space-y-md flex-grow">
|
|
<div class="group relative flex items-center bg-surface-container-lowest border border-outline-variant rounded h-16 px-md transition-all duration-300 focused-input-glow focus-within:border-primary">
|
|
<!-- Country Code Selector (Simulated) -->
|
|
<button type="button" tabindex="-1" class="flex items-center gap-xs pr-md border-r border-outline-variant mr-md hover:bg-surface-container-low transition-colors h-10 rounded-sm">
|
|
<span class="font-label-md text-label-md text-on-surface">+993</span>
|
|
</button>
|
|
|
|
<!-- Actual Input -->
|
|
<input id="phone-input" name="phone_visual" autofocus autocomplete="tel" class="bg-transparent border-none outline-none focus:outline-none focus:ring-0 w-full font-otp-digit text-otp-digit text-on-surface placeholder:text-outline-variant" placeholder="6X XX XX XX" type="tel" value="{{ old('phone_visual') }}"/>
|
|
<input type="hidden" name="phone" id="phone-hidden" value="{{ old('phone') }}">
|
|
</div>
|
|
|
|
@error('phone')
|
|
<p class="text-error text-sm">{{ $message }}</p>
|
|
@enderror
|
|
|
|
<div class="flex items-start gap-sm bg-secondary-container/30 p-md rounded border border-secondary-container">
|
|
<x-app-icon name="info" class="w-6 h-6 text-on-secondary-container mt-0.5" />
|
|
<p class="font-body-sm text-body-sm text-on-secondary-container">
|
|
Tassyklaýyş maksady bilen size bir SMS kod iberiler.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Action -->
|
|
<div class="mt-2xl">
|
|
<button type="submit" class="w-full bg-primary text-on-primary h-14 rounded-lg font-label-md text-label-md uppercase tracking-widest soft-glow-btn hover:opacity-90 transition-all active:scale-[0.98]">
|
|
Kody iber
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
const input = document.getElementById('phone-input');
|
|
const hiddenInput = document.getElementById('phone-hidden');
|
|
const form = document.getElementById('phone-form');
|
|
|
|
input.focus();
|
|
|
|
input.addEventListener('input', (e) => {
|
|
let value = e.target.value.replace(/\D/g, '');
|
|
// format: K X XX XX XX
|
|
// max 8 digits
|
|
value = value.substring(0, 8);
|
|
|
|
let formatted = '';
|
|
if (value.length > 0) {
|
|
formatted += value.substring(0, 1);
|
|
}
|
|
if (value.length > 1) {
|
|
formatted += value.substring(1, 2);
|
|
}
|
|
if (value.length > 2) {
|
|
formatted += ' ' + value.substring(2, 4);
|
|
}
|
|
if (value.length > 4) {
|
|
formatted += ' ' + value.substring(4, 6);
|
|
}
|
|
if (value.length > 6) {
|
|
formatted += ' ' + value.substring(6, 8);
|
|
}
|
|
|
|
e.target.value = formatted;
|
|
|
|
if (value.length === 8) {
|
|
hiddenInput.value = '+993 ' + value.substring(0, 1) + value.substring(1, 2) + ' ' + value.substring(2, 4) + ' ' + value.substring(4, 6) + ' ' + value.substring(6, 8);
|
|
} else {
|
|
hiddenInput.value = '';
|
|
}
|
|
});
|
|
</script>
|
|
@endsection |