@extends('backend.layouts.app')
<style>
    .admin-table.table-freezed table thead tr th {
        position: sticky;
        top: -1px !important;
    }
</style>
@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="row align-items-center">
            <div style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">
                <h1 class="h3">Survey List</h1>
            </div>
        </div>
        <div class="common-tbl-head m-0 ml-1 ">
        <div class="common-tbl-head m-0 ml-1">
            <div class="common-tbl-heading">
                All Surveys
            </div>
            <div class="selected-prod">Selected Survey (<span id="sProduct">0</span>)</div>
        </div>
        <div class="delete-select" id="deletedData" style="display:none">
            <a href="javascript:void(0);" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a>
        </div>
    </div>
    </div>
    <div class="admin-table table-freezed">
        <div class="table-responsive tbl-hgt-fixed ">
            <table class="table mb-0" id="mytable" style="white-space: nowrap">
                <thead>
                    <tr>
                        <th class="text-center tbl-shadow" style="width:16px">
                            <div class="custom-checkbox m-auto">
                                <input class="custom-control-input" type="checkbox" id="checkAll" value="0">
                                <label class="custom-control-label" for="checkAll"></label>
                            </div>
                        </th>
                        <th class="text-center" style="width: 4%">S.No.</th>
                        <th class="memberUser tbl-shadow">Company Name</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Company Type</th>
                        <th>Industry</th>
                        <th>Annual Revenue</th>
                        <th>No. of Employees</th>
                        <th>R&D</th>
                        <th>Certification</th>
                        <th>Production Capacity</th>
                        <th>Warehouse Volume</th>
                        <th>Seeking Partnerships</th>
                        <th>Hear About Us</th>
                        <th>Platform Usability</th>
                        <th>Quality Supplier Information</th>
                        <th>Product Range</th>
                        <th>Communication</th>
                        <th>Live Chat</th>
                        <th>Transaction</th>
                        <th>Customer Support</th>
                        <th>Comments</th>
                        <th>Message</th>
                        <th>Status</th>
                        <th>Created On</th>
                        <th>Updated On</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="searchPage">
                    @forelse ($surveyListing as $index => $survey)
                        <tr>
                            <td class="text-center tbl-shadow">
                                <div class="custom-checkbox m-auto">
                                    <input type="checkbox" name="ids[]" class="custom-control-input product_checkbox"
                                        value="{{ $survey->id }}" id="checkbox{{ $survey->id }}">
                                    <label class="custom-control-label" for="checkbox{{ $survey->id }}"></label>
                                </div>
                            </td>
                            <td class="text-center">{{ $index + 1 + ($surveyListing->currentPage() - 1) * $surveyListing->perPage() }}</td>
                            <td class="memberUser-freeze tbl-shadow">{{ $survey->company_name ?? 'N/A' }}</td>
                            <td>{{ $survey->full_name ?? 'N/A' }}</td>
                            <td>{{ $survey->email ?? 'N/A' }}</td>
                            <td>






                            <div style="white-space: nowrap;width:200px;overflow:hidden;text-overflow:ellipsis;gap:5px" class="d-flex countryWflag f16">
                        




                            @if(empty($survey->phone))
                            N/A
                            @else
                        
                            <div class="d-flex">
                                <span class="inline-flag flag {{ strtolower($survey->country_code) }}"><span></div>
                                <div>+{{$survey->mobile_code }}</div>
                            <div>{{$survey->phone ?? 'N/A' }}</div>
                            @endif
                            </div>

                            </td>
                            <td data-toggle="tooltip" data-placement="right"  title="{{ $survey->company_type ? str_replace(',', ', ', e($survey->company_type)) : 'N/A' }} ({{ $survey->company_type_other  }})">
                                
                            {{ $survey->company_type ?? 'N/A' }} @if(!empty($survey->company_type_other))
                            ({{ $survey->company_type_other  }})
                            @endif

                        </td>
                            <td data-toggle="tooltip" data-placement="right"  title="{{ $survey->industry ? str_replace(',', ', ', e($survey->industry)) : 'N/A' }} ({{ $survey->industry_focus_other  }})">{{ $survey->industry ?? 'N/A' }} ,{{ $survey->industry_focus_other   }}</td>
                            <td>{{ $survey->annual_revanue ?? 'N/A' }}</td>
                            <td>{{ $survey->no_of_employees ?? 'N/A' }}</td>
                            <td>{{ $survey->r_n_d ?? 'N/A' }}</td>
                            <td data-toggle="tooltip" data-placement="right"
                                title="{{ $survey->certification ? str_replace(',', ', ', e($survey->certification)) : 'N/A' }} ({{ $survey->certifications_other }})">
                                {{ $survey->certification ? str_replace(',', ', ', $survey->certification) : 'N/A' }}
                                ({{ $survey->certifications_other  }})
                            </td>
                            <td>{{ $survey->production_capacity ?? 'N/A' }}</td>
                            <td>{{ $survey->warehouse_volume ?? 'N/A' }}</td>
                            <td>{{ $survey->seeking_partnerships ?? 'N/A' }}</td>
                            <td>{{ $survey->hear_about ?? 'N/A' }}</td>
                            <td>{{ $survey->platform_usability ?? 'N/A' }}</td>
                            <td>{{ $survey->quality_of_supplier_information ?? 'N/A' }}</td>
                            <td>{{ $survey->product_range ?? 'N/A' }}</td>
                            <td>{{ $survey->communication ?? 'N/A' }}</td>
                            <td>{{ $survey->live_chat ?? 'N/A' }}</td>
                            <td>{{ $survey->transaction ?? 'N/A' }}</td>
                            <td>{{ $survey->customer_support ?? 'N/A' }}</td>
                            <td data-toggle="tooltip" data-placement="right"  title="{{ $survey->comments ? str_replace(',', ', ', e($survey->comments)) : 'N/A' }}">{{ $survey->comments ?? 'N/A' }} </td>
                            <td>{{ $survey->message ?? 'N/A' }}</td>
                            <td>{{ $survey->status ?? 'N/A' }}</td>
                            <td>{{ $survey->created_at ?? 'N/A' }}</td>
                            <td>{{ $survey->updated_at ?? 'N/A' }}</td>

                            <td>
                                <div class="d-flex">
                                    <div style="cursor: pointer; ">
                                        <a href="javascript:void(0);"
                                            data-url="{{ route('edit.survey_listing', $survey->id) }}"
                                            data-id="{{ $survey->id }}" id="editUnit" data-toggle="modal"
                                            data-target="#edittnewAttributes-modal1" data-original-title="Edit">
                                            <i class="icons icon-edit" data-toggle="tooltip" data-placement="top"
                                                title="Edit" style="font-size:16px"></i>
                                        </a>
                                    </div>
                                    <div style="cursor: pointer;" class="ml-2">
                                        <a href="javascript:void(0);" id="deletebtn"
                                            data-href="{{ route('delete.survey_listing', $survey->id) }}"
                                            class="confirm-delete d-flex justify-content-center" data-href=""
                                            data-toggle="tooltip" data-placement="top" data-original-title="Delete"
                                            title="{{ translate('Delete') }}">
                                            <i class="icons icon-delete"></i>
                                        </a>
                                    </div>
                                </div>

                                {{-- <div class="d-flex">
                                    <a href="javascript:void(0);" data-url="{{ route('edit.survey_listing', $survey->id) }}" data-id="{{ $survey->id }}"
                                        class="edit-survey" data-toggle="modal" data-target="#editSurveyModal">
                                        <i class="icons icon-edit" style="font-size:16px" title="Edit"></i>
                                    </a>
                                    <a href="javascript:void(0);" class="ml-2 confirm-delete" data-href="{{ route('delete.survey', $survey->id) }}" 
                                        title="Delete">
                                        <i class="icons icon-delete"></i>
                                    </a>
                                </div> --}}
                            </td>
                        </tr>
                    @empty
                        <tr class="no-data">
                            <td colspan="19">
                                <div class="nodata-col">
                                    <i class="icons icon-no-data"></i>
                                    <h1>No Survey Data Available</h1>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal right fade editnewAttributes-modal1" data-refresh="true" id="edittnewAttributes-modal1"
        role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class=""
                        style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">
                        Edit Survey List
                    </h4>
                </div>
                <div class="modal-body pt-1" id="editData" style="padding:16px;">
                </div>
            </div>
        </div>
    </div>
    <div class="aiz-pagination">
        <div class="perPage">
            Total Survey : <strong>{{ $surveyListing->total() }}</strong>
        </div>
        {{ $surveyListing->appends(request()->input())->links() }}
    </div>
