{{-- 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')}}">
<style>
  label {
    font-size: 20px !important;
    color: white !important;
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: white !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: white !important;
    border: none;
    background: linear-gradient(to bottom, #9575cd 5%, #4527a0 100%);
    border-radius: 4px;
}

input[type=search]:not(.browser-default), textarea.materialize-textarea {
    background-color: transparent;
    border: none;
    border-bottom: 3px solid white;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 8px 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: box-shadow 0.3s, border 0.3s;
}
</style>
@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 -->
<h4 class="white-text">{{ $pembukuan->getdate() }}</h4>
<div id="card-stats" class="pt-0">
   @if($pembukuan->status == 0)
   <div class="row">
      <div class="col s12 m6 l6 xl3">
          <div class="card gradient-45deg-light-blue-cyan gradient-shadow min-height-100 white-text animate fadeLeft">
             <div class="padding-4">
                <div class="row">
                   <div class="col s7 m7">
                      <p>Saldo Sebelumnya</p>
                      <h5 class="white-text">{{ 'Rp.'.number_format($saldo, 0, ",", ","); }}</h5>
                   </div>
                </div>
             </div>
          </div>
       </div>
      <div class="col s12 m6 l6 xl3">
          <div class="card gradient-45deg-green-teal gradient-shadow min-height-100 white-text animate fadeRight">
             <div class="padding-4">
                <div class="row">
                   <div class="col s7 m7">
                      <p>Pemasukan</p>
                      <h5 class="white-text">{{ 'Rp.'.number_format($total_pemasukan, 0, ".", ","); }}</h5>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="col s12 m6 l6 xl3">
          <div class="card gradient-45deg-red-pink gradient-shadow min-height-100 white-text animate fadeLeft">
             <div class="padding-4">
                <div class="row">
                   <div class="col s7 m7">
                      <p>Pengeluaran</p>
                      <h5 class="white-text">{{ 'Rp.'.number_format($total_pengeluaran, 0, ",", ","); }}</h5>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="col s12 m6 l6 xl3">
          <div class="card gradient-45deg-amber-amber gradient-shadow min-height-100 white-text animate fadeRight">
             <div class="padding-4">
                <div class="row">
                   <div class="col s7 m7">
                      <p>Saldo Setelah Di Akumulasi</p>
                      <h5 class="white-text">{{ 'Rp.'.number_format($saldo_akumulasi, 0, ",", ","); }}</h5>
                   </div>
                </div>
             </div>
          </div>
       </div>
  </div>
   @else
   <div class="row">
      <div class="col s12 m6 l6 xl3">
          <div class="card gradient-45deg-light-blue-cyan gradient-shadow min-height-100 white-text animate fadeLeft">
             <div class="padding-4">
                <div class="row">
                   <div class="col s7 m7">
                      <p>Saldo Sebelumnya</p>
                      <h5 class="white-text">{{ 'Rp.'.number_format($pembukuan->saldo_sebelum, 0, ",", ","); }}</h5>
                   </div>
                </div>
             </div>
          </div>
       </div>
      <div class="col s12 m6 l6 xl3">
          <div class="card gradient-45deg-green-teal gradient-shadow min-height-100 white-text animate fadeRight">
             <div class="padding-4">
                <div class="row">
                   <div class="col s7 m7">
                      <p>Pemasukan</p>
                      <h5 class="white-text">{{ 'Rp.'.number_format($pembukuan->pemasukan, 0, ".", ","); }}</h5>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="col s12 m6 l6 xl3">
          <div class="card gradient-45deg-red-pink gradient-shadow min-height-100 white-text animate fadeLeft">
             <div class="padding-4">
                <div class="row">
                   <div class="col s7 m7">
                      <p>Pengeluaran</p>
                      <h5 class="white-text">{{ 'Rp.'.number_format($pembukuan->pengeluaran, 0, ",", ","); }}</h5>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="col s12 m6 l6 xl3">
          <div class="card gradient-45deg-amber-amber gradient-shadow min-height-100 white-text animate fadeRight">
             <div class="padding-4">
                <div class="row">
                   <div class="col s7 m7">
                      <p>Saldo Setelah Di Akumulasi</p>
                      <h5 class="white-text">{{ 'Rp.'.number_format($pembukuan->saldo_sesudah, 0, ",", ","); }}</h5>
                   </div>
                </div>
             </div>
          </div>
       </div>
  </div>
   @endif
</div>
<div style="padding-left: 30px">
   <div class="p4 row">
      @if($pembukuan->status == 0)
         <div class="col-sm">
            <h4>jika ingin mencetak laporan, pastikan laporan anda sudah benar dan klik setujui laporan !</h4>
         </div>
         <div class="col-sm">
            <button onclick="acceptLaporan({{ $pembukuan->id }})" class="mb-2  waves-effect waves-light btn-large blue lightrn-1">Setujui Laporan ini</button>
         </div>
      @else
         <div class="col-sm">
            <h4>Laporan ini sudah disetujui ✔️</h4>
         </div>
         <div class="col-sm">
            <a href="{{ route('invoice.print', ['id' => $pembukuan->id]) }}" class="mb-2 waves-effect waves-light btn-large green lightrn-1">Cetak Laporan !</a>
         </div>
      @endif
   </div>
</div>
<div class="card gradient-45deg-cyan-light-green" style="border-radius: 10px">
    <div class="card-content">
      <span class="card-title">
        <h3 class="white-text">Pemasukan</h3>
      </span>
      <section class="invoice-list-wrapper section">
           <!-- Modal Trigger -->
           @if($pembukuan->status == 0)
            <a class="mb-2 waves-effect waves-light purple lightrn-1 btn modal-trigger" style="float: right" href="#modal1">tambah pemasukan</a>
           @endif
           <!-- Modal Structure -->
           <div id="modal1" class="modal modal-fixed-footer">
              <div class="modal-content">
                 <h4>Data Pemasukan</h4>
                 <form class="row" method="POST" action="{{ route('pembukuan.store') }}">
                    @csrf
                    <div class="col s12">
                       <div class="input-field col s12">
                          <input id="nama" type="text" name="description" class="validate" placeholder="Deskripsi" required>
                          <label for="nama">Nama Pembukuan</label>
                       </div>
                    </div>
                    <div class="col s12">
                       <div class="input-field col s12">
                          <input placeholder="uang" id="price" name="price" type="number" class="validate" required>
                          <label for="first_name1">Uang</label>
                       </div>
                    </div>
                    <input type="hidden" name="date_id" value="{{ $data_id }}">
                    <input type="hidden" name="type" value="pemasukan">
              </div>
              <div class="modal-footer">
                 <button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat ">Simpan</button>
              </div>
              </form>
           </div>
        <div class="responsive-table">
             <!-- Modal Trigger -->
            <table class="table table-striped white border-radius-4 pt-1" id="pemasukan">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Deskripsi</th>
                    <th scope="col">Uang</th>
                    @if($pembukuan->status == 0)
                     <th scope="col">operasi</th>
                    @endif
                  </tr>
                </thead>
                <tbody>
                  @foreach ($data as $value)
                     @if($value->type == 'pemasukan')
                     <tr>
                        <th scope="row">1</th>
                        <td><span style="font-size: 18px;">{{ $value->description }}</span></td>
                        <td><span style="font-size: 18px; color: green">{{ number_format($value->price, 0, ".", ",") }}</span></td>
                        @if($pembukuan->status == 0)
                        <td>
                           {{-- <button class="mb-6 btn waves-effect waves-light gradient-45deg-light-blue-cyan">ubah</button> --}}
                           <a onclick="deleteData({{ $value->id }})" class="mb-6 btn waves-effect waves-light red darken-4">hapus</a>
                       </td>
                        @endif
                      </tr>
                     @endif
                  @endforeach
                </tbody>
              </table>
        </div>
      </section>
    </div>
</div>

<div class="card gradient-45deg-red-pink" style="border-radius: 10px">
    <div class="card-content">
      <span class="card-title">
        <h3 class="white-text">Pengeluaran</h3>
      </span>
      <section class="invoice-list-wrapper section">
        <div class="responsive-table">
             <!-- Modal Trigger -->
            @if($pembukuan->status == 0)
               <a class="mb-2 waves-effect waves-light purple lightrn-1 btn modal-trigger" style="float: right" href="#modal2">tambah pengeluaran</a>
            @endif
           <!-- Modal Structure -->
           <div id="modal2" class="modal modal-fixed-footer">
              <div class="modal-content">
                 <h4>Data Pengeluaran</h4>
                 <form class="row" method="POST" action="{{ route('pembukuan.store') }}">
                    @csrf
                    <div class="col s12">
                       <div class="input-field col s12">
                          <input id="nama" type="text" name="description" class="validate" placeholder="Deskripsi" required>
                          <label for="nama">Nama Pembukuan</label>
                       </div>
                    </div>
                    <div class="col s12">
                       <div class="input-field col s12">
                          <input placeholder="uang" id="price" name="price" type="number" class="validate" required>
                          <label for="first_name1">Uang</label>
                       </div>
                    </div>
                    <input type="hidden" name="date_id" value="{{ $data_id }}">
                    <input type="hidden" name="type" value="pengeluaran">
              </div>
              <div class="modal-footer">
                 <button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat ">Simpan</button>
              </div>
              </form>
           </div>
            <table class="table table-striped white border-radius-4 pt-1" id="pengeluaran">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Deskripsi</th>
                    <th scope="col">Uang</th>
                    @if($pembukuan->status == 0)
                     <th scope="col">operasi</th>
                    @endif
                  </tr>
                </thead>
                <tbody>
                  @foreach ($data as $value)
                  @if($value->type == 'pengeluaran')
                  <tr>
                     <th scope="row">1</th>
                     <td><span style="font-size: 18px;">{{ $value->description }}</span></td>
                     <td><span style="font-size: 18px; color: red">{{ number_format($value->price, 0, ".", ",") }}</span></td>
                     @if($pembukuan->status == 0)
                     <td>
                        {{-- <button class="mb-6 btn waves-effect waves-light gradient-45deg-light-blue-cyan">ubah</button> --}}
                        <a onclick="deleteData({{ $value->id }})" class="mb-6 btn waves-effect waves-light red darken-4">hapus</a>
                     </td>
                     @endif
                   </tr>
                  @endif
                  @endforeach
                </tbody>
              </table>
        </div>
      </section>
    </div>
</div>
@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/pembukuan.js')}}"></script>
<script src="{{asset('vendors/sweetalert/sweetalert.min.js')}}"></script>
<script>
$(document).ready(function () {
    $('#pengeluaran').DataTable();
});

$(document).ready(function () {
    $('#pemasukan').DataTable();
});
</script>
<script>
   $(function() {
     $('#modal1').modal();
   });
   $(function() {
     $('#modal2').modal();
   });
 </script>
@if(session('success'))
  <script>
    swal({
			title: 'Success',
			icon: 'success',
         text: '{{ session("success")["message"]}}',
		})
  </script>  
@endif
<script>
   function deleteData(id) {
      const url = "{{ url('/app-invoice-list/pembukuan/delete') }}/"+id;
      swal({
			title: "apakah anda yakin?",
			text: "ingin menghapus data ini?",
			icon: 'warning',
			buttons: {
				cancel: true,
				delete: 'ya, saya ingin menghapusnya'
			}
		}).then(function (willDelete) {
			if (willDelete) {
            window.location.href= url;
			} else {
				swal("Your imaginary file is safe", {
					title: 'Cancelled',
					icon: "error",
				});
			}
		});
   }
</script>

<script>
   function acceptLaporan(id) {
      const url = "{{ url('/app-invoice-list/accept') }}/"+id;
      swal({
			title: "apakah anda yakin?",
			text: "menyetujui laporan ini?",
			icon: 'warning',
			buttons: {
				cancel: true,
				delete: 'ya, saya ingin menyetujuinya'
			}
		}).then(function (willAccept) {
			if (willAccept) {
            window.location.href= url;
			} else {
				swal("anda batal menyetujuinya", {
					title: 'membatalkan',
					icon: "error",
				});
			}
		});
   }
</script>
@endsection