@extends('adminlte::page') @section('content')
    <?php Fun::lang()?>
    <div class="title-page">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li><a href="#">Setting</a></li>
                <li><a href="#">Purchase Order Setting</a></li>
            </ul>
        </div>
    </div>
    <div class="page">
        <div class="top-content">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="title-page">
                        <div class="pull-left">
                            <h3>Setting</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-body table-responsive">
            {!! Form::open(['route' => 'construction-purchase-order-setting.index', 'method' => 'get']) !!}
            <table class="table1">
                {{-- <tr style="display:none;">
                    <td>
                        Purchase-Order need approval when amount more than or equal ($)
                    </td>
                    <td>{!! Form::text('amount', $setting_amount?$setting_amount->amount:0, ['class' => 'form-control number-only']) !!}</td>
                </tr> --}}
                {{-- <tr>
                    <td>
                        Purchase-Order need approval when Category are
                    </td>
                    <td>{!! Form::select('category[]', $cate,$setting_category, ['class' => 'form-control select2','multiple']) !!}</td>
                </tr> --}}
                <tr>
                    <td>
                        Dont need BOQ when purchase the category and sub-category such as
                    </td>
                    <td>
                        {!! Form::select('cate_do_not_need_boq[]', $cate,$setting_order_do_not_need_boq, ['class' => 'form-control select2','multiple','id'=>'cate_do_not_need_boq']) !!}
                        <br>
                        <table class="table1" width="100%">
                            <thead>
                                <tr>
                                    <td>
                                        Sub Category
                                    </td>
                                    <td>Action</td>
                                </tr>
                            </thead>
                            <tbody id="sub-category">
                            </tbody>
                        </table>
                    </td>
                </tr>
                {{-- <tr​ style="display:none;">
                    <td>
                        Purchase-Order need CEO approval when amount more than ($)
                    </td>
                    <td>{!! Form::text('amount_for_ceo_approval', $amount_for_ceo_approval?$amount_for_ceo_approval->amount:0, ['class' => 'form-control number-only']) !!}</td>
                </tr> --}}
            </table>
            <br>
            <button type="submit" class="btn btn-success">Save</button>
            {!! Form::close() !!}
        </div>
    </div>

