@extends('layouts.mainlayout')

@section('title','List Barang')

@if(Auth::user()->role_user === 'Admin')
@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
@elseif(Auth::user()->role_user === 'Operator')
<div> </div>
@endif


@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="#">List Barang</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 ">Data Barang</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="basic-datatables"
                        class="display table table-bordered table-sm table-striped table-hover nowrap-table">
                        <thead class="table-success">
                            <tr>
                                <th>NO</th>
                                <th>SKU</th>
                                <th>VALUE</th>
                                <th>CATEGORY</th>
                                <th>PACKAGING</th>
                                <th>FOOTPRINT</th>
                                <th>MINIMAL STOCK</th>
                                <th>TOTAL STOCK</th>
                                @if(Auth::user()->role_user === 'Admin')
                                <th>AKSI</th>
                                @elseif(Auth::user()->role_user === 'Operator')

                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($table_barang as $Barang)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <td>{{$Barang->SKU}}</td>
                                <td>{{$Barang->VALUE}}</td>
                                <td>{{$Barang->category->CATEGORY}}</td>
                                <td>{{$Barang->packaging->PACKAGING}}</td>
                                <td>{{$Barang->footprint->FOOTPRINT}}</td>
                                <td>{{$Barang->MINIMAL_STOCK}}</td>
                                <td>{{$Barang->TOTAL_STOCK}}</td>
                                @if(Auth::user()->role_user === 'Admin')
                                <td class="text-center">
                                    <button href="#" class="btn btn-xs btn-warning editBtn" data-id="{{ $Barang->id }}"
                                        data-sku="{{$Barang->SKU}}" data-value="{{$Barang->VALUE}}"
                                        data-category="{{$Barang->CATEGORY}}" data-mounting="{{$Barang->MOUNTING}}"
                                        data-packaging="{{$Barang->PACKAGING}}" data-footprint="{{$Barang->FOOTPRINT}}"
                                        data-project_description="{{$Barang->PROJECT_DESCRIPTION}}"
                                        data-cost_per_unit="{{$Barang->COST_PER_UNIT}}"
                                        data-selling_price="{{$Barang->SELLING_PRICE}}"
                                        data-supplier="{{$Barang->SUPPLIER}}"
                                        data-minimal_stock="{{$Barang->MINIMAL_STOCK}}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button href="#" class="btn btn-xs btn-danger deleteBtn"
                                        data-id="{{ $Barang->id }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                                @elseif(Auth::user()->role_user === 'Operator')

                                @endif
                            </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">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Form Input</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="FormInput">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="sku" class="form-label">Sku</label>
                        <input type="text" class="form-control" id="sku" name="sku" required>
                    </div>

                    <div class="mb-3">
                        <label for="value" class="form-label">Value</label>
                        <input type="text" class="form-control" id="value" name="value" required>
                    </div>

                    <div class="mb-3">
                        <label for="category_id" class="form-label">Category</label>
                        <select class="form-select form-select-md mb-2" id="category_id" name="category_id" required>
                            <option selected disabled value> -- Select -- </option>
                            @foreach ($categories as $category)
                            <option value="{{ $category->id_category }}">{{ $category->CATEGORY }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="mounting_id" class="form-label">Mounting</label>
                        <select class="form-select form-select-md mb-2" id="mounting_id" name="mounting_id" required>
                            <option selected disabled value> -- Select -- </option>
                            @foreach ($mountings as $mounting)
                            <option value="{{ $mounting->id_mounting }}">{{ $mounting->MOUNTING }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="packaging_id" class="form-label">Packaging</label>
                        <select class="form-select form-select-md mb-2" id="packaging_id" name="packaging_id" required>
                            <option selected disabled value> -- Select -- </option>
                            @foreach ($packagings as $packaging)
                            <option value="{{ $packaging->id_packaging }}">{{ $packaging->PACKAGING }}</option>
                            @endforeach
                        </select>
                    </div>


                    <div class="mb-3">
                        <label for="footprint_id" class="form-label">Footprint</label>
                        <select class="form-select form-select-md mb-2" id="footprint_id" name="footprint_id" required>
                            <option selected disabled value> -- Select -- </option>
                            @foreach ($footprints as $footprint)
                            <option value="{{ $footprint->id_footprint }}">{{ $footprint->FOOTPRINT }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="ProjectDescription" class="form-label">Project Description</label>
                        <textarea class="form-control" id="ProjectDescription" name="ProjectDescription"
                            rows="5"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="CostPerUnit" class="form-label">Cost Per Unit</label>
                        <div class="input-group mb-2">
                            <span class="input-group-text">Rp. </span>
                            <input type="text" id="CostPerUnit" name="CostPerUnit" class="form-control">
                        </div>
                    </div>

                    <div class=" mb-3">
                        <label for="SellingPrice" class="form-label">Selling Price</label>
                        <div class="input-group mb-2">
                            <span class="input-group-text">Rp. </span>
                            <input type="text" id="SellingPrice" name="SellingPrice" class="form-control">
                        </div>
                    </div>

                    <div class=" mb-3">
                        <label for="supplier" class="form-label">Supplier</label>
                        <input type="text" class="form-control" id="Supplier" name="Supplier" required>
                    </div>

                    <div class=" mb-3">
                        <label for="MinimalStock" class="form-label">Minimal Stock</label>
                        <input type="text" class="form-control" id="MinimalStock" name="MinimalStock" required>
                    </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>
                </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">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Form Edit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="FormEdit">
                @csrf
                <input type="hidden" id="edit_id" name="id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_sku" class="form-label">Sku</label>
                        <input type="text" class="form-control" id="edit_sku" name="edit_sku" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_value" class="form-label">Value</label>
                        <input type="text" class="form-control" id="edit_value" name="edit_value" required>
                    </div>

                    <div class="mb-3">
                        <label for="category_id" class="form-label">Category</label>
                        <select class="form-select form-select-md mb-2" id="edit_category_id" name="edit_category_id"
                            required>
                            <option selected disabled value> -- Select -- </option>
                            @foreach ($categories as $category)
                            <option value="{{ $category->id_category }}">{{ $category->CATEGORY }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="edit_mounting_id" class="form-label">Mounting</label>
                        <select class="form-select form-select-md mb-2" id="edit_mounting_id" name="edit_mounting_id"
                            required>
                            <option selected disabled value> -- Select -- </option>
                            @foreach ($mountings as $mounting)
                            <option value="{{ $mounting->id_mounting }}">{{ $mounting->MOUNTING }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="edit_packaging_id" class="form-label">Packaging</label>
                        <select class="form-select form-select-md mb-2" id="edit_packaging_id" name="edit_packaging_id"
                            required>
                            <option selected disabled value> -- Select -- </option>
                            @foreach ($packagings as $packaging)
                            <option value="{{ $packaging->id_packaging }}">{{ $packaging->PACKAGING }}</option>
                            @endforeach
                        </select>
                    </div>


                    <div class="mb-3">
                        <label for="edit_footprint_id" class="form-label">Footprint</label>
                        <select class="form-select form-select-md mb-2" id="edit_footprint_id" name="edit_footprint_id"
                            required>
                            <option selected disabled value> -- Select -- </option>
                            @foreach ($footprints as $footprint)
                            <option value="{{ $footprint->id_footprint }}">{{ $footprint->FOOTPRINT }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="edit_ProjectDescription" class="form-label">Project Description</label>
                        <textarea class="form-control" id="edit_ProjectDescription" name="edit_ProjectDescription"
                            rows="5"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="edit_CostPerUnit" class="form-label">Cost Per Unit</label>
                        <div class="input-group mb-2">
                            <span class="input-group-text">Rp. </span>
                            <input type="text" id="edit_CostPerUnit" name="edit_CostPerUnit" class="form-control">
                        </div>
                    </div>

                    <div class=" mb-3">
                        <label for="edit_SellingPrice" class="form-label">Selling Price</label>
                        <div class="input-group mb-2">
                            <span class="input-group-text">Rp. </span>
                            <input type="text" id="edit_SellingPrice" name="edit_SellingPrice" class="form-control">
                        </div>
                    </div>

                    <div class=" mb-3">
                        <label for="edit_Supplier" class="form-label">Supplier</label>
                        <input type="text" class="form-control" id="edit_Supplier" name="edit_Supplier" required>
                    </div>

                    <div class=" mb-3">
                        <label for="edit_MinimalStock" class="form-label">Minimal Stock</label>
                        <input type="text" class="form-control" id="edit_MinimalStock" name="edit_MinimalStock"
                            required>
                    </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>
                </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="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_barang" 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('ListBarang.add') }}",
                        method: "POST",
                        data: $(this).serialize(),
                        success: function(response) {
                            $('#exampleModal').modal('hide');
                            $('#FormInput')[0].reset();
                            alert('Data berhasil disimpan!');
                            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 sku = $(this).data('sku');
                let value = $(this).data('value');
                let category = $(this).data('category');
                let mounting = $(this).data('mounting');
                let packaging = $(this).data('packaging');
                let footprint = $(this).data('footprint');  
                let project_description = $(this).data('project_description');
                let cost_per_unit = $(this).data('cost_per_unit');
                let selling_price = $(this).data('selling_price');
                let supplier = $(this).data('supplier');
                let minimal_stock = $(this).data('minimal_stock');
                $('#edit_id').val(id);
                $('#edit_sku').val(sku);
                $('#edit_value').val(value);
                $('#edit_category_id').val(category);
                $('#edit_mounting_id').val(mounting);
                $('#edit_packaging_id').val(packaging);
                $('#edit_footprint_id').val(footprint);
                $('#edit_ProjectDescription').val(project_description);
                $('#edit_CostPerUnit').val(cost_per_unit); 
                $('#edit_SellingPrice').val(selling_price);
                $('#edit_Supplier').val(supplier);
                $('#edit_MinimalStock').val(minimal_stock);              
                $('#editModal').modal('show');
            });

            $('#FormEdit').on('submit', function(e) {
                e.preventDefault(); // cegah reload

                $.ajax({
                    url: "{{ route('ListBarang.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');
            $('#id').val(id);
            $('#deleteModal').modal('show');
        });

        $('#FormDelete').on('submit', function(e) {
            e.preventDefault(); // cegah reload
    
            $.ajax({
                url: "{{ route('ListBarang.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