@extends('backend.layout.master')
@include('backend.message.css')
@section('content')

    <!--Start Hero-->
      <section class="hero-section business-startup">
              <div class="container">
                <div class="row">
                  <div class="col-md-8">
                    <div class="heading mb-3"><h2>Messaging</h2></div>
                  </div>
                  <div class="col-md-4"></div>
                </div>
                
                <div class="row">
                  <div class="col-md-12">
                  	<ul class="nav nav-tabs" role="tablist">
                      	<li class="nav-item">
                          	<a class="nav-link active show" id="top-message-tab" data-toggle="tab" href="#top-message" role="tab" aria-controls="top-message" aria-selected="true">
                              <span class="align-middle">Send Message</span>
                          	</a>
                      	</li>
                      	<li class="nav-item">
                          	<a class="nav-link" id="top-archive-tab" data-toggle="tab" href="#top-archive" role="tab" aria-controls="top-archive" aria-selected="false">
                              	<span class="align-middle">Sent Messages</span>
                          	</a>
                      	</li>
                  	</ul>
                  	<div class="tab-content">
                        <div class="tab-pane show fade active" id="top-message" aria-labelledby="top-message-tab" role="tabpanel">
                            <div class="col-md-12 ">
                              	
		                        @if(session()->has('success'))
		                            <div class="alert alert-success hide-alert">
		                                {{ session()->get('success') }}
		                            </div>
		                        @endif

		                        @if ($errors->any())
		                            <div class="alert alert-danger">
		                                <ul>
		                                    @foreach ($errors->all() as $error)
		                                        <li>{{ $error }}</li>
		                                    @endforeach
		                                </ul>
		                            </div>
		                        @endif

		                        <form class="form" method="post" action="{{route('message.send')}}" >
		                            @csrf

		                          <div class="row message_row">
		                            <div class="col-md-12">
		                              <div class="form-group row">
		                                <label class="col-sm-1 control-label"><h5>To</h5></label>
		                                <div class="col-sm-11">
		                                  <select class="select2 form-control" id="select_kids" name="select_kids[]" required  multiple="multiple">
		                                    <option value="All"  selected="">All</option> 
		                                    @foreach($kgGroup as $kgGroupName)
		                                        <option value="group_{{ $kgGroupName->id}}"
		                                                name="{{ $kgGroupName->name }}"> {{ $kgGroupName->name }}  </option>
		                                    @endforeach

		                                    @foreach($kids as $kidsName)
		                                            <option value="{{ $kidsName->id}}"
		                                                    name="{{ $kidsName->first_name }} {{ $kidsName->last_name }} "> {{ $kidsName->first_name }} {{ $kidsName->last_name }} </option>
		                                    @endforeach
		                                  </select>
		                                </div>
		                              </div> 
		                            </div>
		                            <div class="col-md-12">
		                              <div class="form-group">
		                                <input type="text" name="subject" autocomplete="off" id="subject" class="form-control" placeholder="Subject...">
		                              </div>
		                            </div>
		                            <div class="col-md-12">
		                              <div class="form-group">
		                                <textarea class="form-control" id="description" name="description" rows="10"></textarea>
		                                
		                              </div>
		                            </div>
		                            <div class="col-md-12">
		                              <div class="form-group">
		                                    <button type="submit" class="btn btn-primary round btn-primary" id="submit"><i class="far fa-paper-plane"></i> Send</button>
		                              </div>
		                            </div>
		                          </div>
		                        </form>
			                      	
                            </div>
                        </div>
                        <div class="tab-pane fade" id="top-archive" role="tabpanel" aria-labelledby="top-archive-tab">
                          	<div class="row">
	                            <div class="col-md-12">
	                              	<table class="text-left archive w-100">
				                      	<thead>
					                        <tr>
					                          <th>DATE</th>
					                          <th>TO</th>
					                          <th>SUBJECT</th>
					                          <th>MESSAGE PREVIEW</th>
					                          <th></th>
					                        </tr>
				                      	</thead>
				                      	<tbody id="messageList">                         	
					                        
				                      	</tbody>
				                    </table>
	                            </div>
                          	</div>
                        </div>
                    </div>
                   
                  </div>
                </div>
              </div>
      </section>
      <!--End Hero-->
      <div class="modal fade" id="message_preview" tabindex="-1" role="dialog" aria-labelledby="message_preview" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Message Preview</h5>
              <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body p-0">
            	<div class="card-body">
           			<div class="row">
                	<div class="col">
                    <div class="row">
                      <div class="col">
                        <div class="form-group">
                          <p id="messageText"></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

@endsection
@include('backend.message.js')