@extends('layouts.app')
@section('style')
    <style>
        .v-select input[type=search], .v-select input[type=search]:focus {
            width: 50% !important;
        }
        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            padding: 4px 2px;
        }
        .input-has-error {
            outline: 1px solid #ff0000 !important;
            background-color: #ff000014;
        }
    </style>
@stop
@section('content')
    <div class="row">
        <div class="portlet light bg-inverse" style="min-height: 100%;">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-equalizer font-green-haze"></i>&nbsp;
                    <span class="caption-subject font-green-haze bold uppercase">@lang('layout.ImportExcel')</span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="pull-right">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8">
                    <div class="tools text-center">
                        @if($type)
                        <a href="{{url('/')}}/import_file/simple_import_cargo_contract_item_excel_file.xlsx" style="text-decoration: none; color: black;"> --------
                            <button class="btn btn-success">
                                <i class="fa fa-download"></i>
                                @lang('layout.ImportExcelSample')
                            </button>
                            -------- 
                        </a>
                        @else
                        <a href="{{url('/')}}/import_file/simple_import_customer_items_excel_file.xlsx" style="text-decoration: none; color: black;"> --------
                            <button class="btn btn-success">
                                <i class="fa fa-download"></i>
                                @lang('layout.ImportExcelSample')
                            </button>
                            -------- 
                        </a>
                        @endif
                    </div>
                    <!-- BEGIN FORM-->
                    {{Form::open(['route'=>'customerItemImport.store','method'=>'POST','enctype'=>'multipart/form-data','class'=>'form-horizontal','id'=>'import-form'])}}
                        {{ csrf_field() }}
                        <input type="hidden" class="form-control" name="type" value="{{$type}}">
                        <div class="form-body">
                            <div class="col-md-12">
                                <div class="form-group text-center" style="margin-top: 20px;">
                                    <label class="control-label col-md-5">@lang('layout.SelectFile') @lang('layout.Excel')
                                        :</label>
                                    <div class="col-md-7">
                                        {{Form::file('inventory_file',null,['class' => 'form-control','placeholder' => __('layout.File')])}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 text-center" style="margin-top: 10px;">
                            <button type="button" onClick="sendFormData(this)" class="btn green">@lang('layout.Submit')</button>
                            <button type="reset" class="btn default"><i class="fa fa-mail-reply"></i>@lang('layout.Cancel')</button>
                        </div>
                    {{Form::close()}}
                    <!-- end form -->
                </div>
                <div class="col-lg-4">
                    <ul class="text-danger">
                        <p class="text-danger">@lang('message.Info')</p>
                        <li class="text-danger">@lang('message.TipOne')</li>
                        <li class="text-danger">@lang('message.TipTwo')</li>
                        <li class="text-danger">@lang('message.TipThree')</li>
                    </ul>
                </div>
            </div>
            <div id="app" v-cloak>
                <h1 v-if="flag=='no'">@lang('layout.import_measure_msg')</h1>
                <div v-if="flag=='yes'" class="portlet-body form" style="margin-bottom:10%;">
                    <div v-if="record.length>0">
                        <div style="overflow-x:scroll; width: 100%">
                            <!-- begint table -->
                            {{Form::open(['route'=>'customerItemImport.store','method'=>'POST','class'=>'form-horizontal','enctype'=>'multipart/form-data','id'=>'import-form-second'])}}
                            {{csrf_field()}}
                            <div class="row">
                                <input type="hidden" class="form-control" name="type" value="{{$type}}">
                                <div class="col-md-12 col-md-12">
                                    <div class="col-md-12" style="height: 400px;">
                                        <table id="table_content" class="table table-bordered ">
                                            <thead>
                                                <tr>
                                                    <th class="text-center" style="width:20px;">#</th>
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Number')
                                                    </th>
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.ReferenceNumber')
                                                    </th>
                                                    @endif
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Customer')
                                                    </th>
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Source')
                                                    </th>
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Destination')
                                                    </th>
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Description') Fa
                                                    </th>
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Description') En
                                                    </th>
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Description') Oth
                                                    </th>
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Measure')
                                                    </th>
                                                    <th class="text-center" style="min-width: 130px;">
                                                        @lang('layout.Quantity')
                                                    </th>
                                                    <th class="text-center" style="min-width: 160px;">
                                                        @lang('layout.QuantityIns')
                                                    </th>
                                                    <th class="text-center" style="min-width: 130px;">
                                                        @lang('layout.Weight')
                                                    </th>
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.CostType')
                                                    </th>
                                                    @endif
                                                    <th class="text-center" style="min-width: 160px;">
                                                        @lang('layout.Price')
                                                    </th>
                                                    <th class="text-center" style="min-width: 160px;">
                                                        @lang('layout.Currency')
                                                    </th>
                                                    <th class="text-center" style="min-width: 130px;">
                                                        @lang('layout.Rate')
                                                    </th>
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Discount')
                                                    </th>
                                                    @endif
                                                    <th class="text-center" style="min-width: 130px;">
                                                        @lang('layout.Width')
                                                    </th>
                                                    <th class="text-center" style="min-width: 130px;">
                                                        @lang('layout.Length')
                                                    </th>
                                                    <th class="text-center" style="min-width: 130px;">
                                                        @lang('layout.Height')
                                                    </th>
                                                    <th class="text-center" style="min-width: 130px;">
                                                        @lang('layout.Volume')
                                                    </th>
                                                    <th class="text-center" style="min-width: 130px;">
                                                        @lang('layout.Date')
                                                    </th>
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Description')
                                                    </th>
                                                    @endif
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Expense') 1
                                                    </th>
                                                    @endif
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.ExpenseDetails') 1
                                                    </th>
                                                    @endif
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Expense') 2
                                                    </th>
                                                    @endif
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.ExpenseDetails') 2
                                                    </th>
                                                    @endif
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Expense') 3
                                                    </th>
                                                    @endif
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.ExpenseDetails') 3
                                                    </th>
                                                    @endif
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.Expense') 4
                                                    </th>
                                                    @endif
                                                    @if($type)
                                                    <th class="text-center" style="min-width: 200px;">
                                                        @lang('layout.ExpenseDetails') 4
                                                    </th>
                                                    @endif
                                                </tr>
                                            </thead>
                                                <tr v-for="(obj,index) in record">
                                                    <td class="td_one">
                                                        <span class="badge badge3 badge-success badge-roundless">@{{index+1}} </span>
                                                    </td>
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="number[]" v-model="obj.number">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="ref_no[]" v-model="obj.ref_no">
                                                    </td>
                                                    @endif
                                                    <td class="td_one">
                                                        <v-select placeholder="@lang('layout.Customer') " label="name" :options="customer" @search="MemberSearch" v-model="obj.selectedMember"></v-select>
                                                        <input type="hidden" :name="'customer_id['+index+']'" :value="(obj.selectedMember)?obj.selectedMember.id:null">
                                                    </td>
                                                    <td class="td_one">
                                                        <select class="form-control input-style" v-model="obj.source_id" required="required" name="source_id[]">
                                                            <option value="">@lang('layout.Select')</option>
                                                            <option v-if="site_list" v-for="cat in (site_list?site_list:null)" :value="cat.id">
                                                                @{{cat.name}}
                                                            </option>
                                                        </select>
                                                    </td>
                                                    <td class="td_one">
                                                        <select class="form-control input-style" v-model="obj.destination_id" required="required" name="destination_id[]">
                                                            <option value="">@lang('layout.Select')</option>
                                                            <option v-if="site_list" v-for="cat in (site_list?site_list:null)" :value="cat.id">
                                                                @{{cat.name}}
                                                            </option>
                                                        </select>
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="item_name[]" v-model="obj.item_name">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="item_name1[]" v-model="obj.item_name1">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="item_name2[]" v-model="obj.item_name2">
                                                    </td>
                                                    <td class="td_one">
                                                        <select name=um_id[] class="form-control input-style" v-model="obj.um_id" required="required">
                                                            <option value="0">@lang('layout.Select')</option>
                                                            <option v-if="measure_list" v-for="mea in (measure_list?measure_list:null)" :value="mea.id">
                                                                @{{mea.name}}
                                                            </option>
                                                        </select>  
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="quantity[]" v-model="obj.quantity">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="quantity_in_carton[]" v-model="obj.quantity_in_carton">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="weight[]" v-model="obj.weight">
                                                    </td>
                                                    
                                                    @if($type)
                                                    <td class="td_one">
                                                        <select class="form-control input-style" v-model="obj.price_type" name="price_type[]" required="required">
                                                            <option value="quantity">@lang('layout.Quantity')</option>
                                                            <option value="quantity_in_carton">@lang('layout.QuantityIns')</option>
                                                            <option value="cbm">@lang('layout.CBM')</option>
                                                            <option value="weight">@lang('layout.Weight')</option>
                                                        </select>
                                                    </td>
                                                    @endif
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="price[]" v-model="obj.price">
                                                    </td>
                                                    <td class="td_one">
                                                        <select class="form-control input-style" v-model="obj.currency" required="required">
                                                            <option value="">@lang('layout.Select')</option>
                                                            <option v-if="currency" v-for="curr in (currency?currency:null)" :value="curr">
                                                                @{{curr.code}}
                                                            </option>
                                                        </select>
                                                        <input type="hidden" class="form-control" name="currency[]" :value="(!obj.currency)?null:obj.currency.code">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="rate[]" v-model="(!obj.currency)?null:obj.currency.rate">
                                                    </td>
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="discount[]" v-model="obj.discount">
                                                    </td>
                                                    @endif
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="width[]" v-model="obj.width">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="length[]" v-model="obj.length">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="height[]" v-model="obj.height">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="volume[]" v-model="obj.volume">
                                                    </td>
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="date[]" :value="!obj.date?null:obj.date">
                                                    </td>
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="description[]" v-model="obj.description">
                                                    </td>
                                                    @endif 
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="expense1[]" v-model="obj.expense1">
                                                    </td>
                                                    @endif 
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="exp_description1[]" v-model="obj.exp_description1">
                                                    </td>
                                                    @endif  
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="expense2[]" v-model="obj.expense2">
                                                    </td>
                                                    @endif 
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="exp_description2[]" v-model="obj.exp_description2">
                                                    </td>
                                                    @endif 
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="expense3[]" v-model="obj.expense3">
                                                    </td>
                                                    @endif 
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="exp_description3[]" v-model="obj.exp_description3">
                                                    </td>
                                                    @endif 
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="number" class="form-control" name="expense4[]" v-model="obj.expense4">
                                                    </td>
                                                    @endif 
                                                    @if($type)
                                                    <td class="td_one">
                                                        <input type="text" class="form-control" name="exp_description4[]" v-model="obj.exp_description4">
                                                    </td>
                                                    @endif 
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- end table -->
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 text-center" style="margin-top: 10px;">
                            <button type="button" @click="sendFormData(this)" class="btn green">@lang('layout.Submit')</button>
                            <button type="reset" class="btn default"><i class="fa fa-mail-reply"></i> @lang('layout.Cancel')</button>
                        </div>
                        {{Form::close()}}
                    </div>
                </div>
            </div>
            
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        var data ={!! $data !!};
        var site ={!! $site !!};
        var measure ={!! $measure !!};
        var currency ={!! $currency !!};
        var flag = "{{ $flag }}";
        // console.log(measure1);
    const v = new Vue({
            el: '#app',
            data: {
                flag: flag,
                record: data,
                income_list: [],
                cost_list: [],
                asset_list: [],
                site_list: site,
                measure_list: measure,
                currency: currency,
                measure_list1: [],
                measure_list2: [],
                category_list: [],
                site_q: [],
                customer: [],
            },
            methods: {
                onchange(e) {
                },
                changeIncome(e, index) {
                    this.record[index].income = e.event.target.value;
                    return true;
                },
                changeCost(e, index) {
                    this.record[index].cost = e.event.target.value;
                    return true;
                },
                changeAsset(e, index) {
                    this.record[index].asset = e.event.target.value;
                    return true;
                },
                sendFormData(e) {
                    var el = $(e);
                    var form = el.parents('form').get(0);
                    var data = $('#import-form').serialize();
                    console.log('test 22', data);
                    swal({
                        title: "@lang('layout.AreYouSure?')",
                        icon: 'warning',
                        buttons: ["@lang('layout.Cancel')", "@lang('layout.Submit')"],
                        dangerMode: true,
                    }).then((wichButton) => {
                        if (wichButton) {
                            //form.submit();
                            document.getElementById('import-form-second').submit();
                            return true;
                        }
                        return false;
                    });
                },
                // begin item search
                MemberSearch: _.debounce((search, loading) => {
                    loading(true);
                    axios.get("{{route('callMethod.search')}}", {
                        params: {
                            method_name: 'SearchMember', 
                            keyword: search,
                            type: 'Customer'
                        }
                    })
                    .then(function(response) {
                        if (response.data.length > 0) {
                            v.customer = [];
                            v.customer = response.data;
                        }
                        loading(false);
                    })
                    .catch(function(error) {
                        loading(false);
                        console.log(error);
                    })
                }, getDebounceTime()),
                    // begin purchase order search
            },
            created: function () {
                console.log('ssssss', this.flag);
                for (var i = 0; i < this.record.length; i++) {
                    // for(var m=0;m<this.record[i].income_list.length;m++)
                    // {
                    //     console.log('ww',this.record[i].income_list[m].name);
                    // }
                }
            }
        });

        function sendFormData(e) {
            var el = $(e);
            var form = el.parents('form').get(0);
            var data = $('#import-form').serialize();
            // console.log('test 22', data);
            swal({
                title: "@lang('layout.AreYouSure?')",
                icon: 'warning',
                buttons: ["@lang('layout.Cancel')", "@lang('layout.Submit')"],
                dangerMode: true,
            }).then((wichButton) => {
                if (wichButton) {
                    form.submit();
                    return true;
                }
                return false;
            });
        }
        // to send inventory data
        function sendData(element) {
            e = $(e);
            var form = e.parents('form').get(0);
            swal({
                'title': "@lang('layout.AreYouSure?')",
                'icon': 'dander',
                'buttons': ["@lang('layout.Cancel')", "@lang('layout.Submit')"],
                danderMode: true
            }).then((whichButton) => {
                if (wichButton) {
                    form.submit();
                    return true;
                }
                return false;
            })
        }
        // end inventory data
    </script>
@endpush