@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">
                    @if(session()->has('success'))
                        <div class="alert alert-success">
                            {{ session()->get('success') }}
                        </div>
                    @endif
                    @if(session()->has('danger'))
                        <div class="alert alert-danger">
                            {{ session()->get('danger') }}
                        </div>
                    @endif

                    <form action="{{ url('update-avatar-item') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="item_id" value="{{ $item->item_id }}">
                        {{-- Image --}}
                        <div class="form-group col-md-4">
                            <img src="{{ asset('images/uploads/avatar_item') }}/{{ $item->item_file_name }}" alt="">
                        </div>

                        <div class="form-group col-md-4">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="item_name" id="item_name" value="{{ $item->item_name }}" required>
                        </div>

                        <div class="form-group col-md-4">
                            <label>Gender</label>
                            <div class="form-kebab d-flex">
                                <div class="form-kebab__choice">
                                    <input class="form-kebab__radio" name="gender" id="gender-1" value="male" type="radio" required {{ ($item->gender == 'male') ? 'checked' : '' }}>
                                    <label class="form-kebab__label" for="gender-1">Male</label>
                                </div>
                                <div class="form-kebab__choice">
                                    <input class="form-kebab__radio" name="gender" id="gender-2" value="female" type="radio" required {{ ($item->gender == 'female') ? 'checked' : '' }}>
                                    <label class="form-kebab__label" for="gender-2">Female</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group col-md-4">
                            <label>Attributes</label>
                            @foreach($attributes_lists->data as $key => $value)
                                <div class="radio">
                                    <input type="radio" name="attr_id" id="attr-{{ $value->attr_id }}" value="{{ $value->attr_id }}" required {{ ($item->attr_id == $value->attr_id) ? 'checked' : '' }}>{{ $value->attr_name }}
                                </div>
                            @endforeach
                        </div>

                        <div class="form-group col-md-4 {{ ($item->gift == 1) ? '' : 'd-none' }}">
                            <label class="checkbox-inline" for="gift-1">
                                <input class="gift" type="checkbox" id="gift" name="gift" onchange="avatarsPageFunctions.toggleOptions('gift')" {{ ($item->gift == 1) ? 'checked' : '' }}> Gift
                            </label>
                        </div>

                        <div id="gift-container" class="gift_container {{ ($item->gift == 1) ? '' : 'd-none' }}">
                            <div class="form-group">
                                <div class="col-md-3 col-sm-4 col-xs-12">
                                    <label for="available_from">Available From</label>
                                    <input type="text" class="form-control datepicker" name="available_from" id="available_from" value="{{ $item->available_from }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-3 col-sm-4 col-xs-12">
                                    <label for="available_until">Available Until</label>
                                    <input type="text" class="form-control datepicker" name="available_until" id="available_until" value="{{ $item->available_until }}">
                                </div>
                            </div>
                            <div class="form-group clearfix col-md-12">
                                <label for="contact">Sender</label>
                                <div class="form-kebab">
                                    <div class="form-kebab__choice">
                                        <input class="form-kebab__radio" name="sender_type" id="sender-all" value="all_users" type="radio" onclick="avatarsPageFunctions.showAllUsers('all-users-wrapper');" {{ ($item->role_id != NULL) ? 'checked' : '' }}>
                                        <label class="form-kebab__label" for="sender-all">ALL USERS</label>
                                    </div>
                                    <div class="form-kebab__choice">
                                        <input class="form-kebab__radio" name="sender_type" id="sender-selected" value="selected_users" type="radio" onclick="avatarsPageFunctions.showSelectedUsers('selected-users-wrapper')" {{ ($item->user_role_id != NULL) ? 'checked' : '' }}>
                                        <label class="form-kebab__label" for="sender-selected">SELECTED USERS</label>
                                    </div>
                                </div>
                            </div>

                            <div id="all-users-wrapper" class="{{ ($item->role_id != NULL) ? '' : 'd-none' }}">
                                <div class="col-md-12 d-flex all-users">
                                    <div class="form-group mt-3">
                                        @if($item->role_id != NULL)
                                            <label class="checkbox-inline ml-1 mr-1" for="role-1">
                                                <input type="checkbox" id="role-3" name="role[]" value="3" {{ (in_array(3, $item->role_id) == true) ? 'checked' : '' }}> All Coaches
                                            </label>
                                            <label class="checkbox-inline ml-1 mr-1" for="role-2">
                                                <input type="checkbox" id="role-4" name="role[]" value="4" {{ (in_array(3, $item->role_id) == true) ? 'checked' : '' }}> All Coachees
                                            </label>
                                        @else
                                            <label class="checkbox-inline ml-1 mr-1" for="role-1">
                                                <input type="checkbox" id="role-3" name="role[]" value="3"> All Coaches
                                            </label>
                                            <label class="checkbox-inline ml-1 mr-1" for="role-2">
                                                <input type="checkbox" id="role-4" name="role[]" value="4"> All Coachees
                                            </label>
                                        @endif
                                        {{-- <label class="checkbox-inline ml-1 mr-1" for="role-1">
                                            <input type="checkbox" id="role-5" name="role[]" value="5"> All Skip Level Coaches
                                        </label>
                                        <label class="checkbox-inline ml-1 mr-1" for="role-2">
                                            <input type="checkbox" id="role-6" name="role[]" value="6"> All Skip Level Coachees
                                        </label> --}}
                                    </div>
                                </div>
                            </div>

                            <div id="selected-users-wrapper" class="{{ ($item->user_role_id != NULL) ? '' : 'd-none' }}">

                                <div id="selected-user-groups-wrapper" class="col-md-12 pl-0 d-flex">
                                    <div class="col-md-12 selected-users-container mt-3 mb-3">
                                        <label for="contact">Groups</label>
                                            <div class="clearfix">
                                                <div class="radio">
                                                    <label class="ml-1 mr-1">
                                                        <input type="radio" name="group_id" id="division-5" value="5" class="clients" {{ ($item->group_id == 5) ? 'checked' : '' }}> NTG                                                
                                                    </label>
                                                    <label class="ml-1 mr-1">
                                                        <input type="radio" name="group_id" id="division-4" value="4" class="clients" {{ ($item->group_id == 4) ? 'checked' : '' }}> CXM
                                                    </label>
                                                    <label class="ml-1 mr-1">
                                                        <input type="radio" name="group_id" id="division-3" value="3" class="clients" {{ ($item->group_id == 3) ? 'checked' : '' }}> IA                                                
                                                    </label>
                                                    <label class="ml-1 mr-1">
                                                        <input type="radio" name="group_id" id="division-2" value="2" class="clients" {{ ($item->group_id == 2) ? 'checked' : '' }}> CFS                                                
                                                    </label>
                                                    <label class="ml-1 mr-1">
                                                        <input type="radio" name="group_id" id="division-1" value="1" class="clients" {{ ($item->group_id == 1) ? 'checked' : '' }}> CMG                                                
                                                    </label>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="selected all-users-container">
                                    <div class="form-group">
                                        <div class="col-sm-4 col-xs-12 d-grid">
                                            <label for="coach-selectized">Coach</label>
                                            @if($coaches->responseCode == 800)
                                                @if(!empty($coaches->data))
                                                    <select id="select_coach" name="select_coach[]" class="selectpicker" multiple title="Select Coaches" data-selected-text-format="count" data-count-selected-text= "{0} coaches selected" data-size="15" data-live-search="true">
                                                        @foreach($coaches->data as $key => $value)
                                                            @if($item->user_role_id != NULL)
                                                                <option value="{{ $value->user_id }}"  {{ (in_array($value->user_id, $item->user_role_id)) ? 'selected' : '' }}>{{ $value->first_name }} {{ $value->last_name }}</option>
                                                            @else
                                                                <option value="{{ $value->user_id }}">{{ $value->first_name }} {{ $value->last_name }}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                @else
                                                    <select id="select_coach" name="select_coach[]" class="selectpicker" multiple title="No Coaches Loaded" data-selected-text-format="count" data-size="15" data-live-search="true" disabled></select>
                                                @endif
                                            @else
                                                <select id="select_coach" name="select_coach[]" class="selectpicker" multiple title="No Coaches Loaded" data-selected-text-format="count" data-size="15" data-live-search="true" disabled></select>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <div class="col-sm-4 col-xs-12 d-grid">
                                            <label for="coach-selectized">Coachee</label>
                                            @if($coachees->responseCode == 800)
                                                @if(!empty($coachees->data))
                                                    <select id="select_coachee" name="select_coachee[]" class="selectpicker" multiple title="Select Coachees" data-selected-text-format="count" data-count-selected-text= "{0} coachees selected" data-size="15" data-live-search="true">
                                                        @foreach($coaches->data as $key => $value)
                                                            @if($item->user_role_id != NULL)
                                                                <option value="{{ $value->user_id }}"  {{ (in_array($value->user_id, $item->user_role_id)) ? 'selected' : '' }}>{{ $value->first_name }} {{ $value->last_name }}</option>
                                                            @else
                                                                <option value="{{ $value->user_id }}">{{ $value->first_name }} {{ $value->last_name }}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                @else
                                                    <select id="select_coachee" name="select_coachee[]" class="selectpicker" multiple title="No Coachees Loaded" data-selected-text-format="count" data-size="15" data-live-search="true" disabled></select>
                                                @endif
                                            @else
                                                <select id="select_coachee" name="select_coachee[]" class="selectpicker" multiple title="No Coachees Loaded" data-selected-text-format="count" data-size="15" data-live-search="true" disabled></select>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    {{-- <div class="form-group">
                                        <div class="col-sm-4 col-xs-12 d-grid">
                                            <label for="coach-selectized">Skip Level Coach</label>
                                            <select id="select_skip_level_coach" name="select_skip_level_coach[]" class="selectpicker" multiple title="Select Skip Level Coach" data-selected-text-format="count" data-count-selected-text= "{0} skip level coaches selected" data-size="15" data-live-search="true">
                                                <option value="1">Mustard</option>
                                                <option value="2">Ketchup</option>
                                                <option value="3">Barbecue</option>
                                                <option value="4">1</option>
                                                <option value="5">2</option>
                                                <option value="6">3</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <div class="col-sm-4 col-xs-12 d-grid">
                                            <label for="coach-selectized">Skip Level Coachee</label>
                                            <select id="select_skip_level_coachee" name="select_skip_level_coachee[]" class="selectpicker" multiple title="Select Skip Level Coachee" data-selected-text-format="count" data-count-selected-text= "{0} skip level coachees selected" data-size="15" data-live-search="true">
                                                <option value="1">Mustard</option>
                                                <option value="2">Ketchup</option>
                                                <option value="3">Barbecue</option>
                                                <option value="4">1</option>
                                                <option value="5">2</option>
                                                <option value="6">3</option>
                                            </select>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>

                        <div id="points-publish-container" class="{{ ($item->gift == 1) ? 'd-none' : '' }}">
                            <div class="form-group">
                                <div class="col-md-3 col-sm-4 col-xs-12">
                                    <label for="points">Points</label>
                                    <input type="text" class="form-control points" name="points" id="points" value="{{ $item->points }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-3 col-sm-4 col-xs-12">
                                    <label for="publish">Publish</label>
                                    <input type="text" class="form-control datepicker" name="publish" id="publish" value="{{ $item->published_at }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-3 col-sm-10 col-xs-12">
                                <label class="control-label">Replace Photo</label>
                                <input id="file" name="file" type="file" accept='image/*'>
                                <p class="form-help">Maximum of 5 MB</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-4 col-sm-10 col-xs-12">
                                <label for="comment">Comment</label>
                                <textarea id="comment" name="comment" class="form-control" required="" style="height: 120px"></textarea>
                            </div>
                        </div>

                        <div class="form-group mt-5">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-sm btn-primary">Save</button>
                                <a class="btn btn-sm btn-warning link" href="{{ url('avatars/all-items') }}">Cancel</a>
                            </div>
                        </div>
                    </form>
                </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') }}";
        avatarsPageFunctions.onLoad();
        $('#avatar').trigger('click');
        $('#all-items-link').addClass('active');
        generalUseFunctions.initializeGeneralFileInput();
        // generalUseFunctions.initializeFileInputForEdit('{{ $item->item_file_name }}');
    </script>
@endsection