@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('create-avatar-item') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group col-md-4">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="name" id="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>
                                    <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>
                                    <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="attr-{{ $value->attr_id }}" value="{{ $value->attr_id }}" required>{{ $value->attr_name }}
                                </div>
                            @endforeach
                        </div>

                        <div class="form-group col-md-4">
                            <label class="checkbox-inline" for="gift-1">
                                <input class="gift" type="checkbox" id="gift" name="gift" onchange="avatarsPageFunctions.toggleOptions('gift')"> Gift
                            </label>
                        </div>

                        <div id="gift-container" class="gift_container 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">
                                </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">
                                </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');">
                                        <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')">
                                        <label class="form-kebab__label" for="sender-selected">SELECTED USERS</label>
                                    </div>
                                </div>
                            </div>

                            <div id="all-users-wrapper" class="d-none">
                                <div class="col-md-12 d-flex all-users">
                                    <div class="form-group mt-3">
                                        <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>
                                        <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="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">
                                                    @if($groups->responseCode == 800)
                                                        @if(!empty($groups->data))
                                                            @foreach($groups->data as $key => $value)
                                                                <label class="ml-1 mr-1">
                                                                    <input type="radio" name="group_id" id="division-{{ $value->id }}" value="{{ $value->group_id }}" class="clients" onchange="avatarsPageFunctions.getDataPerGroup('{{ $value->group_id }}');"> {{ $value->group_name }}                         
                                                                </label>
                                                            @endforeach
                                                        @endif
                                                    @endif
                                                </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="selected all-users-container">
                                    <div class="col-md-12 d-flex">
                                        <div class="form-group">
                                            <div class="col-sm-4 col-xs-12 d-grid">
                                                <label for="coach-selectized">Coach</label>
                                                <select id="select_coach" name="select_coach[]" class="selectpicker" multiple title="Select Coaches" data-selected-text-format="count" data-size="15" data-live-search="true" disabled></select>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <div class="col-sm-4 col-xs-12 d-grid">
                                                <label for="coach-selectized">Coachee</label>
                                                <select id="select_coachee" name="select_coachee[]" class="selectpicker" multiple title="Select Coachees" data-selected-text-format="count" data-size="15" data-live-search="true" disabled></select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12 d-flex">
                                        <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_coach" name="select_skip_coach[]" class="selectpicker" multiple title="Select Skip Level Coaches" data-selected-text-format="count" data-size="15" data-live-search="true" disabled></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_coachee" name="select_skip_coachee[]" class="selectpicker" multiple title="Select Skip Level Coachees" data-selected-text-format="count" data-size="15" data-live-search="true" disabled></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="points-publish-container">
                            <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">
                                </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">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-3 col-sm-10 col-xs-12">
                                <label class="control-label">Upload Photo</label>
                                <input id="file" name="file" type="file" accept='image/*' required>
                                <p class="form-help">Maximum of 5 MB</p>
                            </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');
        $(document).ready(function() {
            generalUseFunctions.initializeGeneralFileInput();
        });
    </script>
@endsection