@extends('admin.layout')
@section('content')
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<style>
    table.dataTable thead th,
    table.dataTable thead td {
        border-bottom: 1px solid #DDD;
    }

    table.dataTable.no-footer {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }

    table.dataTable {
        margin: 10px auto;
    }

    .dataTables_wrapper .dataTables_length {
        margin: 10px auto 10px 0;
    }

    .dataTables_wrapper .dataTables_filter {
        margin: 10px 0 10px auto;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: 1px solid rgba(0, 0, 0, 0.1);
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:active {
        background: #EEE;
        border: 1px solid rgba(0, 0, 0, 0.3);
        color: #111 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        color: #FFF !important;
        border: 1px solid #337ab7;
        background: #337ab7;
    }
    /* .tab-content {
            padding: 15px;
            border: 1px solid #ddd;
            border-top: none;
        } */
</style>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>{{ trans('Whatsapp survey') }} <small></small> </h1>
        <ol class="breadcrumb">
            <li><a href="{{ URL::to('admin/dashboard/this_month') }}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
            <li class="active">{{ trans('Whatsapp survey') }}</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box">

                <!-- <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#productInfoDetail">Guru by Servercenter</a></li>
                    <li><a data-toggle="tab" href="#productDescriptionDetail">Tashan by Servercenter</a></li>
                </ul> -->


        
                <!-- <div id="productInfoDetail" class="tab-pane fade in active"> -->
                    <div class="filter-section" style="margin-top: 10px;">
                        <div class="row">
                            <div class="col-xs-12">
                                <form class="form-inline form-validate" method="GET" id="form1" action="{{ route ('whatsapp-feedback') }}" enctype="multipart/form-data" url="{{ route('whatsapp-feedback') }}">
                                    <input type="hidden" name="status_filter" value="{{ request('status_filter') }}">

                                    <div class="form-group">
                                        <h5 style="font-weight: bold; padding: 0px 5px; margin-left: 5px;">Filter:</h5>
                                    </div>
                                    <div class="form-group" style="width: 18%">
                                        {!! Form::text('leads_id', null, ['class' => 'form-control', 'placeholder' => 'Enter Lead Id', 'id' => 'leads_id', 'min' => 0]) !!}
                                    </div>

                                    <div class="form-group" style="width: 18%">
                                        {!! Form::text('daterange', app('request')->input('daterange'), [
                                            'class' => 'form-control daterange',
                                            'id' => 'daterange',
                                            'placeholder' => 'Select Date',
                                            'autocomplete' => 'off'
                                        ]) !!}
                                    </div>

                                    <button type="submit" class="btn btn-success" id="searchButton">Search</button>
                                    <a href="{{ URL::to('admin/whatsapp-survey') }}" class="btn btn-danger">Clear</a>

                                                                        <div class="form-group" style="margin-left:12px">
                                        <label>
                                        <input type="radio" name="status_filter" value="all" class="" autocomplete="off" {{$allStatus}} onclick="submitSearchForm()"> Replied Messages</label>
                                        &nbsp;&nbsp;&nbsp;<label>
                                        <input type="radio" name="status_filter" value="1" class="" autocomplete="off" {{$activeStatus}} onclick="submitSearchForm()"> All Messages</label>
                                        &nbsp;&nbsp;&nbsp;<label>
                                        <input type="radio" name="status_filter" value="0" class="" autocomplete="off" {{$inactiveStatus}} onclick="submitSearchForm()"> Poor Messages</label>
                                        &nbsp;&nbsp;&nbsp;<label>
                                    </div>
                                    <!-- <div class="form-group" style="margin-left: 10px">
                                        <label><input type="radio" name="status_filter" value="3" class="" autocomplete="off" {{ (!isset($_REQUEST['status_filter']) || (isset($_REQUEST['status_filter']) && $_REQUEST['status_filter'] == "3")) ? 'checked' : '' }} onclick="submitSearchForm()"> Replied Messages</label>
                                        &nbsp;&nbsp;&nbsp;
                                        <label><input type="radio" name="status_filter" value="1" class="" autocomplete="off" {{ (isset($_REQUEST['status_filter']) && $_REQUEST['status_filter'] == "1") ? 'checked' : '' }} onclick="submitSearchForm()"> All Messages</label>
                                        &nbsp;&nbsp;&nbsp;
                                        <label><input type="radio" name="status_filter" value="2" class="" autocomplete="off" {{ (isset($_REQUEST['status_filter']) && $_REQUEST['status_filter'] == "2") ? 'checked' : '' }} onclick="submitSearchForm()"> Poor Messages</label>
                                    </div> -->
                                </form>
                            </div>
                            <!-- <a href="{{ URL::to('admin/whatsapp-customer-logs') }}" class="btn btn-primary" style="float:right; margin-right:20px;">Customer Logs</a> -->
                        </div>
                    </div>
                    <div class="box-body">
                        @if (count($errors) > 0)
                            @if ($errors->any())
                                <div class="alert alert-success alert-dismissible" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    {{ $errors->first() }}
                                </div>
                            @endif
                        @endif
                        <div class="row">
                            <div class="col-xs-12">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th role="button" onclick="updateSort('customer_name', 'asc')">{{ trans('Customer Name') }}</th>
                                            <th role="button" >{{ trans('Mobile No.') }}</th>

                                            <!-- <th role="button">{{ trans('Lead Id') }}</th> -->
                                            <th role="button" onclick="updateSort('sort_by', 'desc')">
                                                {{ trans('Lead Id') }}
                                                @if(request('sort_by') == 'id')
                                                    @if(request('sort_type') == 'desc')
                                                        <a id="sort_data" href="{{ route('whatsapp-feedback', ['sort_by' => 'id', 'sort_type' => 'asc', 'daterange' => request('daterange')]) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
                                                    @else
                                                        <a id="sort_data" href="{{ route('whatsapp-feedback', ['sort_by' => 'id', 'sort_type' => 'desc', 'daterange' => request('daterange')]) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
                                                    @endif
                                                @else
                                                    <a id="sort_data" href="{{ route('whatsapp-feedback', ['sort_by' => 'id', 'sort_type' => 'desc', 'daterange' => request('daterange')]) }}"><i class="fa fa-sort" aria-hidden="true"></i></a>
                                                @endif
                                            </th>
                                            <th role="button">{{ trans('Product Name') }}</th>
                                            <th role="button">{{ trans('Received Date') }}</th>
                 
                                            <th role="button" style="width:520px">{{ trans('Template Name') }}</th>
                                            <th role="button">{{ trans('Customer Feedback') }}</th>
                                            <!-- <th role="button">{{ trans('Customer Review') }}</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>

        @php
            $seenLeadIds = []; 
        @endphp

        @foreach ($results as $index => $data)
            @php
                $fullName = $data->message_recipient_name;
                $productName = 'Guru'; 
                $whastsCreated = $data->created_at ?? ''; 
                $template = $data->template_name ?? ''; 
                $telephone_no = $data->message_recipient_id ?? '';
                $leadId = $data['leads_id'];
            @endphp

            @if (!in_array($leadId, $seenLeadIds))
                @php
                    $seenLeadIds[] = $leadId; 
                @endphp

                <tr>
                    <input type="hidden" class="leads_id" id="leads_id" value="{{ $leadId }}">
                    <td class="customer-name">{{ $fullName }}</td>
                    <td class="mobile-no">{{ $telephone_no }}</td>
                    <td class="order-id">
                        <a href="https://www.crm2.servercenter.xyz/admin/view-leads/{{ $leadId }}">
                            {{ $leadId }}
                        </a>
                    </td>
                    <td class="order-id">{{ $productName }}</td>
                    <td class="created-at" style="width:10%">{{ $whastsCreated }}</td>
                    <td>
                        @if ($template == "survey_master" || $template == "feedback_master" )
                            Dear Sir/Madam, will you please take a moment to share your feedback, were you satisfied with the service you received?
                        @elseif ($template == "survey_one" || $template == "feedback_one")
                            Did the customer service representative resolve your issue to your satisfaction?
                        @elseif ($template == "survey_two" || $template == "feedback_two")
                            Was the customer service representative knowledgeable and helpful?
                        @elseif ($template == "survey_three" || $template == "feedback_three" || $template == "survey_third_update")
                            How would you rate your overall experience?
                        @endif
                    </td>

                    <td class="message-data">
                        @if ($data['message_type'] == "payload")
                            {{ ucwords(str_replace("_", " ", $data['button_payload'])) }}
                        @elseif ($data['message_type'] == "text")
                        {{ ucwords(str_replace("_", " ", $data['text_body'])) }}
                        @endif
                    </td>
                </tr>
            @else
                <tr>
                    <input type="hidden" class="leads_id" id="leads_id" value="{{ $leadId }}">
                    <td class="customer-name" ></td>                              
                    <td class="mobile-no" ></td>         
                    <td class="order-id"> 
                    </td>
                    <td class="order-id" ></td>
                    <td class="created-at" style="width:10%">{{ $whastsCreated }}</td>
                    <td>
                        @if ($template == "survey_master" || $template == "feedback_master" )
                            Dear Sir/Madam, will you please take a moment to share your feedback, were you satisfied with the service you received?
                        @elseif ($template == "survey_one" || $template == "feedback_one")
                            Did the customer service representative resolve your issue to your satisfaction?
                        @elseif ($template == "survey_two" || $template == "feedback_two")
                            Was the customer service representative knowledgeable and helpful?
                        @elseif ($template == "survey_three" || $template == "feedback_three" || $template == "survey_third_update")
                            How would you rate your overall experience with our brand ?
                        @endif
                    </td>
                    <td class="message-data">
                    @if ($data['message_type'] == "payload")
                            {{ ucwords(str_replace("_", " ", $data['button_payload'])) }}
                        @elseif ($data['message_type'] == "text")
                        {{ ucwords(str_replace("_", " ", $data['text_body'])) }}
                        @endif
                    </td>
                </tr>
            @endif
        @endforeach


                                    </tbody>
                                  
                                </table>
                                <div class="col-xs-12 text-right">
                                {!! $results->appends(request()->input())->links(); !!}
                                </div>
                              <!-- //append code  -->
                            </div>
                        </div>
                    </div>
                <!-- </div> -->

                <!-- <div id="productDescriptionDetail" class="tab-pane fade">
                    <p>Tashan</p>-->
           
                </div>
            </div>
        </div>
    </section>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="{!! asset('admin/plugins/datepicker/jquery.datetimepicker.full.js') !!}"></script>
<link rel="stylesheet" href="{!! asset('admin/plugins/datepicker/jquery.datetimepicker.css') !!}">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script>
    $(document).ready(function() {
        $('.comment-cell').each(function() {
            var payload = $(this).closest('tr').find('.message-data').text().trim();
            var feedbackContainer = $(this).find('.feedback-container');
            if (payload === '') {
                feedbackContainer.hide();
            }
        });
    });
</script>



<script>
    // Function to submit the form with updated status_filter value
    function submitSearchForm() {
        document.getElementById('form1').submit();
    }

    // Function to update form action URL when sorting
    function updateSort(column, defaultSortType) {
    var form = document.getElementById('sort_data');
    var currentUrl = form.getAttribute('href');
    var statusFilter = document.querySelector('[name="status_filter"]').value;
    var sortType = defaultSortType; // Default sort type

    // if (statusFilter === "2") {
        // Toggle sort type if status_filter is "2"
        sortType = (defaultSortType === "desc") ? "asc" : "desc";
    // }

    // Construct the new URL with updated sorting and status_filter parameters
    var newUrl = currentUrl + '&status_filter=' + statusFilter;
    form.setAttribute('href', newUrl);
    }
    // var newUrl = currentUrl + '?sort_by=' + column + '&sort_type=' + sortType + '&status_filter=2';
</script>
<script>
$(document).ready(function() {
    $(document).on('click', '.save-feedback-btn', function() {
        var saveButton = $(this);
        var feedbackInput = saveButton.siblings('.feedback');
        var feedback = feedbackInput.val();
        var messageData = saveButton.closest('tr').find('.message-data').text();
        var leadId = saveButton.closest('tr').find('.leads_id').val();

        $.ajax({
            url: '/admin/whatsapp-customer-logs',
            type: 'POST',
            data: {
                feedback: feedback,
                leadId: leadId,
                messageData: messageData,
            },
            success: function(response) {
                if (response.status == 1) {
                    $.notify({message: 'Feedback Saved successfully.'}, {type: 'success'});
                    
                    // Hide current feedback input and button
                    feedbackInput.hide();
                    saveButton.hide();

                    // Update comments section with saved feedback
                    var commentCell = saveButton.closest('.comment-cell').find('.comment-data');
                    var commentsText = '';
                    response.data.forEach(function(comment, index) {
                        commentsText += '<strong> Review ' + (index + 1) + ':</strong> ' + comment.comment + '<br>';
                    });
                    commentCell.html(commentsText);

                    // Add new feedback input and button for further input
                    var newFeedbackInput = $('<div class="feedback-container"><textarea class="feedback" placeholder="Type your comment here" style="display: block;"></textarea><button class="save-feedback-btn btn-primary"><i class="fa fa-save"></i></button></div>');
                    commentCell.append(newFeedbackInput);
                } else {
                    $.notify({message: 'Failed to save feedback.'}, {type: 'error'});
                }
            },
            error: function(xhr, status, error) {
                console.error('Error saving comment:', error);
                $.notify({message: 'Failed to save feedback. Please try again later.'}, {type: 'error'});
            }
        });
    });
});
</script>



<script>

    $( function() {
        $('#daterange').daterangepicker({
            opens: 'left',
            locale: { cancelLabel: 'Clear' },
            //autoUpdateInput: false,
            //startDate: moment().subtract('days', 29),      
      startDate: moment().subtract(1, 'month').startOf('month'),
      endDate: moment(),      
        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')]
        }
     }, 
     function(start, end, label) {  
         console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
     });
        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
            //console.log(picker.startDate.format('YYYY-MM-DD'));
            //console.log(picker.endDate.format('YYYY-MM-DD'));
            var startDate = picker.startDate.format('YYYY-MM-DD')+'/'+picker.endDate.format('YYYY-MM-DD');
            $('#date_range').val(startDate);
            //console.log(startDate);
            //return false;
            var page = '';
            //fetch_data(page);
            $('#date_day_filter').submit();
        });
        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
        });
        $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
            //do something, like clearing an input
            $('#date_range').val('');
            $('#daterange').val('');
            var page = '';
            //fetch_data(page);
            $('#date_day_filter').submit();
        });
    });


    // Get the input elements
    const input1 = document.getElementById('leads_id');
    const input2 = document.getElementById('daterange');
    const searchButton = document.getElementById('searchButton');

    function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }

        var leadsIdFromUrl = getUrlParameter('leads_id');
        if (leadsIdFromUrl !== '') {
            input1.value = leadsIdFromUrl;
        }

    // searchButton.addEventListener('click', function() {
    //     if (input1.value !== '') {
    //         input2.value = '';
    //     }
    // });
    
    
</script>
<script>
	function submitSearchForm() {
		document.getElementById("form1").submit();
	}
</script>
<!-- <script>
    document.getElementById('sort_type').addEventListener('change', function() {
        var selectedOrder = this.value;
        var form = document.getElementById('form1');
        var currentUrl = form.getAttribute('url');
        var statusFilter = form.querySelector('[name="status_filter"]').value;
        var newUrl = currentUrl + '?status_filter=' + statusFilter + '&order=' + selectedOrder;
        form.setAttribute('action', newUrl);
    });
</script> -->


@endsection