@extends('layouts.app')

@section('page-css')

@endsection

@section('content')
    <div class="container-fluid d-block">
        <div id="all-items-page-container" class="py-4">
            <div class="card mb-4">
                <div class="card-header">
                    {{ $page_title }}
                </div>

                <div class="card-body">
                    <div class="row mb-3">
                        <div class="form-group col-md-2">
                            <label for="all-items">Combinations</label>
                            @if($avatar_combination_list->responseCode == 800)
                                @if(!empty($avatar_combination_list->data))
                                    <select name="all-combination" id="all-combination" class="selectpicker show-tick form-control" onchange="avatarsPageFunctions.disableOtherFilter(this.value,'all-combination','attribute');" data-live-search="true" title="Select Combinations">
                                        @foreach($avatar_combination_list->data as $key => $value)
                                            <option value="{{ $value->avatar_id }}">{{ $value->avatar_name }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <select name="all-combination" id="all-combination" class="selectpicker show-tick form-control" title="No Combinations Loaded" disabled></select>
                                @endif
                            @endif
                        </div>
                        <div class="form-group col-md-2">
                            <label for="attribute">Item</label>
                            @if($items_list->responseCode == 800)
                                @if(!empty($items_list->data))
                                    <select name="item" id="item" class="selectpicker show-tick form-control" onchange="avatarsPageFunctions.disableOtherFilter(this.value,'item','all-combination');" title="Select Item">
                                        @foreach($items_list->data as $key => $value)
                                            <option value="{{ $value->item_id }}">{{ $value->item_name }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <select name="attribute" id="attribute" class="selectpicker show-tick form-control" title="No Attributes Loaded" disabled></select>
                                @endif
                            @endif
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-sm btn-secondary" onclick="avatarsPageFunctions.resetAvatarFilter('all-combination','item');">Reset</button>
                            {{-- <button type="button" class="btn btn-sm btn-success">Search</button> --}}
                        </div>
                    </div>

                    <hr>

                    <div class="row mb-4">
                        <div class="col-md-12">
                            {{-- @if ($user['role_id'] == 1)
                                <a href="{{ url('avatars/create-avatar') }}">
                                    <button class="btn btn-sm btn-primary float-right ml-1 mr-1">Add New</button>
                                </a>
                                <a href="{{ url('avatars/batch-upload-avatar') }}">
                                    <button class="btn btn-sm btn-default float-right ml-1 mr-1">Batch Upload</button>
                                </a>
                            @endif --}}
                            @can('manage-avatars')

                                <a href="{{ url('avatars/create-avatar') }}">
                                    <button class="btn btn-sm btn-primary float-right ml-1 mr-1">Add New</button>
                                </a>
                                <a href="{{ url('avatars/batch-upload-avatar') }}">
                                    <button class="btn btn-sm btn-default float-right ml-1 mr-1">Batch Upload</button>
                                </a>
                            @endcan


                            <div class="btn-group float-right mr-3">
                                <button type="button" class="btn btn-sm btn-default" id="all" value="all" onclick="avatarsPageFunctions.avatarFilter('all', 'male','female');">All</button>
                                <button type="button" class="btn btn-sm btn-default" id="male" value="male" onclick="avatarsPageFunctions.avatarFilter('male','all','female');">Male</button>
                                <button type="button" class="btn btn-sm btn-default" id="female" value="female" onclick="avatarsPageFunctions.avatarFilter('female','all','male');">Female</button>
                            </div>

                        </div>
                    </div>

                    {{-- All Avatars Item --}}
                    <div class="col-md-12 p-0">
                        <table class="table table-hovered table-striped table-bordered mt-3" width="100%" id="all-avatars">
                            <thead>
                                <th class="text-center" width="5%">ID</th>
                                <th width="10%">Image</th>
                                <th>Name</th>
                                <th>Items</th>
                                <th width="5%">Gender</th>
                                <th width="8%">Created</th>
                                @if($user['role_id'] == 1)
                                    <th class="text-center" width="13%">Action</th>
                                @endif
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        @include('pages.includes.footer')
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        $.csrf_token    =   $('meta[name="csrf-token"]').attr('content');
        $.backoffice_url  =   "{{ env('BACKOFFICE_URL') }}";
        $.api_url = "{{ env('API_URL') }}";

        avatarsPageFunctions.onLoad();
        $('#all-avatars-link').addClass('active');
        generalUseFunctions.initializeSelectPicker();
        generalUseFunctions.initializeDatePicker();
        generalUseFunctions.initializeDataTable('all-avatars', false, false);
        avatarsPageFunctions.avatarFilter('all','male','female');
    </script>
@endsection