@extends('admin.layout.app')
@section('title', 'Vocabularies')
@section('content')
    <style>
        table tbody tr td {
            border-bottom: 1px solid #dee2e6;
        }
    </style>
    <div class="content container-fluid">

        <div class="page-header">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Vocabularies</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('lesson-vocabularies.index') }}">Vocabularies</a>
                            </li>
                            <li class="breadcrumb-item active">All Vocabularies</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <form method="GET" action="{{ route('lesson-vocabularies.index') }}" class="mb-4 row g-3">

                <div class="col-md-3 local-forms">
                    <label for="">Course</label>
                    <select name="course_id" id="course_id" class="form-control">
                        <option value="">--Select Course--</option>
                        @foreach ($courses as $course)
                            <option value="{{ $course->id }}" {{ request('course_id') == $course->id ? 'selected' : '' }}>
                                {{ $course->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3 local-forms">
                    <label for="">Unit</label>
                    <select name="unit_id" id="unit_id" class="form-control" disabled>
                        <option value="">--Select Unit--</option>
                    </select>
                </div>

                <div class="col-md-3 local-forms">
                    <label for="">Lesson Type</label>
                    <select name="lesson_type_id" class="form-select form-control">
                        <option value="{{ $lessonType->id }}">{{ $lessonType->name }}</option>
                    </select>
                </div>

                <div class="col-md-3 local-forms">
                    <label for="">Search</label>
                    <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                        placeholder="Search by word...">
                </div>

                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{{ route('lesson-vocabularies.index') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>

            @if (request()->filled(['course_id', 'unit_id', 'lesson_type_id']) && $lessonVocabularies->isEmpty())
                <div class="alert alert-info d-flex justify-content-between align-items-center">
                    <span>No quizzes found for the selected filters.</span>
                    <a href="{{ route('lesson-quizzes.create') }}" class="btn btn-sm btn-success">Create Quiz</a>
                </div>
            @endif

            <div class="container" style="max-width: 1500px !important">
                <div class="p-3 card">
                    <div class="card-title">
                        <div class="row">
                            <div class="col">
                                <h3 class="page-title">Vocabularies</h3>
                            </div>
                            <div class="col-auto ms-auto">
                                <a href="{{ route('lesson-vocabularies.create') }}" class="btn btn-primary">
                                    <i class="fas fa-plus"></i> Add New Vocabulary
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($lessonVocabularies->isNotEmpty())
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Word</th>
                                            <th>Synonyms</th>
                                            <th>Antonyms</th>
                                            <th>Course</th>
                                            <th>Unit</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($lessonVocabularies as $vocabulary)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $vocabulary->word }}</td>
                                                <td>
                                                    @if (is_array($vocabulary->synonyms))
                                                        @foreach ($vocabulary->synonyms as $synonym)
                                                            <span class="badge bg-success me-1">{{ $synonym }}</span>
                                                        @endforeach
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                                <td>
                                                    @if (is_array($vocabulary->anonyms))
                                                        @foreach ($vocabulary->anonyms as $anonym)
                                                            <span class="badge bg-danger me-1">{{ $anonym }}</span>
                                                        @endforeach
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                                <td>{{ $vocabulary->course->name ?? '-' }}</td>
                                                <td>{{ $vocabulary->unit->name ?? '-' }}</td>
                                                <td>
                                                    <a href="{{ route('lesson-vocabularies.edit', $vocabulary->id) }}"
                                                        class="btn btn-sm btn-primary">Edit</a>
                                                    <form
                                                        action="{{ route('lesson-vocabularies.destroy', $vocabulary->id) }}"
                                                        method="POST" class="d-inline"
                                                        onsubmit="return confirm('Delete this vocabulary?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="btn btn-sm btn-danger">Delete</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="p-2 d-flex flex-column flex-md-row justify-content-between align-items-center">
                                <div class="mb-2 mb-md-0 text-muted">
                                    Showing {{ $lessonVocabularies->firstItem() }} to
                                    {{ $lessonVocabularies->lastItem() }} of {{ $lessonVocabularies->total() }} entries
                                </div>

                                <div>
                                    {{ $lessonVocabularies->links() }}
                                </div>
                            </div>
                        @else
                            <div class="alert alert-info d-flex justify-content-between align-items-center">
                                <span>No vocabularies found.</span>
                                <a href="{{ route('lesson-vocabularies.create') }}" class="btn btn-sm btn-success">Create
                                    Vocabulary</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const courseId = $('#course_id').val();
            const unitSelect = $('#unit_id');

            if (courseId && unitSelect.children('option').length === 1) {
                $.ajax({
                    url: `/get-units-by-course/${courseId}`,
                    type: 'GET',
                    success: function(res) {
                        unitSelect.empty().append('<option value="">Select Unit</option>');
                        $.each(res.units, function(key, unit) {
                            const isSelected = unit.id == '{{ request('unit_id') }}' ?
                                'selected' : '';
                            unitSelect.append(
                                `<option value="${unit.id}" ${isSelected}>${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                            );
                        });
                        unitSelect.prop('disabled', false);
                    },
                    error: function() {
                        unitSelect.html('<option value="">Error loading</option>');
                    }
                });
            }

            $('#course_id').on('change', function() {
                let courseId = $(this).val();
                unitSelect.prop('disabled', true).html('<option value="">Loading...</option>');

                if (courseId) {
                    $.ajax({
                        url: `/get-units-by-course/${courseId}`,
                        type: 'GET',
                        success: function(res) {
                            unitSelect.empty().append('<option value="">Select Unit</option>');
                            $.each(res.units, function(key, unit) {
                                unitSelect.append(
                                    `<option value="${unit.id}">${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                                );
                            });
                            unitSelect.prop('disabled', false);
                        },
                        error: function() {
                            unitSelect.html('<option value="">Error loading</option>');
                        }
                    });
                } else {
                    unitSelect.prop('disabled', true).html('<option value="">Select Unit</option>');
                }
            });


        });
    </script>
@endpush