@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">Enter your phone number</h2>
        <p class="font-body-md text-body-md text-on-surface-variant">We'll send a 4-digit code to verify your account.</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-DEFAULT h-16 px-md transition-all duration-300 focused-input-glow focus-within:border-primary">
                <!-- Country Code Selector (Simulated) -->
                <button type="button" 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" class="bg-transparent border-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-DEFAULT border border-secondary-container">
                <span class="material-symbols-outlined text-on-secondary-container mt-0.5" data-icon="info">info</span>
                <p class="font-body-sm text-body-sm text-on-secondary-container">
                    Message and data rates may apply. You will receive one SMS code for verification purposes.
                </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]">
                Send Code
            </button>
            <button type="button" class="w-full mt-md text-primary font-label-md text-label-md h-12 hover:bg-primary/5 transition-colors rounded-DEFAULT">
                Try another method
            </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.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