@php
    $meta = (object) $meta;
@endphp
<div class="table-wrapper">
    <div class=" table-wrapper__item">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="table-header-menu">
                <button type="button" class="table-header-menu__link market-type active" data-type="all">
                    <i class="las la-border-all"></i> @lang('All')
                </button>
                <button type="button" class="table-header-menu__link market-type" data-type="crypto">
                    <i class="las la-coins"></i> @lang('Crypto')
                </button>
                <button type="button" class="table-header-menu__link market-type" data-type="fiat"><i
                        class="las la-hryvnia"></i>
                    @lang('Fiat')
                </button>
            </div>
            <div class="market-list__left">
                @if (@$meta->from_section)
                    <a href="{{ route('market') }}" class="btn btn--sm btn-outline--base">
                        <i class="las la-coins"></i> @lang('All Pair')
                    </a>
                @else
                    <form class="market-list-search">
                        <input type="search" name="market_list_serach" class="market-list-search-field form--control"
                            placeholder="@lang('Search here ')...">
                        <i class="las la-search"></i>
                    </form>
                @endif
            </div>
        </div>
    </div>

    <table class="table coin-pair-list-table table--responsive--lg coin-pair-list mt-4">
        <thead>
            <tr>
                <th>@lang('Pair')</th>
                <th>@lang('Price')</th>
                <th>@lang('1h Change')</th>
                <th>@lang('24h Change')</th>
                <th class="text-center">@lang('Marketcap')</th>
                <th class="text-end">@lang('Trade')</th>
            </tr>
        </thead>
        <tbody id="market-list-body"></tbody>
    </table>
    @if (!@$meta->from_section)
        <div class="text-center mt-5">
            <button type="button" class="btn btn-outline--base btn--sm load-more-market-list">
                <i class="fa fa-spinner"></i> @lang('Load More')
            </button>
        </div>
    @endif
</div>

@push('script')
    <script>
        "use strict";
        (function($) {

            @if (!app()->offsetExists('lisiten_market_data_event'))
                pusherConnection('market-data', marketChangeHtml);
                @php app()->offsetSet('lisiten_market_data_event',true) @endphp
            @endif

            let type = "all";
            let loadMore = false;
            let skip = 0;
            let limit = "{{ $meta->limit ?? 15 }}";
            let search = "";

            $('.market-type').on('click', function(e) {
                $('.market-type').removeClass('active');
                $(this).addClass('active');
                type = $(this).data('type');
                resetVariable()
                getPairList();
            });

            $('.load-more-market-list').on('click', function(e) {
                loadMore = true;
                getPairList();
            });

            $('.market-list-search').on('submit', function(e) {
                e.preventDefault();
                search = $(this).find('.market-list-search-field').val()
                resetVariable();
                getPairList();
            });

            function getPairList() {
                let action = "{{ route('market.list') }}";
                $.ajax({
                    url: action,
                    type: "GET",
                    dataType: 'json',
                    cache: false,
                    data: {
                        type,
                        skip,
                        limit,
                        search
                    },
                    beforeSend: function() {
                        if (loadMore) {
                            $('.load-more-market-list').html(`<i class="fa fa-spinner fa-spin"></i>`)
                        }
                    },
                    complete: function() {
                        if (loadMore) {
                            $('.load-more-market-list').html(
                                `<i class="fa fa-spinner"></i> @lang('Load More')`)
                        } else {
                            removeSkeleton();
                        }
                    },
                    success: function(resp) {

                        if (!resp.success) {
                            notify('error', resp.message);
                            return false;
                        }
                        let html = '';
                        if (resp.pairs.length <= 0) {
                            html += `<tr class="text-center">
                                <td colspan="100%">
                                    <div class="empty-thumb">
                                        <img src="{{ asset('assets/images/extra_images/empty.png') }}"/>
                                        <p class="empty-sell">${loadMore ? 'No more pair found' : 'No pair found'}</p>
                                    </div>
                                </td>
                            </tr>`;
                            $('.load-more-market-list').addClass('d-none');
                            loadMore ? $('#market-list-body').append(html) : $('#market-list-body').html(
                                html);
                            return;
                        }
                        let tradeUlr = "{{ route('trade', ':symbol') }}";
                        $.each(resp.pairs || [], function(i, pair) {
                            let marketData = pair.market_data;
                            let htmlClass = marketData.html_classes || {};
                            html += `
                            <tr class="${!loadMore ? 'skeleton' : ''}">
                                <td>
                                    <div class="customer d-flex align-items-center">
                                        <div class="pair-thumb">
                                            <div class="coin-img-one">
                                                <img src="${pair.coin.image_url}">
                                            </div>
                                            <div class="coin-img-two">
                                                <img src="${pair.market.currency.image_url}">
                                            </div>
                                        </div>
                                        <div class="customer__content">
                                            <h6 class="customer__name">${pair.symbol}</h6>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                   <span class="market-price-${marketData.id} ${htmlClass.price_change != undefined ? htmlClass.price_change : '' }">
                                        ${showAmount(marketData.price, 8)}
                                    </span>
                                </td>
                                <td>
                                    <span class="market-percent-change-1h-${marketData.id} ${htmlClass.percent_change_1h || ''}">
                                        ${showAmount(marketData.percent_change_1h,2)}%
                                    </span>
                                </td>
                                <td>
                                     <span class="market-percent-change-24h-${marketData.id} ${htmlClass.percent_change_24h || ''}">
                                        ${showAmount(marketData.percent_change_24h,2)}%
                                    </span>
                                </td>
                                <td>
                                    <span class="market-market_cap-${marketData.id}"> ${ parseFloat(marketData.market_cap).toFixed(0) }</span>
                                </td>
                                <td class="text-end">
                                    <a href="${tradeUlr.replace(':symbol',pair.symbol)}" class="btn btn--sm btn-outline--base">
                                        <i class="fas fa-chart-line"></i> @lang('Trade')
                                    </a>
                                </td>
                            </tr>
                            `
                        });


                        $('.load-more-market-list').removeClass('d-none');
                        loadMore ? $('#market-list-body').append(html) : $('#market-list-body').html(html);
                        if (skip == 0) {
                            tableDataLabel();
                        }
                        skip += parseInt(limit);
                        if (parseInt(skip) >= parseInt(resp.total)) {
                            $('.load-more-market-list').addClass('d-none')
                        } else {
                            $('.load-more-market-list').removeClass('d-none')
                        }
                    }
                });
            }
            getPairList();

            function resetVariable() {
                loadMore = false;
                skip = 0;
                limit = "{{ $meta->limit ?? 20 }}";
            }

            function removeSkeleton() {
                setTimeout(() => {
                    $('.coin-pair-list tr').removeClass('skeleton');
                }, 1000);
            }
            removeSkeleton();

        })(jQuery);
    </script>
@endpush

@if (!app()->offsetExists('pusher_script'))
    @push('script-lib')
        <script src="{{ asset('assets/global/js/pusher.min.js') }}"></script>
        <script src="{{ asset('assets/global/js/broadcasting.js') }}"></script>
    @endpush
    @php app()->offsetSet('pusher_script',true) @endphp
@endif