@extends('admin.layout.master')
@section('title','COSTING MANAGEMENT')
@section('custom_style')
<style>
    input[type=text],
    input[type=file],
    input[type=number] {
        height: 35px !important;
    }
    .table th, .table td {
            padding: 0px 5px;
            color: black;
    }
    .table th {
        background: #ab3535;
        padding: 5px !important;
        color: white !important;
    }
    .table-bordered th, .table-bordered td {
        border: 1px solid #c1c1c1 !important;
    }

</style>
@endsection
@section ('content')
<div class="card sina-card">
    <div class="card-header card-header-s">
        <h4>COSTING</h4>
    </div>
    <div class="card-body">
         
        <input type="hidden" name="" id="csrf-token" value="{{ Session::token() }}" />
        <div class="">
            <form id="form" method="get" action="{{ route('pre_sells.costing_create') }}" name="form" enctype="multipart/form-data">
             
                <div class="row">
                    <div class="col-md-2 col-12 d-flex flex-wrap pr-0 mb-3">
                        
                    </div>
                    <div class="col-md-3 col-12 d-flex flex-wrap pr-0 mb-3">
                       
                    </div>
                    <div class="col-md-3 col-12 d-flex flex-wrap pr-0 mb-3">
                       
                    </div>
                    <div class="col-md-4 col-12 d-flex flex-wrap pr-0 mb-3">
                        <div class="col-12 px-0">
                            <div class="input-group pr-3">
                                {{-- <span class="input-group-text">Search</span> --}}
                                <select id="finished_product_search" class="form-control select_2" name="category_code" style="width:93%">
                                    <option value="0">select product</option>
                                    @forelse ($categories as $category)
                                    <option value="{{$category->code}}">{{$category->code.'--'.$category->name_eng}}</option>
                                        
                                    @empty
                                        
                                    @endforelse
                                </select>
                                <div class="input-group-append" style="width:7%">
                                    <button type="submit" class="btn btn-sm btn-danger">
                                    <span class="fa fa-search"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </form>
               
        </div>
            {{-- end --}}
            {{-- <hr> --}}
        <form id="form" method="post" action="{{ route('pre_sells.costing_store') }}" name="form" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-4 col-12 d-flex flex-wrap pr-0 mb-3"></div>
                    <div class="col-md-4 col-12 d-flex flex-wrap pr-0 mb-3"></div>
                    <div class="col-md-4 col-12 d-flex flex-wrap pr-0 mb-3">
                        <div class="col-4 px-0">
                            <label for="date">Effect Date</label>
                        </div>
                        <div class="col-8 px-0">
                            <input type="date" name="effect_date" class="form-control" id="effect_date">
                        </div>
                    </div>
                </div>
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th style="width: 5%;">#</th>
                            <th style="width: 35%;">PRODUCT</th>
                            {{-- <th>Price</th> --}}
                            <th style="width: 15%;">O. Cost</th>
                            <th style="width: 15%;">Commission</th>
                            <th style="width: 30%;">NOTE</th>
                            {{-- <th>Total</th> --}}
                        </tr>
                    </thead>
                    <tbody id="tbl_body">
                        @php
                            $i=0;
                        @endphp
                        @if(count($products)>0)
                            @forelse ($products->groupBy('cat_code') as $k=>$productGroup)
                            <tr>
                                <th colspan="5" class="text-center bg-dark text-light">{{$productGroup->first()->catByCatCode->name_eng}}</th>
                            </tr>
                                @forelse ($productGroup as $item)
                                    <tr id="tr-{{ ++$i }}">
                                        <td>{{ $i }}</td>
                                        <td>
                                            <div class="row">
                                                <div class="checkbox col-8">
                                                    <input  type="checkbox" id="check_box-{{$i}}" class="{{strtolower($item->id)}}-select" name="product_id[{{$i}}]" value="{{$item->id}}">
                                                    <label for="demo-form-checkbox">{{$item->name_eng}}</label>
                                                </div>
                                                <div class="col-2 text-right">
                                                    <span class="badge badge-secondary">{{$item->primaryUnit?$item->primaryUnit->name:''}}</span>
                                                </div>
                                            </div>
                                        </td>
                                        {{-- <td class="text-center">
                                            <input type="number" name="price[{{$item->id}}]" id="price{{ $i }}" class="form-control" value="{{$item->buy_price}}">
                                        </td> --}}
                                        <td>
                                            <input type="number" min="0"  name="other_cost[{{$i}}]"
                                            id="other_cost{{ $i }}" class="form-control" onchange="checkedRow({{$i}})">
                                        </td>
                                        <td>
                                            <div class="input-group">
                                                <input type="number" min="0" max="100"  name="commission[{{$i}}]"
                                                id="commission{{ $i }}" class="form-control" step="0.01" onchange="checkedRow({{$i}})">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">%</span>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <div class="input-group text-right" style="width:100%">  
                                                <input type="text" name="desc[{{$i}}]" id="desc{{ $i }}" class="form-control" style="max-width:85%" onchange="checkedRow({{$i}})">
                                                <div class="input-group-append" style="width:10%">
                                                    <button type="button" onclick="deleteRow({{$i}})" class="btn btn-danger btn-sm">
                                                        <span class="fa fa-minus"></span><span class="btn_text-{{$item->id}}"></span>
                                                    </button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                @endforelse
                            @empty
                            @endforelse
                        @endif
                            <input type="hidden" name="" id="index_num" value="{{($i)}}">
                       
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-12 text-right mt-2 mt-md-0">
                    <button class="btn btn-sm btn-primary btn-pill btn-sina-submit" style="position: fixed;bottom:10%;right:0" onclick="addRow()" type="button"
                        name="add_Row" id="add_Row"><i class="fas fa-plus"></i></button>
                </div>
            </div>
            <hr>
            
            <div class="row modal-footer">
                <input class="btn btn-sm btn-primary btn-pill btn-sina-submit" type="submit" id="save" value="save" style="position: fixed;bottom:10%;right:50px;z-index:50124">
            </div>
        </form>
    </div>
