@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: 10%;">EAN</th>
                                        <th scope="col" style="width: 20%;">Name</th>
                                        <th scope="col" style="width: 5%;">Size</th>
                                        <th scope="col" style="width: 5%;">RRP</th>
                                        <th scope="col" style="width: 5%;">Sell Unit</th>
                                         <th scope="col" style="width: 5%;">WholeSale Price</th>
                                         <th scope="col" style="width: 5%;">Allow Discount</th>
                                       
                                        <th scope="col" style="width: 5%;">Quantity</th>
                                        <th scope="col" style="width: 10%;">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 qrcode"
                                                value="{{ $product->qrcode ?? '' }}" data-id="{{ $product->id }}"></td>

                                            <td><input type="hidden" class="form-control name"
                                                    value="{{ $product->name ?? '' }}" data-id="{{ $product->id }}" readonly>
                                                    <span>{{ $product->name ?? '' }}</span>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control size"
                                                    value="{{ $product->size ?? '' }}" data-id="{{ $product->id }}">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control rrp"
                                                    value="{{ $product->rrp ?? '' }}" data-id="{{ $product->id }}">
                                            </td>

                                            <td>
                                                <input type="text" class="form-control sale_unit"
                                                    value="{{ $product->sale_unit ?? '' }}" data-id="{{ $product->id }}">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control unit_price"
                                                value="{{ $product->unit_price ?? '' }}" data-id="{{ $product->id }}">
                                            </td>
                                                
                                           <td style="padding-left:40px !important">
                                                <div class="form-check form-switch" >
                                                    <input type="checkbox" class="form-check-input allow_discount" 
                                                        name="allow_discount" 
                                                        value="1" 
                                                        data-id="{{ $product->id }}" 
                                                        checked>
                                                    <label class="form-check-label" for="allow_discount_{{ $product->id }}"></label>
                                                </div>

                                                </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); 

                var qrcode = row.find(".qrcode").val();
                var name = row.find(".name").val();

                var rrp = row.find(".rrp").val();
                var allow_discount = row.find(".allow_discount").val();

                var size = row.find(".size").val();
                var sale_unit = row.find(".sale_unit").val();
                var unit_price = row.find(".unit_price").val();
                var quantity = row.find(".quantity").val();

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

                $.ajax({
                    url: updateUrl,
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        name: name,
                        rrp: rrp,
                        sale_unit: sale_unit,
                        unit_price: unit_price,
                        size: size,
                        qrcode: qrcode,
                        allow_discount: allow_discount,
                        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