@extends('layouts.app')
@section('title')
    {{ 'News Feeds' }}
@endsection
@push('styles')
    <link href="{{ asset('/css/select2-custom.css') }}" rel="stylesheet" />
    <link href="{{ asset('/css/news_feed.css') }}" rel="stylesheet" />
@endpush
@section('content')
    <!-- breadcrumb -->

    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <h4 class="page-title">News Feeds</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);">News Feeds</a></li>
            </ol>
        </div>
        @if (Auth::user()->hasRole('admin') || Auth::user()->hasRole('affiliate_admin'))
            <div class="d-flex my-xl-auto right-content align-items-center">
                <div class="mb-xl-0">
                    <div class="dropdown">
                        <button class="btn btn-primary" onclick="location.href='{{ route('news-feeds.create') }}'"
                            type="button" aria-expanded="false">
                            + Create News Feed
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </div>
    <!-- breadcrumb -->
    @include('layouts.message')
    <!-- row -->
    <!-- row -->
    <div class="row row-sm">
        <div class="col-xl-12 col-lg-12 col-md-12 mb-3 mb-md-0">
            <div class="card">
                <div class="card-body pb-0 row mb-3">
                    <div class="form-group mt-2 col-xl-4 col-lg-4 col-md-4">
                        <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 col-xl-4 col-lg-4 col-md-4">
                        <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>
                    @if (Auth::user()->hasRole('admin') || Auth::user()->hasRole('affiliate_admin'))
                    <div class="form-group mt-2 col-xl-4 col-lg-4 col-md-4">
                        <label class="form-label">News Feed Status</label>
                        <select name="status" id="status" class="form-control nice-select form-select"
                            data-parsley-required="true" data-parsley-errors-container=".custom-step-error-lpso">
                            <option></option>
                            <option value="pending">Pending</option>
                            <option value="published">Published</option>
                        </select>
                    </div>
                    @endif
                    {{-- <div class="form-group mt-2 col-xl-3 col-lg-3 col-md-3">
                        <label class="form-label">No. of Feeds</label>
                        <select name="totalRecords" id="totalRecords" class="form-control nice-select form-select">
                            <option value=""></option>
                            <option value="30">30</option>
                            <option value="50">50</option>
                            <option value="70">70</option>
                            <option value="100">100</option>
                        </select>
                    </div> --}}
                </div>
            </div>
        </div>
        
        <div class="col-xl-12 col-lg-12 col-md-12 add_background">
            <div class="row row-sm" style="background:#ffffff;border-radius:1%">
                <div class="form-group mt-2 col-xl-4 col-lg-4 col-md-4 just_for_search"></div>
                <div class="form-group mt-2 col-xl-4 col-lg-4 col-md-4 just_for_search"></div>
                <div class="form-group mt-2 col-xl-4 col-lg-4 col-md-4 just_for_search">
                    <input type="text" name="search" id="search" class="form-control" placeholder="Search by title..."
                        onkeyup="delayedSearch()">
                </div>
            </div>
            <div class="row row-sm" id="businessContent" style="border-radius:0%">
                {!! $html !!}
                <div class="js-global-loader col-xxl-8 col-xl-8 col-lg-8 col-md-8 mt-3 hide_class">
                    <div class="loader_div">
                        <div class="card-body">
                            <img src="{{ asset('assets/images/svgicons/loader.svg') }}" class="loader-img filter-loader"
                                alt="Loader" style="top:-36%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- row closed -->
    @push('scripts')
        <script type="text/javascript">
            const paginationRoute = "{{ route('business.list.pagination') }}";
            const companyRoute = "{{ route('get-company-name') }}";
            const newsFeedRoute = "{{ route('news-feeds.index') }}";
            const showCommentRoute = "{{ route('news-feeds.show-comment') }}";
            const showReplyRoute = "{{route('news-feeds.show-replies')}}";
            const likeRoute = "{{ route('news-feeds.like') }}";
            const storeCommentRoute = "{{ route('news-feeds.store-comment') }}";
            const storeReply = "{{ route('news-feeds.store-reply') }}";
            const showDeleteFeedRoute = "{{ route('news-feeds.delete') }}";
            const filterFeedRoute = "{{route('news-feeds.list')}}";
            let page = 1;
        </script>

        <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
        <script src="{{ asset('js/backend/news_feed.js') }}"></script>

        <script>
            $("#totalRecords").select2({
                placeholder: "Please select no of feeds per page",
            });
            $(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);
            });

            $("#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);
                    },
                });
            });
        </script>
    @endpush
@endsection