@extends('admin.layouts.layout-login')

@push('page_css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.compact-header { padding: 12px 15px !important; }
.compact-body { padding: 15px !important; }
.phone-option .card {
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
    cursor: pointer;
    padding: 8px 12px !important;
    margin-bottom: 6px;
}
.phone-option .card:hover,
.phone-option .card.selected {
    border-color: #556ee6;
    background-color: #f8f9ff;
    height: auto;
}
.form-check-input:checked {
    background-color: #556ee6;
    border-color: #556ee6;
}
</style>
@endpush

@section('content')
<div class="bg-soft-primary compact-header">
    <div class="d-flex align-items-center">
        <img src="{{ asset('img/logo-light.png') }}" alt="" height="32" class="rounded-circle me-2">
        <div>
            <h6 class="text-primary mb-0" style="font-size: 14px;">Select Your Account</h6>
            <small class="text-muted" style="font-size: 11px;">{{ $email }}</small>
        </div>
    </div>
</div>

<div class="compact-body">
    <form method="POST" action="{{ route('login.select-phone') }}" id="selectPhoneForm">
        @csrf
        <input type="hidden" name="token" value="{{ $token }}">
        
        @foreach($phoneOptions as $index => $option)
            <div class="phone-option">
                <div class="card {{ $index === 0 ? 'selected' : '' }}">
                    <div class="form-check mb-0 d-flex align-items-center">
                        <input class="form-check-input me-2" type="radio" name="user_id" 
                               id="phone_{{ $option['id'] }}" value="{{ $option['id'] }}" 
                               {{ $index === 0 ? 'checked' : '' }} required style="margin-top: 0;">
                        <label class="form-check-label flex-grow-1" for="phone_{{ $option['id'] }}" style="font-size: 13px;">
                            <strong>{{ $option['name'] }}</strong>
                            <span class="text-muted ms-2" style="font-size: 11px;">
                                <i class="fas fa-phone"></i> {{ $option['phone_masked'] }}
                            </span>
                        </label>
                    </div>
                </div>
            </div>
        @endforeach

        <button class="btn btn-primary btn-sm w-100 mt-2" type="submit">
            Continue <i class="fas fa-arrow-right ms-1"></i>
        </button>
        
        <div class="text-center mt-2">
            <a href="{{ route('login') }}" class="text-muted" style="font-size: 11px;">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>
    </form>
</div>
@endsection

@push('page_script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.phone-option .card').forEach(card => {
        card.addEventListener('click', function(e) {
            if (e.target.type !== 'radio') {
                const radio = this.querySelector('input[type="radio"]');
                radio.checked = true;
                document.querySelectorAll('.phone-option .card').forEach(c => c.classList.remove('selected'));
                this.classList.add('selected');
            }
        });
    });
});
</script>
@endpush