@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>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto">{{ __('Billing') }}</h1>
                  <!-- .btn-toolbar -->
                  <form method="GET" action="billing/settings/{{ \Auth::user()->id }}">
                    <button type="submit" class="btn btn-light">
                      <i class="oi oi-cog"></i>
                      <span class="ml-1">{{ __('Settings') }}</span>
                    </button>
                  </form>
                  @if (Auth::user()->id == 1)
                      <button type="button" class="btn btn-light"  data-toggle="modal" data-target="#exportModal">
                          <i class="oi oi-data-transfer-download"></i>
                          <span class="ml-1">{{ __('Export') }} {{ __('Online invoices') }}</span>
                      </button>
                  @endif
                  <!-- /.btn-toolbar -->
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->

              <!-- Payment modal -->
              <div class="modal fade" name="paymentModal" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentLabel" aria-hidden="true">
              	<!-- .modal-dialog -->
                	<div class="modal-dialog" role="document">
                 	<!-- .modal-content -->
                 	<div class="modal-content">
                		<!-- .modal-header -->
                   		<div class="modal-header">
                      		<h5 class="modal-title">{{ __('Process Payment') }}</h5>
                    	</div>
                        <!-- /.modal-header -->
                       	<form method="POST" action="/invoices">
							{{ csrf_field() }}

                           	<!-- .modal-body -->
                        	<div class="modal-body">
                                <input type="hidden" name="invoiceID" id="invoiceID" value="">
                                <p>{{ __('If this Invoice has been paid, you can indicate the payment date below.') }}</p>
                                <div class="col-sm-12 col-md-6">
    							    <!-- .form-group -->
    		                        <div class="form-group">
    			                        <label class="control-label" for="paymentdate">{{ __('Payment date') }}</label>
    			                        <input id="paymentdate" name="paymentdate" type="text" class="form-control"> 
    			                    </div>
    		                        <!-- /.form-group -->
    							</div>	
    									
                                <p>{{ __('If not, you can send them a reminder.') }}</p>
                      	    </div>
                          	<!-- /.modal-body -->
                      		<!-- .modal-footer -->
                       		<div class="modal-footer">
                          		<input type="submit" class="btn btn-primary" value="{{ __('Invoice Paid') }}" name="invoice paid">
    							<input type="submit" class="btn btn-primary" value="{{ __('Send Reminder') }}" name="invoice paid">
                          		<button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                    	    </div>
                        	<!-- /.modal-footer -->
                        </form>
           			</div>
                   	<!-- /.modal-content -->
              	</div>
              	<!-- /.modal-dialog -->
              </div>
              <!-- /.modal -->
              
              @if (Auth::user()->id == 1)
              <!-- Export modal -->
              <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="ExportLabel" aria-hidden="true">
              	<!-- .modal-dialog -->
                	<div class="modal-dialog" role="document">
                 	<!-- .modal-content -->
                 	<div class="modal-content">
                		<!-- .modal-header -->
                   		<div class="modal-header">
                      		<h5 class="modal-title">{{ __('Export') }} {{ __('Online invoices') }}</h5>
                    	</div>
                        <!-- /.modal-header -->
                       	<form method="POST" action="exportOnlineInvoices">
							{{ csrf_field() }}
                           	<!-- .modal-body -->
                            <div class="modal-body">
                                  <p>{{ __('Please indicate start date and end date of the export.') }}</p>
                                  <div class="col-sm-12 col-md-6">
    							    <!-- .form-group -->
    		                        <div class="form-group">
    			                        <label class="control-label" for="startdate">{{ __('Start date') }}</label>
    			                        <input id="startdate" name="startdate" type="text" class="form-control"> 
    			                    </div>
    		                        <!-- /.form-group -->
    							</div>
    							<div class="col-sm-12 col-md-6">
    							    <!-- .form-group -->
    		                        <div class="form-group">
    			                        <label class="control-label" for="enddate">{{ __('End date') }}</label>
    			                        <input id="enddate" name="enddate" type="text" class="form-control"> 
    			                    </div>
    		                        <!-- /.form-group -->
    							</div>
                          	</div>
                          	<!-- /.modal-body -->
                      		<!-- .modal-footer -->
                       		<div class="modal-footer">
                          		<input type="submit" class="btn btn-primary" value="{{ __('Export') }}" name="export">
                          		<button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                    	    </div>
                        	<!-- /.modal-footer -->
                    	</form>
           			</div>
                   	<!-- /.modal-content -->
              	</div>
              	<!-- /.modal-dialog -->
              </div>
              <!-- /.modal -->
              @endif
              
              <!-- .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 @if ($tab == null) active show @endif" role="tab" data-toggle="tab" href="#mybilling">{{ __('To be Invoiced') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link @if ($tab == 'open') active show @endif" role="tab" data-toggle="tab" href="#myopeninvoices">{{ __('Open Invoices') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link @if ($tab == 'paid') active show @endif" role="tab" data-toggle="tab" href="#mypaidinvoices">{{ __('Completed Invoices') }}</a>
                      </li>
                    </ul>
                    <!-- /.nav-tabs -->
                  </header>
                  <!-- /.card-header -->
                  <!-- .card-body -->
                  <div class="card-body">
				  	<div class="tab-content">

						<!-- .tabpanel -->
						<div role="tabpanel" class="tab-pane @if ($tab == null) active @endif" id="mybilling">
                     		<!-- .table -->
                      		<table id="mybilling-table" class="table table-responsive-xl">
                      			<!-- thead -->
                      			<thead>
                       				<tr>
						 				<th>{{ __('Organisation') }}</th>
             			  				<th>{{ __('Facilitator') }}</th>
                			  			<th>{{ __('Number of profiles') }}</th>
                			  			<th>{{ __('Yearly License') }}</th>
						  				<th style="width:170px; min-width:170px;">{{ __('Actions') }}</th>
                        				</tr>
                      			</thead>
                      			<!-- /thead -->
                      		</table>
                      		<!-- /.table -->
						</div>						
                  		<!-- /.tabpanel -->					

						<!-- .tabpanel -->
						<div role="tabpanel" class="tab-pane @if ($tab == 'open') active @endif" id="myopeninvoices">
                     		<!-- .table -->
                      		<table id="myopeninvoices-table" class="table table-responsive-xl">
                      			<!-- thead -->
                      			<thead>
                       				<tr>
						 				<th>{{ __('Organisation') }}</th>
             			  				<th>{{ __('Invoice number') }}</th>
             			  				<th>{{ __('Invoice date') }}</th>
                			  			<th>{{ __('Amount') }} (€)</th>
                			  			<th>{{ __('Days Open') }}</th>
						  				<th style="width:170px; min-width:170px;">{{ __('Actions') }}</th>
                        				</tr>
                      			</thead>
                      			<!-- /thead -->
                      		</table>
                      		<!-- /.table -->
						</div>						
                  		<!-- /.tabpanel -->		
                  		
                  		<!-- .tabpanel -->
						<div role="tabpanel" class="tab-pane @if ($tab == 'paid') active @endif" id="mypaidinvoices">
                     		<!-- .table -->
                      		<table id="mypaidinvoices-table" class="table table-responsive-xl">
                      			<!-- thead -->
                      			<thead>
                       				<tr>
						 				<th>{{ __('Organisation') }}</th>
             			  				<th>{{ __('Invoice number') }}</th>
                			  			<th>{{ __('Invoice date') }}</th>
                			  			<th>{{ __('Payment date') }}</th>
						  				<th style="width:170px; min-width:170px;">{{ __('Actions') }}</th>
                        				</tr>
                      			</thead>
                      			<!-- /thead -->
                      		</table>
                      		<!-- /.table -->
						</div>						
                  		<!-- /.tabpanel -->					

				  	</div>
                  	<!-- /.tab-content -->
				  </div>
                  <!-- /.card-body -->
                </section>
                <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/javascript/pages/dataTables.bootstrap.js') }}"></script>
    <script src="{{ asset('assets/vendor/flatpickr/flatpickr.min.js') }}"></script>
	<script>
	
  $(function() {
	$('#mybilling-table').DataTable({
	  processing: true,
      serverSide: true,
	  dom: "<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",
      buttons: ['copyHtml5', { extend: 'print', autoPrint: false }],
      language: {
        info: "{{ __('datatables_info') }}",
        infoEmpty: "{{ __('datatables_infoEmpty') }}",
        infoFiltered: "{{ __('datatables_infoFiltered') }}",
        lengthMenu: "{{ __('datatables_lengthMenu') }}",
        processing: "{{ __('datatables_processing') }}",
        search: "{{ __('datatables_search') }}",
        thousands: "{{ __('datatables_thousands') }}",
        zeroRecords: "{{ __('datatables_zeroRecords') }}",
        paginate: {
          previous: '<i class="fa fa-lg fa-angle-left"></i>',
          next: '<i class="fa fa-lg fa-angle-right"></i>'
        }
      },
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "{{ __('datatables_all') }}"]],
	  autoWidth: false,
	  ajax: '{!! route('billing.mybilling') !!}',
      deferRender: true,
      order: [0, 'asc'],
      columns: [
			{ data: 'organisationname', name: 'organisations.organisationname' },
			{ data: 'facilitator', name: 'facilitator' },
            { data: 'count', 'type': 'num', searchable: false },
            { data: 'license', 'type': 'num' },
			{ data: 'id', name: 'id', orderable: false, searchable: false }
       ],
    });
	
	$('#myopeninvoices-table').DataTable({
	  processing: true,
      serverSide: true,
	  dom: "<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",
      buttons: ['copyHtml5', { extend: 'print', autoPrint: false }],
      language: {
        info: "{{ __('datatables_info') }}",
        infoEmpty: "{{ __('datatables_infoEmpty') }}",
        infoFiltered: "{{ __('datatables_infoFiltered') }}",
        lengthMenu: "{{ __('datatables_lengthMenu') }}",
        processing: "{{ __('datatables_processing') }}",
        search: "{{ __('datatables_search') }}",
        thousands: "{{ __('datatables_thousands') }}",
        zeroRecords: "{{ __('datatables_zeroRecords') }}",
        paginate: {
          previous: '<i class="fa fa-lg fa-angle-left"></i>',
          next: '<i class="fa fa-lg fa-angle-right"></i>'
        }
      },
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "{{ __('datatables_all') }}"]],
	  autoWidth: false,
	  ajax: '{!! route('billing.myopeninvoices') !!}',
      deferRender: true,
      order: [4, 'desc'],
      columns: [
			{ data: 'organisationname', name: 'organisationname' },
			{ data: 'invoicenumber', name: 'invoicenumber' },
			{ data: 'invoicedate', 'type': 'num', 'render': { '_': 'display', 'sort': 'timestamp' } },
			{ data: 'totalin', name: 'totalin', className: "text-right" },
			{ data: 'paymentdate', name: 'paymentdate', className: "text-right"},
			{ data: 'id', name: 'id', orderable: false, searchable: false }
       ],
    });
    
    $('#mypaidinvoices-table').DataTable({
	  processing: true,
      serverSide: true,
	  dom: "<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",
      buttons: ['copyHtml5', { extend: 'print', autoPrint: false }],
      language: {
        info: "{{ __('datatables_info') }}",
        infoEmpty: "{{ __('datatables_infoEmpty') }}",
        infoFiltered: "{{ __('datatables_infoFiltered') }}",
        lengthMenu: "{{ __('datatables_lengthMenu') }}",
        processing: "{{ __('datatables_processing') }}",
        search: "{{ __('datatables_search') }}",
        thousands: "{{ __('datatables_thousands') }}",
        zeroRecords: "{{ __('datatables_zeroRecords') }}",
        paginate: {
          previous: '<i class="fa fa-lg fa-angle-left"></i>',
          next: '<i class="fa fa-lg fa-angle-right"></i>'
        }
      },
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "{{ __('datatables_all') }}"]],
	  autoWidth: false,
	  ajax: '{!! route('billing.mypaidinvoices') !!}',
      deferRender: true,
      order: [3, 'desc'],
      columns: [
			{ data: 'organisationname', name: 'organisationname' },
			{ data: 'invoicenumber', name: 'invoicenumber' },
			{ data: 'invoicedate', 'type': 'num', 'render': { '_': 'display', 'sort': 'timestamp' } },
			{ data: 'paymentdate', 'type': 'num', 'render': { '_': 'display', 'sort': 'timestamp' } },
			{ data: 'id', name: 'id', orderable: false, searchable: false }
       ],
    });
    
  });
  
    $(function() {
    	return flatpickr('#paymentdate', {
      	disableMobile: true,
      	altInput: true,
      	altFormat: 'd-m-Y',
      	dateFormat: 'Y-m-d',
      	defaultDate: "today"
    	});
	});
	
	$(function() {
    	return flatpickr('#startdate', {
      	disableMobile: true,
      	altInput: true,
      	altFormat: 'd-m-Y',
      	dateFormat: 'Y-m-d',
      	defaultDate: "today"
    	});
	});
	
	$(function() {
    	return flatpickr('#enddate', {
      	disableMobile: true,
      	altInput: true,
      	altFormat: 'd-m-Y',
      	dateFormat: 'Y-m-d',
      	defaultDate: "today"
    	});
	});
	
    $(document).on("click", ".open-Dialog", function () {
         var myInvoiceID = $(this).data('id');
         $(".modal-body #invoiceID").val( myInvoiceID );
    });

</script>
@endpush