@extends('layouts.admin.app', ["title" => "Data Barang"])


@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Data Barang</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Master Data</a></div>
                <div class="breadcrumb-item">Barang</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">List Barang</h4>
                            <div class="card-header-action">
                                <a href="{{ route('master_barang.create') }}" class="btn btn-success"> <i
                                        class="fas fa-plus"> </i> Tambah Barang</a>
                                {{-- <button type="button" data-toggle="modal" data-target="#filter"
                                    class="btn btn-info"> <i class="fas fa-sort"> </i> Filter</button> --}}
                                <button type="button" data-toggle="modal" data-target="#modal-hapus"
                                    class="btn btn-danger"> <i class="fas fa-trash"> </i> Sampah</a>
                                </button>
                                <!--   -->
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped" id="tableData">
                                    <thead class="table-dark">
                                        <tr>
                                            <th class=" table-no-modal">No</th>
                                            <th>Kode</th>
                                            <th>Nama Barang</th>
                                            <th>Harga Beli</th>
                                            <th>Harga Jual</th>
                                            <th>Harga Grosir</th>
                                            <th>Status</th>
                                            <th class="action">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="action">
                                        {{-- <tr>
                                            <td>1</td>
                                            <td>Create a mobile app</td>
                                            <td>2018-01-20</td>
                                            <td>2018-01-20</td>
                                            <td>2018-01-20</td>
                                            <td>2018-01-20</td>
                                            <td><span class="badge bg-success text-white">Active</span></td>
                                            <td class="d-flex justify-evenly align-items-center">
                                                <a href="" class="btn btn-icon btn-primary">
                                                    <i class="far fa-edit"></i>
                                                </a>
                                                <button class="btn btn-icon btn-danger"
                                                    data-confirm="Hapus?|Apakah Kamu yakin akan menghapus data ini?"
                                                    data-confirm-text-yes="iya" data-confirm-text-cancel="batal"
                                                    data-confirm-yes="alert('Deleted :)');">
                                                    <i class="far fa-trash-can"></i></button>
                                            </td>

                                        </tr> --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
<div class="modal fade" id="modal-hapus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl modal-pembayaran" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="exampleModalLabel">Hapus</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="tableHapus">
                        <thead class="table-dark">
                            <tr>
                                <th class=" table-no-modal">No</th>
                                <th>Kode</th>
                                <th>Nama Barang</th>
                                <th>Harga Beli</th>
                                <th>Harga Jual</th>
                                <th>Grosir</th>
                                <th class="action">Action</th>
                            </tr>
                        </thead>
                        <tbody class="action">
                            {{-- <tr>
                                <td class="action">1</td>
                                <td>Create a mobile app</td>
                                <td>2018-01-20</td>
                                <td>2018-01-20</td>
                                <td>2018-01-20</td>
                                <td>2018-01-20</td>
                                <td class="action">
                                    <a href="{{ route('master_barang.create') }}" class="btn btn-success">Aktifkan</a>
                                </td>

                            </tr> --}}
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
@foreach ($barangs as $barang)

<div class="modal fade modal-delete" id="modal-delete-{{ $barang->id }}" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        {{-- <form class="needs-validation" id="form-customer" novalidate=""> --}}
            {{-- @csrf --}}
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <h5 class="modal-title text-white" id="exampleModalLabel">Peringatan</h5> <button type="button"
                        class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span> </button>
                </div>
                <div class="modal-body">
                    <h6 class="text-dark">Apakah yakin menghapus data {{ $barang->nama }}?</h6>
                </div>
                <div class="modal-footer justify-content-end">
                    <button type="button" class="btn btn-danger btn-hapus" data-id="{{ $barang->id }}">
                        <i class="fas fa-trash-alt me-1"></i> Iya
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Tidak
                    </button>
                </div>
            </div>
            {{--
        </form> --}}
    </div>
</div>
@endforeach
{{-- <div class="modal fade" id="filter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="exampleModalLabel">Filter</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                    aria-label="Close"> <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="row">
                        <div class="form-group col-md-6 col-12">
                            <label>Kategori</label>
                            <select class="form-control select2" id="select-kategori" required>
                                <option value=0 selected>Semua</option>
                                @foreach ($kategoris as $kategori)
                                <option value="{{ $kategori->id }}">{{$kategori->nama}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-12">
                            <label>Penjualan</label>
                            <select class="form-control select2" id="select-grosir" required>
                                <option value=2 selected>Semua</option>
                                <option value="1">Grosir</option>
                                <option value="0">Satuan</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-filter btn-info"> <i class="fas fa-sort"> </i> Filter</button>
            </div>
        </div>
    </div>
</div> --}}

@push('js')

<script>
    $(document).ready(function(){
            tableData();
            tableHapus();
        })
        let token = '{{ $token }}'

        function tableData(){
                $('#tableData').DataTable({
                    lengthChange: false,
                    pageLength: 10,
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    autoWidth: false,
                    language: {
                        search: "Cari:",
                         paginate: {
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }, emptyTable: "Data masih kosong" 

                    },
                    ajax: {
                        url: '/api/barangs',
                        type: "GET",
                        headers: {
                            'Authorization': 'Bearer ' + token
                        },
                        data: function (d) {
                            d.kategori = $('#select-kategori').val();
                            d.grosir = $('#select-grosir').val();
                        },

                    },
                    columns: [{
                        data: null,
                        render: function (data, type, row, meta) {
                                    return meta.row + meta.settings._iDisplayStart + 1;

                        }
                    },

                    {
                        data: 'kode',
                        render: function (data) {
                            return `<span class="badge bg-primary text-white">${data}</span>`;
                        }
                    },

                    { data: 'nama' },

                     {
                        data: 'harga_beli',
                        render: function (data) {
                     return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)},00</span>`;
                        }
                    },
                    {
                        data: 'harga_jual',
                        render: function (data) {
                     return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)},00</span>`;
                        }
                    },
                    {
                        data: 'is_grosir',
                        render: function (data, type, row) {

                            if (!Array.isArray(row.grosir) || row.grosir.length === 0) {
                                return 'Tidak dijual Grosir';
                            }

                                let hasil = row.grosir.map(item =>{  
        return `<span style="float:left">Rp</span> <span style="float:right"> ${rupiah(item.harga)},00/${rupiah(item.min_qty)} ${row.satuan?.nama ??'Qty'}</span>`;
                            }
    )
                               let output = hasil.join('<br>');
                            return output;

                        }
                    },
                    {
                        data: null,
                        render: function () {
                            return `<span class="badge bg-success text-white">Active</span>`;
                        }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {

                            return `
                                                                <a href="/master_barang/${row.id}/edit" class="btn btn-icon btn-primary">
                                                                    <i class="far fa-edit"></i>
                                                                </a>
                                                              <button class="btn btn-icon btn-danger" type="button"
                                                                     data-toggle="modal" data-target="#modal-delete-${row.id}">
                                                                    <i class="far fa-trash-can"></i>
                                                                </button>
                                                            `;
                        }
                    }]
                });
            };
        function tableHapus(){
                $('#tableHapus').DataTable({
                   lengthChange: false,
                    pageLength: 10,
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    autoWidth: false,
                    language: {
                        search: "Cari:",
                         paginate: {
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }, emptyTable: "Data masih kosong" 

                    },
                    ajax: {
                        url: '/api/barangs/delete',
                        type: "GET",
                        headers: {
                            'Authorization': 'Bearer ' + token
                        }

                    },
                    columns: [{
                        data: null,
                        render: function (data, type, row, meta) {
                                    return meta.row + meta.settings._iDisplayStart + 1;

                        }
                    },

                    {
                        data: 'kode',
                        render: function (data) {
                            return `<span class="badge bg-primary text-white">${data}</span>`;
                        }
                    },

                    { data: 'nama' },

              
                     {
                        data: 'harga_beli',
                        render: function (data) {
                     return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)},00</span>`;
                        }
                    },
                    {
                        data: 'harga_jual',
                        render: function (data) {
                     return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)},00</span>`;
                        }
                    },
                    {
                        data: 'is_grosir',
                        render: function (data, type, row) {

                            if (!Array.isArray(row.grosir) || row.grosir.length === 0) {
                                return 'Tidak dijual Grosir';
                            }

                                let hasil = row.grosir.map(item =>{  
        return `<span style="float:left">Rp</span> <span style="float:right"> ${rupiah(item.harga)},00/${item.min_qty} ${row.satuan?.nama ?? 'Qty'}</span>`;
                            }
    )
                               let output = hasil.join('<br>');
                            return output;

                        }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {

                         return `
                                                    <button type="button" class="btn btn-success btn-restore" data-id="${row.id}">
                            Aktifkan
                        </button>
                                                `;
                        }
                    }]
                });

            };
             function hapus(barang_id) {

                $.ajax({
                    url: '/api/barangs/delete/' + barang_id,
                    type: "Put",
                    cache: false,
                    data: {
                        is_active: 0,
                        is_deleted: 1,
                        user_deleted: {{ auth()->user()->id }},
                    },
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: response.data.message,
                            showConfirmButton: false,
                            timer: 500
                        }).then(() => {
                            $('.modal-delete').modal('hide');
                            $('#tableData').DataTable().ajax.reload(null, false);
                            $('#tableHapus').DataTable().ajax.reload(null, false);


                        });
                    }
                })
            }
             function restore(barang_id) {

                $.ajax({
                    url: '/api/barangs/restore/' + barang_id,
                    type: "Put",
                    cache: false,
                    data: {
                        is_active: 1,
                        is_deleted: 0
                    },
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: response.data.message,
                            showConfirmButton: false,
                            timer: 500
                        }).then(() => {
                            $('#tableData').DataTable().ajax.reload(null, false);
                            $('#tableHapus').DataTable().ajax.reload(null, false);


                        });
                    }
                })
            }
               $('.btn-hapus').click(function (e) {
                let barang_id = $(this).data('id');
                hapus(barang_id);

            });
                $('#tableHapus').on('click', '.btn-restore', function () {
                let barangId = $(this).data('id');

                // $(this).addClass('btn-progress disabled');$(this).html(' ');
                restore(barangId);

            })
            //    $('.btn-filter').click(function (e) {
            //                           $('#filter').modal('hide');
            //                             $('#tableData').DataTable().ajax.reload(null, false);


            //     // $(this).addClass('btn-progress disabled');$(this).html(' ');

            // })


</script>
@endpush