@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Search Synonyms Management</h2>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- Synonym List --}}
        <div class="col-md-6 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Synonyms <small>List</small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="control-label">Filter by Program</label>
                        </div>
                        <div class="col-md-5">
                            <select id="filter_program" class="form-control">
                                <option value="0">All Programs</option>
                                @foreach ($programs as $program)
                                    <option value="{{ $program->iProgramID }}">{{ $program->vAdminName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button id="filterBtn" class="btn btn-primary btn-sm">Filter</button>
                        </div>
                    </div>
                </div>
                <div class="x_content table-responsive">
                    <table id="datatableSynonyms" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Terms</th>
                                <th>Program</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Synonym Form --}}
        <div class="col-md-6 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>{{ $mode ?? 'Add' }} <small>Synonym</small></h2>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content responsive_form">
                    <br />
                    <form class="form-horizontal form-label-left input_mask" method="POST"
                        action="{{ isset($mode) && $mode == 'Edit' ? route('synonym.update') : route('synonym.store') }}"
                        enctype="multipart/form-data">
                        @csrf

                        @if (isset($mode) && $mode == 'Edit')
                            @method('PUT')
                            <input type="hidden" name="iSearchSynonymID"
                                value="{{ $synonym->iSearchSynonymID ?? old('iSearchSynonymID') }}">
                        @endif

                        <div class="item form-group">
                            <label class="control-label col-md-3">Name <span class="required">*</span></label>
                            <div class="col-md-9">
                                <input id="vName" name="vName" type="text" class="form-control"
                                    placeholder="e.g. tobacco-smoking"
                                    value="{{ old('vName', $synonym->vName ?? '') }}" required>
                                <small class="text-muted">Auto-slugified (lowercase, hyphens)</small>
                                @error('vName')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="item form-group">
                            <label class="control-label col-md-3">Terms <span class="required">*</span></label>
                            <div class="col-md-9">
                                <textarea id="vTerms" name="vTerms" class="form-control" rows="4"
                                    placeholder="tobacco, smoking, cigarette, nicotine"
                                    required>{{ old('vTerms', $synonym->vTerms ?? '') }}</textarea>
                                <small class="text-muted">Comma-separated synonym terms (minimum 2 terms)</small>
                                @error('vTerms')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="item form-group">
                            <label class="control-label col-md-3">Program</label>
                            <div class="col-md-9">
                                <select name="iProgramID" class="form-control">
                                    @foreach ($programs as $program)
                                        <option value="{{ $program->iProgramID }}"
                                            {{ old('iProgramID', $synonym->iProgramID ?? '') == $program->iProgramID ? 'selected' : '' }}>
                                            {{ $program->vAdminName }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">For admin organization only. All synonyms sync to Typesense regardless of program.</small>
                                @error('iProgramID')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-md-offset-3">
                                @if (Auth::guard('admin')->user()->bContent == 1)
                                    <a href="{{ route('synonym.index') }}" class="btn btn-primary">Cancel</a>
                                    <button type="submit"
                                        class="btn btn-success">{{ isset($mode) && $mode == 'Edit' ? 'Save Changes' : 'Create' }}</button>
                                @endif
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteSynonym" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleteSynonymLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteSynonymLabel">Delete Synonym</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete <strong id="synonym_name"></strong>?</p>
                    <p class="text-muted mb-0">This will also remove it from Typesense search.</p>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="delete_synonym_id" value="">
                    <button type="button" data-bs-dismiss="modal" class="btn btn-secondary">Keep</button>
                    <button type="button" id="confirmDelete" class="btn btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module">
        $(document).ready(function() {
            var datatableSynonyms = $('#datatableSynonyms').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                pageLength: 50,
                scrollX: true,
                order: [
                    [0, 'asc']
                ],
                ajax: {
                    url: '{{ route('synonym.list') }}',
                    type: 'POST',
                    data: function(d) {
                        d._token = $('meta[name="csrf-token"]').attr("content");
                        d.filter_program = $('#filter_program').val();
                    }
                },
                columns: [{
                        data: 'vName',
                        name: 'vName'
                    },
                    {
                        data: 'vTerms',
                        name: 'vTerms'
                    },
                    {
                        data: 'vAdminName',
                        name: 'vAdminName'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
            });

            // Filter button
            $('#filterBtn').on('click', function() {
                datatableSynonyms.ajax.reload();
            });

            // Delete button click - show modal
            $('#datatableSynonyms tbody').on('click', '.synonym-delete', function() {
                var id = $(this).attr('data-id');
                var name = $(this).attr('data-name');
                $("#delete_synonym_id").val(id);
                $("#synonym_name").html(name);
                $('#deleteSynonym').modal('show');
            });

            // Confirm delete via AJAX
            $('#confirmDelete').on('click', function() {
                var id = $('#delete_synonym_id').val();
                $.ajax({
                    url: '{{ url("synonym/delete") }}/' + id,
                    type: 'DELETE',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr("content")
                    },
                    success: function(response) {
                        $('#deleteSynonym').modal('hide');
                        datatableSynonyms.ajax.reload();
                        if (response.success) {
                            alert(response.message);
                        } else {
                            alert('Error: ' + response.message);
                        }
                    },
                    error: function(xhr) {
                        alert('Error deleting synonym');
                    }
                });
            });
        });
    </script>
@endpush