@extends('layouts.frontend.master')

@section('title', e(__('Hall Of fame')))

@section("page-heading-title")
<div class="page-color-title p-4">
    <h1 class="heading">{{__('Hall Of fame')}}</h1>
</div>
@endsection
@push('styles')
<link href="{{ asset('frontend/css/hall-fame.css') }}" rel="stylesheet">
@endpush
@section('content')

<div class="container">
    <div class="box mob-view">
        <div class="row mb-2" style="justify-content: space-between;">
            <div class="col-lg-9 col-md-12 col-12 row p-0" style="row-gap: 15px !important;">
                <div class="col-md-4">
                <div class="relative z-0 w-full mb-1 group">
                    <select name="filter_type" id="filter_type" class="form-control form-control rounded-lg  p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer filter_type" onchange="handleFilterType(this.value)">
                        <option value="">{{__('Please select filter type')}}</option>
                        <option value="fullname">{{__('Name')}}</option>
                        <option value="token">{{__('Token')}}</option>
                        <option value="eth_address"> {{__('Address')}}</option>
                        <option value="retire_transhash">{{__('Transaction Hash')}}</option>
                        <option value="retire_amount">{{__('Amount')}}</option>
                        <option value="retire_confirm_date">{{__('Age')}}</option>
                    </select>
                    <label for="filter_type" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('Filter Type')}}</label>
                </div>
                </div>
                <div class="col-md-5 filterByName" style="display: none;">
                    <div class="relative z-0 w-full mb-1 group">
                        <input type="text" name="fullname" id="filter_name"  class="form-control form-control rounded-lg  p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer fullname">
                        <label for="filter_name" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('Filter by name')}}</label>
                    </div>
                </div>
                <div class="col-md-5 filterByToken" style="display: none;">
                    <div class="relative z-0 w-full mb-1 group">
                        <select id="filter_currency" class="form-control form-control rounded-lg  p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer filter_currency" name="filter_currency" >
                            <option value="">{{__('Select Token')}}</option>
                            @foreach($currencies as $currency)
                                <option value="{{$currency->id}}">{{$currency->type}}</option>
                            @endforeach

                        </select>
                        <label for="filter_currency" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 whitespace-nowrap">{{__('Filter by token')}}</label>
                    </div>
                </div>

                <div class="col-md-5 filterByEthadd" style="display: none;">
                <div class="relative z-0 w-full mb-1 group">
                <input type="text" name="eth_address" id="filter_address"  class="form-control form-control rounded-lg  p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer eth_address">
                    <label for="filter_address" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 whitespace-nowrap">{{__('Filter by Address')}}</label>
                </div>
                </div>
                <div class="col-md-5 filterByTranshash" style="display: none;">
                <div class="relative z-0 w-full mb-1 group">
                    <input type="text" name="retire_transhash" id="filter_transaction"  class="form-control form-control rounded-lg  p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer retire_transhash">
                    <label for="filter_transaction" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 whitespace-nowrap">{{__('Filter by transaction hash')}}</label>
                </div>
                </div>
                <div class="col-md-2 filterByamount" style="display: none;">
                <div class="relative z-0 w-full mb-1 group">
                    <select id="filter_amount" class="form-control form-control rounded-lg  p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer retire_amount_type" name="retire_amount_type" onchange="updatePlaceholder(this.value)">
                        <option value=">">&gt;</option>
                        <option value="<">&lt;</option>
                        <option value="=">=</option>
                        <option value=">=">&gt;=</option>
                        <option value="<=">&lt;=</option>
                    </select>
                    <label for="filter_amount" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 whitespace-nowrap">{{__('Filter by amount')}}</label>
                </div>
                </div>
                <div class="col-md-6 filterByamount" style="display: none;">
                <div class="relative z-0 w-full mb-1 group">
                    <input type="text" name="retire_amount" id="filter_grateramount" class="form-control form-control rounded-lg  p-2.5 w-full
                    text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer retire_amount">
                    <label for="filter_grateramount" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:z-10 filter_grateramount_label">{{__('Search greater than amount')}}</label>
                </div>
                </div>
                <div class="col-md-4 filerbyage" style="display:none;">
                <div class="relative z-0 w-full mb-1 group">
                    <input type="date" name="retire_confirm_date_start" id="filter_beforedate" placeholder="" class="form-control form-control rounded-lg  p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer retire_confirm_date_start" max="{{ date('Y-m-d') }}">
                    <label for="filter_beforedate" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('Before date')}}</label>
                </div>
                </div>
                <div class="col-md-4 filerbyage" style="display:none;">
                <div class="relative z-0 w-full mb-1 group">
                    <input type="date" name="retire_confirm_date_end" id="filter_afterdate" placeholder="" class="form-control form-control rounded-lg  p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-0 focus:border-indigo-400 peer retire_confirm_date_end" max="{{ date('Y-m-d') }}">
                    <label for="filter_afterdate" class="ml-2 p-2 py-0 peer-focus:font-medium bg-grays absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{__('After date')}}</label>
                </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-12 col-12 p-0">
                <ul id="hall_of_fame_grid_list">

                    <li class="Clear-button" data-toggle="tooltip" data-placement="top" title="" data-original-title="Clear Filter" onclick="clearfilter()">
                        <i class="fa fa-trash"></i>
                    </li>

                    <li class="grid active" onclick="changeview('grid')">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <path d="M16.6667 5H5V16.6667H16.6667V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M35.0002 5H23.3335V16.6667H35.0002V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M35.0002 23.3333H23.3335V34.9999H35.0002V23.3333Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.6667 23.3333H5V34.9999H16.6667V23.3333Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </li>

                    <li class="list" onclick="changeview('list')">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <path d="M5 20H35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M5 10H35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M5 30H35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </li>

                </ul>
            </div>
        </div>


        <div class="hallalphabets">
            <a href="javascript:void(0)" class="filter-char">{{__('All')}}</a>
            @foreach (range('A', 'Z') as $char)
            <a href="javascript:void(0)" class="filter-char">{{ $char }}</a>
            @endforeach
        </div>
    </div>
</div>

<div id="featured-services" class="featured-services main_section">
    <div class="container" data-aos="fade-up">
        <div class="box">
            <div class="row justify-content-center">
                <div class="csr_split_spinner" style="display: none;">
                    <img decoding="async" src="{{asset('csr.png')}}" class="hall_of_body_img_loader">
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center p-0">
                    <div class="px-0 tableview" style="display: none;">
                    </div>
                    <div class="gridview">
                    </div>
                    <div class="d-flex justify-content-center pagination hallfamepagination">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



@endsection
@push('scripts')
<script src="{{ asset('frontend/js/hall-of-fame.js') }}"></script>
@endpush