@extends('layouts.base') @section('content-header') <div class="col-12"> <div class="container" style="display: contents"> <div class="row mb-2"> <div class="col-sm-6"> <h1 class="m-0"> Kasir <small>kasir 3.0</small></h1> </div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Kasir</a></li> <li class="breadcrumb-item active">History</li> </ol> </div> </div> </div> </div> @endsection @section('content') <div class="col-12 mt-2"> <div class="container" style="display: contents"> <div class="card"> <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div> <div class="card-header mt-0 pt-0"> <div class="d-flex"> <h3>Daftar Menu</h3> <!-- Button trigger modal --> <div class="ml-auto"> <button type="button" class="btn btn-primary" onclick="tambahMenu()"> Tambah Menu </button> </div> </div> </div> <div class="card-body"> {{-- <h5 class="card-title">Form List Data</h5> --}} <div class="table-responsive mt-3"> <table id="tabelku" class="table table-hover display" style="width: 100%"> <thead> <tr> <th class="text-center">No</th> <th>Kode Produk</th> <th>Nama Produk</th> <th>Harga Produk</th> <th>Kategori Produk</th> <th>Kelompok Kategori</th> <th class="text-center"><i class="fas fa-cog"></i></th> </tr> </thead> </table> </div> </div> </div> </div> </div> <!-- Modal Tambah Menu --> <div class="modal fade" id="modal-produk" data-backdrop="static"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="title-form-menu">Tambah Menu</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="post" id="formMenu" data-url="" data-method=""> <div class="form-group row"> <div class="col-md-6"> <label for="kategori_produk" class="col-form-label">Kategori Produk:</label> <input type="hidden" name="pivot_id" id="pivot_id"> <select type="text" class="form-control select2" id="kategori_produk" name="kategori_produk" onchange="kelompokKategori(this.value)" required> <option value="0">Pilih Kategori</option> @foreach ($kategori_produks as $kategori) <option value="{{ $kategori->id }}">{{ $kategori->nama_kategori_produk }}</option> @endforeach </select> </div> <div class="col-md-6"> <label for="kelompok_produk" class="col-form-label">Kelompok Produk:</label> <select type="text" class="form-control select2" id="kelompok_produk" name="kelompok_produk" required> <option value="default" selected disabled>Pilih Kelompok Produk</option> </select> </div> </div> <div class="form-group row"> <div class="col-md-6"> <label for="kode_produk" class="col-form-label">Kode Produk:</label> <input type="text" class="form-control" id="kode_produk" name="kode_produk" value="" required> </div> <div class="col-md-6"> <label for="nama_produk" class="col-form-label">Nama Produk:</label> <input type="text" class="form-control" id="nama_produk" name="nama_produk" value="" required> </div> </div> <div class="form-group row"> <div class="col-md-6"> <label for="harga_produk" class="col-form-label">Harga Produk:</label> <input type="number" class="form-control" id="harga_produk" name="harga_produk" value="" required> </div> <div class="col-md-6"> <label for="tersedia" class="col-form-label">Tersedia:</label> <select type="text" class="form-control select2" id="tersedia" name="tersedia" required> <option value="1">Iya</option> <option value="0">Tidak</option> </select> </div> </div> <div class="form-group"> <label for="deskripsi_produk" class="col-form-label">Deskripsi Produk:</label> <textarea class="form-control" id="deskripsi_produk" name="deskripsi_produk"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button> <button type="button" class="btn btn-primary" id="btn-simpan-menu" onclick="saveMenu()">Simpan</button> </div> </div> </div> </div> @endsection @push('styles') <!-- Toastr --> <style> @media only screen and (max-width : 991px) { /* Styles */ } @media only screen and (max-width : 768px) { /* Styles */ } @media only screen and (max-width : 414px) { /* Styles */ } </style> <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}"> <link rel="stylesheet" href="{{asset('assets/datatables/datatables.min.css')}}"> @endpush @push('style2') <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}"> @endpush @push('scripts') <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script> <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script> <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script> <script> $(document).ready(function() { $('#tabelku').DataTable({ processing: true, serverSide: true, ajax: "{{ route('menu.getDataMenu') }}", columns: [{ data: 'nomor', name: 'nomor', orderable: false, className: 'text-center' }, { data: 'kode_produk', name: 'kode_produk' }, { data: 'nama_produk', name: 'nama_produk' }, { data: 'harga_produk', name: 'harga_produk' }, { data: 'kategori_produk', name: 'kategori_produk' }, { data: 'nama_kelompok_kategori', name: 'nama_kelompok_kategori' }, { data: 'ubah', name: 'ubah', className: 'text-center' }, ] }) }) </script> <script> $('.select2').select2(); function kelompokKategori(id) { $.ajax({ url: "{{ route('menu.kelompok-kategori', '') }}/" + id, method: "GET", dataType: "json", success: function(response) { console.log(response); $('#kelompok_produk').empty(); if (response.message) { $('#kelompok_produk').append(`<option value="">Pilih Dulu Kategori Produk</option>`); } else { response?.forEach(function(item, index) { $('#kelompok_produk').append( `<option value="${item?.id}">${item?.nama_kelompok_kategori}</option>`) }) } }, error: function(xhr, status, error) { toastr.error(xhr.responseJSON.message, 'Error', { timeOut: 3000 }); } }) } function saveMenu() { document.getElementById('btn-simpan-menu').disabled = true; document.getElementById('btn-simpan-menu').innerText = "Loading..."; var url = $('#formMenu').data('url'); var method = $('#formMenu').data('method'); var data = { _token: "{{ csrf_token() }}", kategori_produk: $('#kategori_produk').val(), kelompok_produk: $('#kelompok_produk').val(), kode_produk: $('#kode_produk').val(), nama_produk: $('#nama_produk').val(), harga_produk: $('#harga_produk').val(), tersedia: $('#tersedia').val(), deskripsi_produk: $('#deskripsi_produk').val(), }; $.ajax({ url: url, method: method, data: data, success: function(result) { if (result.errors) { toastr.error(result.errors, 'Gagal', { timeOut: 2000 }); document.getElementById('btn-simpan-menu').disabled = false; document.getElementById('btn-simpan-menu').innerText = "Simpan"; } else { toastr.success(result.message, 'Berhasil', { timeOut: 2000 }); $('#modal-produk').modal('hide'); $('#formMenu')[0].reset(); document.getElementById('btn-simpan-menu').disabled = false; document.getElementById('btn-simpan-menu').innerText = "Simpan"; // console.log(result); setTimeout(function() { window.location.reload(1); }, 1000); } }, error: function(xhr, status, error) { toastr.error(xhr.responseJSON.message, 'Error', { timeOut: 3000 }); document.getElementById('btn-simpan-menu').disabled = false; document.getElementById('btn-simpan-menu').innerText = "Simpan"; } }); } function tambahMenu() { $('#formMenu')[0].reset(); // $('#kategori_produk').val('').trigger('change'); $('#modal-produk').modal('show'); $('#title-form-menu').text("Tambah Menu"); let formMenu = document.getElementById('formMenu'); formMenu.setAttribute('data-url', "{{ route('menu.store') }}"); formMenu.setAttribute('data-method', "post"); } function editMenu(id) { $('#modal-produk').modal('show'); $('#title-form-menu').text("Ubah Menu"); let formMenu = document.getElementById('formMenu'); formMenu.setAttribute('data-url', "{{ route('menu.update', '') }}/" + id); formMenu.setAttribute('data-method', "put"); $.ajax({ url: "{{ route('menu.show', '') }}/" + id, method: "GET", success: function(response) { console.log(response); $('#kategori_produk').val(response.produk.kategori_produk_id).trigger('change'); $('#kelompok_produk').val(response.kelompok_kategori_id); $('#kode_produk').val(response.produk.kode_produk); $('#nama_produk').val(response.produk.nama_produk); $('#harga_produk').val(response.produk.harga_produk); $('#tersedia').val(response.produk.tersedia); $('#deskripsi_produk').val(response.produk.deskripsi_produk); }, error: function(xhr, status, error) { toastr.error(xhr.responseJSON.message, 'Error', { timeOut: 3000 }); } }) } </script> @endpush