@extends('admin.layout.master')
@section('title',$title)
@section('custom_style')
<style>
    input[type=text],
    input[type=file],
    input[type=number] {
        height: 30px !important;
    }

    

    /* @media screen and (max-width: 620px){ */
        .table th, .table td {
            padding: 0px 5px;
            color: black;
        }
        .table th {
           background: var(--tableHeader);
           padding: 5px !important;
           color: white !important;
        }
        .table-bordered th, .table-bordered td {
            border: 1px solid #c1c1c1 !important;
        }
        .special-cell{
            background: #bfbfbf;
            padding: 5px !important;
            color: black !important;
        }
        .btn-sina-submit {
            position: fixed;
            bottom:50%;
            right:2px;
        }
        @media only screen and (max-width: 620px) {
            .btn-sina-submit {
                position: fixed;
                min-width: 100%;
                bottom:0;
                right:0;
            }
            .container{
                padding: 0;
            }
        }
    /* } */
    div.sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 70px;
        z-index: 99;
        /* padding: 50px;
        font-size: 20px; */
    }
</style>
@endsection
@section ('content')
<div class="card sina-card">
    <div class="card-header card-header-s d-flex flex-wrap align-items-center sticky">
        <h4 class="col-6 pl-0">{{$title}}</h4>
        <div class="col-6 d-flex justify-content-end">
            <button onclick="showCart()" class="btn-sina-title-add d-flex align-items-center" type="button" name="button">
                <div class="col pl-0 pr-2">
                    <i class="fa fa-shopping-cart" aria-hidden="true"></i><span class="badge badge-danger" style="display:none;position: absolute;top:-5px;" id="cart-data">0</span>
                </div>
               
                {{-- <div class=""> VIEW {{($type==1||$type==3)?'RETURN':''}} {{__('obs.cart')}}</div> --}}

            </button>
            @if(!marketing_customer())
            <select class="select_2" style="width: 100%" id="price_type" onchange="setPriceData()">
                <option value="1" selected>{{__('obs.regular')}}</option>
                <option value="2">{{__('obs.retail')}}</option> 
                <option value="3">{{__('obs.whole')}}</option> 
                <option value="4">{{__('obs.flash')}}</option> 
            </select>
            @else
                <input type="hidden" name="" id="price_type" value="1">
            @endif
        </div>
    </div> 
   
    <div class="card-body">
         
        <form id="form" method="post" action="{{ route($route_group_name[$type].'.store') }}" name="form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="type" id="" value="{{$type}}">
            <input type="hidden" name="group" id="" value="{{request()->group??0}}">
            <div id="branch" class="container tab-pane active">
                <div class="row justify-content-start justify-content-md-end">
                    @if(count($shops)>0)
                    <div class="col-md-6 col-12 mb-2">
                        <label for="shop_id">Shops</label><br>
                        <select name="shop_id" id="shop_id">
                            @forelse ($shops as $shop)
                            <option value="{{$shop->id}}">{{$shop->name}}</option>
                            @empty
                            
                            @endforelse
                        </select>
                    </div>
                    @elseif(count($parties)>0)
                    <div class="col-md-6 col-12 mb-2">
                        <label for="shop_id" class="w-100">Customer</label>
                        <select name="party_id" id="shop_id"  class="w-100" required 
                        {{-- @if((env("MULTISTORE_ORDER_CHILD",0)==$party->warehouse_id))  --}}
                        onchange="getWarehouseByLocation()">
                            @forelse ($parties as $party)
                                <option value="{{$party->id}}">{{$party->name_eng}}</option>
                            @empty
                                
                            @endforelse
                        </select>
                    </div>
                    @endif
                    @if($type>3 && $type<6)
                    <div class="col-md-6 col-12 mb-2">
                            <label for="month_range">{{__('obs.date')}} {{__('obs.range')}}</label>
                            <input type="text" class="date_range form-control" id="month_range" @if($type==4) data-start="{{date('01-m-Y',strtotime('first day of +1 month'))}}" data-end="{{date('t-m-Y',strtotime('first day of +1 month'))}}" @else data-start="{{date('01-m-Y')}}" data-end="{{date('t-m-Y')}}" @endif name="month_range">
                    </div>
                    @elseif(count($parties)>0)
                    <div class="col-md-6 col-12 mb-2" style="display: none" id="warehouse_field">
                            <label for="warehouse_id">STORE LOCATION</label>
                            <select name="warehouse_id" id="warehouse_id"  class="w-100">

                            </select>
                    </div>
                    @endif
                    <div class="col-md-6 col-12 mb-2">
                        <textarea name="note" id="" class="form-control" cols="30" style="height: 53px;" placeholder="PUT SOME NOTE HERE..."></textarea>
                    </div>
            </div>
            <div class="">
                <div class="tab-content pt-0">
                    <div id="ag" class="container tab-pane active px-0 table-responsive">
                        <table class="table table-bordered table-hover" id="datatable_apply" style="min-width:100%;">
                            <thead>
                                <tr>
                                    <th width="4%" class="text-center">#</th>
                                    <th>{{__('obs.product')}} {{__('obs.english')}}</th>
                                    <th style="max-width:45%;" class="text-center">{{__('obs.product')}}</th>
                                    <th class="text-center" style="width:25%;">{{__('obs.rate')}}</th>
                                    <th class="text-center" style="width:25%;">{{__('obs.quantity')}}</th>
                                </tr>
                            </thead>
                            <tbody id="tbl_body">
                                @php
                                    $i=1;
                                    $productData=[];
                                @endphp
                                @forelse ($finishedProducts as $cat)
                                    <tr>
                                        @php
                                            $k=1;
                                        @endphp
                                        <td></td>
                                        <td class="text-center special-cell" style="display:none; dashed green 2px;">{{$cat->name_eng}}</td>
                                        <td class="text-center special-cell" style="border: dashed green 2px;">{{$cat->name_local}}</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    {{-- @forelse ($cat->product->sortBy('serial') as $item) --}}
                                    @forelse ($cat->product as $item)
                                        <tr>
                                            @php
                                                //  $productData[$item->id]=$item;
                                                 array_push($productData,$item);
                                            @endphp
                                            <td>{{ $k++ }}</td>
                                            <td class="text-wrap">{{ $item->name_eng }} </td>
                                            <td class="text-wrap">
                                                {{-- <a class="btn btn-hover text-info" id="img{{ $i }}" onclick="viewImg('{{$item->image}}')" style="font-size: 20px"> <i class="fas fa-image"></i> </a> --}}
                                                {{ $item->name_local }}
                                                @php
                                                    $freeProduct=$carts->where('product_id',$item->id)->first();
                                                @endphp
                                                @if($freeProduct)
                                                    <strong class="text-danger">({{$freeProduct->free_quantity.' : '.$freeProduct->min_sale_quantity}})</strong>
                                                    @if($freeProduct->product_id!=$freeProduct->free_product_id)
                                                        <strong class="text-info">{{$freeProduct->freeProduct?$freeProduct->freeProduct->name_eng:''}}</strong>
                                                    @endif
                                                    <br>
                                                @endif
                                                
                                            </td>
                                            @if($type)
                                                <td class="text-center"><input class="form-control" style="background-color: {{$type<6?'#bfbfbf':'white'}}; width:100%" class="numInput" @if($type<6) readonly @endif type="number" step=".00001" onblur="setModelData({{$item}})" value="{{round((($item->currentPrice?$item->currentPrice->sell_price:$item->sell_price??0)*$item->unit_quantity),2) }}"  id="showing_price{{ $item->id }}" title="{{$item->sell_price*$item->unit_quantity}}"> </td>
                                            @else
                                                {{-- <td class="text-center" id="showing_price{{ $item->id }}" title="{{$item->sell_price*$item->unit_quantity}}">{{number_format((($item->currentPrice?$item->currentPrice->sell_price:$item->sell_price)*$item->unit_quantity),2) }} </td> --}}
                                            @endif
                                            <td>
                                                <input type="hidden" min="0"  name="rate[{{$item->id}}]" id="rate{{ $item->id }}" step=".01" value="{{ $item->currentPrice?$item->currentPrice->sell_price:$item->sell_price }}">
                                                <input type="hidden" min="0"  name="unit[{{$item->id}}]" id="unit{{ $item->id }}" step=".01" value="{{ $item->unit_quantity }}">
                                                <input type="number" min="0"  name="quantity[{{$item->id}}]" id="quantity{{ $item->id }}" onblur="setModelData({{$item}})" class="form-control" step=".01" style="width:100%">
                                            </td>
                                            {{-- 
                                                <td>
                                                    <input readonly type="number" min="0"  name="subtotal[{{$item->id}}]" id="subtotal{{ $item->id }}" class="form-control subtotal" step=".01">
                                                </td> 
                                            --}}
                                        </tr>
                                    @empty
                                    @endforelse                                                     
                                @empty
                                    
                                @endforelse

                            </tbody>
                        </table>
                    </div>
                        
                </div>

            </div>
        </div>
            
            <hr>
            
            <div class="row pb-0  modal-footer">
                <button class="btn-sina-submit" type="submit"><i class="fa fa-save" onclick="return confirm('are you sure?');"></i> {{__('obs.save')}} </button>
            </div>
        </form>
    </div>
