@extends('frontend.layout.master')
@section('content')
    <!-- <section class="inner-page-banner-section">
        <div class="bg-img"></div>
        <div class="niveshaay-container">
            <div class="inner-banner-content">
                <h1>{{$categorylist[1]}}</h1>
            </div>
        </div>
    </section> -->
    <div id="content-main-wrap" class="is-clearfix">
        <div id="content-area" class="site-content-area">
            <section class="recommendtion-table-section">
                <div class="niveshaay-container">
                    <div class="company-detail-wrap">
                        <div class="recommendtion-table-heading">
                            <div class="search-box">
                                <input type="text" placeholder="Search {{$categorylist[1]}}..." id="Current-recommendation">
                                <img src="{{ asset('images/search-img.svg')}}" alt="search-img">
                            </div>
                            <div class="view-wrap">
                                <span class="logo-view">Logo View</span>
                                <div class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </div>
                                <span class="table-view">Table View</span>
                            </div>
                        </div>
                        <div class="table-outer">
                            <table id="Current-recommendations" class="table dashboard-table cell-border" style="width:100%">
                                <thead>
                                    <tr>
                                    <th class="sr-no">No.<span></span> </th>
                                    <th class="date">Date <span></span> </th>
                                    <th>Company Name<span></span> </th>
                                    <th class="allocation">Allocation<span></span> </th>
                                    <th class="price-on-recomandation-date">Price as on <br />Recommended <br/>Date <span></span> </th>
                                    <th class="view">View</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($currentRecommendationData as $key=>$currentData)
                                        <tr>
                                            <td class="sr-no">
                                                {{ ($currentRecommendationData->currentPage() - 1) * $currentRecommendationData->perPage() + $key + 1 }} 
                                                @if($currentData->is_recent_update)
                                                <div class="notification">
                                                    <div class="count"></div>
                                                </div>
                                                @endif
                                            </td>
                                            <td class="date" data-order="{{ date('Y-m-d', strtotime($currentData->share_initial_date)) }}">{{ $currentData->share_initial_date ? date("d-m-Y", strtotime($currentData->share_initial_date)) : '-' }}</td>
                                            <td><a href="{{ route('frontend.research-reports-detail', ['id' => $currentData->id, 'share_category' => $currentData->share_category]) }}">{{$currentData->company_name}}</a></td>
                                            <td class="allocation">{{$currentData->allocation}}</td>
                                            <td class="price-on-recomandation-date">{{$currentData->price_recommended}}</td>
                                            <td class="view"> <a href="{{ route('frontend.research-reports-detail', ['id' => $currentData->id, 'share_category' => $currentData->share_category]) }}" title="view"><svg width="20" height="13" viewBox="0 0 20 13" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                  d="M19.8729 5.98463C19.6942 5.74021 15.4371 0 9.99991 0C4.56275 0 0.305392 5.74021 0.126914 5.98439C-0.0423048 6.21627 -0.0423048 6.53076 0.126914 6.76264C0.305392 7.00705 4.56275 12.7473 9.99991 12.7473C15.4371 12.7473 19.6942 7.00701 19.8729 6.76283C20.0424 6.531 20.0424 6.21627 19.8729 5.98463ZM9.99991 11.4286C5.99486 11.4286 2.52606 7.61869 1.49922 6.37318C2.52473 5.12658 5.98627 1.31868 9.99991 1.31868C14.0048 1.31868 17.4733 5.12791 18.5006 6.37408C17.4751 7.62065 14.0136 11.4286 9.99991 11.4286Z"
                                                  fill="#83b645" />
                                                <path
                                                  d="M9.99989 2.4176C7.81855 2.4176 6.04382 4.19233 6.04382 6.37367C6.04382 8.555 7.81855 10.3297 9.99989 10.3297C12.1812 10.3297 13.956 8.555 13.956 6.37367C13.956 4.19233 12.1812 2.4176 9.99989 2.4176ZM9.99989 9.01102C8.54559 9.01102 7.36254 7.82793 7.36254 6.37367C7.36254 4.91941 8.54563 3.73632 9.99989 3.73632C11.4542 3.73632 12.6372 4.91941 12.6372 6.37367C12.6372 7.82793 11.4542 9.01102 9.99989 9.01102Z"
                                                  fill="#83b645" />
                                              </svg>
                                            </a> </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $currentRecommendationData->links('frontend.researchReports.customPagination') }}
                        </div>
                        <div class="company-logo-list-wrap">
                            <div class="company-logo-list">
                                @foreach ($currentRecommendationData as $key=>$currentData)
                                    <div class="company-logo  {{ $key >= 10 ? 'hidden' : '' }}">
                                        <a href="{{route('frontend.research-reports-detail',$currentData->id)}}" title="{{$currentData->company_name}}">
                                        <img src="{{ asset('images/research-reports/share-logo/'.$currentData->share_logo) }}" alt="{{$currentData->company_name}}">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                            <div class="logoViewBtn">
                                <button id="viewMore" type="button" class="btn btn-primary viewMore">View More</button>
                                <button id="viewLess" type="button" style="display: none;" class="btn btn-primary">View Less</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var imageUrl = '{{$watermarkImage}}';
    var style = document.createElement('style');
    var cssRule = '.dashboard-table::after { background-image: url(' + imageUrl + '); opacity: 0.5; pointer-events: none;top: 0; left: 0; right: 0; height: 100%; width: 80%; }';
    style.appendChild(document.createTextNode(cssRule));
    document.head.appendChild(style);
    $(document).ready(function() {
        const $viewMoreBtn = $('#viewMore');
        const $viewLessBtn = $('#viewLess');
        const $hiddenRecords = $('.company-logo.hidden');

        $viewMoreBtn.on('click', function() {
            console.log("sfd");
            $hiddenRecords.show();
            $viewMoreBtn.hide();
            $viewLessBtn.show();
        });

        $viewLessBtn.on('click', function() {
            $hiddenRecords.hide();
            $viewMoreBtn.show();
            $viewLessBtn.hide();
        });
    });
</script>