@extends('admin.layout.master')

@section('content')
    <div class="card sina-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>{{__('obs.vat/tax_item_list')}}</h4>
        </div>
        <div class="card-body">
            <div class="row gx-2 gy-1 mb-3">
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <div class="w-100">
                        <label for="product" class="cl-form-label">{{__('obs.product')}}</label>
                        <div class="d-flex acc_code">
                            <select id="product" name="product" class="form-select product">
                                <option value="" selected>{{__('obs.select_option')}}</option>
                            </select>
                        </div>
                    </div>
                </div>
    
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <label class="w-100">&nbsp;</label>
                    <button id="taxSubmit" class="btn btn-primary">
                        <i class="icofont-search"></i>
                    </button>
                </div>
            </div>
    
            <div class="cl-table-container" style="height: 300px">
                <table class="table cl-table table-sm table-bordered mb-0 rounded-2" id="data_table">
                    <thead>
                        <tr>
                            <th width="70px" class="text-center cl-fixed-cell"
                                scope="col">{{__('obs.id')}}</th>
                            <th scope="col" class="text-center" style="width: 150px">{{__('obs.product_code')}}</th>
                            <th scope="col">{{__('obs.product_name')}}</th>
                            <th scope="col" class="">{{__('obs.vat/tax_name')}}</th>
                            <th scope="col" class="text-center" style="width: 150px">{{__('obs.vat/tax_code')}}</th>
                            <th scope="col" class="text-center" style="width: 100px">{{__('obs.rate')}}</th>
                            {{-- <th scope="col" class="text-center">Actions</th> --}}
                        </tr>
                    </thead>
                    <tbody id="tbl_body">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

	@section('custom_js')
		<script>
			const setTableData = (data) => {
                vatTaxList = data;
                let html = `<table class="table table-bordered mb-0 rounded-2 cl-table">
                    <thead>
                        <tr>
                            <th width="70px" class="text-center cl-fixed-cell"
                                scope="col">ID</th>
                            <th scope="col" class="text-center cl-fixed-cell" style="width: 150px">{{__('obs.product_code')}}</th>
                            <th scope="col">{{__('obs.product_name')}}</th>
                            <th scope="col" class=""> {{__('obs.vat/tax_name')}}</th>
                            <th scope="col" class="text-center" style="width: 150px"> {{__('obs.vat/tax_code')}}</th>
                            <th scope="col" class="text-center" style="width: 100px">{{__('obs.rate')}}</th>
                        </tr>
                    </thead>
                    <tbody id="tbl_body">`
                    for (const [i, row] of data.entries()) {
                        html += `<tr>
                            <td scope="row" class="text-center cl-fixed-cell">${i+1}</td>
                            <td class="text-center cl-fixed-cell">${row?.get_product_info?.barcode ?? ''}</td>
                            <td class="">${row?.get_product_info?.name_eng ?? ''}</td>
                            <td class="">${row?.get_vat_tax_info?.name ?? ''}</td>
                            <td class="text-center">${row?.get_vat_tax_info?.code ?? ''}</td>
                            <td class="text-center">${row?.get_vat_tax_info?.value ?? ''}</td>
                        </tr>`;
                    }
                    html += `</tbody>
                </table>`;
                $('#data_table').html(html);
                $('#tbl').dataTable();
                $('#loader').hide();
            }
            // <td>
            //     <div class="text-center">
            //         <a href="/accounts/vat-tax-item/edit?id=${row.id}" class="btn cl-btn cl-btn-primary px-1 py-0" title="Edit">
            //             <i class="bi bi-pencil-square"></i>
            //         </a>
            //     </div>
            // </td>

            $('#taxSubmit').on('click', function() {
                const data = {
                    product: $('#product').val(),
                }

                ajaxCallV2('/accounts/vat-tax-item/list', 'GET', data, setTableData);
            })

            liveSearch('product', '/accounts/get-category-product', true, 'Select', {from: 'product'})
		</script>
	@endsection
@endsection