</div>
@include('inventory.order.admin.cart')
@include('inventory.global.img_show')
@endsection
@section('script')
<script>
     $('#shop_id').select2();
    let rawData=[];
    let listProductData=@json($productData);
    let parties=@json($parties);
    let storeData=@json($storeData);
     $(document).ready(function() {
        $('#datatable_apply').dataTable({
            "paging": false,
            "ordering": false,
            "columnDefs": [ 
            //     {
            //     "orderable": false,
            //     // "visible": false, 
            //     // 'targets': [0,1,2,3],
            // },
            {
                "targets": [ 1 ],
                "visible": false
            }
             ]
        });
    });
    const setModelData=(data)=>{
        console.log(data);
        var qty=parseFloat($('#quantity'+data.id).val());
        var showing_price=parseFloat($('#showing_price'+data.id).val());
        $('#rate'+data.id).val(showing_price/parseFloat($('#unit'+data.id).val()));
        var type=$('#price_type').val();
        let keys=[];
        keys[1]='sell_price';keys[2]='retail_sell_price';keys[3]='whole_sell_price';keys[4]='flash_sell_price';
        if(qty>0){
            let priceShowing=showing_price;//data.current_price?parseFloat(data.current_price.sell_price):parseFloat(data[keys[type]]);
            let data_pass={'id':data.id,'qty':qty,'name':data.name_eng,'local_name':data.name_local,'price':(priceShowing)}
            // let data_pass={'id':data.id,'qty':qty,'name':data.name_eng,'local_name':data.name_local,'price':(priceShowing*parseFloat(data.unit_quantity))}
            let item = rawData.find( t  => t.id == data.id);

            if (item) {
                item.qty=qty;
                item.price=priceShowing;
            } else {
                rawData.push(data_pass);
            }            
        }else{
            rawData=rawData.filter( t  => t.id != data.id);
        }
        if(rawData.length){
            let subtotal=0;
            for (let index = 0; index < rawData.length; index++) {
                subtotal+=parseFloat((rawData[index].price*rawData[index].qty));
            }
            $('#cart-data').show();
            $('#cart-data').text(parseFloat(subtotal).toFixed(2));
            // $('#cart-data').text(rawData.length);
        }else{
            $('#cart-data').hide();
        }
    }
    const viewImg=(link)=> {
        $('#pro_img_modal').attr("src", '/storage/' + link);
        $('#img_modal').modal('show');
    }
    const setPriceData=()=>{
        var type=$('#price_type').val();
        let keys=[];
        keys[1]='sell_price';keys[2]='retail_sell_price';keys[3]='whole_sell_price';keys[4]='flash_sell_price';
        //console.log(keys[type],listProductData[1418][keys[type]],listProductData[1418]);
        for (let pp = 0; pp < listProductData.length; pp++) {
            let priceShowing=listProductData[pp].current_price?parseFloat(listProductData[pp].current_price.sell_price):parseFloat(listProductData[pp][keys[type]]??0);
            var price_new=parseFloat(priceShowing)*parseFloat(listProductData[pp].unit_quantity);
            // var price_new=listProductData[pp][keys[type]]*listProductData[pp][unit_quantity];
            console.log(price_new,parseFloat(listProductData[pp][keys[type]]));
            $('#showing_price'+listProductData[pp]['id']).val(parseFloat(price_new).toFixed(2));
            // $('#showing_price'+listProductData[pp]['id']).text(parseFloat(price_new).toFixed(2));
            $('#rate'+listProductData[pp]['id']).val(price_new/parseFloat(listProductData[pp].unit_quantity));
            let item = rawData.find( t  => t.id == listProductData[pp]['id']);
            if (item) {
                //let pre_subtotal=(parseFloat($('#cart-data').text()).toFixed(2)-(item.price*item.qty));
                item.price=price_new;
                //let subtotal=(parseFloat(pre_subtotal).toFixed(2)+(item.price*item.qty))
                //$('#cart-data').text(parseFloat(subtotal).toFixed(2));
            }
        }
        // var type=$('#price_type').val();
        // // var qty=parseFloat($('#quantity'+data.id).val());
        // $('#price_data'+type+)
        // if(qty>0){
        //     let data_pass={'id':data.id,'qty':qty,'name':data.name_eng,'local_name':data.name_local,'price':data.sell_price}
        //     let item = rawData.find( t  => t.id == data.id);
        //     if (item) {
        //         item.qty=qty;
        //     } else {
        //         rawData.push(data_pass);
        //     }            
        // }else{
        //     rawData=rawData.filter( t  => t.id != data.id);
        // }
    }
    // const searchedItemById = (id, object = parties) => object.find(item => item.id == id);
    const searchedItemById = (id, object=parties) => object.find(item => item.id == id);
    const searchedStoreById = (id, object=storeData) =>{
        return object.find(item => item.id == id);
    } 
        
    const showCart=()=>{
        $("#cart_model").modal("hide");
            var str =`<tr><th colspan="5" class="text-center">${$('#shop_id').val()>0?searchedItemById($('#shop_id').val()).name_eng:'YET NOT SET'}</th></tr>`;
            console.log(rawData);
                    if(rawData.length>0){
                        let subtotal=0;
                        for (let index = 0; index < rawData.length; index++) {
                             str += `<tr id="tr`+index+`">
                                <td>`+(index+1)+`</td>
                                <td class="text-left">`+rawData[index].name+`</td>
                                <td class="text-right">`+parseFloat(rawData[index].qty).toFixed(2)+`</td>
                                <td class="text-right">`+parseFloat(rawData[index].price).toFixed(2)+`</td>
                                <td class="text-right">`+parseFloat((rawData[index].price*rawData[index].qty)).toFixed(2)+`</td></tr>`;
                                subtotal+=parseFloat((rawData[index].price*rawData[index].qty));
                            

                        }
                        str += `<tr>
                                <td class="text-right" colspan="4">Total</td>
                                <td class="text-right">`+parseFloat(subtotal).toFixed(2)+`</td>
                               </tr>`;
    
                    }
                   
                    $('#cart_tbl_body').html(str);
                    $("#cart_model").modal("show");
                    //initSelect2();
    }
    const getWarehouseByLocation=()=>{
        $('#warehouse_field').hide();
        let returnStr=``;
        // let returnStr=`<option>Select Store</option>`;
        let stores=$('#shop_id').val()>0?searchedItemById($('#shop_id').val()).locations:[];
        if(stores.length){
            console.log(stores);
            stores.forEach(store => {
                returnStr+=`<option value="${store.warehouse_id}">${searchedStoreById((store.warehouse_id))?searchedStoreById((store.warehouse_id)).name_eng:'NA'}</option>`;
            }); 
            $('#warehouse_id').html(returnStr);
            $('#warehouse_field').show();
        }
    }
    const getSum=()=>{
        var sum=0;
        $('.subtotal').each(function(){
            sum += parseFloat(this.value);
        });
        $('#total_amount').val(sum);
        setDiscount();
    }
    const setSubtotal=(i)=>{
            var subtotal=0;
            var qty=parseFloat($('#quantity'+i).val());
            var rate=parseFloat($('#rate'+i).val());
            $('#subtotal'+i).val((qty*rate));
            getSum();
            setDiscount();
    }
    const 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(discount_amount);
            $('#net_amount').val(total-discount_amount);
            // getSum();
    }
</script>
@stop