@extends('admin.layout.master')
@section('title', __('obs.order_req'))
@section('custom_style')
    @include('inventory.blade_styles.posting_blade_css')
    {{-- <style>
        {!! $setting->style_css !!}
    </style> --}}
@endsection
@section('content')
    <div class="cl-card card border-secondary border-opacity-50 rounded-2">
        <div class="card-header px-2 d-flex justify-content-between align-items-center">
            <h5 class="card-title m-0">{{__('obs.order_req')}}</h5>
			<h6 class="card-title m-0"><input type="text" id="job_no" name="job_no" disabled NsModelBind="odrReqInvoice.job_no" class="form-control cl-form-control text-center" style="border: 0; background-color: var(--cl-gray-50);"></h6>
        </div>
        <div class="card-body">
            <div class="row gx-2 gy-1">
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                    <table class="table cl-table table-form table-bordered mb-0">
                        <tr>
                            <td>
                                <label for="party_id" class="form-label cl-form-label">{{__('obs.camelcase_customer')}}</label>
                            </td>
                            <td>
                                @include('v2.inventory.global.party_live_dd', ['type'=> 2, 'binder'=> 'odrReqInvoice.party_id'])
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                    <table class="table cl-table table-form table-bordered mb-0">
                        <tr>
                            <td>
                                <label for="sup_work_odr_no" class="form-label cl-form-label">{{__('obs.sup_work_odr_no')}}</label>
                            </td>
                            <td>
                                <input type="text" id="sup_work_odr_no" name="sup_work_odr_no" NsModelBind="odrReqInvoice.sup_work_odr_no" class="form-control cl-form-control">
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                    <table class="table cl-table table-form table-bordered mb-0">
                        <tr>
                            <td>
                                <label for="date" class="form-label cl-form-label">{{__('obs.date')}}</label>
                            </td>
                            <td>
                                @include('v2.admin.global.date', [
                                    'binder'=> 'odrReqInvoice.date',
                                    'value'=> date('d-m-Y')
                                ])
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                    <table class="table cl-table table-form table-bordered mb-0">
                        <tr>
                            <td>
                                <label for="type" class="form-label cl-form-label">{{__('obs.type')}}</label>
                            </td>
                            <td>
                                <select class="form-select cl-form-select" name="type" id="type" NsModelBind="odrReqInvoice.type">
                                    <option value="1">Export</option>
                                    <option value="2">Local</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                    <table class="table cl-table table-form table-bordered mb-0">
                        <tr>
                            <td>
                                <label for="address" class="form-label cl-form-label">{{__('obs.address')}}</label>
                            </td>
                            <td>
                                <textarea id="address" name="address" NsModelBind="odrReqInvoice.address" class="form-control cl-form-control" rows="10"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                    <table class="table cl-table table-form table-bordered mb-0">
                        <tr>
                            <td>
                                <label for="remarks" class="form-label cl-form-label">{{__('obs.remarks')}}</label>
                            </td>
                            <td>
                                <textarea id="remarks" name="remarks" NsModelBind="odrReqInvoice.remarks" class="form-control cl-form-control" rows="10"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="row g-2 mt-2">
                <div class="col-12">
                    <div class="cl-table-container rounded-2" style="height: 280px">
                        <table class="table mb-0 rounded-2 cl-bg-gray-100 cl-table table-borderless" style="min-width: 992px">
                            <thead>
                                <tr>
                                    <th class="text-center cl-fixed-cell" scope="col" style="width: 25px">#</th>
                                    <th class="text-center cl-fixed-cell" scope="col">{{__('obs.product_id')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.style')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.ply')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.length')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.width')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.height')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.qty')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.price') }}</th>
                                    <th class="text-center" scope="col">{{__('obs.amount')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.delivery_place')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.delivery_date')}}</th>
                                    <th class="text-center" scope="col">{{__('obs.remarks') }}</th>
                                    <th class="text-center" scope="col">{{__('obs.action') }}</th>
                                </tr>
                            </thead>
                            <tbody id="tbl_body">
                                {{-- @for ($i = 1; $i <= 5; $i++)
                                    <tr>
                                        <td scope="row" class="text-center cl-fixed-cell"> {{ $i }}</td>
                                        <td class="cl-fixed-cell">
                                            <select NsModelBind="odrReqInvoice.details[{{ $i }}].product_id" name="product_id" id="product_id{{ $i }}" class="product_live form-select cl-form-select"> </select>
                                        </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].style" name="style" id="style{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].ply" name="ply" id="ply{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].length" name="length" id="length{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].width" name="width" id="width{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].height" name="height" id="height{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].qty" name="qty" id="qty{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].price" name="price" id="price{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].amount" name="amount" id="amount{{ $i }}" readonly class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].delivery_place" name="delivery_place" id="delivery_place{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[{{ $i }}].delivery_date" name="delivery_date" id="delivery_date{{ $i }}" readonly class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <input type="text" NsModelBind="odrReqInvoice.details[{{ $i }}].remarks" name="remarks" id="remarks{{ $i }}" class="form-control cl-form-control"> </td>
                                        <td class="text-center"> <a href="#"> <i class="bi bi-arrow-clockwise text-warning"></i> </a> </td>
                                    </tr>
                                @endfor --}}
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="col-12 d-flex">
                    <hr class="mb-0 w-100">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-sm btn-warning btn-pill" style="font-size: 16px" onclick="addNewRow()" type="button" name="add_Row" id="add_Row"> <i class="fa fa-plus"></i></button>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-12 d-flex justify-content-center">
                        <button type="button" class="btn btn-green cl-btn ms-2" onclick="submitForm()" id="save_invoice" name="save_invoice">{{ __('obs.save') }}</button>
                    </div>
                </div>
            </div>
            {{-- <div class="row mt-2">
                <div class="col-md-12 col-sm-12">
                    @include('v2.inventory.global.inv_foot')
                </div>
            </div> --}}
        </div>
    </div>
    @include('v2.inventory.global.inv_loader')
    
    {{-- For Quick Posting --}}
        @include('v2.inventory.global.quick_posting.q_party_create', ['type'=> 2])
        @include('v2.inventory.global.quick_posting.q_cost_center_create')
    {{-- END --}}
