@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">Item</label>
                            @if($items_list->responseCode == 800)
                                @if(!empty($items_list->data))
                                    <select name="all-items" id="all-items" class="selectpicker show-tick form-control" onchange="avatarsPageFunctions.disableOtherFilter(this.value,'avatar_item','attribute');" data-live-search="true" title="Select Item">
                                        @foreach($items_list->data as $key => $value)
                                            <option value="{{ $value->item_id }}">{{ $value->item_name }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <select name="all-items" id="all-items" class="selectpicker show-tick form-control" onchange="avatarsPageFunctions.disableOtherFilter(this.value, 'attribute');" disabled>
                                        <option>No Items Loaded</option>
                                    </select>
                                @endif
                            @endif
                        </div>
                        <div class="form-group col-md-2">
                            <label for="attribute">Attribute</label>
                            @if($attributes_lists->responseCode == 800)
                                @if(!empty($attributes_lists->data))
                                    <select name="attribute" id="attribute" class="selectpicker show-tick form-control" onchange="avatarsPageFunctions.disableOtherFilter(this.value,'attribute','all-items');" title="Select Attribute">
                                        @foreach($attributes_lists->data as $key => $value)
                                            <option value="{{ $value->attr_id }}">{{ $value->attr_name }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <select name="attribute" id="attribute" class="selectpicker show-tick form-control" onchange="avatarsPageFunctions.disableOtherFilter(this.value, 'all-items');" title="Select Attribute" 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.resetFilter('all-items','attribute');">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-item') }}">
                                    <button class="btn btn-sm btn-primary float-right ml-1 mr-1">Add New</button>
                                </a>
                                <a href="{{ url('avatars/upload-batch-avatar-item') }}">
                                    <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-item') }}">
                                    <button class="btn btn-sm btn-primary float-right ml-1 mr-1">Add New</button>
                                </a>
                                <a href="{{ url('avatars/upload-batch-avatar-item') }}">
                                    <button class="btn btn-sm btn-default float-right ml-1 mr-1">Batch Upload</button>
                                </a>
                            @endcan

                            {{-- <a href="https://staging-panel.globec2g.com/avatars/create_item" class="btn btn-outline-primary float-right">Add New</a>
                            <a href="https://staging-panel.globec2g.com/avatars/upload_batch_item" class="btn btn-default float-right">Batch Upload</a> --}}

                            <div class="btn-group float-right mr-3">
                                <button type="button" class="btn btn-sm btn-default" id="all" value="all" onclick="avatarsPageFunctions.itemAvatarFilter('all', 'male','female');">All</button>
                                <button type="button" class="btn btn-sm btn-default" id="male" value="male" onclick="avatarsPageFunctions.itemAvatarFilter('male','all','female');">Male</button>
                                <button type="button" class="btn btn-sm btn-default" id="female" value="female" onclick="avatarsPageFunctions.itemAvatarFilter('female','all','male');">Female</button>
                            </div>
                            {{-- <div class="btn-row">
                                <div class="btn-group toggle-buttons float-right">
                                    <a class="btn btn-default" href="https://staging-panel.globec2g.com/avatars/all_items">
                                      <input type="radio" name="options" id="option1"> All
                                    </a>
                                    <a class="btn btn-default" href="https://staging-panel.globec2g.com/avatars/all_items_male">
                                      <input type="radio" name="options" id="option2"> Male
                                    </a>
                                    <a class="btn btn-default" href="https://staging-panel.globec2g.com/avatars/all_items_female">
                                      <input type="radio" name="options" id="option3"> Female
                                    </a>
                                </div>
                            </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-item">
                            <thead>
                                <th class="text-center">ID</th>
                                <th width="10%">Image</th>
                                <th>Name</th>
                                <th>Attribute</th>
                                <th>Gender</th>
                                <th>Points</th>
                                <th>Created</th>
                                <th>Publish</th>
                                @if($user['role_id'] == 1)
                                    <th class="text-center" width="11%">Action</th>
                                @endif
                            </thead>
                            {{-- @if($items_list->responseCode == 800)
                                @if(!empty($items_list->data))
                                    <tbody>
                                        @foreach($items_list->data as $key => $value)
                                            <tr>
                                                <td class="text-center">{{ $value->item_id }}</td>
                                                <td class="text-center"><img src="{{ asset('images/uploads/avatar_item') }}/{{ $value->item_file_name }}"></td>
                                                @if($value->gift != 1)
                                                    <td>{{ $value->item_name }}</td>
                                                @else
                                                    <td>{{ $value->item_name }} <i class="fa fa-gift text-danger" aria-hidden="true"></i></td>
                                                @endif
                                                <td>{{ $value->attr_name }}</td>
                                                <td>{{ ucfirst($value->gender) }}</td>
                                                <td>{{ $value->points }}</td>
                                                <td>{{ date('F d, Y', strtotime($value->created_at)) }}</td>
                                                @if($value->gift != 1)
                                                    <td>{{ date('F d, Y', strtotime($value->published_at)) }}</td>
                                                @else
                                                    <td>
                                                        <b>From</b> - {{ date('F d, Y', strtotime($value->available_from)) }}
                                                        <br>
                                                        <b>Until</b> - {{ date('F d, Y', strtotime($value->available_until)) }}
                                                    </td>
                                                @endif
                                                @if($user['role_id'] == 1)
                                                    <td class="text-center">
                                                        <a href="#">
                                                            <button class="btn btn-sm btn-info"><i class="fa fa-edit"></i> Edit</button>
                                                        </a>
                                                        <button class="btn btn-sm btn-danger" onclick="avatarsPageFunctions.showDeleteModal('{{ $value->item_id }}')"><i class="fa fa-trash"></i> Delete</button>
                                                    </td>
                                                @endif
                                            </tr>
                                        @endforeach
                                    </tbody>
                                @else --}}
                                    <tbody></tbody>
                                {{-- @endif
                            @endif --}}
                        </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-items-link').addClass('active');
        generalUseFunctions.initializeSelectPicker();
        generalUseFunctions.initializeDatePicker();
        generalUseFunctions.initializeDataTable('all-avatars-item', false, false);
        avatarsPageFunctions.itemAvatarFilter('all','male','female');
    </script>
@endsection