@extends('admin.layouts.base')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <form method="get" action="{{ route('interlink-dashboard') }}" class="row justify-content-center align-items-center">

                @php
                    $selectedCategories = request('category', ['All', 'crypto_news', 'ico']);
                @endphp

                <div class="col-lg-12 col-md-12 py-3">
                    <label class="form-label">Search Keyword:</label>
                    <input type="text"
                        name="search"
                        value="{{ request('search') }}"
                        class="form-control"
                        placeholder="Enter keyword or slug">
                </div>

                <div class="col-lg-12 col-md-12 py-3">
                    <label class="form-label">Filter by Category:</label><br>

                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" name="category[]" value="All" id="select_all"
                            {{ in_array('All', $selectedCategories) ? 'checked' : '' }}>
                        <label class="form-check-label" for="select_all">All</label>
                    </div>

                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" name="category[]" value="crypto_news" id="crypto_news"
                            {{ in_array('crypto_news', $selectedCategories) ? 'checked' : '' }}>
                        <label class="form-check-label" for="crypto_news">Crypto News</label>
                    </div>

                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" name="category[]" value="ico" id="ico"
                            {{ in_array('ico', $selectedCategories) ? 'checked' : '' }}>
                        <label class="form-check-label" for="ico">ICO</label>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 py-3">
                    <button type="submit" name="submit" class="submit-btn">Search</button>
                    <a href="{{ route('interlink-dashboard') }}" class="submit-btn">RESET</a>
                </div>
            </form>

            <div class="row justify-content-center">
                <div class="col-12">
                    <table class="table even-tbl">
                        <h1 class="text-center">Interlinks</h1>
                        <thead class="text-center">
                            <tr>
                                <th>ID</th>
                                <th>Category</th>
                                <th>Source</th>
                                <th>Find Links</th>
                                <th>Title</th>
                                <th>Text</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $i = 1;
                            @endphp
                            @if (@isset($links) && !@empty($links))
                                @foreach ($links as $key => $result)
                                    <tr>
                                        <td>{{ $i }}</td>
                                        <td>{{ @$resultType }}</td>
                                        <td>{{ @$_GET['search'] }}</td>
                                        <td>{{ $result['url'] }}</td>
                                        <td>{{ $result['title'] }}</td>
                                        <td>{{ $result['text'] }}</td>
                                    </tr>
                                    @php
                                        $i++;
                                    @endphp
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="5" class="text-center">No Data Found</td>
                                </tr>
                            @endif

                        </tbody>
                    </table>

                </div>
            </div>

            <div class="modal fade" id="dynamicModal" role="dialog" aria-labelledby="dynamicModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="dynamicModalLabel">Modal Title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea name="description" id="editor1" class="form-control"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="seo_title">SEO Title</label>
                                <input type="text" name="seo_title" id="seo_title" class="form-control">
                            </div>
                            <input type ="hidden" name="type" id="type" class="form-control">
                            <input type ="hidden" name="id" id="id" class="form-control">
                            <div class="form-group">
                                <label for="meta_keywords">Meta Keywords</label>
                                <input type="text" name="meta_keywords" id="meta_keywords" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="meta_description">Meta Description</label>
                                <textarea name="meta_description" id="meta_description" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="saveChanges">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

            <style>
                .even-tbl {
                    width: 100%;
                }

                .even-tbl tr th,
                .even-tbl tr td {
                    border: 1px solid #ccc;
                    text-transform: capitalize;
                    vertical-align: middle;
                    text-align: center;
                }

                .even-tbl tr th {
                    color: #fff;
                    background: #705ec8;
                }

                .even-tbl tbody {
                    background: #fff;
                }

                .even-tbl tbody:nth-child(odd) {
                    background: #eee;
                }

                .even-tbl tr td:first-child {
                    text-align: left;
                }

                
                .submit-btn {
                    border-radius: 50px;
                    font-weight: 600;
                    margin: auto;
                    padding: 2px 14px;
                    border: 1px solid #705ec8;
                }
            </style>
      </div>
    </div>
