@extends('admin.layout.master')
@section('title', 'Work Order Management')
@section('custom_style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/summernote/summernote.css')}}" />
@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s">
            <h4>
                {{ $wo ? __('obs.update_work_order'): __('obs.create_work_order') }}
            </h4>
        </div>
        <div class="card-body">
            <form method="post" action="{{ route('inventory.pre_sells.work_order.store') }}" enctype="multipart/form-data" class="form_submit">
                @csrf
                <div>
                    <div class="row mb-1">
                        <input type="hidden" name="id" id="id" value="{{ $wo->id ?? null }}">
                        <div class="col-md-2 col-4">
                            <div class="px-0">
                                <label for="cost_center_id">{{ __('obs.cost_center') }}</label>
                            </div>
                            <div class="px-0 d-flex">
                                <select name="cost_center_id" id="cost_center_id" class="form-control select_2" onchange="getQuotationByCostCenter(this.value)">
                                    <option value="">Select</option>
                                    @foreach ($costcenters as $costcenter)
                                        <option
                                            {{ $cost_center_id == $costcenter->id ? 'selected' : '' }}
                                            value="{{ $costcenter->id }}">
                                            {{ $costcenter->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 col-4">
                            <div class="px-0">
                                <label for="quotation">{{ __('obs.quotation') }}</label>
                            </div>
                            <div class="w-100 px-0">
                                <select name="quotation_id" id="quotation_id" class="form-control select_2" onchange="getQuotationDetails(this.value)">
                                    @if($quotation_id)
                                        <option value="{{ $quotation_id }}">{{ $wo->quotation->quotation_no ?? '' }}</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 col-4">
                            <div class="px-0">
                                <label for="customer">{{ __('obs.customer') }}</label>
                            </div>
                            <div class="w-100 px-0">
                                @include('v2.inventory.global.party_live_dd', [
                                    'type' => 2, // 1 = vendor, 2 = customer
                                    'cls' => 'p',
                                    'id' => 'party_id',
                                    'name' => 'party_id',
                                    'selected_party' => $wo ? $wo->party : null,
                                ])
                            </div>
                        </div>
                        <div class="col-md-3 col-12 gap-4 pr-0 mb-0">
                            <div class="px-0">
                                <label for="note">{{ __('obs.note') }}</label>
                            </div>
                            <div class="px-0">
                                <input type="text" class="form-control" name="description" value="{{ $wo->note ?? null }}" id="description">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-bordered cl-table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ __('obs.product') }}</th>
                                        <th>{{ __('obs.note') }}</th>
                                        <th>{{ __('obs.qty') }}</th>
                                        <th>{{ __('obs.unit_price') }}</th>
                                        <th>{{ __('obs.vat') }}%</t>
                                        <th>{{ __('obs.subtotal') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="tbl_body"></tbody>
                                <tfoot>
                                    <tr style="padding-top:2px !important; border-top: black 2px solid !important;">
                                        <td colspan="6" class="text-end" style="padding: 0 5px !important;">{{ __('obs.total') }}</td>
                                        <td class="text-left"> <input type="number" min="0" step=".01" name="total_amount" id="total_amount" class="form-control total_amount" readonly></td>
                                    </tr>
                                    <tr class="total_vat_amount_div" style="padding-top:2px !important; border-top: black 2px solid !important;">
                                        <td colspan="6" class="text-end" style="padding: 0 5px !important;">{{ __('obs.vat_amount') }}</td>
                                        <td class="text-left"> <input type="number" min="0" step=".01" name="" id="total_vat_amount" class="form-control" readonly></td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="text-end" style="padding: 0 5px !important;">{{ __('obs.discount') }}{{ __('obs.(%)') }}</td>
                                        <td class="text-end"> <input type="number" max="100" step=".01" name="discount" id="discount" class="form-control discount" onkeyup="setDiscount()" value="{{ $wo?$wo->discount:0 }}"></td>
                                        <td class="text-end" style="padding: 0 5px !important;">{{ __('obs.discount') }} {{ __('obs.(amount)') }}</td>
                                        <td class="text-left"> <input type="number" name="discount_amount" id="discount_amount" class="form-control discount_amount" readonly></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-end" style="padding: 0 5px !important;">
                                            {{ __('obs.net') }} {{ __('obs.amount') }}
                                        </td>
                                        <td class="text-left"> <input type="number" name="net_amount" id="net_amount" class="form-control net_amount" readonly></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-md-12 col-12 gap-4 pr-0 mb-0">
                            <div class="px-0">
                                <label for="terms">{{ __('obs.terms') }}</label>
                            </div>
                            <div class="px-0">
                                <textarea name="terms" id="terms" class="form-control summernote w-100" data-plugin-summernote data-plugin-options='{ "height": 300, "codemirror": { "theme": "ambiance" } }' rows="2" cols="50">
                                    {{ $wo->terms ?? null }}
                                </textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12 text-right mt-2 mt-md-0">
                            <button class="btn btn-sm btn-primary btn-pill btn-sina-submit"
                                style="position: fixed;bottom:40%;right:0" onclick="addRow()" type="button"
                                name="add_Row" id="add_Row"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <input class="btn-sina-submit" type="button" onclick="submit_form();" id="save" value="save">
                    </div>
                </div>
            </form>
        </div>
    </div>
    @include('v2.inventory.global.quick_posting.q_party_create', ['type' => 2])
    @include('admin.layout.common_form_submit_js')
@endsection
@section('script')
    <script src="{{asset('assets/vendor/summernote/summernote.js')}}"></script>
    <script>
        const store_setting = @json(store_info());
    </script>
    <script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script>
        var index = 0;
        let quotations = [];
        let work_order = @json($wo);
        let req_cost_center_id = @json($cost_center_id);
        let req_quotation_id = @json($quotation_id);
        $(document).ready(function() {
            initiateSummernote();
            if(work_order) {
                for (let j = 0; j < work_order.details.length; j++) {
                    addRow(work_order.details[j], true);
                }
            }
            if(req_cost_center_id) {
                getQuotationByCostCenter(req_cost_center_id);
            }
        });
        function getQuotationByCostCenter(cost_center_id) {
            if(!cost_center_id){
                $('#quotation_id').html('<option value=" ">-- Select Quotation --</option>');
                return;
            }
            let payload = {
                cost_center_id: cost_center_id,
                return_type: 'json'
            };
            ajaxCall("{{ route('inventory.pre_sells.quotation.index') }}", "GET", payload, (res)=> {
                $('#loader').hide();
                let pre_quotation = $('#quotation_id').val();
                quotations = res.quotations;
                let html = '<option value=" ">-- Select Quotation --</option>';
                res.quotations.forEach((quotation) => {
                    html += `<option value="${quotation.id}">${quotation.quotation_no}</option>`;
                });
                $('#quotation_id').html(html);
                $('#quotation_id').val(pre_quotation).trigger('change');
            }, (errors)=> {
                console.log(errors);
            });
        }
        function getQuotationDetails(quotation_id) {
            if(work_order) return; // when edit
            index = 0;
            $('#tbl_body').html('');
            let quotation = quotations.find((quotation) => quotation.id == quotation_id);
            if(quotation) {
                quotation.details.forEach((detail) => {
                    addRow(detail);
                });
            }
        }
        function addRow(detail = null, is_edit = false) {
            ++index;
            var returnData = `<tr id="tr-${index}">
                <input type="hidden" name="d_id[${index}]" value="${is_edit ? detail.id : ''}">
                <td>${index}</td>
                <td>
                    <div class="d-flex justify-content-between text-center">
                        <select class="form-control new_product new_product${index}" style="width: 100%" id="product_id${index}" name="product_id[${index}]">
                            <option value=" ">-- Select Product --</option>
                        </select>
                        <input type="text" name="product_name[${index}]" id="product_name${index}" class="form-control" style="height: 26px !important; display: none">
                        <button class="btn btn-primary product_input_type_change_button" type="button" onclick="changeProductInputType('${index}')"><i class="fas fa-exchange-alt"></i></button>
                    </div>
                </td>
                <td>
                    <input type="text" name="note[${index}]" id="note${index}" class="form-control" style="height: 26px !important;">
                </td>
                <td class="text-center">
                    <input type="number" min="0" onkeyup="setSubtotal('${index}')" name="quantity[${index}]" id="quantity${index}" step=".01" class="form-control" value="0">
                </td>
                <td>
                    <input type="number" onkeyup="setSubtotal('${index}')" min="0" step=".01" name="rate[${index}]" id="rate${index}" class="form-control" value="0">
                </td>
                <td class="col_vat">
                    <input type="number" onkeyup="setSubtotal('${index}')" min="0" step=".01" name="vat[${index}]" id="vat${index}" class="form-control" value="0">
                    <input type="hidden" name="vat_amount[${index}]" id="vat_amount${index}" class="form-control vat_amount" value="0">
                </td>
                <td class="text-left">
                    <div class="input-group text-left" style="position: relative;">
                        <input type="number" min="0" step=".01" name="subtotal[${index}]" id="subtotal${index}" class="form-control subtotal" readonly value="0">
                        <div class="input-group-append" style="position: absolute; right: 3px; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end;">
                            <button type="button" onclick="deleteRow(${index})" class="btn btn-danger btn-sm">
                                <span class="fa fa-minus"></span>
                                <span class="btn_text-${index}"></span>
                            </button>
                        </div>
                    </div>
                </td>
            </tr>`;
            $('#index_num').val((index));
            $('#tbl_body').append(returnData);
            productSearch(`new_product${index}`);
            if(detail){
                setTransactionData(detail, is_edit);
            }
        }
        function setTransactionData(detail, is_edit) {
            if(detail.product) {
                $(`#product_id${index}`).html(`<option value="${detail.product_id}" selected> ${detail.product.name_eng} </option>`).trigger('change');
            } else {
                $(`#product_name${index}`).val(detail.product_name);
                changeProductInputType(index, true);
            }
            $(`#note${index}`).val(detail.note);
            $(`#quantity${index}`).val(is_edit ? detail.qty : detail.quantity);
            $(`#rate${index}`).val(detail.rate);
            $(`#vat${index}`).val(detail.vat);
            $(`#subtotal${index}`).val(detail.subtotal);
            $(`#vat_amount${index}`).val(detail.vat_amount);
            setSubtotal(index);
        }
        function changeProductInputType(index, show_name = false) {
            if ($(`#product_name${index}`).is(':hidden') || show_name) {
                $(`#product_name${index}`).show();
                $(`#product_id${index}`).val('').trigger('change');
                $(`#product_id${index}`).next('.select2-container').hide();
            } else {
                $(`#product_name${index}`).hide();
                $(`#product_name${index}`).val('');
                $(`#product_id${index}`).next('.select2-container').show();
            }
        }
        function initSelect2() {
            productSearch('new_product');
        }
        function initiateSummernote() {
            $('.summernote').summernote({
                height: 100,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            });
        }
        function setSubtotal(i) {
            var subtotal = 0;
            var vat_percent = parseFloat($(`#vat${i}`).val());
            var qty = parseFloat($(`#quantity${i}`).val());
            var rate = parseFloat($(`#rate${i}`).val());
            let sub_total = qty * rate;
            let vat = (sub_total * vat_percent) / 100;
            $(`#vat_amount${i}`).val(vat);
            subtotal = sub_total + vat;
            $(`#subtotal${i}`).val(parseFloat(subtotal).toFixed(2));
            getSum();
            setDiscount();
        }
        function getSum() {
            var sum = 0;
            $('.subtotal').each(function() {
                sum += parseFloat(this.value);
            });
            $('#total_amount').val(sum.toFixed(2));
            var vat_amount = 0;
            $('.vat_amount').each(function() {
                vat_amount += parseFloat(this.value);
            });
            $('#total_vat_amount').val(vat_amount.toFixed(2));
            setDiscount();
        }
        function setDiscount() {
            var total = 0;
            var discount_amount = 0;
            var discount_rate = (parseFloat($('#discount').val()) / 100);
            total = $('#total_amount').val();
            discount_amount = (discount_rate * total)
            $('#discount_amount').val(parseFloat(discount_amount).toFixed(2));
            $('#net_amount').val(parseFloat(total - discount_amount).toFixed(2));
        }
        function deleteRow(row_id) {
            $('#tr-' + row_id).remove();
            getSum();
        }
        function submit_form() {
            $('.summernote').each(function() {
                var content = $(this).code();
                $(this).closest('form').find('textarea[name="' + $(this).attr('name') + '"]').val(content);
            });
            $('.form_submit').submit();
        }
    </script>
@append