@endsection


@section('modal')
    @include('modals.delete_modal')
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
 $(document).on('click', '#checkAll', function() {
            $("#sProduct").text("0");
            if ($(this).is(":checked")) {
                $("#deletedData").css("display", "block");
                $("#restoreData").css("display", "block");
                $(this).closest('table').find('#searchPage tr').addClass('active');
            } else {
                $("#deletedData").css("display", "none");
                $("#restoreData").css("display", "none");
                $(this).closest('table').find('#searchPage tr').removeClass('active');
            }
            $(".product_checkbox").prop("checked", this.checked);
            $("#select_count").html($("input.product_checkbox:checked").length + " Selected");

        });

        $(document).on('click', '.product_checkbox,#checkAll', function() {
            if ($(this).is(':checked')) {
                $(this).closest('tr').addClass('active');
            } else {
                $(this).closest('tr').removeClass('active');
            }
            if ($('.product_checkbox:checked').length == $('.product_checkbox').length) {
                $('#checkAll').prop('checked', true);
                $("#deletedData").css("display", "block");
                $("#restoreData").css("display", "block");

            } else {
                if ($('.product_checkbox:checked').length == "0") {
                    $("#deletedData").css("display", "none");
                    $("#restoreData").css("display", "none");
                } else {
                    $("#deletedData").css("display", "block");
                    $("#restoreData").css("display", "block");
                }
                $('#checkAll').prop('checked', false);
            }
            $("#sProduct").text($("input.product_checkbox:checked").length);
        });

       $(document).on('click', '#delete_records', function() {
            var row = $(this).closest('tr');
            var deleteModal = $('#delete-modal');
            var products = [];
            $(".product_checkbox:checked").each(function() {
                products.push($(this).val());
            });

            if (products.length <= 0) {
                alert("Please select records.");
            } else {
                var selected_values = products.join(",");
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });

                $('#delete-link').one('click', function(e) {
                    $.ajax({
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ url('/admin/survey/multidelete') }}",
                        cache: false,
                        data: 'ids=' + selected_values,
                        success: function(response) {
                          $('#delete-modal').modal('hide');
                             location.reload();
                            var ids = response.split(",");
                            for (var i = 0; i < ids.length; i++) {
                                $("#" + ids[i]).closest("tr").remove();
                            }
                            var count = products.length;
                            if (count === 1) {
                                AIZ.plugins.notify('success', ' Deleted successfully');
                            } else {
                                AIZ.plugins.notify('success', 'Survey Deleted successfully');
                            }
                            
                            // var urls = "{{ route('advertisement.list') }}"
                            // data_index(urls);
                            $("#sProduct").text("0");
                            $('#delete-modal').modal('hide');
                            $("#deletedData").hide();
                        }
                    });
                });
            }
        });
            $(document).on('click', '#editUnit', function(e) {
                var url = $(this).data('url');
                $.ajax({
                    url: url,
                    type: 'get',
                    success: function(e) {
                        $("#editData").html(e);
                    }
                });
            });

            $(document).on('click', '#updateSurveyList', function(event) {
                event.preventDefault();
                var url = $('#myform1').attr('action');
                var form = $('#myform1')[0];
                var formData = new FormData(form);
                $.ajax({
                    url: url,
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(data) {
                        if (data.success) {
                            $("#editnewAttributes-modal1").modal('hide');
                            var url = "{{ url('admin/survey/listing') }}";
                            window.location.href = url;
                            AIZ.plugins.notify('success',
                                '{{ translate('survey list updated successfully') }}');
                        } else {
                            console.log('Error in response:', data.error);
                            AIZ.plugins.notify('error', data.error ||
                                '{{ translate('An error occurred while updating') }}');
                        }
                    },

                    error: function(error) {
                        console.log(error.name);
                    },

                });
            });
            $(document).on('click', '#deletebtn', function(e) {

                e.preventDefault();
                var url = $(this).attr('data-href');

                var deleteModal = $('#delete-modal');

                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });

                $('#delete-link').one('click', function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(response) {
                            deleteModal.modal('hide');
                            AIZ.plugins.notify('success',
                                '{{ translate('survey list deleted successfully') }}'
                            );
                            location.reload();
                        },
                        error: function(xhr) {
                            deleteModal.modal('hide');
                            AIZ.plugins.notify('danger',
                                '{{ translate('Error deleting ') }}'
                            );
                        }
                    });
                });
            });
        });
    </script>
@endsection