@extends('layouts.app')
@section('title')
    {{ 'Connect IQ' }}
@endsection
@push('styles')
    <link href="{{ asset('/css/select2-custom.css') }}" rel="stylesheet" />
    <style>
 .card-body .input-group {
    align-items: center;
    display: flex;
    flex-wrap: initial;
    gap: 30px;
}
.input-group .select2.select2-container
{
    width: 20% !important;
}
.records-select
{
    padding: 1.25rem;
}
@media only screen and (max-width: 600px) {
    .input-group .select2.select2-container
{
    width: 35% !important;
}
.card-body .input-group {
 
    gap: 10px;
}
}
    </style>
@endpush
@section('content')
    <!-- breadcrumb -->
    
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <h4 class="page-title">Connect IQ</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    @if (Auth::user()->role_id == 1)
                        <a href="{{ route('backend.dashboard') }}">Admin Dashboard</a>
                    @else
                        <a href="{{ route('backend.business.dashboard') }}">Business Dashboard</a>
                    @endif
                </li>
                <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0);">Connect IQ</a></li>
            </ol>
        </div>
        <div class="d-flex my-xl-auto right-content align-items-center">
            @if ((Auth::user()->hasRole('admin') || Auth::user()->hasRole('affiliate_admin')) && (isset(request()->affiliate_user_id)))
                <div class="mb-xl-0">
                    <div class="dropdown">
                        <button class="btn btn-primary" id="exportBusienss" type="button" aria-expanded="false" disabled
                            style="margin-right:15px">
                            {{ isset(request()->affiliate_user_id) ? 'Export Affiliated Businesses' : 'Export All Businesses' }}
                        </button>
                    </div>
                </div>
            @endif
            @if (Auth::user()->hasRole('admin'))
                <div class="mb-xl-0">
                    <div class="dropdown">
                        <button class="btn btn-danger" id="deleteBusiness" type="button" aria-expanded="false" disabled
                            style="margin-right:15px">
                            <span class="fe fe-trash-2"> </span>
                        </button>
                    </div>
                </div>
            @endif
            <div class="mb-xl-0">
                <div class="dropdown">
                    <button class="btn btn-danger" onclick="location.href='{{ route('business.list') }}'" type="button"
                        aria-expanded="false">
                        Reset
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
    @include('layouts.message')
    <!-- row -->
    <!-- row -->
    <div class="row row-sm">
        <div class="col-xl-3 col-lg-4 col-md-12 mb-3 mb-md-0">
            <div class="card">
                <div class="card-header border-bottom py-3 mb-0 fw-bold text-uppercase">FILTER</div>
                <div class="card-body pb-0">
                    <div class="form-group mt-2">
                        <label class="form-label">Companies</label>
                        <select name="company_name"
                        class="form-control  nice-select  form-select" data-parsley-required="true"
                        data-parsley-errors-container=".custom-step-error-lpso"
                        id="company_name">
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Business Countries </label>
                        <select name="businessCountries" id="businessCountries"
                            class="form-control  nice-select  form-select" data-parsley-required="true"
                            data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                            @foreach ($businessCountries as $key => $value)
                                <option value="{{ $key }}">
                                    {{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Business States</label>
                        <select name="businessStates" id="businessStates"
                            class="form-control  nice-select  form-select" data-parsley-required="true"
                            data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Year Founded</label>
                        <select name="year" id="year" class="form-control nice-select form-select year-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Business Ownership Groups</label>
                        <select name="businessOwnershipGroup" id="businessOwnershipGroup"
                            class="form-control nice-select form-select" data-parsley-required="true"
                            data-parsley-errors-container=".custom-step-error-lpso" multiple>
                            <option></option>
                            @foreach ($businessOwnershipGroups as $group)
                                <option value="{{ $group['id'] }}">{{ $group['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Industry</label>
                        <select name="industry" id="industry" class="form-control  nice-select  form-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                            @foreach ($BusinessIndustryTypeCategories as $categorie)
                                <option value="{{ $categorie['id'] }}">{{ $categorie['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Business Type</label>
                        <select name="businesstype" id="businesstype" class="form-control  nice-select  form-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                            @foreach ($businessTypes as $businesstype)
                                <option value="{{ $businesstype['id'] }}">{{ $businesstype['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Revenue Range </label>
                        <select name="revenuerange" id="revenuerange" class="form-control  nice-select  form-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                            @foreach ($revenueRanges as $revenueRange)
                                <option value="{{ $revenueRange['id'] }}">{{ $revenueRange['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Business Model </label>
                        <select name="businessmodel" id="businessmodel" class="form-control  nice-select  form-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso" multiple>
                            <option></option>
                            @foreach ($businessModelMasters as $businessModelMaster)
                                <option value="{{ $businessModelMaster['id'] }}">{{ $businessModelMaster['name'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Products Or Services Offered </label>
                        <select name="productservicetype" id="productservicetype"
                            class="form-control  nice-select  form-select" data-parsley-required="true"
                            data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                            @foreach ($productServiceTypes as $productservicetype)
                                <option value="{{ $productservicetype['id'] }}">{{ $productservicetype['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Current Business Challenges And Pain Points </label>
                        <select name="painpointmaster" id="painpointmaster" class="form-control  nice-select  form-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso" multiple>
                            <option></option>
                            @foreach ($painPointMasters as $painpointmaster)
                                <option value="{{ $painpointmaster['id'] }}">{{ $painpointmaster['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    {{-- <div class="form-group mt-2">
                        <label class="form-label">Pain Points Identified Is The Most Urgent</label>
                        <select name="painpointmaster2" id="painpointmaster2" class="form-control  nice-select  form-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso" multiple>
                            <option></option>
                            @foreach ($painPointMasters as $painpointmaster)
                                <option value="{{ $painpointmaster['id'] }}">{{ $painpointmaster['name'] }}</option>
                            @endforeach
                        </select>
                    </div> --}}
                    <div class="form-group mt-2">
                        <label class="form-label">Pain Points Identified Is The Most Urgent</label>
                        <select name="painpointmaster2" id="painpointmaster2" class="form-control  nice-select  form-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso" multiple>
                            <option></option>
                            @foreach ($urgentPainPoints as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">Are you planning to purchase a product or service to address this pain
                            point in the near future?</label>
                        <select name="purchasepainpointperiod" id="purchasepainpointperiod"
                            class="form-control  nice-select  form-select" data-parsley-required="true"
                            data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                            @foreach ($purchasePainPointPeriods as $purchasepainpointperiod)
                                <option value="{{ $purchasepainpointperiod['id'] }}">
                                    {{ $purchasepainpointperiod['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label">What is your budget for purchasing a product or service to address this
                            pain point? </label>
                        <select name="productservicepurchasebudget" id="productservicepurchasebudget"
                            class="form-control  nice-select  form-select" data-parsley-required="true"
                            data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                            @foreach ($productServicePurchaseBudgets as $productServicePurchaseBudget)
                                <option value="{{ $productServicePurchaseBudget['id'] }}">
                                    {{ $productServicePurchaseBudget['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-lg-8 col-md-12 add_background">
            <div id="js-global-loader" style="display: none;">
                <img src="{{ asset('assets/images/svgicons/loader.svg') }}" class="loader-img filter-loader"
                    alt="Loader">
            </div>
            <div class="card just_for_search">
                <div class="card-body records-select">
                    <div class="input-group">
                        @if ((Auth::user()->hasRole('admin') || Auth::user()->hasRole('affiliate_user')))
                            <input type="checkbox" id="checkAllBusienss" value="0" style="width:25px;height:21px;"
                            />
                                <select name="totalRecords" id="totalRecords" class="form-control nice-select form-select">
                                <option value="">---Select No. of Businesses---</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                                <option value="70">70</option>
                                <option value="100">100</option>
                            </select>
                        @endif
                        <input type="text" name="search" id="search" class="form-control"
                            placeholder="Search ..." onkeyup="delayedSearch()">
                    </div>
                </div>
            </div>
            <div class="row row-sm" id="businessContent">
                {!! $htmlResponse !!}
            </div>
        </div>
    </div>
    <!-- row closed -->
    @push('scripts')
        <script type="text/javascript">
            const paginationRoute = "{{ route('business.list.pagination') }}";
            const companyRoute = "{{ route('get-company-name') }}";
            var currentYear = new Date().getFullYear();
            var startYear = currentYear - 50; // Specify the starting year
            var endYear = currentYear; // Specify the ending year

            var selectYear = document.getElementById("year");

            var affiliate_user_id = "{{ request()->has('affiliate_user_id') ? request('affiliate_user_id') : '' }}";

            var registered_users = "{{ request()->has('registered_users') ? request('registered_users') : '' }}";

            var userdata = "{{ request()->has('userdata') ? request('userdata') : '' }}";

            for (var year = startYear; year <= endYear; year++) {
                var option = document.createElement("option");
                option.value = year;
                option.text = year;
                selectYear.appendChild(option);
            }
        </script>
        <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
        <script src="{{ asset('js/backend/business-filter.js') }}"></script>
        <script>
            $(document).on("change", ".business_check", function() {
                console.log("checkbox change");
                // Check if any checkbox is checked
                var anyChecked = $(".business_check:checked").length > 0;
                // Enable or disable the button based on the checkbox state
                $("#exportBusienss").prop("disabled", !anyChecked);
                $("#deleteBusiness").prop("disabled", !anyChecked);
            });
            $("#checkAllBusienss").on("change", function() {
                // Get the state of the "Check All" checkbox
                var isChecked = $(this).prop("checked");
                // Set the state of all checkboxes with the class "checkbox-item"
                $("#exportBusienss").prop("disabled", !isChecked);
                $("#deleteBusiness").prop("disabled", !isChecked);
                $(".business_check").prop("checked", isChecked);
            });
            $("#exportBusienss").on("click", function() {
                // Array to store checked checkbox values
                var checkedValues = [];
                // Use the :checked selector to get checked checkboxes
                $("input[type='checkbox']:checked").each(function() {
                    // Push the value of each checked checkbox to the array
                    if ($(this).val() != 0) {
                        checkedValues.push($(this).val());
                    }
                });
                // Display the checked values (you can also do something else with them)
                console.log("Checked values: " + checkedValues.join(","));
                var csrfToken = $('meta[name="csrf-token"]').attr("content");
                $.ajax({
                    url: "{{ route('export-business.list') }}",
                    type: "POST",
                    headers: {
                        "X-CSRF-TOKEN": csrfToken
                    },
                    data: {
                        business_ids: checkedValues.join(","),
                        affiliate_user_id: "{{ request()->affiliate_user_id }}"
                    },
                    success: function(response) {
                        // Check if the response data is empty or contains the "No Data Found" message
                        Swal.fire({
                            title: "Exported!",
                            text: "Business Exported successfully please verify via mail!",
                            icon: "success",
                            customClass: {
                                confirmButton: "btn btn-primary mx-2"
                            }
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        // Handle error
                        console.log('An error occurred:', xhr);
                    },
                });
            });
            $("#totalRecords").on("change", function() {
                let recordsPage = $(this).val();
                $.ajax({
                    url: "{{ route('business.index') }}",
                    type: "GET",
                    data: {
                        recordsPage: recordsPage,
                        affiliate_user_id: affiliate_user_id,
                        registered_users : registered_users,
                        userdata: userdata
                    },
                    success: function(response) {
                        $("#businessContent").html(response.data);
                    },
                    error: function(xhr) {
                        // Handle error
                        console.log('An error occurred:', xhr);
                    },
                });
            });
            $("#deleteBusiness").on("click", function() {
                let deletecheckedValues = [];
                // Use the :checked selector to get checked checkboxes
                $("input[type='checkbox']:checked").each(function() {
                    // Push the value of each checked checkbox to the array
                    if ($(this).val() != 0) {
                        deletecheckedValues.push($(this).val());
                    }
                });
                // Display the checked values (you can also do something else with them)
                console.log("Checked values: " + deletecheckedValues.join(","));
                Swal.fire({
                    title: "Are you sure?",
                    text: "Are you sure you want to delete Selected Imported Businesses?",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes",
                    cancelButtonText: "No",
                }).then((result) => {
                    if (result.isConfirmed) {
                    $.ajax({
                        url: "{{route('import-business.all.delete')}}",
                        type: "POST",
                        cache: false,
                        data: {
                        _token: '{{ csrf_token() }}',
                        business_ids: deletecheckedValues.join(","),
                        affiliate_user_id: affiliate_user_id,
                        },
                        success: function(data, textStatus, xhr) {
                        if (data == true && textStatus == 'success' && xhr.status == '200') {
                            Swal.fire({
                            title: "Deleted!",
                            text: "Imported Businesses deleted successfully!",
                            icon: "success",
                            customClass: {
                                confirmButton: "btn btn-primary mx-2"
                            }
                            }).then(() => {
                              location.reload();
                            });
                        } else {
                            Swal.fire({
                            title: "Error!",
                            text: data,
                            icon: "error",
                            customClass: {
                                confirmButton: "btn btn-primary mx-2"
                            }
                            });
                        }
                        }
                    });
                    }
                });
            });
        </script>
    @endpush
@endsection