{{-- layout extend --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title','App Invoice List')

{{-- vendor styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css"
  href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/dataTables.checkboxes.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/sweetalert/sweetalert.css')}}">
@endsection

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-invoice.css')}}">
@endsection

{{-- page content --}}
@section('content')
<!-- invoice list -->
<section class="invoice-list-wrapper section">
  <!-- create invoice button-->
  <!-- Options and filter dropdown button-->
  {{-- <div class="invoice-filter-action mr-3">
    <a href="javascript:void(0)" class="btn waves-effect waves-light invoice-export border-round z-depth-4">
      <i class="material-icons">picture_as_pdf</i>
      <span class="hide-on-small-only">Export to PDF</span>
    </a>
  </div> --}}
  <!-- create invoice button-->
  <div class="invoice-create-btn">
     <!-- Modal Trigger -->
     <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Buat Baru</a>
     <!-- Modal Structure -->
     <div id="modal1" class="modal modal-fixed-footer">
        <div class="modal-content">
          <h4>Tambah Data</h4>
          <form class="row" method="POST" action="{{ route('invoice.store') }}">
            @csrf
            <div class="col s12">
              <div class="input-field col s12">
                <input id="nama" type="text" name="name" class="validate" required>
                <label for="nama">Nama Pembukuan</label>
              </div>
            </div>
            <div class="col s12">
              <div class="input-field col s12">
                <input placeholder="Placeholder" id="start_date" name="start_date" type="date" class="validate" required>
                <label for="first_name1">Dari</label>
              </div>
              <div class="input-field col s12">
                <input placeholder="Placeholder" id="end_date" name="end_date" type="date" class="validate" required>
                <label for="last_name">Last Name</label>
              </div>
            </div>
        </div>
        <div class="modal-footer">
          <button class="modal-action modal-close waves-effect waves-green btn-flat ">Simpan</button>
        </div>
      </form>
     </div>
  </div>
  <div class="filter-btn">
    <!-- Dropdown Trigger -->
    <a class='dropdown-trigger btn waves-effect waves-light purple darken-1 border-round' href='#'
      data-target='btn-filter'>
      <span class="hide-on-small-only">Filter Invoice</span>
      <i class="material-icons">keyboard_arrow_down</i>
    </a>
    <!-- Dropdown Structure -->
    <ul id='btn-filter' class='dropdown-content'>
      <li><a href="#!">Paid</a></li>
      <li><a href="#!">Unpaid</a></li>
      <li><a href="#!">Partial Payment</a></li>
    </ul>
  </div>
  <div class="responsive-table">
    <table class="table invoice-data-table white border-radius-4 pt-1">
      <thead>
        <tr>
          <!-- data table responsive icons -->
          <th></th>
          <!-- data table checkbox -->
          <th></th>
          <th>Date</th>
          <th>
            <span>Nama Pembukuan</span>
          </th>
          <th></th>
          <th></th>
          <th>Pemasukan</th>
          <th>Pengeluaran</th>
          <th>Action</th>
        </tr>
      </thead>

      <tbody>
        @foreach ($invoices as $invoice)
        <tr>
          <td></td>
          <td></td>
          <td>{{ $invoice->getDate() }}</td>
          <td>
            <span>{{ $invoice->name }}</span>
          </td>
          <td><span class="invoice-amount"></span></td>
          <td><span class="invoice-customer"></span></td>
          <td>
            <span class="chip lighten-5 green green-text">
              <span style='font-size: 20px; color: green'>&#11014; {{ $invoice->getPemasukan() }}</span>
            </span>
          </td>
          <td>
            <span class="chip lighten-5 red red-text">
              <span style='font-size: 20px; color: red'>&#11015; {{ $invoice->getPengeluaran() }}</span>
            </span>
          </td>
          <td>
            <div class="invoice-action">
              @if($invoice->status == 0)
                <a href="{{ route('pembukuan', ['id' => $invoice->id]) }}" class="waves-effect waves-light btn-large mb-1 mr-1 white-text">
                  Atur
                </a>
              @else
                <a href="{{ route('pembukuan', ['id' => $invoice->id]) }}" class="waves-effect waves-light green btn-large mb-1 mr-1 white-text">
                  Cetak dan Print
                </a>
              @endif
            </div>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</section>
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
<script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/js/datatables.checkboxes.min.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')
<script src="{{asset('js/scripts/app-invoice.js')}}"></script>
<script>
  $(function() {
    $('.modal').modal();
  });
</script>
@if(session('success'))
<script src="{{asset('vendors/sweetalert/sweetalert.min.js')}}"></script>
  <script>
    swal({
			title: 'Success',
			icon: 'success'
		})
  </script>  
@endif
@endsection