@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

@section('title', 'Receiving | create')

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>Receiving</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

        @php
            if ($purchase_order_status == 1 || $purchase_dml_status == 1) {
                $check_disabled = "disabled";
            }else{
                $check_disabled  = "";
            }

            // dd($check_disabled);
        @endphp

		<!-- Hover rows -->
        <form class="form-validate-jquery" action="{{ route('receiving.store')}}" method="post">
            @csrf
            <input type="hidden" name="hotel_id" id="hotel_id" value="{{ \Session::get('hotel_id') ?? \Auth::user()->hotel_id }}">
            <div class="card">
                <div class="card-header header-elements-inline"></div>
                <div class="card-body">
                    <fieldset class="mb-3">
                        {{-- <div class="row"> --}}
                            <div class="col-md-12">
                                <div class="form-group" style="text-align: right">
                                    <label><h5  style="margin-top: 14px;">Created By : <span class="text-danger">{{ \Auth::user()->nama }}</span></h5></label>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-3">
                                        <label>Document No <span class="text-danger"></label>
                                        <input type="text" name="request_no" id="request_no" class="form-control" autocomplete="off" value="Auto Generate" disabled>
                                    </div>

                                    @if ($purchase_order_status == 1)
                                    <div class="form-group col-md-3">
                                        <label>Order No <span class="text-danger"></label>
                                        <input type="hidden" name="purchase_order_id" value="{{$purchase_order->id}}">
                                        <input type="text" name="document_no" id="document_no" class="form-control" autocomplete="off" value="{{$purchase_order->document_no}}" disabled>
                                    </div>
                                    @endif

                                    @if ($purchase_dml_status == 1)
                                    <div class="form-group col-md-3">
                                        <label>DML No <span class="text-danger"></label>
                                        <input type="hidden" name="purchase_dml_id" value="{{$purchase_dml->id}}">
                                        <input type="text" name="dml_no" id="dml_no" class="form-control" autocomplete="off" value="{{$purchase_dml->dml_no}}" disabled>
                                    </div>
                                    @endif

                                    <div class="form-group col-md-3" >
                                        <label>Receiving Date <span class="text-danger">*</span></label>
                                        <input type="text" name="receiving_date" id="receiving_date" class="form-control daterange-single" autocomplete="off" value="{{dateFormat(getSystemDate(),'d-m-Y')}}">
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label>Department <span class="text-danger">*</span></label>
                                        @if ($purchase_order_status == 1)
                                            <select id="department_id" class="form-control form-control-select2" autocomplete="off" required disabled>
                                                <option value="">-- Select Department --</option>
                                                @foreach($departments as $department)
                                                <option value="{{$department->id}}" {{$purchase_order->department_id == $department->id ? 'selected' : '' }}>{{$department->id}} - {{$department->name}}</option>
                                                @endforeach
                                            </select>
                                            <input type="hidden" name="department_id" value="{{$purchase_order->department_id}}">
                                        @elseif ($purchase_dml_status == 1)
                                            <select id="department_id" class="form-control form-control-select2" autocomplete="off" required disabled>
                                                <option value="">-- Select Department --</option>
                                                @foreach($departments as $department)
                                                <option value="{{$department->id}}" {{$purchase_dml->department_id == $department->id ? 'selected' : '' }}>{{$department->id}} - {{$department->name}}</option>
                                                @endforeach
                                            </select>
                                            <input type="hidden" name="department_id" value="{{$purchase_dml->department_id}}">
                                        @else
                                            <select name="department_id" id="department_id" class="form-control form-control-select2" autocomplete="off" required>
                                                <option value="">-- Select Department --</option>
                                                @foreach($departments as $department)
                                                <option value="{{$department->id}}">{{$department->id}} - {{$department->name}}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                    </div>
                                </div>

                                @if ($purchase_order_status == 0)
                                    <div class="row">
                                        <div class="form-group col-md-3">
                                            <label>Supplier <span class="text-danger" style="font-size: 12px">* @if (request('filter_supplier') == null) Please select supplier first @endif </span></label>
                                            <select class="form-control-select2" id="filter_supplier" name="supplier_id" required>
                                                <option value="" data-coa_id="">-- Select Supplier --</option>
                                                <option value="x" data-coa_id="" {{ request('filter_supplier') == 'x' ? 'selected' : '' }}>-- Empty Recipient --</option>
                                                @foreach($suppliers as $supplier)
                                                    <option value="{{$supplier->id}}" data-coa_id="{{$supplier->coa_id}}" {{ request('filter_supplier') == $supplier->id ? 'selected' : '' }}>{{$supplier->company_name}} - {{$supplier->contact_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>AccountNo for Payment <span class="text-danger" style="font-size: 12px">*</span></label>
                                            <select class="form-control-select2" name="coa_payment_id" required>
                                                <option value="">** Select COA **</option>
                                                @foreach($coas as $coa)
                                                    <option value="{{$coa->id}}" {{ request('filter_coa_id') == $coa->id ? 'selected' : ''}}>
                                                        ({{$coa->account_no}}) {{$coa->description}}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Payment Type <span class="text-danger" style="font-size: 12px">*</span></label>
                                            <select class="form-control-select2" id="payment_type" name="payment_type" required>
                                                <option value="">** Select Payment Type **</option>
                                                <option value="1" data-coa_id="">AP</option>
                                                <option value="2" data-coa_id="">Cash</option>
                                            </select>
                                        </div>
                                    </div>
                                @endif

                                <div class="row">
                                    <div class="form-group col-md-3">
                                        <label>Receiving Type </label>
                                        <input type="hidden" name="type" value="{{$receiving_type}}">
                                        <select id="receiving_type" class="form-control form-control-select2 select-status" disabled>
                                            @foreach(config('custom.receiving_type') as $key => $val)
                                                <option value="{{$key}}" {{ $receiving_type == $key ? 'selected' : ''}}>{{$val}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>
                            </div>
                            {{-- <div class="col-md-5 mt-4 pl-5">
                                <div class="form-group">
                                    <label><h5>Created By : <span class="text-danger">{{ \Auth::user()->nama }}</span></h5></label>
                                </div>
                            </div> --}}

                        {{-- </div> --}}
                    </fieldset>
                </div>
            </div>

            <div class="card">
                <div class="card-header header-elements-inline"><h4>Received Items</h4></div>
                <div class="card-body">
                    <fieldset class="mb-3 table-responsive scroll-horizontal" style="width: 100%">

                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    {{-- <th style="width: 5%">ArtNo</th> --}}
                                    <th style="width: 17%">Item</th>
                                    <th style="width: 21%">Quantity</th>
                                    <th style="width: 16%">Unit-Price</th>
                                    <th style="width: 16%">Amount</th>
                                    <th style="width: 8%">AccountNo for Inventory</th>
                                    @if ($purchase_order_status == 1)
                                        <th style="width: 6%">Supplier</th>
                                        <th style="width: 8%">AccountNo for Payment</th>
                                        <th style="width: 8%">Payment Type</th>
                                    @endif
                                    <th style="width: 19%">Description</th>
                                    <th style="width: 5%"></th>
                                </tr>
                            </thead>
                            <tbody id="stock_items">

                                @if ($purchase_order_status == 1)
                                    @php
                                        $idx            = 0;
                                        $total_amount   = 0;
                                    @endphp
                                    @foreach ($purchase_order->purchaserOrderDetails as $key=>$item)
                                    <tr id="row_item_{{$idx}}">
                                        {{-- <td>
                                            {{@$item->stock->article_no}}
                                        </td> --}}
                                        <td>
                                            <input id="po_detail_id{{$idx}}" type="hidden" name="po_detail_id[]" value="{{$item->id}}" />
                                            <input id="stock_id{{$idx}}" type="hidden" name="stock_id[]" value="{{$item->stock_id}}" />
                                            <span style="min-width: 250px; width:100%;">
                                                {{@$item->stock->description}}
                                            </span>
                                        </td>
                                        <td style="white-space:nowrap">
                                            <div class="input-group" style="width:150px">
                                                <input id="qty{{$idx}}" type="text" class="form-control" name="qty[]" value="{{$item->qty_not_arrive}}" onchange="calculateAmount({{$idx}}), formatNumber(this)" required min="0.01" max="{{ $item->qty_not_arrive }}" onkeyup="formatNumber(this);"/>
                                                <span class="input-group-append">
                                                    <span class="input-group-text"><small>{{ $item->stock ? @$item->stock->deliveryUnit->description : ''}}</small></span>
                                                </span>
                                            </div>
                                        </td>
                                        <td>
                                            <input id="unit_price{{$idx}}" class="form-control masked unit_price_class" type="text" style="text-align:right; min-width:150px; width:100%;" name="unit_price[]" value="{{ ribuanWithComma($item->price_unit) }}" onchange="calculateAmount({{$idx}})" required readonly/>
                                        </td>
                                        <td>
                                            <input id="amount{{$idx}}" class="form-control amount masked" type="text" style="text-align:right; min-width:150px; width:100%;" name="amount[]" value="{{ ribuanWithComma($item->price_unit * $item->qty_not_arrive) }}" required readonly/>
                                        </td>
                                        <td>
                                            <select
                                                name="coa_inventory_id[]"
                                                id="coa_inventory_id{{$idx}}"
                                                class="form-control form-control-select2 border-teal border-1" required
                                            >
                                                {{-- <option value="">-- Select COA --</option> --}}
                                                @foreach($coas as $coa)
                                                    @if ($item->coa_id == $coa->id)
                                                        <option value="{{$coa->id}}" {{ $item->coa_id == $coa->id ? 'selected' : ''}}>
                                                            ({{$coa->account_no}}) {{$coa->description}}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select  name="supplier_id" class="form-control select2-supplier" style="width:100px" autocomplete="off" required>
                                                {{-- <option value="" data-coa_id="">-- Select Supplier --</option> --}}
                                                {{-- <option value="0" data-coa_id="">-- Empty Recipient --</option> --}}
                                                @if ($item->stock)
                                                    @if ($item->stock->suppliers)
                                                        @foreach($item->stock->suppliers as $supplier)
                                                        @if ($item->supplier_id == $supplier->id)
                                                            <option value="{{$supplier->id}}" data-coa_id="{{$supplier->coa_id}}" {{@$item->supplier_id == $supplier->id ? 'selected' : ''}}>{{$supplier->company_name}} - {{$supplier->contact_name}}</option>
                                                        @endif
                                                        @endforeach
                                                    @endif
                                                @else
                                                    @foreach($suppliers as $supplier)
                                                        @if ($item->supplier_id == $supplier->id)
                                                            <option value="{{$supplier->id}}" data-coa_id="{{$supplier->coa_id}}" {{@$item->supplier_id == $supplier->id ? 'selected' : ''}}>{{$supplier->company_name}} - {{$supplier->contact_name}}</option>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </select>
                                        </td>
                                        <td>
                                            <select
                                                name="coa_payment_id"
                                                class="form-control form-control-select2 border-teal border-1" required
                                            >
                                                {{-- <option value="">-- Select COA --</option> --}}
                                                @foreach($coas as $coa)
                                                    @if ($item->supplier->coa_id == $coa->id)
                                                        <option value="{{$coa->id}}" {{ $item->supplier->coa_id == $coa->id ? 'selected' : ''}}>
                                                            ({{$coa->account_no}}) {{$coa->description}}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="hidden" name="payment_type" value="1" />
                                            <div style="width:75px">
                                                AP
                                            </div>
                                        </td>
                                        <td>
                                            <input id="remark{{$idx}}" type="hidden" name="remark[]" value="{{$item->remark}}" />
                                            <div style="max-height: 100px;min-width:200px; width:200px; overflow:auto;">
                                                {{$item->remark ?? '-'}}
                                            </div>
                                        </td>
                                        <td style="text-align: center">
                                            <a href="#/"
                                                class="delbutton text-danger"
                                                data-id="{{$idx}}"
                                                title="Delete"
                                            >
                                                <i class="fa fa-times"></i>
                                            </a>
                                        </td>
                                    </tr>
                                        @php
                                            $idx++;
                                        @endphp
                                    @endforeach
                                    <input type="hidden" id="count_this_detail" value="{{$idx}}">
                                @endif


                                <tr>
                                    <td colspan="3" style="text-align: right">Total :</td>
                                    <td id="total_amount_review" style="text-align: right">0</td>
                                    <input id="total_amount_hidden" name="total_amount" type="hidden" value="0">
                                    <td colspan="4"></td>
                                </tr>
                                @if ($purchase_order_status == 0 && $purchase_dml_status == 0)
                                <tr>
                                    <td colspan="9" style="text-align: center">
                                        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#modal_add_stock" @if ($stocks_status == 0) disabled @endif>Select Supplier Item</button>@if ($stocks_status == 0) <br><span class="text-danger" style="font-size: 12px">Please select supplier first</span> @endif
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </fieldset>
                    <div class="text-right">
                        <a href="{{route('receiving.index')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
                        <button type="submit" id="submit" class="btn btn-primary submitBtn">Submit <i class="icon-paperplane ml-2"></i></button>
                    </div>
                </div>
            </div>
        </form>
		<!-- /hover rows -->

        <div id="modal_add_stock" class="modal fade">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-primary" align="center">
                        <h5 class="modal-title">Supplier Item</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <form action="#" id="selectedForm" class="exceptform">
                        <div class="modal-body">
                            <table class="table datatable-basic table-hover">
                                <thead>
                                    <tr>
                                        {{-- <th class="d-none">none</th> --}}
                                        <th class="text-center">Actions</th>
                                        <th>Article No.</th>
                                        <th>Stock now</th>
                                        <th>Description</th>
                                        <th>D-Unit</th>
                                        <th>D-Content</th>
                                        <th>M-Unit</th>
                                        <th>M-Content</th>
                                        <th>Min Stock</th>
                                        {{-- <th>Act P-Price</th> --}}
                                        <th>Last P-Price</th>
                                        <th>Avrg P-Price</th>
                                        {{-- <th>Purchase Frequent</th> --}}
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($stocks_status == 1)
                                        @foreach($stocks as $stock)
                                            <tr>
                                                <td align="center">
                                                    <input type="radio" id="stock_{{ $stock->id }}" name="temp_stock_id" value="{{ $stock->id }}" style="transform: scale(1.5)" data-coa_id="{{ $stock->coa_id }}" onchange="stockSelected({{$stock->id}})" class="radio_stock">
                                                </td>
                                                {{-- <td class="d-none">{{ $loop->iteration }}</td> --}}
                                                <td>{{ $stock->article_no }}</td>
                                                <td class="font-weight-bold {{$stock->stock < 10 ? 'text-danger' : ''}}">{{ ribuanDuaAngkaBelakangKomaIndoFilter($stock->stock) }}</td>
                                                <td>{{ $stock->description }}</td>
                                                <td>
                                                    {{ @$stock->deliveryUnit->description }}
                                                </td>
                                                <td>
                                                    {{@$stock->content_delivery_unit ?
                                                        ribuanDuaAngkaBelakangKomaIndo($stock->content_delivery_unit)
                                                        : ''}}
                                                </td>
                                                <td>
                                                    {{ @$stock->massUnit->description }}
                                                </td>
                                                <td>
                                                    {{@$stock->content_mass_unit ?
                                                        ribuanDuaAngkaBelakangKomaIndo($stock->content_mass_unit)
                                                        : ''}}
                                                </td>
                                                <td>{{ ribuan($stock->min_stock) }}</td>
                                                {{-- <td>{{ ribuan($stock->actual_price ?? 0) }}</td> --}}
                                                <td>{{ ribuanWithComma($stock->purchasePrice('last') ?? 0) }}</td>
                                                <td>{{ ribuanWithComma($stock->purchasePrice('average') ?? 0) }}</td>
                                                {{-- <td>-</td> --}}

                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                            <div class=" my-4">
                                <div class="row">
                                    <div class="col-md-6">
                                        {{-- <div class="form-group">
                                            <label>Supplier <span class="text-danger">*</span></label>
                                            <select class="form-control-select2" id="temp_supplier" name="temp_supplier" required onchange="supplierSelected()">
                                                <option value="" data-coa_id="">-- Select Supplier --</option>
                                                <option value="0" data-coa_id="">-- Empty Recipient --</option>
                                                @foreach($suppliers as $supplier)
                                                <option value="{{$supplier->id}}" data-coa_id="{{$supplier->coa_id}}">{{$supplier->company_name}} - {{$supplier->contact_name}}</option>
                                                @endforeach
                                            </select>
                                        </div> --}}
                                        {{-- <div class="form-group">
                                            <label>Payment Method <span class="text-danger">*</span></label>
                                            <select class="form-control-select2" id="temp_payment_method" name="temp_payment_method" required>
                                                <option value="1" data-coa_id="">AP</option>
                                                <option value="2" data-coa_id="">Cash</option>
                                            </select>
                                        </div> --}}
                                        <div class="form-group">
                                            <label>Account No. for Inventory <span class="text-danger">*</span></label>
                                            <select
                                                name="temp_coa_id"
                                                id="temp_coa_id"
                                                class="form-control form-control-select2 border-teal border-1"
                                                required
                                            >
                                                <option value="">** Select COA **</option>
                                                @foreach($coas as $coa)
                                                    <option value="{{$coa->id}}">
                                                        ({{$coa->account_no}}) {{$coa->description}}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>Description</label>
                                            <textarea name="temp_remark" id="temp_remark" class="form-control" style="max-height: 200px" rows="5"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Quantity <span class="text-danger">*</span></label>
                                            <input type="text" name="temp_qty" id="temp_qty" class="form-control" autocomplete="off" value="1" required oninput="calculateTempAmount(), formatNumber(this)" onkeyup="formatNumber(this)">
                                        </div>
                                        <div class="form-group">
                                            <label>Price/unit <span class="text-danger">*</span></label>
                                            <input type="text" name="temp_price" id="temp_price" class="form-control masked" autocomplete="off" value="1" required oninput="calculateTempAmount()">
                                        </div>
                                        <div class="form-group">
                                            <label>Amount <span class="text-danger">*</span></label>
                                            <input type="text" name="temp_amount" id="temp_amount" class="form-control masked" autocomplete="off" value="1" required readonly>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div align='right'>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

	</div>
	<!-- /content area -->
@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>

<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
<script type="text/javascript">

function formatNumber(element){
    let value = $(element).val();

    let newValue = value
    .replace(/[^0-9.]/g, "")
    .replace(/(\..*)\./g, '$1');

    if (newValue.includes('.')) {
        const parts = newValue.split('.');
        if (parts[1].length > 2) {
            newValue = parts[0] + '.' + parts[1].substring(0, 2);
        }
    }
    $(element).val(newValue);
}

// Accessibility labels
$('.pickadate-accessibility').pickadate({
    labelMonthNext: 'Go to the next month',
    labelMonthPrev: 'Go to the previous month',
    labelMonthSelect: 'Pick a month from the dropdown',
    labelYearSelect: 'Pick a year from the dropdown',
    selectMonths: true,
    selectYears: true,
    format: 'dd-mm-yyyy',
});

let last_idx  = $('#count_this_detail').val() ?? 0;

console.log(last_idx)

function stockSelected(params) {
    $.ajax({
		type: 'GET',
		url: `{{ url('/selected-purchase-order/')}}/${params}/0`,
		success: function (data) {
            console.log('data:', data)
            const { stock } = data
            console.log(stock?.suppliers)

            // $('#temp_supplier').html(null)
            // let select_suppliers = ``;

            // console.log(stock.suppliers)

            // if (stock.suppliers.length > 0) {
            //     select_suppliers = `
            //     <option value="" data-coa_id="">-- Select Supplier --</option>
            //     <option value="0" data-coa_id="">-- Empty Recipient --</option>
            //     `
            //     $.each(stock?.suppliers, function (key, val) {
            //         select_suppliers += `
            //             <option value="${val.id}" data-coa_id="${val.coa_id}">${val.company_name} - ${val?.contact_name}</option>
            //         `;
            //     });
            // }else{
            //     select_suppliers = `
            //     <option value="" data-coa_id="" >-- Select Supplier --</option>
            //     <option value="0" data-coa_id="">-- Empty Recipient --</option>
            //     @foreach($suppliers as $supplier)
            //     <option value="{{$supplier->id}}" data-coa_id="{{$supplier->coa_id}}">{{$supplier->company_name}} - {{$supplier->contact_name}}</option>
            //     @endforeach
            //                         `;
            // }

            // $('#temp_supplier').html(select_suppliers)
            let coa_id = $('#stock_'+params).attr('data-coa_id')
            const form = $("#selectedForm").closest("form")

            form.find("#temp_coa_id").val(coa_id).trigger('change');
            form.find("#temp_qty").val(1).trigger('change');
            form.find("#temp_price").val(1).trigger('change');
            form.find("#temp_amount").val(1).trigger('change');
        }
	});
}

// ketika supplier di pilih
$(document).on("change", "#filter_supplier", function () {
    filter_supplier = $('#filter_supplier').val()
    filter_coa_id = $('#filter_supplier').find(':selected').data('coa_id')
    let newRequest = window.location.search;
    let params = new URLSearchParams(newRequest);
    params.delete('filter_supplier');
    params.delete('filter_coa_id');
    params.append('filter_supplier', document.getElementById("filter_supplier").value);
    params.append('filter_coa_id', filter_coa_id);
    document.location.href = "?" + params.toString();
});

$("#selectedForm").submit(function(e){
    e.preventDefault()
    const serialize = $(this).serializeArray()

    console.log('serialize:', serialize)

    const stock_id = serialize.find(s => s.name === 'temp_stock_id').value
    const qty = serialize.find(s => s.name === 'temp_qty').value
    const remark = serialize.find(s => s.name === 'temp_remark').value
    // const supplier = serialize.find(s => s.name === 'temp_supplier').value
    const price = serialize.find(s => s.name === 'temp_price').value
    const coa_id = serialize.find(s => s.name === 'temp_coa_id').value
    // const payment_method_id = serialize.find(s => s.name === 'temp_payment_method').value
    // let payment_method = null
    // console.log(payment_method_id)
    // if (payment_method_id == 1) {
    //     payment_method = 'AP'
    // } else {
    //     payment_method = 'Cash'
    // }
    // console.log(payment_method)

    var amount          = formatRibuanComma(qty * removeFormatComma(price))

    $.ajax({
		type: 'GET',
		url: `{{ url('/selected-purchase-order/')}}/${stock_id}/${coa_id}`,
		success: function (data) {
            console.log('data:', data)
            const { coa, stock } = data

            // <td>
            //     <input id="stock_id${last_idx}" type="hidden" name="stock_id[]" value="${stock?.id}" />
            //     ${stock?.article_no}
            // </td>
            //<option value="">-- Select Supplier --</option>
            //@foreach($suppliers as $supplier)
            //  <option value="{{$supplier->id}}">{{$supplier->company_name}} - {{$supplier->contact_name}}</option>
            //@endforeach

            // let slect_supplier = ``;

            //  if (stock.suppliers.length > 0) {
            //     slect_supplier = `
            //     <option value="" data-coa_id="">-- Select Supplier --</option>
            //     <option value="0" data-coa_id="">-- Empty Recipient --</option>
            //     `
            //     $.each(stock?.suppliers, function (key, val) {
            //         slect_supplier += `
            //             <option value="${val.id}" data-coa_id="${val.coa_id}">${val.company_name} - ${val?.contact_name}</option>
            //         `;
            //     });
            // }else{
            //     slect_supplier = `
            //     <option value="" data-coa_id="" >-- Select Supplier --</option>
            //     <option value="0" data-coa_id="">-- Empty Recipient --</option>
            //     @foreach($suppliers as $supplier)
            //     <option value="{{$supplier->id}}" data-coa_id="{{$supplier->coa_id}}">{{$supplier->company_name}} - {{$supplier->contact_name}}</option>
            //     @endforeach
            //                         `;
            // }

            last_idx++
            let html_item = `<tr id="row_item_${last_idx}">
                                <td>
                                    <input id="stock_id${last_idx}" type="hidden" name="stock_id[]" value="${stock?.id}" />
                                    <span style="min-width: 250px; width:100%;">
                                    ${stock?.description}
                                    </span>
                                </td>
                                <td style="text-align: right">
                                    <div class="input-group" style="width:150px">
                                        <input id="qty${last_idx}" type="text" class="form-control" name="qty[]" value="${qty}" onchange="calculateAmount(${last_idx}), formatNumber(this)" required onkeyup="formatNumber(this);"/>
                                        <span class="input-group-append">
                                            <span class="input-group-text"><small>${ stock?.delivery_unit ? stock?.delivery_unit?.description : ''}</small></span>
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    <input id="unit_price${last_idx}" class="form-control masked" type="text" style="text-align:right; min-width:150px; width:100%;" name="unit_price[]" value="${price}" onchange="calculateAmount(${last_idx})" required/>
                                </td>
                                <td>
                                    <input id="amount${last_idx}" class="form-control amount masked" type="text" style="text-align:right; min-width:150px; width:100%;" name="amount[]" value="${amount}" required />
                                </td>
                                <td>
                                    <input type="hidden" name="coa_inventory_id[]" value="${coa?.id}" />
                                    <div style="width:125px">
                                        ${coa?.account_no}
                                    </div>
                                </td>
                                <td>
                                    <input id="remark${last_idx}" type="hidden" name="remark[]" value="${remark}" />
                                    <div style="max-height: 100px;min-width:200px; width:100%; overflow:auto;">
                                    ${remark !== "" ? remark : "-"}
                                    </div>
                                </td>
                                <td style="text-align: center">
                                    <a href="#/"
                                        class="delbutton text-danger"
                                        data-id="${last_idx}"
                                        title="Delete"
                                    >
                                        <i class="fa fa-times"></i>
                                    </a>
                                </td>
                            </tr>`;

            $('#stock_items').prepend(html_item);

            // $('#supplier'+last_idx).select2({  width: '80%' });

            // $('#supplier'+last_idx).val(supplier).trigger('change').select2({  width: '200px' });

            $('#modal_add_stock').modal('hide')

            recountTotalAmount()
		}
	});

    return false;
});

function calculateTempAmount() {
    let qty = $('#temp_qty').val()
    let price = Number(removeFormatComma($('#temp_price').val()))
    let amount = qty * price
    $('#temp_amount').unmask().val(amount).mask("#,##0", {reverse: true});
}

// function supplierSelected(idx = null) {
//     if (idx !== null) {
//         let coa_id = $('#supplier'+idx).find(':selected').data('coa_id')

//         $('#coa_id'+idx).val(coa_id).trigger('change');
//     } else {
//         let coa_id = $('#temp_supplier').find(':selected').data('coa_id')
//         const form = $("#selectedForm").closest("form")

//         form.find("#temp_coa_id").val(coa_id).trigger('change');
//     }
// }

$(document).on("click", ".delbutton", function () {
    let id = $(this).attr('data-id');
    $('#row_item_'+id).remove();
    recountTotalAmount()
});

$('#modal_add_stock').on('hidden.bs.modal', function (e) {
    const form = $("#selectedForm").closest("form")

    form.find("input[type=text], textarea").val("")
    form.find("input[type=number]").val("1")
    form.find(".daterange-single").val("{{dateFormat(getSystemDate(), 'd-m-Y')}}")
    form.find("input[type=radio]").prop("checked", false)
    // form.find("#temp_supplier").val("").trigger('change')
    form.find("#temp_coa_id").val("").trigger('change')
})


$(document).on("input", ".masked", function () {
    $(this).mask("#,##0", {reverse: true})
});

$(document).on("input", ".masked-comma", function () {
    $(this).mask("#,##0.00", {reverse: true})
});

var table_stock = '';
$(document).on('change', '.radio_stock', function(){
    table_stock.$('.radio_stock').prop('checked', false)
    $(this).prop('checked', true)
})

$('#modal_add_stock').on('shown.bs.modal', function() {
    table_stock.order([2, 'asc']).draw();
});

//CALCULATE AMOUNT
function calculateAmount(l_idx) {
    const qty        = $('#qty'+l_idx).val()
    const unit_price = removeFormatComma($('#unit_price'+l_idx).val())

    var amount       = parseInt( qty * unit_price )

    $('#amount'+l_idx).val(formatRibuanComma(amount))

    recountTotalAmount()
}

// calculate total amount
function recountTotalAmount() {
    let nominal = 0;
    $('.amount').each(function(index){
        nominal += Number(removeFormatComma(this.value))
    });

    $('#total_amount_review').html(formatRibuanComma(nominal))
    $('#total_amount_hidden').val(nominal)
}

function formatRibuanComma(params) {
    return params.toLocaleString('en-US')
}

function removeFormatComma(params) {
    return Number((params).replaceAll(",",""))
}

var DatatableBasic = function() {

// Basic Datatable examples
var _componentDatatableBasic = function() {
    if (!$().DataTable) {
        console.warn('Warning - datatables.min.js is not loaded.');
        return;
    }

    // Setting datatable defaults
    $.extend( $.fn.dataTable.defaults, {
        scrollX: true,
        responsive: true,
        autoWidth: false,
        columnDefs: [{
            orderable: false,
            width: 150,
            targets: [ 0 ]
        }],
        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
        language: {
            search: '<span>Filter:</span> _INPUT_',
            searchPlaceholder: 'Type to filter...',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
        }
    });

    // Basic datatable
    table_stock = $('.datatable-basic').DataTable();

    // Alternative pagination
    $('.datatable-pagination').DataTable({
        pagingType: "simple",
        language: {
            paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
        }
    });

    // Datatable with saving state
    $('.datatable-save-state').DataTable({
        stateSave: true
    });

    // Scrollable datatable
    var table = $('.datatable-scroll-y').DataTable({
        autoWidth: true,
        scrollY: 300
    });

    // Resize scrollable table when sidebar width changes
    $('.sidebar-control').on('click', function() {
        table.columns.adjust().draw();
    });
};

// Select2 for length menu styling
var _componentSelect2 = function() {
    if (!$().select2) {
        console.warn('Warning - select2.min.js is not loaded.');
        return;
    }

    // Initialize
    // $('.dataTables_length select').select2({
    //     minimumResultsForSearch: Infinity,
    //     dropdownAutoWidth: true,
    //     width: 'auto'
    // });
};


//
// Return objects assigned to module
//

return {
    init: function() {
        _componentDatatableBasic();
        _componentSelect2();
    }
}
}();

var FormValidation = function() {

    // Validation config
    var _componentValidation = function() {
        if (!$().validate) {
            console.warn('Warning - validate.min.js is not loaded.');
            return;
        }

        // Initialize
        var validator = $('.form-validate-jquery').validate({
            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            errorClass: 'validation-invalid-label',
            //successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            // success: function(label) {
            //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
            //},

            // Different components require proper error label placement
            errorPlacement: function(error, element) {

                // Unstyled checkboxes, radios
                if (element.parents().hasClass('form-check')) {
                    error.appendTo( element.parents('.form-check').parent() );
                }

                // Input with icons and Select2
                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo( element.parent() );
                }

                // Input group, styled file input
                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                    error.appendTo( element.parent().parent() );
                }

                // Other elements
                else {
                    error.insertAfter(element);
                }
            }
        });

        // Reset form
        $('#reset').on('click', function() {
            validator.resetForm();
        });
    };

    // Return objects assigned to module
    return {
        init: function() {
            _componentValidation();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    FormValidation.init();
    DatatableBasic.init();
});
</script>
<script type="text/javascript">
function preview() {
	frame.src=URL.createObjectURL(event.target.files[0]);
}

$( document ).ready(function() {

	var $select = $('.form-control-select2').select2();

    $('.daterange-single').daterangepicker({
        singleDatePicker: true,
        locale: {
            format: 'DD-MM-YYYY'
        }
    });

    $('.unit_price_class').trigger('change')

	// Default style
    @if(session('error'))
        new PNotify({
            title: 'Error',
            text: '{{ session('error') }}.',
            icon: 'icon-blocked',
            type: 'error'
        });
    @endif
    @if ( session('success'))
        new PNotify({
            title: 'Success',
            text: '{{ session('success') }}.',
            icon: 'icon-checkmark3',
            type: 'success'
        });
    @endif
	@if ($errors->any())
		@foreach ($errors->all() as $error)
			new PNotify({
				title: 'Error',
				text: '{{ $error }}.',
				icon: 'icon-blocked',
				type: 'error'
			});
		@endforeach
	@endif

    $('.select2-supplier').select2({  width: '200px' });
    $('.select2-supplier').trigger('change');

});
$('.modal').on('show.bs.modal', function () {
    $('select').each(function () {
        $(this).select2({
            dropdownParent: $(this).parent()
        });
    });
})
</script>
@endsection