@extends('admin.layouts.master')
@section('title', 'Product Verification')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{ __('Product Verification') }}</h1>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title mt-1">{{ __('Product Verification') }}</h3>
                            {{-- <div class="card-tools d-flex">
                                <a href="{{ route('admin.category.add') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus"></i> {{ __('Add New Category') }}
                                </a>
                            </div> --}}
                        </div>
                        <div class="card-body">
                            <table class="table table-striped table-bordered datatable">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 5%;">#</th>
                                        <th scope="col" style="width: 20%;">SKU</th>
                                        <th scope="col" style="width: 5%;">Cost</th>
                                        <th scope="col" style="width: 5%;">Sale</th>
                                        <th scope="col" style="width: 20%;">QR Code</th>
                                        <th scope="col" style="width: 10%;">Weight</th>
                                        <th scope="col" style="width: 10%;">Quantitiy</th>
                                        <th scope="col" style="width: 20%;">Action</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($products as $id => $product)
                                        <tr id="row-{{ $product->id }}">
                                            <td>{{ ++$id }}</td>
                                            <td><input type="text" class="form-control sku"
                                                value="{{ $product->sku ?? '' }}" data-id="{{ $product->id }}"></td>

                                            <td><input type="text" class="form-control cost_price"
                                                    value="{{ $product->cost_price ?? '' }}" data-id="{{ $product->id }}">
                                            </td>
                                            <td><input type="text" class="form-control unit_price"
                                                    value="{{ $product->unit_price ?? '' }}" data-id="{{ $product->id }}">
                                            </td>

                                            <td><input type="text" class="form-control qrcode"
                                                    value="{{ $product->qrcode ?? '' }}" data-id="{{ $product->id }}">
                                            </td>
                                            <td><input type="text" class="form-control weight"
                                                value="{{ $product->weight ?? '' }}" data-id="{{ $product->id }}"></td>

                                            <td><input type="text" class="form-control quantity"
                                                value="{{ $product->quantity ?? '' }}" data-id="{{ $product->id }}"></td>
                                            <td>
                                                <button class="btn btn-success btn-sm verify-update"
                                                    data-id="{{ $product->id }}">Verify & Update</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('js')
    <script>
        $(document).ready(function() {
            $(".verify-update").click(function() {
                var id = $(this).data("id");
                var row = $("#row-" + id); // Select the row to remove

                var weight = row.find(".weight").val();
                var cost_price = row.find(".cost_price").val();
                var unit_price = row.find(".unit_price").val();
                var sku = row.find(".sku").val();
                var qrcode = row.find(".qrcode").val();
                var quantity = row.find(".quantity").val();

                var updateUrl = "{{ route('admin.product.verification', ':id') }}".replace(':id', id);

                $.ajax({
                    url: updateUrl,
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        weight: weight,
                        cost_price: cost_price,
                        unit_price: unit_price,
                        sku: sku,
                        qrcode: qrcode,
                        quantity: quantity
                    },
                    success: function(response) {
                        if (response.success) {
                            MyToast.fire({
                                icon: 'success',
                                title: 'Product Verified successfully.'
                            });

                            row.fadeOut(500, function() {
                                $(this)
                            .remove(); // Remove row smoothly after fading out
                            });
                        } else {
                            alert("Failed to verify product.");
                        }
                    },
                    error: function() {
                        alert("Something went wrong!");
                    }
                });
            });
        });
    </script>
@endsection