@extends('layouts.app-2')
@section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">JO DP Detail</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item">JO </li>
          <li class="breadcrumb-item active">Draft </li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="card">
      <div class="card-header ">
        <h3 class="card-title ">Daftar Site
          <br><b>Grand Total : {{formatRupiah($grandTotal)}}</b>

          <br>
          <!-- Button trigger modal -->
          <button type="button" id="{{$joborder->id}}" data-toggle="modal" data-target="#exampleModal" class="btn btn-primary">
            Payment
          </button>

          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Konfirmasi Pembayaran Dp</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">Job Order</th>
                        <th scope="col">Site</th>
                        <th style="text-align:right;" scope="col">Grand Total</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>{{$joborder->kode_jo}}</td>
                        <td>{{$orders->count()}}</td>
                        <td style="text-align:right;">{{formatRupiah($grandTotal)}}</td>
                      </tr>
                      <tr>
                        <td style="text-align:right;" colspan="2">Total Dp 20%</td>
                        <td style="text-align:right;"><b>{{formatRupiah($grandTotal*0.2)}}</b></td>
                      </tr>
                      <tr>
                        <td style="text-align:right;" colspan="2">Sisa Pembayaran</td>
                        <td style="text-align:right;">{{formatRupiah($grandTotal*0.8)}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <input type="hidden" name="amount" id="amount" value="{{$grandTotal*0.2}}">
                <input type="hidden" name="productDetail" id="productDetail" value="Pembayaran DP 20 Job Order {{$joborder->kode_jo}}">
                <input type="hidden" name="email" id="email" value="{{$joborder->pelanggan->email}}">
                <input type="hidden" name="phoneNumber" id="phoneNumber" value="{{$joborder->pelanggan->no_pm}}">
                <input type="hidden" name="customer" id="customer" value="{{$joborder->pelanggan->nama}}">
                <input type="hidden" name="alamat" id="alamat" value="{{$joborder->pelanggan->alamat}}">

                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button id="{{$joborder->id}}" onclick="payment(this);" class="btn btn-primary">Payment</button>
                </div>
              </div>
            </div>
          </div>
        </h3>
      </div>
      <!-- /.card-header -->
      <div class="card-body">
        <table id="example1" class="table table-bordered table-striped">
          <!-- <thead> -->
          <!-- <tr>
            <td colspan="3">Grand Total</td>
            <td>Harga</td>
          </tr> -->
          <!-- </thead> -->
          <thead>
            <tr>
              <th>No</th>
              <th>Site</th>
              <th>Alamat</th>
              <th>Harga</th>
              {{-- <th style="text-align: right">Action</th> --}}
            </tr>
          </thead>
          <tbody>
            @foreach ($orders as $order)
            <tr>
              <td>{{++$i}}</td>
              <td>{{$order->site}}</td>
              <td>{{$order->alamat}}</td>
              <td><b>{{formatRupiah($order->grand_total)}}</b></td>
            </tr>
            @endforeach

          </tbody>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
  </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection

@push('datatables')
<script>
  $(function() {
    $("#example1").DataTable({
      "responsive": true,
      "autoWidth": false,
    });
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
@endpush

@push('custom')
<script>

</script>
@endpush