@extends('layouts.admin')

@section('title', 'Add Explanation')

@pushOnce('styles', 'tom-select-bs5')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
@endpushOnce

@pushOnce('scripts', 'tom-select-lib')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
@endpushOnce

@section('content')
<h1 class="mb-4">Add Explanation</h1>

@php
    $verseForSelect = $oldVerse;
    $verseLabel = $verseForSelect
        ? sprintf(
            '%s %d:%d [%s]',
            $verseForSelect->chapter->book->slug,
            $verseForSelect->chapter->chapter_number,
            $verseForSelect->verse_number,
            $verseForSelect->language_code
        )
        : '';
@endphp

<form method="post" action="{{ route('admin.explanations.store') }}" enctype="multipart/form-data">
    @csrf
    <div class="mb-3">
        <label class="form-label" for="explanation_verse_id">Verse *</label>
        <select id="explanation_verse_id" name="verse_id" class="form-select @error('verse_id') is-invalid @enderror" required autocomplete="off">
            @if($verseForSelect)
                <option value="{{ $verseForSelect->id }}" selected>{{ $verseLabel }}</option>
            @else
                <option value="" disabled selected>Type at least 2 characters to search (e.g. genesis 1:1)…</option>
            @endif
        </select>
        @error('verse_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        <div class="form-text">Pick the verse row (including language) that matches the quoted text on the public page.</div>
    </div>
    <div class="mb-3">
        <label class="form-label" for="language_code">Language code *</label>
        <select id="language_code" name="language_code" class="form-select @error('language_code') is-invalid @enderror" required>
            @foreach($contentLanguages as $code => $label)
                <option value="{{ $code }}" {{ old('language_code', 'en') === $code ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
        </select>
        @error('language_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="mb-3">
        <label class="form-label">Title *</label>
        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" required>
        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="mb-3">
        <label class="form-label">Explanation text *</label>
        <textarea name="explanation_text" class="form-control @error('explanation_text') is-invalid @enderror" rows="8" required>{{ old('explanation_text') }}</textarea>
        @error('explanation_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="mb-3">
        <label class="form-label">Author</label>
        <input type="text" name="author" class="form-control" value="{{ old('author') }}">
    </div>
    <div class="mb-3">
        <label class="form-label">{{ __('Video URL (YouTube / Vimeo)') }}</label>
        <input type="text" name="video_url" class="form-control" value="{{ old('video_url') }}">
    </div>
    <div class="mb-3">
        <label class="form-label">{{ __('Upload video file (MP4/WebM)') }}</label>
        <input type="file" name="video_file" class="form-control" accept="video/mp4,video/webm">
    </div>
    <div class="mb-3">
        <label class="form-label">{{ __('Embed HTML (iframe)') }}</label>
        <textarea name="embed_html" class="form-control font-monospace small" rows="4">{{ old('embed_html') }}</textarea>
        <div class="form-text">{{ __('Optional. Paste a full iframe from your host. Each language can have its own embed.') }}</div>
    </div>
    <button type="submit" class="btn btn-primary">Create</button>
    <a href="{{ route('admin.explanations.index') }}" class="btn btn-secondary">Cancel</a>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var el = document.getElementById('explanation_verse_id');
    if (!el || typeof TomSelect === 'undefined') return;
    var verseSearchUrl = @json(route('admin.verses.picker-search'));
    new TomSelect(el, {
        plugins: ['clear_button'],
        maxOptions: 75,
        valueField: 'value',
        labelField: 'text',
        searchField: 'text',
        loadThrottle: 300,
        placeholder: 'Search (e.g. genesis 1:1 or matthew 5:3)…',
        load: function (query, callback) {
            if (query.length < 2) return callback();
            fetch(verseSearchUrl + '?q=' + encodeURIComponent(query))
                .then(function (r) { return r.json(); })
                .then(callback)
                .catch(function () { callback(); });
        },
    });
});
</script>
@endpush