@extends('layouts.master')

@section('title', __('Star Rank Report'))

@push('styles')

@endpush

@section('content')
<section class="main_section">
    <form method="get" onsubmit="formSubmit(event);" class="star_rank_report_form" id="starRankReportForm">
        <div class="card">
            <div class="card-header">
                <h3 class="m-0">{{__('Filter')}}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-12 col-md-4 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" class="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-1 peer pl-15 h-11 account-username-validation" name="username" id="username" placeholder="">
                                    <label for="username" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 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">{{ __('Username') }}</label>
                                </div>
                            </div>

                            <div class="col-12 col-md-4 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" class="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-1 peer pl-15 h-11 name-validation" name="first_name" id="first_name" placeholder="">
                                    <label for="first_name" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 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">{{ __('First Name') }}</label>
                                </div>
                            </div>

                            <div class="col-12 col-md-4 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" class="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-1 peer pl-15 h-11 name-validation" name="last_name" id="last_name" placeholder="">
                                    <label for="last_name" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 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">{{ __('Last Name') }}</label>
                                </div>
                            </div>

                            <div class="col-12 col-md-4 col-sm-12 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <select class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11" name="status" id="status">
                                        <option value="">{{ __('All') }}</option>
                                        @foreach ($status as $value)
                                            <option value="{{$value}}">{{$value}}</option>
                                        @endforeach
                                    </select>
                                    <label for="status" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 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">{{ __('Status') }}</label>
                                </div>
                            </div>

                            <div class="col-12 col-md-4 col-sm-12 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <select class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11" name="star_rank" id="star_rank">
                                        <option value="">{{ __('All') }}</option>
                                        @foreach ($rank as $value)
                                            <option value="{{$value}}">{{$value}}</option>
                                        @endforeach
                                    </select>
                                    <label for="star_rank" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 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">{{ __('Star Rank') }}</label>
                                </div>
                            </div>
                            <div class="col-12 col-md-4 col-sm-12 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" name="qualification_date" id="qualification_date" placeholder="" class="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-1 peer pl-15 h-11">
                                    <label for="qualification_date" class="form-label left-0 ml-2 p-2 py-0 peer-focus:font-medium 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">{{ __('Qualification Date Range') }}</label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="col-md-12 d-flex justify-content-start">
                    <button class="btn btn-save btn-primary btn-save-record btn-modal" onclick="starRankReportTableRefresh()" type="button">{!! renderIconHtml('search') !!}{{ __('Search') }}</button>
                </div>
            </div>
        </div>
    </form>
    <div class="card mt-2">
        <div class="card-body">
            <div class="table-responsive su_tables su_tables_ajax">
                <div id="custom_toolbar" class="float-right ms-2 mt-2">
                    <div class="dropdown" data-toggle="tooltip" data-placement="bottom" title="Export data">
                        <button class="btn btn-secondary dropdown-toggle" type="button"
                            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false"><i class="bi bi-download"></i> {{ __('Export') }}</button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item d-block" href="#"
                                onclick="exportTasks('star_rank_report',['username', 'first_name', 'last_name', 'rank', 'status', 'qualification_date'],'csv',[],'#starRankReportForm')">CSV</a>
                            <a class="dropdown-item d-block" href="#"
                                onclick="exportTasks('star_rank_report',['username', 'first_name', 'last_name', 'rank', 'status', 'qualification_date'],'zip',[],'#starRankReportForm')">ZIP</a>
                        </div>
                    </div>
                </div>
                <table class="table table-hover" id="bstable" data-toggle="table" table-for="star_rank_report"
                        data-content-type="application/json" data-filter-control="true" data-side-pagination="server"
                        data-pagination="true" data-total-field="count" data-data-field="items" data-show-columns="true"
                        data-show-toggle="false" data-show-export="false"  data-show-button-text="true"
                        data-show-columns-toggle-all="false" data-sticky-header="true" data-sticky-header-offset-y="204"
                        data-page-list="[10, 25, 50, 100, 200, 500]" data-icons="icons" data-icons-prefix="bi"
                        data-toolbar="#custom_toolbar" data-ajax="getAllData" data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">
                        <thead>
                        <tr>
                            <th data-field="username"> {{ __('Username') }}</th>
                            <th data-field="first_name"> {{ __('First Name') }}</th>
                            <th data-field="last_name"> {{ __('Last Name') }}</th>
                            <th data-field="rank" data-sortable="true"> {{ __('Star Rank') }}</th>
                            <th data-field="status" data-formatter="userStatusFormat"> {{ __('Status') }}</th>
                            <th data-field="qualification_date" data-sortable="true"> {{ __('Qualification Date') }} </th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                </table>
            </div>
        </div>
    </div>

</section>
@endsection

@push('scripts')
<script src="{{ asset('backend/js/pages-js/reports/star-rank-report.js') }}"></script>
@endpush