@extends('admin.template.master')


@section('title')
    <section class="content-header">
        <h1>
            Search Keyword Not Found Log
            <small>all search miss list</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">SMS Keyword Not Found Log</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
    @if(Session::has('message'))
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{Session('message')}}
                    </div>
                </div>
            </div>
    @endif

    <div class="row">
        <div class="col-xs-12">
                <div class="box box-body">
                    <div class="row">

                        <div class="form-group col-md-2">
                            {!! Form::label('from_date', 'From Date') !!}
                            {!! Form::date('from_date', \Carbon\Carbon::now(), ['class' => 'form-control', 'id' => 'from_date']) !!}
                        </div>

                        <div class="form-group col-md-2">
                            {!! Form::label('to_date', 'To Date') !!}
                            {!! Form::date('to_date', \Carbon\Carbon::now(), ['class' => 'form-control', 'id' => 'to_date']) !!}
                        </div>

                        <div class="form-group col-md-1">
                            {!! Form::label('&nbsp;') !!}
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="is_date" checked  id="search_by_date" style="margin-left: -17px">
                                </label>
                            </div>
                        </div>

                        <div class="form-group col-md-2">
                            {!! Form::label('keyword', 'Keyword') !!}
                            {!! Form::text('keyword', null, ['class' => 'form-control', 'id' => 'keyword']) !!}
                        </div>

                        <div class="col-md-1" style="width: 250px;padding-top: 22px; /*margin-left: -40px;*/">
                            {!! Form::button('Search',['class' => 'btn btn-primary btn-order-search', 'id'=> 'search_btn']) !!}
                            {!! Form::button('Reset',['class' => 'btn btn-danger btn-order-search', 'id'=> 'reset_btn']) !!}
                        </div>

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


        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">

                        {{-- <h3 class="box-title">List</h3> --}}

                        <div class="box-tools pull-left dl_link_btn" style="display:none;">
                            <a class="btn btn-success" id="download_link" href="javascript:void(0);">Download Link</a>
                        </div>
                        <button id="submit-selected" class="btn btn-primary">Submit Selected</button>
                    </div>
                    <div class="box-body table-responsive">
                        <table class="table table-hover" id="search_not_found_logs">
                            <thead>
                            <tr>

                                <th><input type="checkbox" id="select-all"></th>
                                <th style="display:none;">#Sl</th>
                                <th>Response</th>
                                <th>Count</th>
                                <th>Date</th>
                                <th>Status</th>
                            </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {



            var oTable = $('#search_not_found_logs').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "pageLength": 100,
                // "aLengthMenu": [
                //                 [10, 25, 50, 100, 500]
                // ],
                // "extend": 'excel',
                // "dom": 'lBfrtip',
                "dom": 'Bfrtip',
                // "dom": 'lrtip',
                "buttons": [
                    'excel'
                ],
                //   'copy', 'csv', 'excel', 'pdf', 'print'
                "ajax": {
                    url: "{{ route('getSearchResultNotFoundData') }}",
                    data: function (d) {
                        d.search_by_date = $("#search_by_date").is(':checked') === true ? '1' : 0 ;
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.keyword = $('#keyword').val();
                    }
                },
                // "order": [[0, "desc"]],
                "columns": [
                    // {data: 'id'},
                    { // Checkbox column
                        data: null,
                        orderable: false,
                        className: 'dt-body-center',
                        render: function (data, type, full, meta) {
                            return '<input type="checkbox" class="select-row">';
                        }
                    },
                    {data: 'id', visible: false},
                    {data: 'keyword'},
                    {data: 'tot_count'},
                    {data: 'created_at'},
                    {data: 'status'}

                ]
            });

            $('#select-all').on('click', function(){
                var rows = oTable.rows({ 'search': 'applied' }).nodes();
                $('input[type="checkbox"].select-row', rows).prop('checked', this.checked);
            });

            // Handle row checkbox click to deselect "Select All" if any checkbox is unchecked
            $('#search_not_found_logs tbody').on('change', 'input[type="checkbox"].select-row', function(){
                if (!this.checked) {
                    $('#select-all').prop('checked', false);
                }
            });


            $("#search_btn").click(function() {
                let from_date = new Date($('#from_date').val());
                let to_date = new Date($('#to_date').val());
                let daysDiff = parseInt((to_date - from_date) / (1000 * 60 * 60 * 24), 10);
                let isCheck = $("#search_by_date").is(':checked') === true ? '1' : 0 ;
                let keyword = $('#keyword').val();

                $('#download_link').attr("href", "#");

                if (parseInt(daysDiff) < 0) {
                    alert('Please select from date must be less than to date');
                } else {

                    $(".dl_link_btn").show();
                    $('#download_link').attr('href', "{{ url('/') }}/admin/search-report-not-found-csv?from_date="+ $('#from_date').val() + "&to_date="+ $('#to_date').val()  + "&search_by_date="+  isCheck + "&keyword="+ keyword );
                    oTable.draw();
                }
            });


            $("#reset_btn").click(function() {
                window.location.reload();
            });


            $('#submit-selected').on('click', function() {
                // Collect all selected rows
                var selectedData = [];
                oTable.rows().every(function(rowIdx, tableLoop, rowLoop) {
                    var rowNode = this.node();
                    var checkbox = $(rowNode).find('input[type="checkbox"].select-row');

                    if (checkbox.is(':checked')) {
                        // Collect entire row data including hidden ID
                        var rowData = this.data();
                        selectedData.push({
                            id: rowData.id,         // Hidden ID
                            keyword: rowData.keyword,
                            tot_count: rowData.tot_count,
                            created_at: rowData.created_at
                        });
                    }
                });

                if (selectedData.length > 0) {
                    // Send selected data to Laravel via AJAX
                    $.ajax({
                        url: "{{ route('storeSearchReportData') }}", // Your Laravel route
                        type: 'POST',
                        data: {
                            selected_data: selectedData, // Send selected rows data
                            _token: '{{ csrf_token() }}' // Laravel CSRF token
                        },
                        success: function(response) {
                            // Handle success (e.g., display success message)
                            alert('Data successfully stored!');
                            // Optionally, reload the DataTable
                            oTable.ajax.reload();
                        },
                        error: function(xhr, status, error) {
                            // Handle error (e.g., display error message)
                            alert('Error storing data!');
                        }
                    });
                } else {
                    alert('No rows selected!');
                }
            });

    });
    </script>
@endsection