@extends('layouts.master')

@section('title') {{__('admin.dashboard')}} -@endsection
@section('css')
<link href="{{ asset('public/css/artist/autoptimize_0796f2a3114c.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<link href="{{ asset('public/css/artist/automix1.css') }}?v={{__system_settings('version')}}" rel="stylesheet">
<link href="{{ asset('public/css/artist/automix2.css') }}?v={{__system_settings('version')}}" rel="stylesheet">

<style>
    .wer{
        padding-top:100px;
    }
    
    .bai-browse-pagination .bai-browse-pagination__link{
            background-color: #2aaaf4;
    }
    
    .bai-browse-pagination .bai-browse-pagination__link:hover{
            background-color: #0369a1;
            color:#fff;
    }
    
    .bai-browse-pagination__link .bai-browse-pagination__link--current:hover{
        color:#000;
    }
    .bai-show-filters-open{
        left:0% !important;
        overflow:auto !important;
        opacity:1 !important;
    }
    
    @media and(min-width: 300px) and (max-width:900px){
        .bai-browse-table__row {
  display: flex;
  flex-wrap: wrap; /* allow items to break into rows */
  gap:20px;
}

        .bai-browse-table__row > * {
  flex: 1 1 auto;
}

/* First two elements share one row */
        .bai-browse-table__row > *:nth-child(-n+2) {
          flex: 0 0 auto; /* shrink-wrap */
        }

/* Last four elements share one row */
        .bai-browse-table__row > *:nth-last-child(-n+4) {
          flex: 0 0 auto;
        }
        .bai-browse-table__cell--category{
            display:flex !important;
            flex-direction:row !important;
            gap: 4px !important;
        }
        .bai-browse-table__cell--country{
            display:flex !important;
            flex-direction:row !important;
            gap: 4px !important;
            justify-content: center !important;
            align-items: center !important;
        }
    }
    
    @media screen and (max-width: 767px) {
        .bai-browse-table .bai-browse-table__row {
            display: flex;
            flex-wrap: wrap; 
            gap: 20px;
        }
        .bai-browse-table  .bai-browse-table__row > * {
            flex: 1 1 auto;
        }
        .bai-browse-table__row > *:nth-child(-n+2) {
            flex: 0 0 auto;
        }
        
        /* Row 2: 3 + 4 together */
        .bai-browse-table__row > *:nth-child(3),
        .bai-browse-table__row > *:nth-child(4) {
            flex: 1;
        }
        
        /* Row 3: 5th element full width */
        .bai-browse-table__row > *:nth-child(5) {
            flex: 0 0 100%;
        }
        
        /* Row 4: last 4 share one row */
        .bai-browse-table__row > *:nth-last-child(-n+4) {
            flex: 1; /* distribute evenly */
        }
        .bai-browse-table__cell--category{
            display:flex !important;
            flex-direction:row !important;
            gap: 4px !important;
            justify-content: center !important;
            align-items: center !important;
        }
        .bai-browse-table__cell--country{
            display:flex !important;
            flex-direction:row !important;
            gap: 4px !important;
            justify-content: center !important;
            align-items: center !important;
        }
    }
    
</style>

@endsection
@section('content')
<div class="page-template page-template-category page-template-category-php page page-id-200211 logged-in affwp-affiliate-area  rcp-not-active wer" >
    @include('user.components.search_form')

