@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; }
.tenant-option .card {
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
    cursor: pointer;
    padding: 8px 12px !important;
    margin-bottom: 6px;
}
.tenant-option .card:hover,
.tenant-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 Company</h6>
            <small class="text-muted" style="font-size: 11px;">{{ $userName }}</small>
        </div>
    </div>
</div>

<div class="compact-body">
    <form method="POST" action="{{ route('login.select-tenant') }}" id="selectTenantForm">
        @csrf
        <input type="hidden" name="token" value="{{ $token }}">
        
        @foreach($tenants as $index => $tenant)
            <div class="tenant-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="tenant_id" 
                               id="tenant_{{ $tenant->id }}" value="{{ $tenant->id }}" 
                               {{ $index === 0 ? 'checked' : '' }} required style="margin-top: 0;">
                        <label class="form-check-label flex-grow-1" for="tenant_{{ $tenant->id }}" style="font-size: 13px;">
                            <strong>{{ $tenant->name }}</strong>
                            @if($tenant->city || $tenant->state)
                                <span class="text-muted ms-2" style="font-size: 11px;">
                                    <i class="fas fa-map-marker-alt"></i> {{ implode(', ', array_filter([$tenant->city, $tenant->state])) }}
                                </span>
                            @endif
                        </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('.tenant-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('.tenant-option .card').forEach(c => c.classList.remove('selected'));
                this.classList.add('selected');
            }
        });
    });
});
</script>
@endpush