@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/vendor/flatpickr/flatpickr.min.css') }}">
@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="\teams">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Teams') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto">{{ __('Add Users') }}</h1>
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->
              <!-- .page-section -->
              <div class="page-section">
                <!-- .instruction -->             
                <p>{{ __('On this page you can add Users to your account. All users will automatically receive an invitation to complete the profile.') }}</p>
                <p>{{ __('You have to provide a valid PO number and on clicking Save, an invoice will automatically be sent.') }}</p>
                <!-- .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="#myteam">{{ __('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="myteam">

							<form method="POST" action="/teams">
							{{ csrf_field() }}
	                            <input type="hidden" class="form-control" id="vat" name="vat" value={{ $vat }}>
	                            <input type="hidden" class="form-control" id="nprofiles" name="nprofiles" value=0>
	                            <input type="hidden" class="form-control" id="price" name="price" value=0>
	                            <div class="card-body">
            						<div class="row">
            	                        <div class="col-sm-12 col-md-6">
            								
            							</div>
            							<div class="col-sm-6 col-md-3">
            								{{ __('Total (excl. VAT)') }}:
            							</div>
            							<div class="col-sm-6 col-md-3">
            		                        {{ __('Total (incl. VAT)') }}:
            							</div>
            						</div>
            						<div class="row">
            	                        <div class="col-sm-6 col-md-2">
            								{{ __('PO number') }}:
            							</div>
            							<div class="col-sm-6 col-md-4">
            		                        <!-- .form-group -->
            		                        <div class="form-group">
                                                <input type="text" class="form-control" id="ponumber" name="ponumber" placeholder="{{ __('Please enter a PO number') }}" required="">
            		                        </div>
            		                        <!-- /.form-group -->
            							</div>
            							<div class="col-sm-6 col-md-3">
            		                        <!-- .form-group -->
            		                        <div class="input-group">
            									<label class="input-group-prepend" for="totalex"><span class="badge">€</span></label>
            									<input type="number" class="form-control" style="text-align:right;" id="totalex" name="totalex" step="0.01" value="0" disabled>
            									<input type="hidden" class="form-control" id="totex" name="totex" value="0">
            								</div>
            		                        <!-- /.form-group -->
            							</div>
            							<div class="col-sm-6 col-md-3">
            		                        <!-- .form-group -->
            		                        <div class="input-group">
            									<label class="input-group-prepend" for="totalin"><span class="badge">€</span></label>
            									<input type="number" class="form-control" style="text-align:right;" id="totalin" name="totalin" step="0.01" value="0" disabled>
            									<input type="hidden" class="form-control" id="totin" name="totin" value="0">
            								</div>
            		                        <!-- /.form-group -->
            							</div>
            						</div>
            					</div>
            					<div class="card-body border-top">
    								<div class="row">
    									<div class="col-sm-12 col-md-4">
    										<!-- .form-group -->
    				                        <div class="form-group">
    					                          <label for="name">{{ __('Team Name') }}</label>
    					                          <input type="text" class="form-control" id="teamname" name="teamname" placeholder="{{ __('Please enter a name') }}" required="">
    				                        </div>
    				                        <!-- /.form-group -->
    									</div>
    									<div class="col-sm-12 col-md-4">
    										<!-- .form-group -->
    				                        <div class="form-group">
    					                          <label class="control-label" for="sessiondate">{{ __('Session Date') }} ({{ __('optional') }})</label>
    					                          <input id="sessiondate" name="sessiondate" type="text" class="form-control"> </div>
    				                        <!-- /.form-group -->
    									</div>
    								</div>
    								<div class="row">
    									<div class="col-sm-12 col-md-4">
    				                        <!-- .form-group -->
    				                        <div class="form-group">
    					                          <label for="profile">{{ __('Profile') }}</label>
    					                          <select class="custom-select" id="profile" name="profile" required="">
    					                          @foreach ($profiles as $profile)
    													<option value="{{ $profile->id }}">{{ $profile->trans('profilename') }}</option>
    											  @endforeach
    					                          </select>
    					                    </div> 
    										<!-- /.form-group -->
    									</div>
    									<div class="col-sm-12 col-md-4">
    				                        <!-- .form-group -->
    				                        <div class="form-group">
    					                          <label for="download_report">{{ __('Download report') }}</label>
    					                          <select class="custom-select" id="download_report" name="download_report" required="">
    													<option value="0" selected>{{ __('Download not allowed') }}</option>
    						                            <option value="1">{{ __('Download allowed') }}</option>
    													<option value="2">{{ __('Download allowed on Date & Time') }}</option>
    					                          </select>
    				                        </div>
    										<!-- /.form-group -->
    									</div>								
    									<div class="col-sm-12 col-md-4">
    										<!-- .form-group -->
    				                        <div class="providedownloaddate" id="providedownloaddate">
    					                          <label class="control-label" for="downloaddate">{{ __('Allow download Report on Date & Time') }}</label>
    					                          <input id="downloaddate" name="downloaddate" type="text" class="form-control"> </div>
    				                        <!-- /.form-group -->
    									</div>
    									
    								</div>
    								<div class="card-body border-top">
                                    <div class="table-responsive">
                                        <!-- .table -->
                                        <table class="table">
                                            <!-- thead -->
                                            <thead class="thead-">
                                                <tr>
                                                    <th style="min-width:200px"> <h6> {{ __('Name') }} </h6></th>
                                                    <th><h6> {{ __('Email Address') }} </h6></th>
                                                    <th><h6> {{ __('Default Language') }} </h6></th>   
                                                    
                                                </tr>
                                            </thead>
                                            <!-- /thead -->
                                            <!-- tbody -->
                                            <tbody>
                                                <!-- tr -->
                                                <tr>
                                                    <td>
                                                        <input type="text" class="form-control" id="name[]" name="name[]" placeholder="{{ __('Please enter a name') }}" required="">
                                                    </td>
                                                    <td>
                                                        <input type="email" class="form-control" id="email[]" name="email[]" placeholder="{{ __('Please enter an email address') }}" required="">
                                                    </td>
                                                    <td>
                                                        <select class="custom-select" id="locale[]" name="locale[]" required="">
                            						   		@foreach ($languages as $language)
                                                        		<option value="{{ $language->locale }}" @if (\App::getLocale() === $language->locale ) selected @endif > {{ $language->language }} </option>
                            								@endforeach
                                                        </select>
                                                    </td>
                                                    
                                                </tr>
                                                <!-- /tr -->
                                            </tbody><!-- /tbody -->
                                        </table><!-- /.table -->
                                    </div>
                                    <!-- add user action -->
                                    <button type="button" class="btn btn-light" id="button">
                                      <i class="fa fa-plus"></i>
                                      <span class="ml-1">{{ __('Add more users') }}</span>
                                    </button>
                                    <!-- /add user action -->
                                </div>
        						<div class="card-body border-top">
            						<!-- .form-group -->
                                    <div class="form-group">                        
            							<button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
            							<p>{{ __('On clicking Save, an invoice will automatically be sent') }}</p>
                                    </div>
                                    <!-- .form-group -->
        						</div>
							</form>
						</div>
  				 	 </div>
					</div>
                    <!-- /.table-responsive -->
				  </div>
                  <!-- /.card-body -->
                </section>
                <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
    <script src="{{ asset('assets/vendor/flatpickr/flatpickr.min.js') }}"></script>
	<script>
	$(function() {
    		return flatpickr('#sessiondate', {
      		disableMobile: true,
      		altInput: true,
			minDate: 'today',
      		altFormat: 'd-m-Y',
      		dateFormat: 'Y-m-d'
    		});
	});
	$(function() {
    		return flatpickr('#downloaddate', {
      		disableMobile: true,
      		altInput: true,
			enableTime: true,
			time_24hr: true,
			minDate: 'today',
      		altFormat: 'd-m-Y H:i',
      		dateFormat: 'Y-m-d H:i'
    		});
	});
	
	var usernumber = 1;
	var prices = @json($prices);
	var vat = @json($vat);
	
	$(document).ready(function(){
		$("#download_report").change(function(){
	        $("#download_report option:selected").each(function(){
	            if($(this).attr("value")=="2"){
	                $(".providedownloaddate").fadeIn('slow');
	            } else {
	                $(".providedownloaddate").fadeOut('slow');               
	            }
	        });
	    }).change();
	    
	    $("#profile").change(function(){
            var profileid = $("#profile option:selected").attr("value");
            var nprofiles = document.getElementById("nprofiles");
            nprofiles.setAttribute("value", usernumber);
            var price = document.getElementById("price");
            price.setAttribute("value", prices[profileid]);
            var totex = document.getElementById("totex");
            totex.setAttribute("value", (Number(prices[profileid]) * usernumber).toFixed(2));
            var totalex = document.getElementById("totalex");
            totalex.setAttribute("value", (Number(prices[profileid]) * usernumber).toFixed(2));
            var totin = document.getElementById("totin");
            totin.setAttribute("value", (Number(prices[profileid]) * usernumber * (1+vat/100)).toFixed(2));
            var totalin = document.getElementById("totalin");
            totalin.setAttribute("value", (Number(prices[profileid]) * usernumber * (1+vat/100)).toFixed(2));
	    }).change();
	 });
    
    document.getElementById("button").onclick = function() {
        var tr = '<tr>'+
        '<td><input type="text" class="form-control" id="name[]" name="name[]" placeholder="{{ __('Please enter a name') }}" required=""></td>'+
        '<td><input type="email" class="form-control" id="email[]" name="email[]" placeholder="{{ __('Please enter an email address') }}" required=""></td>'+
        '<td><select class="custom-select" id="locale[]" name="locale[]" required="">@foreach ($languages as $language)<option value="{{ $language->locale }}" @if (\App::getLocale() === $language->locale ) selected @endif > {{ $language->language }} </option>@endforeach</select></td>'+
        '</tr>';
        $('tbody').append(tr);
        usernumber += 1;
        var profileid = $("#profile option:selected").attr("value");
        var nprofiles = document.getElementById("nprofiles");
        nprofiles.setAttribute("value", usernumber);
        var price = document.getElementById("price");
        price.setAttribute("value", prices[profileid]);
        var totex = document.getElementById("totex");
        totex.setAttribute("value", (Number(prices[profileid]) * usernumber).toFixed(2));
        var totalex = document.getElementById("totalex");
        totalex.setAttribute("value", (Number(prices[profileid]) * usernumber).toFixed(2));
        var totin = document.getElementById("totin");
        totin.setAttribute("value", (Number(prices[profileid]) * usernumber * (1+vat/100)).toFixed(2));
        var totalin = document.getElementById("totalin");
        totalin.setAttribute("value", (Number(prices[profileid]) * usernumber * (1+vat/100)).toFixed(2));
    };
 </script> 
@endpush