<div class="main-body">
    <header class="bai-browse-header bai-container">
        <h1 class="bai-browse-header__title">Browse</h1>
        <h2 class="bai-browse-header__subtitle">Private Database of the Worlds Most Popular Celebrities</h2>
    </header>
    <!-- / Page Header -->

    <div class="bai-container">
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
            integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"
            integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>

        <div class="bai-browse-lists-actions-js"></div>

        <div class="bai-browse-wrapper">
            <div class="bai-browse bai-browse-js">
                @include('user.components.filters')

                <div class="bai-browse__content bai-browse-content-js">
                    <div class="bai-browse-tabs">
                        <div class="bai-browse-tabs__tab bai-secondary-button bai-browse-tabs__tab--no-lr-padding bai-browse-tabs__tab--active">Celebrities<span class="items-count"></span></div>
                       
                    </div>
                    <div class="bai-browse-items-wrapper-js">
                        <div class="bai-browse-table bai-browse-table--no-add-to-list">
                            <div class="bai-browse-table__head">
                                <div class="bai-browse-table__header">Name</div>
                                <div class="bai-browse-table__header">Category</div>
                                <div class="bai-browse-table__header">Age</div>
                                <div class="bai-browse-table__header">Country</div>
                                <div class="bai-browse-table__header bai-browse-table__header--with-icon">
                                   
                                    <img src="{{url('public/svg/ig.svg')}}" class="svg-icon" />
                                </div>
                                <div class="bai-browse-table__header bai-browse-table__header--with-icon">
                                    <img src="{{url('public/svg/fb.svg')}}" class="svg-icon" />
                                </div>
                                <div class="bai-browse-table__header bai-browse-table__header--with-icon">
                                    <img src="{{url('public/svg/x.svg')}}" class="svg-icon" />
                                </div>
                                <div class="bai-browse-table__header bai-browse-table__header--with-icon">
                                    <img src="{{url('public/svg/tk.svg')}}" class="svg-icon" />
                                </div>
                                <div class="bai-browse-table__header bai-browse-table__header--add-to-list"></div>
                            </div>
                            <div class="bai-browse-table__body">
                                @forelse($artists as $artist)
                                <div class="bai-browse-table__row-wrapper">
                                    <div class="bai-browse-table__row">
                                        <div href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__cell bai-browse-table__cell--name">
                                            <a href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__name-wrapper">
                                                <img src="{{!blank($artist->avatar) ? secure_url('celebrity/' . $artist->avatar): secure_url('celebrity/default-avatar.png')}}" alt="{{$artist->name}}" class="bai-browse-table__avatar" />
                                                <span class="bai-browse-table__name">{{$artist->name}}</span>
                                            </a>
                                        </div>
                                        <a href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__cell bai-browse-table__cell--name-mobile" aria-hidden="true">
                                            <span class="bai-browse-table__name bai-browse-table__name--mobile" aria-hidden="true">{{$artist->name}}</span>
                                        </a>
                                        <div class="bai-browse-table__cell bai-browse-table__cell--category">
                                            <span class="bai-browse-table__label">Category:</span>
                                            <div class="bai-browse-table__category-list" title="Film and TV, TV Personality">
                                                <a class="bai-browse-table__category-link">{{$artist->categoryType?->name}}</a>
                                            </div>
                                        </div>
                                        <a href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__cell bai-browse-table__cell--age">
                                            <span class="bai-browse-table__label">Age:</span><span class="bai-browse-table__age-text">{{$artist->age()}}</span>
                                        </a>
                                        <a href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__cell bai-browse-table__cell--country"> <span class="bai-browse-table__label">Country:</span>{{$artist->country}}</a>
                                        <a href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__cell bai-browse-table__cell--social bai-browse-table__cell--instagram">
                                            <span class="bai-browse-table__label">
                                                <img src="{{url('public/svg/ig.svg')}}" class="svg-icon" />
                                            </span>
                                            {{getSocialsFollowers($artist->socials , 'instagram')}}
                                            
                                        </a>
                                        <a href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__cell bai-browse-table__cell--social bai-browse-table__cell--facebook">
                                            <span class="bai-browse-table__label">
                                                <img src="{{url('public/svg/fb.svg')}}" class="svg-icon" />
                                            </span>
                                        
                                            {{getSocialsFollowers($artist->socials , 'facebook')}}
                                        </a>
                                        <a href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__cell bai-browse-table__cell--social bai-browse-table__cell--tiktok">
                                            <span class="bai-browse-table__label">
                                                <img src="{{url('public/svg/x.svg')}}" class="svg-icon" />
                                            </span>
                                          
                                            {{getSocialsFollowers($artist->socials , 'tiktok')}}
                                        </a>
                                        <a href="{{secure_url('artist/'.$artist->slug)}}" class="bai-browse-table__cell bai-browse-table__cell--social bai-browse-table__cell--spotify">
                                            <span class="bai-browse-table__label">
                                                <img src="{{url('public/svg/tk.svg')}}" class="svg-icon" />
                                            </span>
                                          
                                            {{getSocialsFollowers($artist->socials , 'spotify')}}
                                        </a>
                                    </div>
                                </div>
                                @empty
                                
                                @endforelse
                           
                         
                            </div>
                        </div>

                      
                    </div>
                    {{ $artists->links('vendor.pagination.custom') }}
                    <span class="bai-button-loader"></span>
                </div>
            </div>
        </div>

    </div>

</div>
</div>

@endsection

@section('javascript')
  <script>
    $(document).ready(function () {
        // Accordion toggle
        $('.bai-browse-filter-accordion-header-js').on('click', function () {
            const body = $(this).next('.bai-browse-filters-according-body-js');
            $('.bai-browse-filters-according-body-js').not(body).slideUp(); // Close others
            body.slideToggle();
        });

        // Checkbox selection feedback
        $('.bai-form-control-checkbox-js').on('change', function () {
            const label = $(this).closest('label');
            if ($(this).is(':checked')) {
                label.addClass('checked');
            } else {
                label.removeClass('checked');
            }
        });

        // Optional: Reset all filters
        $('.bai-browse-filters-reset-js').on('click', function () {
            $('.bai-form-control-checkbox-js').prop('checked', false);
            $('.bai-form-control--checkbox').removeClass('checked');
        });
    });
</script>
<script>
$(document).ready(function () {
    $('.bai-browse-filters-submit-js').on('click', function (e) {
        e.preventDefault();

        const queryParams = {};

        // Loop through each checkbox that is checked
        $('.bai-form-control__checkbox:checked').each(function () {
            const name = $(this).attr('name');  // Example: "categories[some-value]"
            const value = $(this).val();

            // Group by filter key
            if (!queryParams[name]) {
                queryParams[name] = [];
            }

            queryParams[name].push(value);
        });

        // Convert to query string
        const searchParams = new URLSearchParams();

        $.each(queryParams, function (name, values) {
            values.forEach(val => {
                searchParams.append(name, val);
            });
        });
          console.log(searchParams.toString());
        // Reload page with query string
        window.location.href = window.location.pathname + '?' + searchParams.toString();
    });
});
</script>
<script>
$(".bai-browse-filters__back").on('click', function(){
    $(".bai-browse-filters__content").removeClass("bai-show-filters-open")
})

$(".bai-browse-filters__title").on('click', function(){
    $(".bai-browse-filters__content").addClass("bai-show-filters-open")
})
    
</script>

  @endsection