@extends('layouts.app')

@section('styles')

@endsection

@section('content')

<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title"> Feedbacks</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page"> Feedbacks</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- Row -->

<input type="hidden" name="" id="order_id">
<div class="row">
    <div class="col-12 col-sm-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title mb-0">View Feedback </h3>
            </div>
            <input type="hidden" id="review_id" value="">
            <div class="card-body pt-4">
                <div class="grid-margin">
                    <div class="">
                        <div class="panel panel-primary">
                            <div class="tab-menu-heading border-0 p-0">
                                <div class="tabs-menu1">




                                    <ul class=" nav panel-tabs product-sale filter_section_ul">

                                        <li class="px-2">
                                            @if(session('from_date') &&!session('to_date') &&
                                            session('from_date')==date('m/d/Y'))
                                            <a href="javascript:void(0)"
                                                class="today_filter btn btn-sm btn-primary">Today Report</a>
                                            @else
                                            <a href="javascript:void(0)"
                                                class="today_filter btn btn-sm btn-primary-light ">Today Report</a>
                                            @endif

                                        </li>


                                        @if(session('rating_exist'))
                                        <li class="px-2">
                                            <select name="ratting_filter" id="ratting_filter"
                                                class="form-control ratting_filter">
                                                @php
                                                $rating_array = array("5", "4", "3","2","1");
                                                @endphp
                                                <option value=""> -- Rating Filter -- </option>
                                                @foreach($rating_array as $rating)
                                                @if(session('rating') && $rating==session('rating'))
                                                @php
                                                $selected="Selected";
                                                @endphp
                                                @else
                                                @php
                                                $selected="";
                                                @endphp
                                                @endif
                                                <option value="{{$rating}}" {{$selected}}> {{$rating}} Star </option>
                                                @endforeach
                                            </select>


                                        </li>

                                        @endif




                                        <li class="px-2">
                                            <div class="input-group">

                                                <div class="input-group-text custom-btn-info">
                                                    <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                                </div>
                                                @php


                                                $from_date="";
                                                if(session('from_date')){


                                                $from_date=session('from_date');
                                                }
                                                @endphp


                                                <input class="form-control fc-datepicker from_date"
                                                    placeholder="From Date" value="{{$from_date}}" type="text">
                                            </div>
                                        </li>



                                        <li class="px-1">
                                            <div class="input-group">


                                                <div class="input-group-text custom-btn-info">
                                                    <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                                </div>

                                                @php
                                                $to_date="";
                                                if(session('to_date')){


                                                $to_date=session('to_date');
                                                }
                                                @endphp


                                                <input class="form-control fc-datepicker to_date" placeholder="To Date"
                                                    value="{{$to_date}}" type="text">
                                            </div>
                                        </li>
                                        <li class="px-2">
                                            <div class="input-group">

                                                <select class="form-control" name="" id="form_type_filter">
                                                    <option value=""> -- Choose Form Filter --</option>
                                                    @foreach($data['form_types'] as $form_type)
                                                    <option value="{{$form_type['form_type_id']}}">
                                                        {{$form_type['form_type_name']}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </li>


                                        <li class="px-1">
                                            <div class="input-group">
                                                <button id="reset_btn" class="btn btn-danger"><i
                                                        class="fa fa-repeat"></i></button>
                                            </div>
                                        </li>

                                        <li class="px-1">
                                            <div class="input-group">

                                                <a href="{{route('excel_export_review')}}" target="_blank"
                                                    class="btn btn-sm btn-success"><i
                                                        class="fa fa-file-excel-o text-white"></i></a>
                                            </div>
                                        </li>




                                    </ul>




                                </div>
                            </div>
                            <div class="panel-body tabs-menu-body border-0 pt-0">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab5">
                                        <div class="table-responsive">
                                            <table class="table table-bordered text-nowrap border-bottom "
                                                style="width: 100% !important;" id="table_datatable"
                                                class="table table-bordered text-nowrap mb-0">
                                                <thead class="border-top text-center">
                                                    <tr>
                                                        <th class="bg-transparent border-bottom-0" style="width: 5%;">#
                                                        </th>
                                                        <th class="bg-transparent border-bottom-0">
                                                            Date</th>
                                                        <th class="bg-transparent border-bottom-0">
                                                            Form Type</th>

                                                        <th class="bg-transparent border-bottom-0">
                                                            Feedback Id</th>
                                                        <th class="bg-transparent border-bottom-0">
                                                            Customer Name</th>
                                                        <th class="bg-transparent border-bottom-0">
                                                            Mobile</th>
                                                        @if(session('rating_exist'))
                                                        <th class="bg-transparent border-bottom-0">
                                                            Rating</th>
                                                        @endif
                                                        <th class="bg-transparent border-bottom-0">
                                                            Action</th>
                                                    </tr>
                                                </thead>

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

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Row -->






<!-- Modal -->



<div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete</h5>
                <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you want to delete the Feedback ?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button onclick="delete_item()" class="btn btn-primary">Delete</button>
            </div>
        </div>
    </div>
</div>

{{-- ############View Modal######################### --}}

<div class="modal fade" id="scrollingmodal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Customer Feedback</h5>
                <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" id="view_modal_body">

            </div>
            <div class="modal-footer">
                <a href="#" target="_blank" class="btn btn-primary pdf_download"><i class="fa fa-download"></i>
                    &nbsp;Download</a>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <!--<button class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>

{{-- ####################End Of View Modal############ --}}










@endsection
@section('scripts')
{{-- ################################Jquery Datatable########################### --}}
<script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css')}}">
<script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
{{-- ########################################################################## --}}


<script src="{{asset('assets/js/tooltip&popover.js')}}"></script>
<!-- INTERNAL Bootstrap-Datepicker js-->
<script src="{{asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
<!-- INTERNAL Bootstrap-Datepicker js-->
<script src="{{asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.js')}}"></script>
<!-- TIMEPICKER JS -->
<script src="{{asset('assets/plugins/time-picker/jquery.timepicker.js')}}"></script>
<script src="{{asset('assets/plugins/time-picker/toggles.min.js')}}"></script>
<!-- INTERNAL jquery transfer js-->
<script src="{{asset('assets/plugins/jQuerytransfer/jquery.transfer.js')}}"></script>
<!-- DATEPICKER JS -->
<script src="{{asset('assets/plugins/date-picker/date-picker.js')}}"></script>
<script src="{{asset('assets/plugins/date-picker/jquery-ui.js')}}"></script>
<script src="{{asset('assets/plugins/input-mask/jquery.maskedinput.js')}}"></script>
<!-- FORMELEMENTS JS -->
<script src="{{asset('assets/js/formelementadvnced.js')}}"></script>
<script src="{{asset('assets/js/form-elements.js')}}"></script>






<script>
var public_url = "{{url('/')}}/{{env('ADMIN_PANEL_ROUTE')}}";
var token = $("meta[name=csrf-token]").attr("content");
var base_url = '{{url('/')}}';
var print_url = '{{url('/')}}/review_datatble';
var datatable_name = "table_datatable";
$('#table_datatable').DataTable({
    "responsive": true,
    "serverSide": true,
    "ordering": true,
    "searching": true,
    "bLengthChange": false,
    "info": false,
    "bSort": true,
    "order": [
        [0, 'desc']
    ],
    "columnDefs": [{
            "targets": [0],
            "orderable": true
        },
        {
            "className": "text-center",
            "targets": [0, 1, 2, 5]
        },
        {
            "orderable": false,
            "targets": [3, 4]
        }
    ],
    "displayLength": 10,
    "ajax": {
        "url": public_url + "/review-datatble",
        "type": "post",
        "data": function(data) {
            data._token = token;

            return data;

        }
    },
    "AutoWidth": true,
    "columns": [{
            "data": "form_data_id",
            "name": "form_data_id"
        },
        {
            "data": "form_date",
            "name": "form_date"
        },
        {
            "data": "form_type_name",
            "name": "form_type_name"
        },
        {
            "data": "form_data_id",
            "name": "form_data_id"
        },
        {
            "data": "form_data_id",
            "name": "form_data_id"
        },
        {
            "data": "form_data_id",
            "name": "form_data_id"
        },
        @if(session('rating_exist')) {
            "data": "form_rating",
            "name": "form_rating"
        },
        @endif {
            "data": "form_data_id",
            "name": "form_data_id"
        },
    ],

    "fnCreatedRow": function(nRow, aData, iDataIndex) {
        var info = this.dataTable().api().page.info();
        var page = info.page;
        var length = info.length;
        var action = "";
        var index = (page * length + (iDataIndex + 1));
        $('td:eq(0)', nRow).html(index);
        var time_stamp = aData.created_at;
        var time = aData.form_time;
        // var time= tConvert (time);

        //Var Date Conversion

        var formattedDate = $.datepicker.formatDate('dd-mm-yy', new Date(aData.form_date));

        //End Of Date Conversion


        var action = action + '&nbsp;<button title="View"  onclick=View(' + aData.form_data_id +
            ') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class="fe fe-eye"> </span></button>';


        var action = action + '&nbsp;<button title="Delete" onclick="delete_modal(' + aData.form_data_id +
            ')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';

        $('td:eq(1)', nRow).html(formattedDate);
        $('td:eq(3)', nRow).html(aData.form_data_unique_id);
        $('td:eq(4)', nRow).html(aData.customer_name);
        $('td:eq(5)', nRow).html(aData.customer_mobile);
        var img = "";
        for (var i = 0; i < aData.form_rating; i++) {
            img += "<img style='width: 20px;height: 20px;' src='" + base_url +
                "/assets/images/brand/star.png'>";

        }
        @if(session('rating_exist'))
        $('td:eq(6)', nRow).html(img);
        $('td:eq(7)', nRow).html(action).addClass('text-center');
        @else
        $('td:eq(6)', nRow).html(action).addClass('text-center');
        @endif



    }
});



function tConvert(time) {
    // Check correct time format and split into components
    time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

    if (time.length > 1) { // If time format correct
        time = time.slice(1); // Remove full string match value
        time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
        time[0] = +time[0] % 12 || 12; // Adjust hours
    }
    return time.join(''); // return adjusted time or original string
}




//      // #################### Delete Section ##########################
function delete_modal(id) {
    $('#review_id').val(id);
    $('#smallmodal').modal('show');
}

function delete_item() {
    var id = $('#review_id').val();
    $.ajax({
        type: 'POST',
        data: {
            "_token": token,
            "id": id
        },
        url: public_url + '/delete_review',
        success: function(result) {
            $('#smallmodal').modal('hide');
            toast(result, datatable_name);
        }
    })
}
//      // #################### End Of Delete Section ##################




function View(id) {
    $.ajax({
        type: 'POST',
        data: {
            "_token": token,
            "id": id
        },
        url: public_url + '/view_reviews',
        success: function(result) {
            $('#view_modal_body').html(result);
            $('#scrollingmodal').modal('show');
            var pdf_download_url = "{{route('download_reviews')}}?id=" + id;
            $('.pdf_download').attr("href", pdf_download_url);
        }
    })
}




$('.from_date').change(function() {
    $.ajax({
        type: 'POST',
        data: {
            "_token": token,
            "from_date": $('.from_date').val()
        },
        url: public_url + '/from_date_filter',
        success: function(result) {
            check_today_filtering_is_active(result);
            $("#table_datatable").DataTable().ajax.reload(null, false);
        }
    })

})

$('.to_date').change(function() {
    $.ajax({
        type: 'POST',
        data: {
            "_token": token,
            "to_date": $('.to_date').val()
        },
        url: public_url + '/to_date_filter',
        success: function(result) {
            check_today_filtering_is_active(result);
            $("#table_datatable").DataTable().ajax.reload(null, false);
        }
    })

})

$('#ratting_filter').change(function() {
    var rating = $('#ratting_filter').val();
    $.ajax({
        type: 'POST',
        data: {
            "_token": token,
            "rating": rating
        },
        url: public_url + '/rate_filter',
        success: function(result) {
            $("#table_datatable").DataTable().ajax.reload(null, false);
        }
    })

});

$('#reset_btn').click(function() {
    $.ajax({
        type: 'POST',
        data: {
            "_token": token
        },
        url: public_url + '/reset_session',
        success: function(result) {
            check_today_filtering_is_active();
            $('.ratting_filter').val('');
            $('.from_date').val('');
            $('.to_date').val('');
            $("#table_datatable").DataTable().ajax.reload(null, false);
        }
    })
});
</script>






<script>
function check_today_filtering_is_active(session_details = "") {
    var from_date = session_details.from_date;
    var to_date = session_details.to_date;
    let current_date = "{{date('m/d/Y')}}";
    if (from_date) {
        $('.from_date').val(from_date);
    } else {
        $('.from_date').val('');
    }
    if (to_date) {
        $('.to_date').val(to_date);
    } else {
        $('.to_date').val('');
    }

    if (from_date != "" && to_date == null && from_date == current_date) {
        $('.today_filter').removeClass('btn-primary-light');
        $('.today_filter').addClass('btn-primary');
    } else {
        $('.today_filter').removeClass('btn-primary');
        $('.today_filter').addClass('btn-primary-light');
    }

}

$('.today_filter').click(function() {
    if ($(".today_filter").hasClass("btn-primary")) {
        var form_date = "";
    } else {
        var form_date = "{{date('m/d/Y')}}";
    }


    $.ajax({
        type: 'POST',
        data: {
            "_token": token,
            "to_date": ''
        },
        url: public_url + '/to_date_filter',
        success: function(result) {}
    });


    $.ajax({
        type: 'POST',
        data: {
            "_token": token,
            "from_date": form_date
        },
        url: public_url + '/from_date_filter',
        success: function(result) {
            location.reload();

            check_today_filtering_is_active(result);
            $("#table_datatable").DataTable().ajax.reload(null, false);
        }
    })

});


$('#form_type_filter').change(function() {
    var form_type = $(this).val();
    $.ajax({
        type: 'POST',
        data: {
            "_token": token,
            "form_type": form_type
        },
        url: "{{route('form_type_filter')}}",
        success: function(result) {

            $("#table_datatable").DataTable().ajax.reload(null, false);
        }
    })
});
</script>

@endsection