@endsection
@section('script')
    <script>
        const edit_invoice = @json(@$invoice);
        $(document).ready(function() {
            if (edit_invoice) editInvoice();
            else addNewRow(5);
            console.log(edit_invoice);
        });

        const initDetails = {
            id: null,
            product_id: null,
            order_requisition_id: null,
            style: "",
            ply: 0.00,
            length: 0.00,
            width: 0.00,
            height: 0.00,
            qty: 0.00,
            price: 0.00,
            amount: 0.00,
            delivery_place: "",
            delivery_date: "",
            remarks: "",
        }
        const initOdrReqInvoice = {
            id: null,
            party_id: null,
            type: 1,
            date: (Array.isArray(date_picker_instances)?date_picker_instances[0].element.value:date_picker_instances.element.value),
            sup_work_odr_no: "",
            address: "",
            quantity: 0.00,
            details: []
        }
        let odrReqInvoice = deepClone(initOdrReqInvoice);
        
        let rowIndex = 0;
        const addNewRow = async (multiRow = 1) => {
            let html = '';
            for (let i = 0; i < multiRow; i++) {
                html += `<tr>
                    <td scope="row" class="text-center cl-fixed-cell"> ${ rowIndex+1 }</td>
                    <td class="cl-fixed-cell"> <select NsModelBind="odrReqInvoice.details[${ rowIndex }].product_id" name="product_id" id="product_id${ rowIndex }" class="product_live form-select cl-form-select w-100"></select> </td>
                    <td class="text-center"> <input type="text" NsModelBind="odrReqInvoice.details[${ rowIndex }].style" name="style" id="style${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[${ rowIndex }].ply" name="ply" id="ply${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[${ rowIndex }].length" name="length" id="length${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[${ rowIndex }].width" name="width" id="width${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[${ rowIndex }].height" name="height" id="height${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td class="text-center"> <input type="number" onkeyup="calcAmount(${ rowIndex })" NsModelBind="odrReqInvoice.details[${ rowIndex }].qty" name="qty" id="qty${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td class="text-center"> <input type="number" onkeyup="calcAmount(${ rowIndex })" NsModelBind="odrReqInvoice.details[${ rowIndex }].price" name="price" id="price${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td class="text-center"> <input type="number" NsModelBind="odrReqInvoice.details[${ rowIndex }].amount" name="amount" id="amount${ rowIndex }" readonly class="form-control cl-form-control"> </td>
                    
                    <td class="text-center"> <input type="text" NsModelBind="odrReqInvoice.details[${ rowIndex }].delivery_place" name="delivery_place" id="delivery_place${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td> <input type="text" data-serial="${ rowIndex+2 }" id="date${ rowIndex }" data-type="date" class="date-picker input input--sm w-100 border flex-1" placeholder="dd-mm-yyyy" NsModelBind="odrReqInvoice.details[${ rowIndex }].delivery_date"> </td>
                    
                    <td class="text-center"> <input type="text" NsModelBind="odrReqInvoice.details[${ rowIndex }].remarks" name="remarks" id="remarks${ rowIndex }" class="form-control cl-form-control"> </td>
                    <td class="text-center"> <a href="#"> <i class="bi bi-arrow-clockwise text-warning"></i> </a> </td>
                </tr>`;
                await odrReqInvoice.details.push(deepClone(initDetails));
                rowIndex++;
            }

            $('#tbl_body').append(html);
            await initDefaultSetups();
            viewSetter(odrReqInvoice, 'odrReqInvoice');
            $('.loader').hide()
        }

        const initDefaultSetups = async () => {
            liveSearch('product_live', '/product-live-search', false, title = 'Select Product', {}, null, (item) => ({ id: item.id, text: item.name_eng }));
            initFlatPickr();
        }

        const editInvoice = async () => {
            await addNewRow(edit_invoice.details.length);
            odrReqInvoice = await deepClone(edit_invoice);

            $('#party_id').html(`<option value="${odrReqInvoice.party_id }">${ odrReqInvoice.party.name_eng }</option>`);
            for (const [i, item] of odrReqInvoice.details.entries()) {
                $('#product_id'+i).html(`<option value="${item.product_id }">${ item.product.name_eng }</option>`);
            }

            viewSetter(odrReqInvoice, 'odrReqInvoice');
        }
        
        const submitForm = () => {
            console.log(odrReqInvoice);
            commonSubmitForm({
                post_url: '/inventory/order-requisition/store-update',
                dataObj: odrReqInvoice,
                callback: ()=> {
                    if (!edit_invoice) location.reload();
                    else {
                        setTimeout(() => {
                            window.close();
                        }, 1000);
                    } 
                },
                file: null
            });
        }
        const calcAmount = (i) => {
            setTimeout(async () => {
                odrReqInvoice.details[i].amount = Number(odrReqInvoice.details[i].qty)*Number(odrReqInvoice.details[i].price);
                await calTotalQty();
                viewSetter(odrReqInvoice, 'odrReqInvoice');
            }, 0);
        }
        
        const calTotalQty = async () => {
            odrReqInvoice.quantity = await Object.keys(odrReqInvoice.details).reduce((sum, key)=> sum+odrReqInvoice.details[key].qty, 0);
        }
    </script>
@append