</div>

{{-- @include('inventory.indent.previuos_recipe_modal') --}}
@endsection
@section('script')
<script>
    const store_setting = @json(store_info());
</script>
<script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
<script>
    $('.select_2').select2();
function addRow(){
    var index=$('#index_num').val()?(parseInt($('#index_num').val())+1):0;
    var returnData='';
    returnData+=`<tr id="tr-`+index+`">
                                <td>`+(index)+`</td>
                                <td>
                                    <div class="d-flex text-center row">
                                        <div class="col-10">  
                                            <select class="form-control new_product" style="width: 100%" name="product_id[`+index+`]" onchange="getPriviousCosting('`+index+`',this.value)">
                                                <option value=" ">-- Select Product --</option>
                                            </select>
                                        </div>
                                        <div class="col-2">
                                            <span class="badge badge-secondary" id="unit-`+index+`"></span>
                                        </div>
                                    </div>
                                </td>`;
                                // returnData+=`<td>
                                //                 <input type="number" onkeyup="setSubtotal('`+index+`')" min="0" step=".01"  name="price[`+index+`]"
                                //                     id="price`+index+`" class="form-control-sm" value="0">
                                //             </td>`;
                                returnData+=`<td class="text-center">
                                                <input type="number" min="0" name="other_cost[`+index+`]" id="other_cost`+index+`" step=".01" class="form-control-sm" value="0">  
                                             </td>
                                            
                                            <td>
                                                <div class="input-group">
                                                    <input type="number" min="0" max="100" step="0.01"  name="commission[`+index+`]"
                                                    id="commission`+index+`" class="form-control">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">%</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-right">
                                                <div class="input-group text-right" style="width:100%">  
                                                    <input type="text" name="desc[`+index+`]" id="desc`+index+`" class="form-control" style="max-width:85%"">
                                                    <div class="input-group-append" style="width:5%">
                                                        <button type="button" onclick="deleteRow(`+index+`)" class="btn btn-danger btn-sm">
                                                            <span class="fa fa-minus"></span><span class="btn_text-`+index+`"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </td>
                                           
                                            </tr>`;
                                            //console.log(returnData);
                                    $('#index_num').val((index));
                                    $('#tbl_body').append(returnData);
                                    initSelect2();
}
function initSelect2(){
    productSearch('new_product');
}
function getPriviousCosting(row_id,product_id){
    var returnData;
    var effect_date=$('#effect_date').val();
    // var end=$('#end_date').val();
    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
    });
    $.ajax({
        type: "GET",
        url: "{{route('pre_sells.costing_search')}}",
        data: {
            effect_date:effect_date,
            product_id:product_id,
            type:2,
        },
        success: function (data) {
            $('#unit-'+row_id).text(data['product'].primary_unit?data['product'].primary_unit.name:'')
            if(data['costing']){
                $('#other_cost'+row_id).val(data['costing'].other_cost);
                $('#commission'+row_id).val(data['costing'].purchase_commission);
                $('#desc'+row_id).val(data['costing'].note);
            }
              
        },
        error: function (response) {
        },
    });
}
function deleteRow(row_id){
    $('#tr-'+row_id).remove();
}
function checkedRow(row_id){
    // $('#check_box-'+row_id).checked;
    $('#check_box-'+row_id).prop("checked", true);
}
</script>
@stop