@section('title','Poll Topical List')
@include('layout.header')
@include('layout.sidebar')

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>   
    <!-- Include Date Range Picker -->
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="{{ url('assets/custom/jquery.dataTables.min')}}"></script>

<style>
    #myTable1_filter  label,
    #myTable1_filter input[type=search] {
        display: none;
    }
    
    div.dataTables_wrapper {
        position: static;
    }

    .paginate_button.last,.paginate_button.first {
        display: none;
    }

    .panel-primary {
        border-color: #337ab7;
    }
    .panel {
        margin-bottom: 20px;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
    .panel-primary>.panel-heading {
        color: #fff;
        background-color: #337ab7;
        border-color: #337ab7;
    }
    .panel-heading {
        padding: 10px 15px;
        border-bottom: 1px solid transparent;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .panel-body {
        padding: 15px;
    }

    .ScrollStyle{
        max-height: 650px;
        overflow-y: scroll;
    }
      .blog-post {
            margin-bottom: 30px;
        }
        .blog-post img {
            max-width: 100%;
            height: auto;
        }
        .blog-post-title {
            font-size: 24px;
            font-weight: bold;
            margin-top: 10px;
        }
        .blog-post-excerpt {
            font-size: 16px;
            color: #555;
        }
        
    /* #myTable1_filter  label,
    #myTable1_filter input[type=search] {
        display: none;
    } */
    
    .error {
        color: red;
    }
    .bp-list-wrapper svg {
        width: 20px;
        height: 20px;
    }
    .bp-list-wrapper .flex.justify-between.flex-1.sm\:hidden {
        display: none;
    }
    div#paginated_sec .hidden.sm\:flex-1.sm\:flex.sm\:items-center.sm\:justify-between{
        display: flex;
        justify-content:space-between;
    }
    .input-group .form-control {
        padding-right: 2.5rem;
        /* Adjust this value as needed */
    }

    .input-group-text-start {
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        /* Adjust this value as needed */
    }

    .input-group-text-end {
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        /* Adjust this value as needed */
    }

    .input-group-append {
        position: relative;
        width: 0;
        height: 50px;
    }

    .form-control {
        font-size: 1.0rem;
    }
</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">Poll Topical List</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/Poll') }}" class="text-muted text-hover-primary">Poll</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Poll Topical List</li>
        </ul>
    </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">
                <!-- <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="english-tab" data-bs-toggle="tab" data-bs-target="#english"
                            type="button" role="tab" aria-controls="home" aria-selected="true">English</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="hindi-tab" data-bs-toggle="tab" data-bs-target="#hindi"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Hindi</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="gujarati-tab" data-bs-toggle="tab" data-bs-target="#gujarati"
                            type="button" role="tab" aria-controls="contact" aria-selected="false">Gujarati</button>
                    </li>
                </ul> -->
                <div class="tab-content" id="myTabContent">
                    <form action="{{ route('add-poll')}}" method="POST" id="poll_form">
                        @csrf
                        <div class="tab-pane  show active" id="english" role="tabpanel" aria-labelledby="home-tab">
                            <section class="main-sec">
                                <div class="container p-0">
                                    <div class="row p-0">
                                        <div class="col-md-12 p-0">
                                            <div class="panel panel-primary">
                                                <!-- <div class="panel-heading">Poll Topical List</div> -->
                                                    <div class="panel-body">
                                                        <div id="search-result">
                                                            <div class="bp-list-wrapper">
                                                                <!-- <div class="col-md-4 offset-md-8 mb-5" style="float:right; ">
                                                                    <button type="submit" class="form-control btn btn-primary" onclick="addTopical()">Add Topicals</button>
                                                                </div> -->
                                                                <div class="row">
                                                                    <div class="col-md-3">
                                                                        <!-- <input type="hidden" id="startSearchDate">  
                                                                        <input type="hidden" id="endSearchDate">  
                                                                        <div class="form-group form-group-filter-inq filter-search dataTables_filter searchFilterClass">
                                                                            <input type="hidden" id="startDate" name="Searchkey_0" class="searchInput filter-search-input">
                                                                            <input type="hidden" id="endDate" name="Searchkey_1" class="searchInput filter-search-input">
                                                                            <div id="reportrange"  class=" form-control pull-left p-3" style="background: #fff; cursor: pointer;  border: 1px solid #ccc;">
                                                                                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                                                                                <span>From Date - To Date</span> <b class="caret"></b>
                                                                            </div>
                                                                        </div> -->
                                                                    </div>
                                                                    <div class="col-md-6"></div>
                                                                    <div class="col-md-3" style="float:right; ">
                                                                        <div class="form-group form-group-filter-inq filter-search dataTables_filter searchFilterClass">
                                                                            <input type="text" id="bulksearch" name="Searchkey_1" class="form-control searchInput filter-search-input" placeholder="Search"><br>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="table-responsive1">
                                                                    <table class="table table-striped basic-datatables dynamicTable text-left" cellpadding="0" cellspacing="0" id="myTable1">
                                                                        <thead>
                                                                            <tr>
                                                                                <th class="no-sort all text-left" data-bSortable="true">Topical Image</th>
                                                                                <th class="no-sort all text-left" data-bSortable="true">Topical Title</th>
                                                                                <th class="no-sort all" data-width="98px" data-bSortable="true">Topical Date</th>
                                                                                <th class="no-sort all text-left" data-bSortable="true">Vote</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                        </div>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')
<script src="{{ url('assets/custom/datatable.js')}}"></script>
<script src="{{ url('assets/custom/datatables.min.js')}}"></script>
<script>
    
    $('#startDate').val('');
    $('#endDate').val('');

    $(function() {
        var start = moment().subtract(29, 'days');
        var end = moment();
        function cb(start, end) {
            //  $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $('#reportrange span').html(start.format('D-MMMM-YYYY') + ' - ' + end.format('D-MMMM-YYYY'));
            $('#startDate').val(start.format('YYYY-MM-DD'));
            $('#endDate').val(end.format('YYYY-MM-DD'));
            $('#endDate').trigger('change');
        }
        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);
      //  cb(start, end);

        function cb2(start, end) {
            //  $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $('#reportrangeTwo span').html(start.format('D-MMMM-YYYY') + ' - ' + end.format('D-MMMM-YYYY'));
            $('#startSearchDate').val(start.format('YYYY-MM-DD'));
            $('#endSearchDate').val(end.format('YYYY-MM-DD'));
           // $('#endDate').trigger('change');
           var dateValue = getDateValue();
           $(dateValue).trigger('change');
        }
        $('#reportrangeTwo').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb2);
    });