</div>


 <!-- jQuery -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.ckeditor.com/4.20.0/standard/ckeditor.js"></script>
    <script src="https://cdn.ckeditor.com/ckfinder/3.6.2/ckfinder.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Bootstrap JavaScript -->

    <script>
        $(document).ready(function() {
            var editor;

            // Initialize CKEditor when the modal is shown
            $('#dynamicModal').on('shown.bs.modal', function() {
                // Replace textarea with CKEditor
                if (!CKEDITOR.instances['editor1']) {
                    CKEDITOR.replace('editor1', {
                        filebrowserBrowseUrl: 'https://cdn.ckeditor.com/ckfinder/3.6.2/ckfinder.html',
                        filebrowserUploadUrl: 'https://cdn.ckeditor.com/ckfinder/3.6.2/core/connector/php/connector.php?command=QuickUpload&type=Files',
                        filebrowserImageBrowseUrl: 'https://cdn.ckeditor.com/ckfinder/3.6.2/ckfinder.html?type=Images',
                        filebrowserImageUploadUrl: 'https://cdn.ckeditor.com/ckfinder/3.6.2/core/connector/php/connector.php?command=QuickUpload&type=Images'
                    });
                }
            });

            // Destroy CKEditor instance when the modal is hidden
            $('#dynamicModal').on('hidden.bs.modal', function() {
                if (CKEDITOR.instances['editor1']) {
                    CKEDITOR.instances['editor1'].destroy();
                }
            });

            // Open modal and load data
            $('.open-modal').click(function() {
                var id = $(this).data('id');
                var type = $(this).data('type');

                $.ajax({
                    url: '{{ route('get_content_data') }}',
                    type: 'GET',
                    data: {
                        id: id,
                        type: type
                    },
                    success: function(response) {
                        $('#dynamicModal .modal-title').text('Details for ' + type);

                        // Populate fields with response data
                        if (CKEDITOR.instances['editor1']) {
                            CKEDITOR.instances['editor1'].setData(response.description);
                        } else {
                            $('#editor1').val(response.description);
                        }

                        $('#seo_title').val(response.seo_title);
                        $('#type').val(type);
                        $('#id').val(id);
                        $('#meta_keywords').val(response.meta_keywords);
                        $('#meta_description').val(response.meta_description);

                        // Show the modal
                        $('#dynamicModal').modal('show');
                    },
                    error: function(xhr) {
                        console.error('An error occurred:', xhr);
                    }
                });
            });

            // Save changes
            $('#saveChanges').click(function() {
                var data = {
                    description: CKEDITOR.instances['editor1'] ? CKEDITOR.instances['editor1']
                        .getData() : $('#editor1').val(),
                    seo_title: $('#seo_title').val(),
                    type: $('#type').val(),
                    id: $('#id').val(),

                    meta_keywords: $('#meta_keywords').val(),
                    meta_description: $('#meta_description').val(),
                    _token: "{{ csrf_token() }}"
                };

                $.ajax({
                    url: '{{ route('save-data') }}', // URL to your PHP route or controller for saving data
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        // Handle success response here
                        Swal.fire({
                            title: "Success",
                            text: "Data Updated Successfully",
                            icon: "success",
                            confirmButtonText: "OK"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Reload the page
                                location.reload();
                            }
                        });
                        $('#dynamicModal').modal('hide'); // Hide the modal after saving
                    },
                    error: function(xhr) {
                        console.error('An error occurred:', xhr);
                    }
                });

                $('#dynamicModal').modal('hide'); // Hide the modal after saving
            });
        });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectAllCheckbox = document.getElementById('select_all');
        const checkboxes = document.querySelectorAll('.form-check-input[name="category[]"]');

        selectAllCheckbox.addEventListener('change', function() {
            checkboxes.forEach(function(checkbox) {
                if (checkbox.id !== 'select_all') {
                    checkbox.checked = selectAllCheckbox.checked;
                }
            });
        });

        checkboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                if (checkbox.id !== 'select_all' && !checkbox.checked) {
                    selectAllCheckbox.checked = false;
                }
            });
        });
    });
    </script>