@extends('layouts.survey')

@section('title', 'Select Language — ' . $project->name)

@section('trail')
    <div class="trail-item done">
        <span class="num"><i class="fas fa-check" style="font-size:.55rem;"></i></span>
        <span>Select Respondent</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item active">
        <span class="num">2</span>
        <span>Select Language</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item">
        <span class="num">3</span>
        <span>Survey Questions</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item">
        <span class="num">4</span>
        <span>Collector Info</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item">
        <span class="num">5</span>
        <span>Thank You</span>
    </div>
@endsection

@push('styles')
<style>
.lang-card {
    background: #fff; border: 1.5px solid var(--gray-200);
    border-radius: 18px; padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    text-align: center;
}
.lang-card .context {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-size: .82rem; color: var(--gray-500); margin-bottom: 1.75rem;
}
.lang-card .context span {
    background: var(--green-lt); color: var(--green);
    font-weight: 700; padding: .2rem .65rem; border-radius: 20px;
    font-size: .75rem;
}
.lang-card h3 {
    font-size: 1.2rem; font-weight: 800; color: var(--gray-900);
    margin-bottom: .4rem;
}
.lang-card p { font-size: .88rem; color: var(--gray-500); margin-bottom: 2rem; }

.lang-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lang-btn {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    padding: 2rem 1rem; border-radius: 14px;
    border: 2.5px solid var(--gray-200);
    background: var(--gray-50); text-decoration: none; color: var(--gray-900);
    transition: border-color .15s, background .15s, transform .15s;
    cursor: pointer;
}
.lang-btn:hover {
    border-color: var(--green); background: var(--green-lt);
    transform: translateY(-3px);
}
.lang-flag {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; background: var(--gray-100);
    transition: background .15s;
}
.lang-btn:hover .lang-flag { background: var(--green); }
.lang-name { font-size: 1.05rem; font-weight: 800; }
.lang-native { font-size: .82rem; color: var(--gray-500); }
.lang-btn:hover .lang-native { color: var(--green-dark); }
.lang-arrow {
    font-size: .78rem; color: var(--gray-300);
    display: flex; align-items: center; gap: .25rem;
    transition: color .15s;
}
.lang-btn:hover .lang-arrow { color: var(--green); }

.back-row { margin-top: 1.25rem; text-align: center; }
.back-link {
    font-size: .82rem; color: var(--gray-500); font-weight: 600;
    text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.back-link:hover { color: var(--green); }
</style>
@endpush

@section('content')
<div class="lang-card">
    <div class="context">
        <i class="fas fa-location-dot"></i>
        Collecting for <span>{{ $project->name }}</span>
        &mdash; Respondent: <span>{{ $respondentType->name }}</span>
    </div>

    <h3>Select Survey Language</h3>
    <p>Choose the language to conduct the survey in. Pick whatever the respondent is most comfortable with.</p>

    <div class="lang-options">
        <a href="{{ route('survey.questions', [$project->slug, $respondentType->slug, 'en']) }}"
           class="lang-btn">
            <div class="lang-flag">🇬🇧</div>
            <div class="lang-name">English</div>
            <div class="lang-native">Survey in English</div>
            <div class="lang-arrow"><i class="fas fa-arrow-right"></i> Start</div>
        </a>
        <a href="{{ route('survey.questions', [$project->slug, $respondentType->slug, 'bn']) }}"
           class="lang-btn">
            <div class="lang-flag">🇧🇩</div>
            <div class="lang-name">বাংলা</div>
            <div class="lang-native">Survey in Bangla</div>
            <div class="lang-arrow"><i class="fas fa-arrow-right"></i> শুরু করুন</div>
        </a>
    </div>
</div>

<div class="back-row">
    <a href="{{ route('survey.start', $project->slug) }}" class="back-link">
        <i class="fas fa-arrow-left"></i> Change respondent type
    </a>
</div>
@endsection