</script>
<script>
    $('#topicalSelected').html('<div class="row"><p style="text-align:center;">No Data Found.</p></div>');
    var selectedValues = [];
    var fStatus = false;
    function toggleCheckboxes(source) {
        $(".checkboxOne").each(function(){
            if($(source).is(":checked")) {
                $(this).prop("checked", true);
                fStatus = true;
                onSelectAdd(source)
            } else {
                $(this).prop("checked", false);
                fStatus = false;
                onSelectAdd(source)
            }
        });
    }

    function onSelectAdd(source){
        var checkboxes = document.getElementsByClassName('checkboxOne');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = source.checked;
            if (source.checked) {
                if (!selectedValues.includes(checkboxes[i].value)) {
                    selectedValues.push(checkboxes[i].value);
                }
            } else {
                selectedValues = [];
            }
        }
    }


    function updateSelectedValues(checkbox) {
        if (checkbox.checked) {
            if (!selectedValues.includes(checkbox.value)) {
                selectedValues.push(checkbox.value);
            }
        } else {
            var index = selectedValues.indexOf(checkbox.value);
            if (index !== -1) {
                selectedValues.splice(index, 1);
            }
        }
    }

   
    // function addTopical() {
    //     var requestBody = JSON.stringify({checkboxes: selectedValues, flag: fStatus });
    //     fetch('{{ route('temp-topicals-add') }}', {
    //             method: 'POST',
    //             headers: {
    //                 'Content-Type': 'application/json',
    //                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //             },
    //             body: requestBody
    //         })
    //     .then(response => response.json())
    //     .then(data => {
    //         localStorage.setItem('topicals', JSON.stringify(selectedValues));
    //         selectedValues = [];
    //         alert(data.msg);
    //         displayPosts(data);
    //     })
    //     .catch(error => {
    //         console.error('Error:', error);
    //     });
    // }

    
    // Search and Filter with pagination
    var currentPage = 1;
    var perPage = 10; 
    var frStatus = false;
    var removeSelectedVal = [];
    function toggleCheckboxesTwo(source) {
        $(".checkboxTwo").each(function(){
            if($(source).is(":checked")) {
                $(this).prop("checked", true);
                frStatus = true;
                onSelectRemove(source)
            } else {
                $(this).prop("checked", false);
                frStatus = false;
                onSelectRemove(source)
            }
        });
    }

    function onSelectRemove(source){
        var checkboxes = document.getElementsByClassName('checkboxTwo');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = source.checked;
            if (source.checked) {
                if (!removeSelectedVal.includes(checkboxes[i].value)) {
                    removeSelectedVal.push(checkboxes[i].value);
                }
            } else {
                removeSelectedVal = [];
            }
        }
    }

    function updateSelectedValuesTwo(checkbox) {
        var selectAllCheckbox = document.getElementById('selectTwoAll');
        if (checkbox.checked) {
            if (!removeSelectedVal.includes(checkbox.value)) {
                removeSelectedVal.push(checkbox.value);
            }
        } else {
            selectAllCheckbox.checked = false;
            var index = removeSelectedVal.indexOf(checkbox.value);
            if (index !== -1) {
                removeSelectedVal.splice(index, 1);
            }
        }
    }

    // Initial fetch on page load
    getDateValue(currentPage, perPage, frStatus);
    fetchPosts(currentPage, perPage, frStatus);


    function getDateValue(page, perPage, frStatus) {
        var lang = '{{$lang}}';
        var id = '{{$id}}';
        let start_date = document.getElementById('startSearchDate').value;
        let end_date = document.getElementById('endSearchDate').value;
        var requestBody = JSON.stringify({ page: page, per_page: perPage, start_date: start_date,end_date: end_date, flag: frStatus, lang: lang, id: id  });
        fetch('{{ route('custom-topicals-pagination') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: requestBody
            })
        .then(response => response.json())
        .then(data => {
            localStorage.setItem('topicals', JSON.stringify(selectedValues));
            selectedValues = [];
            displayPosts(data);
            displayPagination(data.current_page, data.per_page, data.total);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

     
    function fetchPosts(page, perPage, frStatus) {
        let selectedDate = '';
        var lang = '{{$lang}}';
        var id = '{{$id}}';
        fetch('{{ route('custom-topicals-pagination') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ page: page, per_page: perPage, date: selectedDate, flag: frStatus, lang: lang, id:id })
            })
        .then(response => response.json())
        .then(data => {
            selectAllOne(data.total, removeSelectedVal,data.flag);
            selectedValues = [];
            displayPosts(data);
            displayPagination(data.current_page, data.per_page, data.total);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    // select all value checked and unchecked
    function selectAllOne(total,removeSelectedVal,flag){
        var selectAllCheckbox = document.getElementById('selectTwoAll');
        if(flag == true){
            selectAllCheckbox.checked = true;
        }else{
            if(total != 0 && total == removeSelectedVal.length){
                selectAllCheckbox.checked = true;
            }else{
                selectAllCheckbox.checked = false;
            }
            
        }
    }

    function displayPosts(data){
        var html = '';
        $('#topicalSelected').html('');
        if(data.getdata.length > 0){
            for (var i = 0; i < data.getdata.length; i++) {
            html += '<div class="row">';
            html += '<input type="hidden" name="topicalIds[]" value="'+ data.getdata[i].topical_id +'">';
            html += '<div class="col-md-2 blog-post"><th class="no-sort all" data-bSortable="false"><input type="checkbox" class="checkboxTwo" name="selectTwo[]" onclick="updateSelectedValuesTwo(this)" ';
            html += (data.flag == true) ? 'checked ' : '';
            html += 'value="' + data.getdata[i].topical_id + '" id="selectAllTwo"></th></div>';
            html += '<div class="col-md-3 blog-post"><img src="' + '{{ url('') }}/' + data.getdata[i].topical_image + '" height="50px" width="50px" alt="Topical image"></div>';
            html += '<div class="col-md-4 blog-post"><p>'+ data.getdata[i].topical_title +'</p></div>';
            html += '<div class="col-md-3 blog-post"><p>'+ data.getdata[i].created_at +'</p></div>';
            html += '</div>';
        }
        }else{
            html += '<div class="row"><center><p> No Data Found.</p></center></div>';
        }
        $('#topicalSelected').html(html);
    }

    function displayPagination(currentPage, perPage, total) {
        var totalPages = Math.ceil(total / perPage);
        var paginationHtml = '<ul class="pagination">';
             paginationHtml += '<li class="page-item"> <a class="page-link" href="#" data-page="' + i + '"> Previous </a></li>';
        for (var i = 1; i <= totalPages; i++) {
            paginationHtml += '<li class="page-item ' + (i === currentPage ? 'active' : '') + '">';
            paginationHtml += '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a>';
            paginationHtml += '</li>';
        }
         paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="' + i + '"> Next </a></li>';
        paginationHtml += '</ul>';
        $('#pagination').html(paginationHtml);

        // Add click event listener to pagination links
        $('.page-link').on('click', function(event) {
            event.preventDefault();
            var page = $(this).data('page');
            currentPage = page;
            fetchPosts(currentPage, perPage, frStatus);
        });
    }
    
    
   
   
   

    
    $("#poll_form").validate({
        debug: true,
        rules: {
            title_en: {
                required: true,
                remote: {
                            url:"{{ url('Poll/is-available-poll') }}",
                            type: "get",
                            async: false,
                            data: {
                                title_en: function() {
                                return $( "#title_en" ).val();
                                    }
                                }
                                }
            },
            title_hi: {
                required: true,
                remote: {
                            url:"{{ url('Poll/is-available-poll') }}",
                            type: "get",
                            async: false,
                            data: {
                                title_hi: function() {
                                return $( "#title_hi" ).val();
                                    }
                                }
                                }
            },
            title_gu: {
                required: true,
                remote: {
                    url:"{{ url('Poll/is-available-poll') }}",
                    type: "get",
                    async: false,
                    data: {
                        title_gu: function() {
                            return $( "#title_gu" ).val();
                            }
                            }
                            }
            },
            status: {
                required: true
            }

        },
        messages: {
            title_en: {
                required: 'Title!!',
                remote: 'Title already exists!!'

            },
            title_hi: {
                required: 'Title!!',
                remote: 'Title already exists!!'

            },
            title_gu: {
                required: 'Title!!',
                remote: 'Title already exists!!'

            },
            // start_date_en: {
            //     required: 'Start Date!!',
            //     remote: 'Start Date already exists!!'
            // },
            status: {
                required: 'Required'
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        },
        submitHandler: function(form) {
            $(".submit").attr("disabled", true);
        form.submit();
        }

    });
    $('#english-tab').click(function(event) {
        $('#english').removeClass("d-none");
        $('#hindi').addClass("d-none");
        $('#gujarati').addClass('d-none');
        $('#english').addClass('d-block');
    });
    $('#hindi-tab').click(function(event) {
        $('#hindi').removeClass("d-none");
        $('#hindi').addClass("d-block");
        $('#gujarati').addClass('d-none');
        $('#english').addClass('d-none');
    });
    $('#gujarati-tab').click(function(event) {
        $('#gujarati').removeClass("d-none");
        $('#hindi').addClass("d-none");
        $('#english').addClass('d-none');
        $('#gujarati').addClass('d-block');
    });
    $(document).ready(function() {
        // Get the current date
        var currentDate = moment().format('DD-MM-YYYY');
        // Set the current date in the date input field
        $('#start_date_en,#start_date_hi,#start_date_gu').val(currentDate);
        // Initialize DateRangePicker
        $('#start_date_en, #start_date_hi, #start_date_gu').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoApply: true,
            minDate: moment().startOf('day'),
            locale: {
                format: 'DD-MM-YYYY'
            }
        }, function(start, end, label) {
            // Set the selected date in the input field
            $('#start_date_en,#start_date_hi,#start_date_gu').val(start.format('DD-MM-YYYY'));
            $('#end_date_en,#end_date_hi,#end_date_gu').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoApply: true,
            minDate: start,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });
        $('#end_date_en,#end_date_hi,#end_date_gu').val(start.format('DD-MM-YYYY'));
        });

        $('#text-start-en').on('click', function() {
            $('#start_date_en').focus();
        });
        $('#text-end-en').on('click', function() {
            $('#end_date_en').focus();
        });
        $('#text-start-hi').on('click', function() {
            $('#start_date_hi').focus();
        });
        $('#text-end-hi').on('click', function() {
            $('#end_date_hi').focus();
        });
        $('#text-start-gu').on('click', function() {
            $('#start_date_gu').focus();
        });
        $('#text-end-gu').on('click', function() {
            $('#end_date_gu').focus();
        });
    });
</script>