@extends('admin.layout.master')

<style>
    .form-control {
        margin-bottom: 0 !important;
    }
    .cl-form-label {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: 11rem;
        flex: 0 0 auto;
    }
    .cl-form-label:after {
        content: ':';
        margin-right: 0.4rem;
    }
    label > span {
        display: inline-flex;
        align-items: flex-end
    }
    .acc_code {
        flex: 1 1 auto;
    }
</style>

@section('content')
    @if (@isset($edit))
        {{ $edit->id }}
    @endif
    <div class="card sina-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>{{__('obs.vat-tax_item_create')}}</h4>
        </div>
        <div class="card-body">
            <div id="top_message" class="text-center text-danger"></div>

            <div class="row justify-content-center">
                <div class="col-lg-8 py-2 mb-2 border border-dark rounded-2">
                    <p class="fw-bold mb-2 text-center">{{__('obs.accounts_product-vat-tax_static_search_title')}}</p>

                    <div class="row g-2 justify-content-center">
                        <div class="col-sm-6">
                            <div class="d-flex">
                                <label for="category" class="cl-form-label">
                                    <span>
                                        Category
                                        {{-- <span class="required">*</span> --}}
                                    </span>
                                </label>
                                <div class="d-flex acc_code">
                                    <select id="category" name="category" class="form-select category">
                                        <option value="" selected> {{__('obs.select_option')}}</option>
                                    </select>
                                </div>
                            </div>
                            
                            <span id="category_error" class="text-danger"></span>
                        </div>

                        <div class="col-sm-6">
                            <div class="d-flex">
                                <label for="product" class="cl-form-label">
                                    <span>
                                        {{__('obs.product')}}
                                    </span>
                                </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>
                            
                            <span id="product_error" class="text-danger"></span>
                        </div>

                        <div class="col-sm-6">
                            <div class="d-flex">
                                <label for="from_item_code" class="cl-form-label">
                                    <span>
                                          {{__('obs.from_item_code')}}
                                    </span>
                                </label>
                                {{-- <input type="text" id="from_item_code" name="from_item_code" class="form-control cl-form-control" placeholder="From Item Code"
                                    @if (@isset($edit)) value="{{ $edit->code }}" @endif 
                                >--}}
                                <div class="d-flex acc_code">
                                    <select id="from_item_code" name="from_item_code" class="form-select from_item_code">
                                        <option value="" selected>{{__('obs.select_option')}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="d-flex">
                                <label for="to_item_code" class="cl-form-label">
                                    <span>
                                        {{__('obs.to')}}
                                    </span>
                                </label>
                                {{-- <input type="text" id="to_item_code" name="to_item_code" class="form-control cl-form-control" placeholder="To"
                                    @if (@isset($edit)) value="{{ $edit->code }}" @endif
                                > --}}
                                <div class="d-flex acc_code">
                                    <select id="to_item_code" name="to_item_code" class="form-select to_item_code">
                                        <option value="" selected>{{__('obs.select_option')}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-8 py-2 mb-2">
                    <div class="row g-2 justify-content-center">
                        <div class="col-sm-6">
                            <div class="d-flex">
                                <label for="vat_code" class="cl-form-label">
                                    <span>
                                         {{__('obs.tax/vat_code')}}
                                        <span class="required">*</span>
                                    </span>
                                </label>
                                <div class="d-flex acc_code">
                                    <select id="vat_code" name="vat_code" class="form-select cl-select2">
                                        <option value="" selected> {{__('obs.select_option')}}</option>
                                        @if(!@empty($vatTaxes)) 
                                            @foreach ($vatTaxes as $vat)
                                                <option value="{{ $vat->id }}" data-vat-code={{ $vat->code }} data-vat-value="{{ $vat->value }}">{{ $vat->code }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            
                            <span id="vat_code_error" class="text-danger"></span>
                        </div>
        
                        <div class="col-sm-6">
                            <div class="d-flex">
                                <label for="vat_name" class="cl-form-label">
                                    <span>
                                         {{__('obs.vat_name')}}
                                        <span class="required">*</span>
                                    </span>
                                </label>
                                <div class="d-flex acc_code">
                                    <select id="vat_name" name="vat_name" class="form-select cl-select2">
                                        <option value=""> {{__('obs.select_option')}}</option>
                                        @if(!@empty($vatTaxes)) 
                                            @foreach ($vatTaxes as $vat)
                                                <option value="{{ $vat->id }}" data-vat-name="{{ $vat->name }}" data-vat-value="{{ $vat->value }}"
                                                    @if (@isset($edit) && $edit->parent_id == $vat->id) selected @endif    
                                                >{{ $vat->name ?? '' }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            
                            <span id="vat_name_error" class="text-danger"></span>
                        </div>
                        
                        <div class="col-sm-6">
                            <div class="d-flex">
                                <label for="vat_rate" class="cl-form-label">
                                    <span>
                                        {{__('obs.rate')}}
                                        <span class="required">*</span>
                                    </span>
                                </label>
                                <input type="number" step='0.01' id="vat_rate" name="vat_rate" class="form-control cl-form-control" placeholder="Tax/Vat Rate"
                                    @if (@isset($edit)) value="{{ $edit->value }}" @endif
                                >
                            </div>
        
                            <span id="vat_rate_error" class="text-danger"></span>
                        </div>
        
                        <div class="col-sm-6">
                            <div class="d-flex">
                                <label class="cl-form-label">
                                    <span>
                                        &nbsp;
                                    </span>
                                </label>
                                <button type="button" id="search-btn" class="btn btn-primary cl-btn w-100 text-center" onclick="loadProducts()">{{__('obs.search')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="row mt-3">
                <div class="col-lg-8 mx-auto">
                    <div class="row">
                        <div class="col-12 px-0 position-relative">
                            <div class="cl-table-container" style="max-height: 320px">
                                <table id="product_vat_table" class="table table-sm table-bordered mb-0 rounded-2 cl-table">
                                    <thead>
                                        <tr>
                                            <th class="text-center cl-fixed-cell" style="width: 60px;" scope="col">#</th>
                                            <th class="text-center cl-fixed-cell" style="width: 120px;" scope="col"> {{__('obs.item_code')}}</th>
                                            <th class="" scope="col">Item Name</th>
                                            <th class="text-center" scope="col" style="width: 110px;"> {{__('obs.vat/tax_no.')}}</th>
                                            <th class="" scope="col" style="min-width: 130px;">{{__('obs.vat/tax_name')}}</th>
                                            <th class="text-center" scope="col" style="width: 75px;">{{__('obs.rate')}}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="branchTbody">
                                        
                                    </tbody>
                                </table>
                            </div>

                            <div class="w-100 d-flex justify-content-end mt-3">
                                <button id="submit" class="btn btn-primary cl-btn cl-btn-primary" onclick="submitData()">
                                    <i class="bi bi-file-earmark-arrow-up-fill me-2"></i>
                                    Submit
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



@include('accounts.voucher.modal_accounts_ledger')
@include('accounts.voucher.modal_head_accounts_code')


@section('custom_js')
<script>

    $(document).ready(function() {
        liveSearch('category', '/accounts/get-category-product', true, 'Select', {from: 'category'})
        liveSearch('product', '/accounts/get-category-product', true, 'Select', {from: 'product'})
        liveSearch('from_item_code', '/accounts/get-category-product', true, 'Select', {from: 'from_item_code'}, null, (item) => ({ id: item.id, text: item.barcode }))
        liveSearch('to_item_code', '/accounts/get-category-product', true, 'Select', {from: 'to_item_code'}, null, (item) => ({ id: item.id, text: item.barcode }))
        // liveSearch('vat_code', '/accounts/get-category-product', false, 'Select', {from: 'vat_code'}, (item) => ({ id: item.id, text: item.code }))
        // liveSearch('vat_name', '/accounts/get-category-product', false, 'Select', {from: 'vat_name'}, (item) => ({ id: item.id, text: item.name }))

        select2('cl-select2', 'Select', false);
    });

    const setTableData = (data) => {
        productVatData = data;
        const obj = {
            vat_id: $('#vat_code').val(),
            vat_code: $('#vat_code').select2().find(":selected").data("vat-code"),
            vat_name: $('#vat_name').select2().find(":selected").data("vat-name"),
            vat_rate: $('#vat_rate').val(),
        }

        let html = `<table class="table table-hover table-bordered" id="tbl" style="width:100%">
            <thead class="thead-dark">
                <tr>
                    <th class="text-center cl-fixed-cell" style="width: 60px;" scope="col">#</th>
                    <th class="text-center cl-fixed-cell" style="width: 120px;" scope="col">Item Code</th>
                    <th class="" scope="col">Item Name</th>
                    <th class="text-center" scope="col" style="width: 110px;">Vat/Tax No.</th>
                    <th class="" scope="col" style="min-width: 130px;">Vat/Tax Name</th>
                    <th class="text-center" scope="col" style="width: 75px;">Rate</th>
                </tr>
            </thead>
            <tbody id="tbl_body">`
                for (const [i, row] of data.entries()) {
                    html += `<tr>
                        <td scope="row" class="text-center prod-id cl-fixed-cell" data-product-id="${row.id}">${i+1}</td>
                        <td class="text-center prod-barcode cl-fixed-cell">${row.barcode}</td>
                        <td class="prod-name" >${row.name_eng ?? ''}</td>
                        <td class="text-center vat-code">${obj.vat_code ?? ''}</td>
                        <td class="vat-name" data-vat-id="${obj.vat_id}">${obj.vat_name ?? ''}</td>
                        <td class="text-center vat-rate">${obj.vat_rate ?? ''}</td>
                    </tr>`;
                }
            html += `</tbody>
        </table>`;
        $('#product_vat_table').html(html);
        $('#tbl').dataTable();
        $('#loader').hide();
    }

        // POPULATE INPUT ON SELECT
    $('#vat_code, #vat_name').on('select2:select', function (event) {
        const target = event.target;
        const value = target.value;
        const vatValue = $(target).select2().find(":selected").data("vat-value");
        console.log(vatValue);

        switch (target.id) {
            case "vat_code":
                $(`#vat_name`).val(value).trigger('change');
                $(`#vat_rate`).val(vatValue);
                break;
            case "vat_name":
                $(`#vat_code`).val(value).trigger('change');
                $(`#vat_rate`).val(vatValue);
                break;
            default:
                console.log('error');
                break;
        }
    });

        // SUBMIT DATA
    const loadProducts = () => {
        const required = {
            vat_code: $('#vat_code').val(),
            vat_name: $('#vat_name').val(),
            vat_rate: $('#vat_rate').val(),
        }
        const other = {
            category: $('#category').val(),
            product: $('#product').val(),
            from_item_code: $('#from_item_code').val(),
            to_item_code: $('#to_item_code').val(),
        } 

        let pass = true;
        for (const [key, value] of Object.entries(required)) {
            if (!value) {
                pass = false;
            }
        }

        if (pass) {
            $('#top_message').text(``);
            ajaxCallV2('/accounts/search-product', 'POST', {...required, ...other}, setTableData);
        } else {
            $('#top_message').html(`Please fill up required <span class="required">(*)</span> fileds`);
        }
    }

    const onSuccess = (data) => {
        if (data.product_ids && data.product_ids.length > 0) {
            const html = data.product_ids.map(item => (`<div>${JSON.stringify(item.name)}</div>`)).join('');
            console.log(html);
            
            callSweetAlert('warning', 'Warning', `<p>These Product already have vat amount!.</p> <div>${html}</div>`);
            $('#loader').hide();
            return;
        }
        callSweetAlert('success', '<p class="text-success">Saved Successfully..!</p>');
        $('#loader').hide();
        setTimeout(() => {
            location.reload();
        }, 2000);
    }

    const submitData = () => {
        if ($('#tbl_body tr').length == 0 ) {
            callSweetAlert('error', '<p class="text-danger">Table is empty..!!!</p>');
            $('#loader').hide();
            return;
        }

        const array = [];
        $('#tbl_body tr').each(function() {
            const product_id = $(this).find(`.prod-id`).data('product-id');
            const vat_id = $(this).find(`.vat-name`).data('vat-id');

            array.push({product_id: product_id, vat_id: vat_id});
        })

        ajaxCallV2('/accounts/vat-tax-item/store', 'POST', {data: array}, onSuccess);
    }

</script>
@endsection
@endsection