@endsection
@section('js')
    <script type="text/javascript">
        path = window.location.pathname;
        window.history.replaceState({}, document.title,path);
        var subcategory_setting = {!! $subcategories !!};
        function get_sub_category(obj) {
            $("#main-spinner").show();
            $.ajax({
                url:"{{route('purchase_order.get_sub_category')}}",
                type:"POST",
                dataType:"JSON",
                data:{
                    "_token":"{{csrf_token()}}",
                    data:$(obj).val()
                },
                success:function (data) {
                    var tr = ``;var cond = "";var sub_category = "";
                    var btn_show = ``;
                    $.each(data,function (index,value) {
                        cond = "";sub_category ="";btn_show = ``;
                        $.each(subcategory_setting,function(num,val) {
                            if(value.id==val.sub_category_id){
                                cond = "checked";
                                sub_category = value.id;
                                btn_show = `
                                    <button type="button" class="btn btn-sm btn-success" onclick="show_item(this)">
                                        <span class="fa fa-eye"></span>
                                    </button>`;
                            }
                        });
                        tr += `
                            <tr category_id = "${value.category_id}" subcategory_id = "${value.id}">
                                <td>${value.name}</td>
                                <td>
                                    <input name='subcategory[]' type="hidden" class="subcategory_append_id" value="${sub_category}">
                                    <label class="checkbox-list">
                                        <input type="checkbox" name="sub_category" ${cond} onchange = 'check_action(this)'>
                                        <span class="checkmark"></span>
                                    </label>
                                    <span class='btn-show'>
                                        ${btn_show}
                                    </span>
                                </td>
                            </tr>
                        `;
                    });
                    $("#sub-category").html(tr);
                },
                complete:function () {
                    $("#main-spinner").hide();
                }
            });
        }
        function check_action(obj) {
            var sub_category_id = "";
            var btn_show = ``;
            if($(obj).is(":checked")) {
                sub_category_id = $(obj).closest('tr').attr('subcategory_id');
                btn_show = `
                            <button type="button" class="btn btn-sm btn-success" onclick="show_item(this)">
                                <span class="fa fa-eye"></span>
                            </button>`;
            }
            else{
                sub_category_id = "";
                btn_show = '';
            }
            $(obj).closest('td').find('span.btn-show').html(btn_show);
            $(obj).closest('tr').find("input.subcategory_append_id").val(sub_category_id);
        }
        $(document).ready(function () {

            get_sub_category($("#cate_do_not_need_boq"));
        });
        $(document).on("change","#cate_do_not_need_boq",function () {
            get_sub_category(this);
        });
        function show_item(obj){
            var sub_category_id = $(obj).closest('td').find('input.subcategory_append_id').val();
            var route = "{{ route('get-product-item-by-subcategory',':id') }}";
            route = route.replace(":id",sub_category_id);
            $("#main-spinner").show();
            $.ajax({
                url:route,
                type:"GET",
                dataType:"JSON",
                success:function(data){
                    var tr = ``;var check_day="";var check_week="";var check_month="";var qty_limit = "";var status = "";
                    $.each(data['products'],function(index,value){
                        $.each(data['session-products'],function(k,v){
                            check_day="";check_week="";check_month="";status = v.status;qty_limit='';
                            if(v.product_id==value.product_id){
                                if(v.status=="by-day") check_day = "checked"; 
                                if(v.status=="by-week") check_week = "checked";
                                if(v.status=="by-month") check_month = "checked";
                                qty_limit = v.qty;
                                return false;
                            }
                        });
                        tr += 
                        `<tr product_id = '${value.product_id}'>
                            <td>${index+1}</td>
                            <td>${value.product_name}</td>
                            <td>${value.unit_name}</td>
                            <td>
                                <input type='hidden' class="product-id" name='product_id[]' value='${value.product_id}'>
                                <input type="text" class="qty-limit number-only form-control" name="limitation[]" value="${qty_limit}">
                                <input type='hidden' class="status-limit" name='status[]' value="${status}">
                            </td>
                            <td>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline1${index}" ${check_day} name="customRadioInline${index}" class="custom-control-input" onchange='setStatus(this)' data-status="by-day">&nbsp;
                                    <label class="custom-control-label" for="customRadioInline1${index}"> Limit by day</label>
                                </div>
                            </td>
                            <td>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline2${index}" ${check_week} onchange='setStatus(this)' data-status="by-week" name="customRadioInline${index}" class="custom-control-input">&nbsp;
                                    <label class="custom-control-label" for="customRadioInline2${index}"> Limit by week</label>
                                </div>
                            </td>
                            <td>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="customRadioInline3${index}" ${check_month} onchange='setStatus(this)' data-status="by-month" name="customRadioInline${index}" class="custom-control-input">&nbsp;
                                    <label class="custom-control-label" for="customRadioInline3${index}"> Limit by month</label>
                                </div>
                            </td>
                        </tr>`;
                    });
                    var content = `
                        <table width='100%'>
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Product Name</th>
                                    <th>Unit</th>
                                    <th>Limitation on product (Qty)</th>
                                    <th>By Day</th>
                                    <th>By Week</th>
                                    <th>By Month</th>
                                </tr>
                            </thead>
                            <tbody id='tb-submit'>
                                ${ tr}
                            </tbody>
                            
                        </table>
                    `;
                    $.alert({
                        title: 'List of Product',
                        type: 'green ',
                        useBootstrap: false,
                        boxWidth: '50%',    
                        content:content,
                        theme: 'modern',
                        buttons: {
                            close: {
                                text: 'close',
                                btnClass: 'button_warning',
                            },
                            save: {
                                    text: 'Save',
                                    btnClass: 'button_primary btn-print',
                                    action: function(){
                                        var data_post = [];
                                        var num = 0;
                                        $($("tbody#tb-submit").find('tr')).each(function(index,value){
                                            let data = [];
                                            var qty = $(this).find("td:eq(3)").find('input.qty-limit').val();
                                            var product_id = $(this).find("td:eq(3)").find('input.product-id').val();
                                            if($(this).find("td:eq(3)").find('input.qty-limit').val()!='' && $(this).find("td:eq(3)").find('input.qty-limit').val()>0)
                                            {       var status = $(this).find('td:eq(3)').find('input.status-limit').val();
                                                    if(status !=''){
                                                        data.push(product_id,qty,status);
                                                        data_post[num++] = data;
                                                    } 
                                            }
                                        });
                                        $("#main-spinner").show();
                                        $.ajax({
                                            url:"{{ route('save_product_data_setting') }}",
                                            type:"POST",
                                            dataType:"JSON",
                                            data:{
                                                "_token":"{{ csrf_token() }}",
                                                subcategory_id:sub_category_id,
                                                data_product:data_post
                                            },
                                            success:function(data){

                                            },
                                            complete:function(){
                                                $("#main-spinner").hide();
                                            }
                                        });
                                    }
                                }
                        }
                    });
                },
                complete:function(){
                    $("#main-spinner").hide();
                }
            });
        }
        function setStatus(obj){
            var status = $(obj).attr('data-status');
            $(obj).closest('tr').find('td:eq(3)').find('input.status-limit').val(status);
        }
    </script>
@endsection