@section('title','Topical')
@include('layout.header')
@include('layout.sidebar')
<style>
    .radio-container {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .radio-container label {
        margin-right: 10px;
    }
</style>
<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Topical</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Topical</li>
        </ul>
    </div>
    <div class="d-flex align-items-center gap-2 gap-lg-3">
    <div class="radio-container">
            <input type="radio" id="englishRadio" name="language" value="English" checked>
            <label for="englishRadio">English</label>
            <input type="radio" id="hindiRadio" name="language" value="Hindi">
            <label for="hindiRadio">Hindi</label>
            <input type="radio" id="gujaratiRadio" name="language" value="Gujarati">
            <label for="gujaratiRadio">Gujarati</label>
        </div>
        <a href="{{ route('excel-export')}}" class="btn btn-sm fw-bold btn-primary" id="add_btn" >Topical Excel Import</a>
        <a href="{{ route('create-topicals')}}" class="btn btn-sm fw-bold btn-primary" id="add_btn" >Add Topical</a>
    </div>
</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                <div class="table-responsive">
                    <table class="table data-table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4" id="table">
                        <thead>
                            <tr class="fw-bold text-muted">
                                <th> Sr No </th>
                                <th> Topical Category </th>
                                <th> Topical Title  </th>
                                <th> Topical Caption </th>
                                <th> Topical Journo </th>
                                <th> Topical Decade </th>
                                <th> Topical Month </th>
                                <th> Topical Year </th>
                                <th> Topical Image</th>
                                <th> Topical Image Retina</th>
                                <th> Topical Tags </th>
                                <th> Topical Keyword </th>
                                <th> Created At </th>
                                <th> Status</th>
                                <th> Action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@include('layout.footer')
<script>
     $(function () {
        $(document).ready(function() {
            const radioButtons = document.querySelectorAll('input[type="radio"]');
            let table;
            function initializeDataTable(columns) {
                table = $('#table').DataTable({
                    processing: true,
                    serverSide: true,
                    searching: true,
                    ajax: {
                        url: '{{url('/Topicals')}}',
                    },
                    columns: columns
                });
            }

            // English column definitions
            const englishColumns = [
                {data: 'DT_RowIndex', name: 'id',orderable: false, searchable: false},
                {data:  'topical_category_id_en', name: 'topical_category_id_en'},
                {data:  'topical_title_en',   name: 'topical_title_en'},
                {data:  'topical_caption_en', name: 'topical_caption_en'},
                {data:  'topical_genre_en',  name: 'topical_genre_en'},
                {data:  'topical_decade_en',  name: 'topical_decade_en'},
                {data:  'topical_month_en',   name: 'topical_month_en'},
                {data:  'topical_year_en', name: 'topical_year_en'},
                {data:  'topical_image_en',  name: 'topical_image_en'},
                {data:  'topical_image_retina_en', name: 'topical_image_retina_en'},
                {data:  'topical_tags_en', name: 'topical_tags_en'},
                {data:  'topical_keyword_en', name: 'topical_keyword_en'},
                {data:  'first_name', name: 'admin_id'}, 
                {data:  'status', name: 'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ];

            // Hindi column definitions
            const hindiColumns = [
                {data: 'DT_RowIndex', name: 'id',orderable: false, searchable: false},
                {data:  'topical_category_id_hi', name: 'topical_category_id_hi'},
                {data:  'topical_title_hi',   name: 'topical_title_hi'},
                {data:  'topical_caption_hi', name: 'topical_caption_hi'},
                {data:  'topical_genre_hi',  name: 'topical_genre_hi'},
                {data:  'topical_decade_hi',  name: 'topical_decade_hi'},
                {data:  'topical_month_hi',   name: 'topical_month_hi'},
                {data:  'topical_year_hi', name: 'topical_year_hi'},
                {data:  'topical_image_hi',  name: 'topical_image_hi'},
                {data:  'topical_image_retina_hi', name: 'topical_image_retina_hi'},
                {data:  'topical_tags_hi', name: 'topical_tags_hi'},
                {data:  'topical_keyword_hi', name: 'topical_keyword_hi'},
                {data:  'first_name', name: 'admin_id'}, 
                {data:  'status', name: 'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ];

            // Gujarati column definitions
            const gujaratiColumns = [
                {data: 'DT_RowIndex', name: 'id',orderable: false, searchable: false},
                {data:  'topical_category_id_gu', name: 'topical_category_id_gu'},
                {data:  'topical_title_gu',   name: 'topical_title_gu'},
                {data:  'topical_caption_gu', name: 'topical_caption_gu'},
                {data:  'topical_genre_gu',  name: 'topical_genre_gu'},
                {data:  'topical_decade_gu',  name: 'topical_decade_gu'},
                {data:  'topical_month_gu',   name: 'topical_month_gu'},
                {data:  'topical_year_gu', name: 'topical_year_gu'},
                {data:  'topical_image_gu',  name: 'topical_image_gu'},
                {data:  'topical_image_retina_gu', name: 'topical_image_retina_gu'},
                {data:  'topical_tags_gu', name: 'topical_tags_gu'},
                {data:  'topical_keyword_gu', name: 'topical_keyword_gu'},
                {data:  'first_name', name: 'admin_id'}, 
                {data:  'status', name: 'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ];

            // Initialize DataTable with English columns by default
            initializeDataTable(englishColumns);
            radioButtons.forEach(radioButton => {
                radioButton.addEventListener('change', function() {
                    if (this.checked) {
                        const selectedValue = this.value;
                        if (selectedValue === 'English') {
                            table.destroy(); 
                            initializeDataTable(englishColumns); 
                        } else if (selectedValue === 'Hindi') {
                            table.destroy();
                            initializeDataTable(hindiColumns);
                        } else if (selectedValue === 'Gujarati') {
                            table.destroy();
                            initializeDataTable(gujaratiColumns);
                        }
                    }
                });
            });
        });
  });

    function deleteData(id){
        var x =confirm("Are you sure you want to delete?");
           if(x){
            var id= id;
            var url = "{{ url('Topicals/delete-topicals/') }}/"+ id;
            $.ajax({
                type:'GET',
                url: url,
                dataType: 'json',
                success: (response) => {
                $.each( response, function( key, value ) {
                  location.reload();
                });
            },
            error: function(response){
                $.each( response.responseJSON.errors, function( key, alert ) {
                });
            }
            });
        }
     }

</script>