@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Penjualan</a></li>
    <li class="breadcrumb-item"><a href="/penjualan/kasir">Kasir</a></li>
    <li class="breadcrumb-item active" aria-current="page">Titipan</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Data Kasir Titipan Order</h6>
        <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
          <thead>
            <tr>
              <th class="kolomNomor">No.</th>
              <th>Nomor Terima Order</th>
              <th>Tanggal Terima Order</th>
              <th>Pelanggan</th>
              <th>Faktur Pajak</th>
              <th>Total</th>
              <th>Status</th>
              <th class="kolomAksi">Aksi</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="card-footer" style="text-align: right;">
        <button type="button" id="tambahKasirTitipan" class="btn btn-info btn-custom1">Tambah Data</button>
        <a class="btn btn-secondary" href="/penjualan/kasir">Kembali</a>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div id="modalKasirTitipan" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Transaksi Kasir Titipan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <label>Masukkan Kode Terima Order</label>
                            <input type="text" name="" id="" class="form-control" placeholder="Masukkan Kode Terima Order">
                        </div>
                        <div class="col-12 mt-3" style="text-align: right;">
                            <button type="button" id="btnSimpanKasirTitipan" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary btn-custom8" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Akhiran Modal -->
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    var URLs = "{{ url('penjualan/kasir') }}";

    let datatable = $('#datatable-serverside').DataTable();

    $('#tambahKasirTitipan').on('click', function(e){
      $('#modalKasirTitipan').modal('show');
    });
  </script>
@endpush