@extends('layouts.app')

@section('page-title')
    <title>Send Notification C2G Panel</title>
@endsection

@section('page-css')
    
@endsection

@section('content')
    <div class="container-fluid d-block">
        <div id="send-notification-page-container" class="py-4">
            <div class="card">
                <div class="card-header">
                    Send Notification
                </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 role="form" class="form" method="post" action="{{ url('save-notification-message') }}"  enctype="multipart/form-data">
                        @csrf
                        <div class="box-body">  
                            <div class="form-group">
                                <div class="col-md-4 col-sm-8 col-xs-12">
                                    <label for="txtLimit">Header</label>
                                    <input name="header" class="form-control"  required>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-4 col-sm-8 col-xs-12">
                                    <label for="txtLimit">Content</label>
                                    <textarea name="content" class="form-control h150" id="txtLimit" maxlength="200" data-length="200" required=""></textarea>
                                    <p class="a--left remaining"><span class="counter">200</span> characters remaining</p>
                                </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/*'>
                                    <p class="form-help">Maximum of 5 MB</p>
                                </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="usersPageFunctions.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="usersPageFunctions.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">
                                @if($user['group_id'] == null)
                                    <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="usersPageFunctions.getDataPerGroup('{{ $value->group_id }}');"> {{ $value->group_name }}                         
                                                                    </label>
                                                                @endforeach
                                                            @endif
                                                        @endif
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <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>
                                                @if(!empty($user_list['coach']))
                                                    <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">
                                                        @foreach($user_list['coach'] as $key => $value)
                                                            @if($value->role_id === 3)
                                                                <option value="{{ $value->user_role_id }}">{{ $value->full_name }}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                @else
                                                    <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>
                                                @endif
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <div class="col-sm-4 col-xs-12 d-grid">
                                                <label for="coach-selectized">Coachee</label>
                                                @if(!empty($user_list['coachee']))
                                                    <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">
                                                        @foreach($user_list['coachee'] as $key => $value)
                                                            <option value="{{ $value->user_role_id }}">{{ $value->full_name }}</option>
                                                        @endforeach
                                                    </select>
                                                @else
                                                    <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>
                                                @endif
                                            </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>
                                                @if(!empty($user_list['skip_level_coach']))
                                                    <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">
                                                        @foreach($user_list['skip_level_coach'] as $key => $value)
                                                            <option value="{{ $value->user_role_id }}">{{ $value->full_name }}</option>
                                                        @endforeach
                                                    </select>
                                                @else
                                                    <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>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-4 col-xs-12 d-grid">
                                                <label for="coach-selectized">Skip Level Coachee</label>
                                                @if(!empty($user_list['skip_level_coachee']))
                                                    <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">
                                                        @foreach($user_list['skip_level_coachee'] as $key => $value)
                                                            <option value="{{ $value->user_role_id }}">{{ $value->full_name }}</option>
                                                        @endforeach
                                                    </select>
                                                @else
                                                    <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>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-footer col-md-12">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </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') }}";
        $(document).ready(function() {
            generalUseFunctions.initializeGeneralFileInput();
        });
    </script>
@endsection