@extends('adminlte::page')

@section('title', 'Questions — ' . $section->title)

@section('content_header')
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h1 class="m-0">Questions</h1>
        <ol class="breadcrumb mt-1 p-0 bg-transparent">
            <li class="breadcrumb-item"><a href="{{ url('admin') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.forms.index') }}">Forms</a></li>
            <li class="breadcrumb-item">
                <a href="{{ route('admin.forms.sections.index', $form) }}">{{ Str::before($form->title, ' (') }}</a>
            </li>
            <li class="breadcrumb-item active">{{ $section->title }}</li>
        </ol>
    </div>
    <a href="{{ route('admin.sections.questions.create', $section) }}" class="btn btn-sm btn-primary">
        <i class="fas fa-plus mr-1"></i>Add Question
    </a>
</div>
@endsection

@section('content')

<div class="alert alert-warning py-2">
    <i class="fas fa-exclamation-triangle mr-1"></i>
    <strong>Live warning:</strong> Changes go live immediately.
    The <code>field_key</code> is locked after creation — it is the JSON key in historic submissions.
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('success') }} <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
@endif

<div class="card">
    <div class="card-body p-0">
        <table class="table table-sm table-hover mb-0">
            <thead class="thead-light">
                <tr>
                    <th width="50">Order</th>
                    <th width="120">Field key</th>
                    <th>Label</th>
                    <th width="130">Type</th>
                    <th width="100">Required</th>
                    <th width="100">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($questions as $q)
                <tr>
                    <td>{{ $q->sort_order }}</td>
                    <td><code>{{ $q->field_key }}</code></td>
                    <td>
                        @if($q->is_indent)
                            <span class="text-muted mr-1">↳</span>
                        @endif
                        {{ $q->label_en }}
                        @if($q->label_bn)
                            <small class="text-muted d-block">{{ $q->label_bn }}</small>
                        @endif
                    </td>
                    <td>
                        <span class="badge badge-secondary">{{ $q->type }}</span>
                    </td>
                    <td>
                        @if($q->required_type === 'yes')
                            <span class="badge badge-danger">Required</span>
                        @elseif($q->required_type === 'conditional')
                            <span class="badge badge-warning">Conditional</span>
                        @else
                            <span class="badge badge-light text-muted">Optional</span>
                        @endif
                    </td>
                    <td>
                        <a href="{{ route('admin.questions.edit', $q) }}" class="btn btn-xs btn-default mr-1">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form action="{{ route('admin.questions.destroy', $q) }}" method="POST" class="d-inline"
                              onsubmit="return confirm('Delete this question?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-xs btn-danger"><i class="fas fa-trash"></i></button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="text-center text-muted py-3">No questions yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection