@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_list')}}</h4>
        </div>
        <div class="card-body">
            <div class="row g-2 mb-3">
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <label for="code" class="">{{__('obs.code')}}</label>
                    <input type="text" id="code" name="code" class="form-control" placeholder="Code" />
                </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="max-height: calc(100vh - 280px)">
                <table class="table table-sm table-bordered mb-0 rounded-2 cl-table" id="data_table">
                    <thead>
                        <tr>
                            <th width="70px" class="text-center cl-fixed-cell"
                                scope="col">{{__('obs.id')}}</th>
                            <th scope="col">{{__('obs.name.')}}</th>
                            <th scope="col" class="text-center">{{__('obs.code')}}</th>
                            <th scope="col" class="text-center"> {{__('obs.purchase_account')}}</th>
                            <th scope="col" class="text-center"> {{__('obs.sale_account')}}</th>
                            <th scope="col" class="text-end"> {{__('obs.tax_rate')}}</th>
                            <th scope="col" class="text-end">{{__('obs.status')}}</th>
                            <th scope="col" class="text-center">{{__('obs.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">Name</th>
                            <th scope="col" class="text-center">{{__('obs.code')}}</th>
                            <th scope="col" class="text-center">{{__('obs.purchase_account')}}</th>
                            <th scope="col" class="text-center"> {{__('obs.sale_account')}}</th>
                            <th scope="col" class="text-center">{{__('obs.tax_rate')}}</th>
                            <th scope="col" class="text-center">{{__('obs.status')}}</th>
                            <th scope="col" class="text-center">{{__('obs.actions')}}</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>${row.name}</td>
                        <td class="text-center">${row.code??''}</td>
                        <td class="text-center">${row.get_purchase_account?.name}</td>
                        <td class="text-center">${row.get_sale_account?.name}</td>
                        <td class="text-center">${row.value}</td>
                        <td class="text-center"><span class="badge badge-sm text-bg-${row.status == 1?'success':'danger'}">${row.status == 1?'Active':'Inactive'}</span></td>
                        <td>
                            <div class="text-center">
                                <a href="/accounts/vat-tax/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>
                    </tr>`;
                }
                html += `</tbody>
                </table>`;
                $('#data_table').html(html);
                $('#tbl').dataTable();
                $('#loader').hide();
            }

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

                ajaxCallV2('/accounts/vat-tax/list', 'GET', data, setTableData);
            })
		</script>
	@endsection
@endsection