@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 active" aria-current="page">Promo</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="table-responsive">
          <h6 class="card-title">Data Promo</h6>
          <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
            <thead>
              <tr>
                <th class="kolomNomor">No.</th>
                <th>Nama Promo</th>
                <th>Tanggal Mulai</th>
                <th>Tanggal Berakhir</th>
                <th>Produk</th>
                <th>Jumlah Pembelian</th>
                <th>Satuan Pembelian</th>
                <th>Jenis Promo</th>
                <th class="kolomAksi">Aksi</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="card-footer" style="text-align: right;">
        @can('promo.create')
            <button class="btn btn-info btn-custom1" id="tambahPromo">Tambah Data</button>
        @endcan
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalPromo" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Promo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_promo" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Promo</label>
                                <input type="text" class="form-control required" name="nama" autocomplete="off" placeholder="Nama Promo">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tanggal Mulai</label>
                                <input type="date" class="form-control required" name="tanggal_mulai" autocomplete="off" placeholder="Tanggal Mulai">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tanggal Berakhir</label>
                                <input type="date" class="form-control required" name="tanggal_berakhir" autocomplete="off" placeholder="Tanggal Berakhir">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Produk</label>
                                <select id="produk" class="form-control select2CustomModalPromo" multiple="true">
                                    @foreach ($produk as $item)
                                        <option value="{{ $item->id }}">{{ cetakNamaProduk($item->kode, $item->nama, $item->parent_id, $item->kode_parent, $item->nama_parent) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Jumlah Pembelian</label>
                                <input type="text" class="form-control" name="jumlah_pembelian" autocomplete="off" placeholder="Jumlah Pembelian">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Satuan Pembelian</label>
                                <select name="satuan_pembelian" id="satuan_pembelian" class="form-control">
                                    <option value="">Pilih Satuan</option>
                                    <option value="ROLL">ROLL</option>
                                    <option value="KG">KG</option>
                                    <option value="DUS">DUS</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Jenis Promo</label>
                                <select name="jenis_promo" id="jenis_promo" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="diskon">Diskon</option>
                                    <option value="free-gift">Free Gift</option>
                                    <option value="voucher">Voucher</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6 bagianDiskon" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Jenis Diskon</label>
                                <select name="jenis_diskon" id="jenis_diskon" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="nominal">Nominal</option>
                                    <option value="persen">Persen</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6 bagianDiskon" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Nominal Diskon</label>
                                <input type="text" class="form-control" name="nominal_diskon" autocomplete="off" placeholder="Nominal Diskon">
                            </div>
                        </div>
                        <div class="col-6 bagianDiskon" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Maksimal Diskon</label>
                                <input type="text" class="form-control" name="maksimal_diskon" autocomplete="off" placeholder="Maksimal Diskon">
                            </div>
                        </div>
                        <div class="col-6 bagianFreeGift" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Keterangan Free Gift</label>
                                <input type="text" class="form-control" name="keterangan_free_gift" autocomplete="off" placeholder="Keterangan Free Gift">
                            </div>
                        </div>
                        <div class="col-6 bagianVoucher" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Kode Voucher</label>
                                <input type="text" class="form-control" name="kode_voucher" autocomplete="off" placeholder="Kode Voucher">
                            </div>
                        </div>
                        <div class="col-6 bagianVoucher" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Nominal Voucher</label>
                                <input type="text" class="form-control" name="nominal_voucher" autocomplete="off" placeholder="Nominal Voucher">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanPromo" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalLihatPromo" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Lihat Detail Promo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <div class="mb-3">
                            <label class="form-label">Jenis Promo</label>
                            <select id="jenis_promo2" class="form-control required">
                                <option value="">Silahkan Pilih</option>
                                <option value="diskon">Diskon</option>
                                <option value="free-gift">Free Gift</option>
                                <option value="voucher">Voucher</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-6 bagianDiskon2" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Jenis Diskon</label>
                            <select id="jenis_diskon2" class="form-control">
                                <option value="">Silahkan Pilih</option>
                                <option value="nominal">Nominal</option>
                                <option value="persen">Persen</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-6 bagianDiskon2" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Nominal Diskon</label>
                            <input type="text" class="form-control" id="nominal_diskon2" autocomplete="off" placeholder="Nominal Diskon">
                        </div>
                    </div>
                    <div class="col-6 bagianDiskon2" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Maksimal Diskon</label>
                            <input type="text" class="form-control" id="maksimal_diskon2" autocomplete="off" placeholder="Maksimal Diskon">
                        </div>
                    </div>
                    <div class="col-6 bagianFreeGift2" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Keterangan Free Gift</label>
                            <input type="text" class="form-control" id="keterangan_free_gift2" autocomplete="off" placeholder="Keterangan Free Gift">
                        </div>
                    </div>
                    <div class="col-6 bagianVoucher2" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Kode Voucher</label>
                            <input type="text" class="form-control" id="kode_voucher2" autocomplete="off" placeholder="Kode Voucher">
                        </div>
                    </div>
                    <div class="col-6 bagianVoucher2" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Nominal Voucher</label>
                            <input type="text" class="form-control" id="nominal_voucher2" autocomplete="off" placeholder="Nominal Voucher">
                        </div>
                    </div>
                    <div class="col-12" style="text-align: right;">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modalBarang" 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">Data Barang</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">
                            <table class="table table-sm" id="tableBarang" style="width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th style="white-space: normal; word-break:break-all;">Nama Barang</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-12 mt-3" style="text-align: right;">
                            <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/promo') }}";

    // $('#datatable-serverside').DataTable();
    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      responsive: true,
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data',
      columns: [
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'nama', name: 'nama'},
        {data: 'tanggal_mulai', name: 'tanggal_mulai'},
        {data: 'tanggal_berakhir', name: 'tanggal_berakhir'},
        {data: 'produk', name: 'produk'},
        {data: 'jumlah_pembelian', name: 'jumlah_pembelian'},
        {data: 'satuan_pembelian', name: 'satuan_pembelian'},
        {data: 'jenis_promo', name: 'jenis_promo'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
    });

    $('#jenis_promo').on('change', function(e){
        var isian = $('#jenis_promo').val();

        $('.bagianDiskon, .bagianFreeGift, .bagianVoucher').hide().val('');
        if(isian != null && isian != ''){
            if(isian == 'diskon'){
                $('.bagianDiskon').show();
                $('.bagianFreeGift, .bagianVoucher').hide();
            }else if(isian == 'free-gift'){
                $('.bagianFreeGift').show();
                $('.bagianDiskon, .bagianVoucher').hide();
            }else if(isian == 'voucher'){
                $('.bagianVoucher').show();
                $('.bagianDiskon, .bagianFreeGift').hide();
            }
        }
    });

    $('#modalPromo').on('shown.bs.modal', function() {
        $('.select2CustomModalPromo').select2({
            dropdownParent: $('#modalPromo .modal-content'),
            width: '100%'
        });
    });

    $('#tambahPromo').on('click', function(e){
        stat = "add";
        $('#modalPromo').modal('show');
    });

    $('#btnSimpanPromo').on('click', function(e){
        if (cekForm('form_promo') == true) {
            var data = $('#form_promo').serialize();
            data += "&_token={{ csrf_token() }}";
            data += "&produk="+$('#produk').val().join(',');

            if (stat == "add") {
                sendJson(URLs+"/add", data, rSends);
            }else{
                data.append("id", IDs);
                sendJson(URLs+"/update", data, rSends);
            }
        }
    });

    function hapusData(id){
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function(){
            var data = {act: "delete", id: id, _token:'{{ csrf_token() }}'};
            sendJson(URLs+"/delete", data, rSends);
        })
    }

    var jenisPromo = null;
    function lihatPromo(jenis_promo, id){
        jenisPromo = jenis_promo;
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs+"/read", data, rLihatPromo);
    }
    
    function rLihatPromo(data){
        $('#modalLihatPromo').modal('show');

        $('#jenis_promo2').val(jenisPromo);
        if(jenisPromo == 'diskon'){
            $('#jenis_diskon2').val(data.jenis_diskon);
            $('#nominal_diskon2').val(formatNumberComma(parseFloat(data.nominal_diskon)));
            $('#maksimal_diskon2').val(formatNumberComma(parseFloat(data.maksimal_diskon)));
            $('.bagianDiskon2').show();
            $('.bagianFreeGift2, .bagianVoucher2').hide();
        }else if(jenisPromo == 'free-gift'){
            $('#keterangan_free_gift2').val(data.keterangan_free_gift);
            $('.bagianFreeGift2').show();
            $('.bagianDiskon2, .bagianVoucher2').hide();
        }else if(jenisPromo == 'voucher'){
            $('#kode_voucher2').val(data.kode_voucher);
            $('#nominal_voucher2').val(formatNumberComma(parseFloat(data.nominal_voucher)));
            $('.bagianVoucher2').show();
            $('.bagianDiskon2, .bagianFreeGift2').hide();
        }
        swal.close();
    }

    function lihatBarang(id){
        var pelanggan = $('#id_pelanggan').val();

        var data = {
            _token: "{{ csrf_token() }}",
            id_promo: id
        };
        sendJson(URLs + '/barang', data, rBarang);
    }

    function rBarang(data) {
        $('#tableBarang').DataTable().clear().destroy();
        $('#modalBarang').modal('show');
        $.each(data, function(i, v) {
            $('#tableBarang tbody').append(
            '<tr>' +
            '<td style="width: 100% !important; white-space: normal; word-break:break-all;">' +
                `${v}`
            + '</td>' +
            '</tr>'
            );
        });
        swal.close();
    }

    $('#modalPromo').on('hidden.bs.modal', function(e){
        $('#form_promo input').val('');
        $('#form_promo select').val('').trigger('change');
        IDs = '';
        stat = '';
    });
    $('#modalLihatPromo').on('hidden.bs.modal', function(e){
        
        $('.bagianDiskon2, .bagianFreeGift2, .bagianVoucher2').hide();
        IDs = '';
        stat = '';
        jenisPromo = null;
    });
  </script>
@endpush