@extends('admin.layouts.app')

@section('title', 'Particle Quizzes')
@section('page-title', 'Particle Quizzes Management')
@section('page-title-jp', 'パーティクルクイズ管理')

@section('content')

    @if (session('success'))
        <div
            style="background: #d1fae5; color: #065f46; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-weight: 500;">
            {{ session('success') }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.particle-sentences.bulk-verify') }}" id="bulk-form">
        @csrf
        <input type="hidden" name="action" id="bulk-action" value="verify">

        <div style="margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;">
            <div class="action-buttons">
                <button type="button" class="btn-action" style="background: #10b981; color: white; border-color: #059669;"
                    onclick="submitBulk('verify')">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    Verify Selected
                </button>
                <button type="button" class="btn-action" style="background: #64748b; color: white; border-color: #475569;"
                    onclick="submitBulk('unverify')">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    Unverify Selected
                </button>
            </div>
        </div>

        <x-admin.data-table :headers="[
            ['label' => 'Select', 'sortable' => false, 'width' => '5%', 'align' => 'center'],
            ['label' => 'Particle', 'sortable' => true, 'width' => '10%'],
            ['label' => 'Type', 'sortable' => true, 'width' => '15%'],
            ['label' => 'Sentence', 'sortable' => true, 'width' => '30%'],
            ['label' => 'Correct', 'sortable' => false, 'width' => '10%', 'align' => 'center'],
            ['label' => 'Status', 'sortable' => true, 'width' => '10%', 'align' => 'center'],
            ['label' => 'Actions', 'sortable' => false, 'align' => 'center', 'width' => '20%'],
        ]" :searchable="true" searchPlaceholder="Search sentences..." :hoverable="true"
            :paginator="$sentences">

            <x-slot name="filters">
                <select name="type" onchange="this.form.submit()"
                    style="padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px;">
                    <option value="">All Types</option>
                    <option value="cloze" {{ request('type') == 'cloze' ? 'selected' : '' }}>Fill-in-the-blank</option>
                    <option value="scramble" {{ request('type') == 'scramble' ? 'selected' : '' }}>Scramble</option>
                    <option value="error_correction" {{ request('type') == 'error_correction' ? 'selected' : '' }}>Error
                        Correction</option>
                </select>
                <select name="is_verified" onchange="this.form.submit()"
                    style="padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px;">
                    <option value="">All Status</option>
                    <option value="1" {{ request('is_verified') === '1' ? 'selected' : '' }}>Verified</option>
                    <option value="0" {{ request('is_verified') === '0' ? 'selected' : '' }}>Unverified</option>
                </select>
            </x-slot>

            @foreach ($sentences as $sentence)
                <tr>
                    <td class="center">
                        <input type="checkbox" name="sentence_ids[]" value="{{ $sentence->id }}" class="row-checkbox">
                    </td>
                    <td><span class="badge badge-primary"
                            style="font-size: 14px; font-weight: bold;">{{ $sentence->particle_id }}</span></td>
                    <td>
                        @php
                            $typeColors = [
                                'cloze' => 'badge-primary',
                                'scramble' => 'badge-warning',
                                'error_correction' => 'badge-danger',
                            ];
                            $typeLabels = [
                                'cloze' => 'Fill-in-the-blank',
                                'scramble' => 'Scramble',
                                'error_correction' => 'Error Correction',
                            ];
                        @endphp
                        <span class="badge {{ $typeColors[$sentence->type] ?? 'badge-gray' }}">
                            {{ $typeLabels[$sentence->type] ?? $sentence->type }}
                        </span>
                    </td>
                    <td class="text-truncate" title="{{ $sentence->full_sentence }}">
                        <strong>{{ $sentence->full_sentence }}</strong><br>
                        <small class="text-muted">{{ Str::limit($sentence->meaning, 40) }}</small>
                    </td>
                    <td class="center text-truncate">
                        <span
                            style="font-weight: 900; color: #059669; font-size: 16px;">{{ $sentence->correct_answer }}</span>
                    </td>
                    <td class="center">
                        @if ($sentence->is_verified)
                            <span class="badge badge-success">Verified</span>
                        @else
                            <span class="badge badge-gray">Pending</span>
                        @endif
                    </td>
                    <td class="center">
                        <div class="action-buttons" style="justify-content: center;">
                            <button type="button"
                                onclick="document.getElementById('verify-form-{{ $sentence->id }}').submit()"
                                class="btn-action btn-view" title="Toggle Verification">
                                @if ($sentence->is_verified)
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16"
                                        height="16" style="color: #64748b;">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                @else
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16"
                                        height="16" style="color: #10b981;">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7" />
                                    </svg>
                                @endif
                            </button>
                            <a href="{{ route('admin.particle-sentences.edit', $sentence) }}"
                                class="btn-action btn-edit">Edit</a>
                            <button type="button"
                                onclick="if(confirm('Are you sure you want to delete this quiz?')) document.getElementById('delete-form-{{ $sentence->id }}').submit()"
                                class="btn-action btn-delete">Del</button>
                        </div>
                    </td>
                </tr>
            @endforeach
        </x-admin.data-table>
    </form>

    {{-- Hidden forms for individual row actions --}}
    @foreach ($sentences as $sentence)
        <form id="verify-form-{{ $sentence->id }}" action="{{ route('admin.particle-sentences.verify', $sentence) }}"
            method="POST" style="display: none;">
            @csrf
        </form>
        <form id="delete-form-{{ $sentence->id }}" action="{{ route('admin.particle-sentences.destroy', $sentence) }}"
            method="POST" style="display: none;">
            @csrf
            @method('DELETE')
        </form>
    @endforeach

    <script>
        function submitBulk(action) {
            const checkboxes = document.querySelectorAll('.row-checkbox:checked');
            if (checkboxes.length === 0) {
                alert('Please select at least one row.');
                return;
            }

            document.getElementById('bulk-action').value = action;
            document.getElementById('bulk-form').submit();
        }
    </script>

@endsection