@extends('layouts.app')

@section('styles')
@endsection

@section('content')
		   <!-- .page -->
          <div class="page">
            <!-- .page-inner -->
            <div class="page-inner">
              <!-- .page-title-bar -->
              <header class="page-title-bar">
                <!-- .breadcrumb -->
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item active">
                      <a href="\">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Dashboard') }}</a>
					  <a href="\tips">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Tips') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto">{{ __('Create a Tip') }}</h1>
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->
              <!-- .page-section -->
              <div class="page-section">
                <!-- .card -->
                <section class="card card-fluid">
                  <!-- .card-header -->
                  <header class="card-header">
                    <!-- .nav-tabs -->
                    <ul class="nav nav-tabs card-header-tabs">
                      <li class="nav-item">
                        <a class="nav-link active show" role="tab" data-toggle="tab" href="#mytip">{{ __('Details') }}</a>
                      </li>
                    </ul>
                    <!-- /.nav-tabs -->
                  </header>
                  <!-- /.card-header -->
                  <!-- .card-body -->
                  <div class="card-body">
				  <!-- .table-responsive -->
				  <div class="table-responsive">
				  
				  	<div class="tab-content">
   						<div role="tabpanel" class="tab-pane active" id="mytip">

						<form method="POST" action="/tips">
						{{ csrf_field() }}
                        <!-- .form-group -->
                        <div class="form-group">
                          <label for="name">{{ __('Name') }}</label>
                          <input type="text" class="form-control" id="name" name="name" placeholder="{{ __('Please enter a name') }}" required="">
                        </div>
                        <!-- /.form-group -->
               			<p> &nbsp </p>
               			
               			<!-- .form-group -->
                        <div class="form-group">
							<div class="custom-control custom-control-inline custom-radio">
								<input type="radio" class="custom-control-input" name="colour" id="rd1" value=1 checked>
								<label class="custom-control-label" for="rd1">{{ __('Colour specific') }}</label>
							</div>
							<div class="custom-control custom-control-inline custom-radio">
								<input type="radio" class="custom-control-input" name="colour" id="rd2" value=0 >
								<label class="custom-control-label" for="rd2">{{ __('General') }}</label>
							</div>
                        </div>
                        <!-- /.form-group -->
                        
                        <div class="colourspecific" id="colourspecific">
                            <div class="table-responsive">
                                <!-- .table -->
                                <table class="table table-sm mb-0">
                                  <!-- thead -->
                                  <thead class="thead-">
                                    <tr>
                                      <th style="min-width:100px">{{ __('Perspective') }}</th>
                                      @foreach ($colours as $key=>$colour)
                                        <th>{{ $colour }}</th>
                                      @endforeach
                                    </tr>
                                  </thead><!-- /thead -->
                                  <!-- tbody -->
                                  <tbody>
                                    <!-- tr -->
                                    <tr>
                                      <td>{{ __('User') }} {{ __('Acceptance') }}</td>
                                      @foreach ($colours as $key=>$colour)
                                        <td>&nbsp&nbsp
                                            <!-- .form-group -->
                                            <div class="custom-control custom-control-inline custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" name="colourselfacc[]" id="colourselfacc-{{ $key }}" value="{{ $key }}">
                                                <label class="custom-control-label" for="colourselfacc-{{ $key }}"> </label>
                                            </div>
                                            <!-- /form-group -->
                                        </td>
                                      @endforeach
                                    </tr><!-- /tr -->
                                    <!-- tr -->
                                    <tr>
                                      <td>{{ __('User') }} {{ __('Rejection') }}</td>
                                      @foreach ($colours as $key=>$colour)
                                        <td>&nbsp&nbsp
                                            <!-- .form-group -->
                                            <div class="custom-control custom-control-inline custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" name="colourselfrej[]" id="colourselfrej-{{ $key }}" value="{{ $key }}">
                                                <label class="custom-control-label" for="colourselfrej-{{ $key }}"> </label>
                                            </div>
                                            <!-- /form-group -->
                                        </td>
                                      @endforeach
                                    </tr><!-- /tr -->
                                    <!-- tr -->
                                    <tr>
                                      <td>{{ __('Team/other person') }} {{ __('Acceptance') }}</td>
                                      @foreach ($colours as $key=>$colour)
                                        <td>&nbsp&nbsp
                                            <!-- .form-group -->
                                            <div class="custom-control custom-control-inline custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" name="colourotheracc[]" id="colourotheracc-{{ $key }}" value="{{ $key }}">
                                                <label class="custom-control-label" for="colourotheracc-{{ $key }}"> </label>
                                            </div>
                                            <!-- /form-group -->
                                        </td>
                                      @endforeach
                                    </tr><!-- /tr -->
                                    <!-- tr -->
                                    <tr>
                                      <td>{{ __('Team/other person') }} {{ __('Rejection') }}</td>
                                      @foreach ($colours as $key=>$colour)
                                        <td>&nbsp&nbsp
                                            <!-- .form-group -->
                                            <div class="custom-control custom-control-inline custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" name="colourotherrej[]" id="colourotherrej-{{ $key }}" value="{{ $key }}">
                                                <label class="custom-control-label" for="colourotherrej-{{ $key }}"> </label>
                                            </div>
                                            <!-- /form-group -->
                                        </td>
                                      @endforeach
                                    </tr><!-- /tr -->
                                  </tbody><!-- /tbody -->
                                </table><!-- /.table -->
                            </div>
                        </div>
               			<p> &nbsp </p>

                        <!-- .form-group -->
                        <div class="form-group">                        
							<button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                        </div>
                        <!-- /.form-group -->
						</form>
						
						</div>
  				 	 </div>
				  
					</div>
                    <!-- /.table-responsive -->
				  </div>
                  <!-- /.card-body -->
                </section>
                <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
	<script>
		
		$('body').on('change','input[type="radio"]',function () {
            if($('#rd1').is(':checked')) { 
               $(".colourspecific").fadeIn('slow');
            } else {
                $(".colourspecific").fadeOut('slow');               
            }
        });
	    
	</script>
@endpush