@props(['total'=>0])

@php
    $active = 0;
    if (request()->has('order_by')){
        switch(request()->query('order_by')){
            case('order_count'):
                $active = 2;
                break;
            case('price'):
                if (request()->query('sort_by') == 'desc'){
                    $active = 1;
                }
                break;
            case('most_view'):
                $active = 3;
                break;
        }
    }
@endphp

@if(isDesktop())
    <nav x-data="{active:{{$active}}}"
         class="flex items-center border-b border-gray-200 px-8 bg-white rounded-lg max-w-full overflow-y-hidden overflow-x-scroll">
        <svg class="w-6 ml-2" focusable="false" aria-hidden="true"
             viewBox="0 0 24 24" data-testid="SortRoundedIcon">
            <path
                d="M4 18h4c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm1 6h10c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1z"></path>
        </svg>
        <x-form.label class="hidden lg:block">
            مرتب سازی بر اساس:
        </x-form.label>

        <button
            @click="active=0; changeSort('asc','price')"
            :class="{ 'border-primary-color text-primary-color': active == 0, 'text-gray-500 border-transparent hover:text-primary-color active:text-gray-500' : active !=0 }"
            class="px-3 md:px-5 font-medium -mb-px flex items-center space-x-2 py-4 border-b-2 text-gray-500 ">
            ارزان‌ترین‌ها
        </button>
        <button
            @click="active=1; changeSort('desc','price')"
            :class="{ 'border-primary-color text-primary-color': active == 1, 'text-gray-500 border-transparent hover:text-primary-color active:text-gray-500' : active !=1 }"
            class="px-3 md:px-5 font-medium -mb-px flex items-center space-x-2 py-4 border-b-2 text-gray-500">
            گران‌ترین‌ها
        </button>
        <button
            @click="active=2; changeSort('desc','order_count')"
            :class="{ 'border-primary-color text-primary-color': active == 2, 'text-gray-500 border-transparent hover:text-primary-color active:text-gray-500' : active !=2 }"
            class="px-3 md:px-5 font-medium -mb-px flex items-center space-x-2 py-4 border-b-2 text-gray-500 ">
            پرفروش‌ترین‌ها
        </button>
        <button
            @click="active=3; changeSort('asc','most_view')"
            :class="{ 'border-primary-color text-primary-color': active == 3, 'text-gray-500 border-transparent hover:text-primary-color active:text-gray-500' : active !=3 }"
            class="px-3 md:px-5 font-medium -mb-px flex items-center space-x-2 py-4 border-b-2 text-gray-500">
            پربازدیدترین‌ها
        </button>
        <div class="flex-grow"></div>
        @if($total)
            <span class="text-sm font-light">
                {{$total??''}}
                کالا
            </span>
        @endif
    </nav>
@else
    <div id="sortModal" class="modal">
        <!-- Modal content -->
        <div class="sortModal-content rounded-t-2xl">
            <div class="modal-header-plp flex gap-4 rounded-t-2xl items-center">
                <section class="close2">&times;</section>
                <h4 class="text-black"> مرتب سازی بر اساس</h4>
            </div>
            <div class="modal-body">
                <nav x-data="{active:{{$active}}}"
                     class="flex flex-col float-right items-center bg-white rounded-lg max-w-full  overflow-y-hidden overflow-x-scroll">
                    <button
                        @click="active=0; changeSort('asc','price')"
                        :class="{ 'border-primary-color text-primary-color': active == 0, 'text-gray-500 hover:text-primary-color active:text-gray-500' : active !=0 }"
                        class="px-3 md:px-5 font-medium -mb-px flex items-center space-x-2 py-4 border-b-2 text-gray-500 border-b"
                        style="width: 100vw;">
                        ارزان‌ترین‌ها
                    </button>

                    <button
                        @click="active=1; changeSort('desc','price')"
                        :class="{ 'border-primary-color text-primary-color': active == 1, 'text-gray-500  hover:text-primary-color active:text-gray-500' : active !=1 }"
                        class="px-3 md:px-5 font-medium -mb-px flex items-center space-x-2 py-4 border-b-2 text-gray-500 border-b"
                        style="width: 100vw;">
                        گران‌ترین‌ها
                    </button>

                    <button
                        @click="active=2; changeSort('desc','order_count')"
                        :class="{ 'border-primary-color text-primary-color': active == 2, 'text-gray-500 hover:text-primary-color active:text-gray-500' : active !=2 }"
                        class="px-3 md:px-5 font-medium -mb-px flex items-center space-x-2 py-4 border-b-2 text-gray-500 border-b"
                        style="width: 100vw;">
                        پرفروش‌ترین‌ها
                    </button>

                    <button
                        @click="active=3; changeSort('asc','most_view')"
                        :class="{ 'border-primary-color text-primary-color': active == 3, 'text-gray-500 hover:text-primary-color active:text-gray-500' : active !=3 }"
                        class="px-3 md:px-5 font-medium -mb-px flex items-center space-x-2 py-4 border-b-2 text-gray-500 border-b"
                        style="width: 100vw;">
                        پربازدیدترین‌ها
                    </button>
                </nav>
            </div>
            <div class="modal-footer-plp">
            </div>
        </div>

    </div>
@endif