@extends('layouts.mainlayout')

@section('title','Packaging')


@section('tombol+')
<div class="ms-md-auto py-2 py-md-0">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-round" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Entri Data
    </button>
</div>
@endsection

@section('header+')
<ul class="breadcrumbs mb-3">
    <li class="nav-home">
        <a href="#">
            <i class="icon-home"></i>
        </a>
    </li>
    <li class="separator">
        <i class="icon-arrow-right"></i>
    </li>
    <li class="nav-item">
        <a href="#">Barang</a>
    </li>
    <li class="separator">
        <i class="icon-arrow-right"></i>
    </li>
    <li class="nav-item">
        <a href="#">Packaging</a>
    </li>
</ul>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Packaging</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="basic-datatables"
                        class="display table table-bordered table-striped table-hover nowrap-table text-center">
                        <thead class="table-success">
                            <tr>
                                <th>NO</th>
                                <th>PACKAGING</th>
                                <th>AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($table_packaging as $Barang)
                            <tr>
                                <td>{{$loop->iteration }}</td>
                                <td>{{$Barang->PACKAGING}}</td>
                                <td class="text-center">
                                    <button href="#" class="btn btn-xs btn-warning editBtn"
                                        data-id="{{ $Barang->id_packaging }}" data-packaging="{{ $Barang->PACKAGING }}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button href="#" class="btn btn-xs btn-danger deleteBtn"
                                        data-id="{{ $Barang->id_packaging }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Input -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="FormInput">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Form Input Packaging</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="packagings" class="form-label">Packaging</label>
                        <input type="text" class="form-control" id="packagings" name="packagings" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Simpan</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="FormEdit">
                @csrf
                <input type="hidden" id="edit_id" name="id">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Form Edit Packaging</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_packagings" class="form-label">Packaging</label>
                        <input type="text" class="form-control" id="edit_packagings" name="edit_packagings" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Delete -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="FormDelete">
                @csrf
                <input type="hidden" id="delete_id" name="id">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Konfirmasi hapus data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="delete_packagings" class="form-label">Apakah anda yakin menghapus data berikut
                            ?</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary ">Ya</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('Script')
<!-- Script -->
<script>
    $(document).ready(function() {
                $('#FormInput').on('submit', function(e) {
                    e.preventDefault(); // cegah reload
            
                    $.ajax({
                        url: "{{ route('PackagingBarang.add') }}",
                        method: "POST",
                        data: $(this).serialize(),
                        success: function(response) {
                            alert('Data berhasil disimpan!');
                            $('#exampleModal').modal('hide');
                            $('#FormInput')[0].reset();
                            location.reload(); // reload page biar data tampil (atau update table via JS)
                        },
                        error: function(xhr) {
                            alert('Gagal menyimpan data!');
                        }
                    });
                });
            });
</script>

<script>
    $(document).ready(function() {
        $(document).on('click', '.editBtn', function () {
            let id = $(this).data('id');
            let mounting = $(this).data('packaging');
            $('#edit_id').val(id);
            $('#edit_packagings').val(mounting);
            $('#editModal').modal('show');
        });

        $('#FormEdit').on('submit', function(e) {
            e.preventDefault(); // cegah reload
    
            $.ajax({
                url: "{{ route('PackagingBarang.update') }}",
                method: "PUT",
                data: $(this).serialize(),
                success: function(response) {
                    alert('Data berhasil diupdate!');
                    $('#editModal').modal('hide');
                    $('#FormEdit')[0].reset();
                    location.reload(); // reload page biar data tampil (atau update table via JS)
                },
            error: function(xhr) {alert('Gagal update data!');}
            });
        });
    });
</script>

<script>
    $(document).ready(function() {
        $(document).on('click', '.deleteBtn', function () {
            let id = $(this).data('id');
            $('#delete_id').val(id);
            $('#deleteModal').modal('show');
        });

        $('#FormDelete').on('submit', function(e) {
            e.preventDefault(); // cegah reload
    
            $.ajax({
                url: "{{ route('PackagingBarang.delete') }}",
                method: "DELETE",
                data: $(this).serialize(),
                success: function(response) {
                    if(response.success){
                        alert(response.message);
                        $('#editModal').modal('hide');
                        $('#FormDelete')[0].reset();
                        location.reload(); // reload page biar data tampil (atau update table via JS)
                    }
                    else{
                        alert('Terjadi kesalahan: ' + response.message);
                    }
                },
            error: function(xhr) {alert('Terjadi kesalahan !');}
            });
        });

    });
</script>
@endsection