@extends('layouts.admin.master')
@section('title', 'Price List')

@section('vendor-style')
    <style type="text/css">
        .dt-buttons.btn-group{ position: relative; inset-inline-start: 0px; }
    </style>
@endsection

@section('vendor-script')

<script type="text/javascript">
$('.category').select2({
    minimumResultsForSearch: '',
    width: '100%'
});

$(document).on('select2:open', function(e) {
    window.setTimeout(function () {
        document.querySelector('input.select2-search__field').focus();
    }, 0);
});

$(document).on('change', '.category', function(e){
    var cat_id = $(this).val();
    $('#global-loader').show();
    $.ajax({
        url: "{{route('product.category.list')}}",
        type: "POST",
        data: {
            cat_id: cat_id,
            _token: '{{csrf_token()}}'
        },
        dataType: 'json',
        success: function (res) {
            $('#itemList tbody').html('');
            if(res.success)
            {
                var pricelistVal = $('#pricelist option:selected').val();
                var cols = "";
                var size = 0;
                var taxamt = 0;
                var totalPurRate = 0;
                var priceval1, priceval2, priceval3;
                if(pricelistVal == 'Price1')
                {
                    priceval1 = '';
                    priceval2 = 'readonly';
                    priceval3 = 'readonly';
                }
                else if(pricelistVal == 'Price2')
                {
                    priceval1 = 'readonly';
                    priceval2 = '';
                    priceval3 = 'readonly';
                }
                else if(pricelistVal == 'Price3')
                {
                    priceval1 = 'readonly';
                    priceval2 = 'readonly';
                    priceval3 = '';
                }
                else
                {
                    priceval1 = '';
                    priceval2 = '';
                    priceval3 = '';
                }
                $.each(res.products, function (key, value) {
                    size++;
                    taxamt = parseFloat(value.tax.gst / 100) * parseFloat(value.price.purchase_rate);
                    totalPurRate = parseFloat(value.price.purchase_rate) + parseFloat(taxamt);
                    cols += "<tr class='parentDiv reindex'>";
                    cols += '<td class="slno text-start">'+size+'</td>';
                    cols += '<td class="text-start"><input type="hidden" class="prdid" name="prdid['+key+']" value="'+value.id+'">'+value.code+'</td>';
                    cols += '<td class="text-start">'+value.name+'</td>';
                    cols += '<td class="text-start cost">'+value.price.cost+'</td>';
                    cols += '<td class="text-start prate">'+totalPurRate.toFixed(2)+'</td>';
                    cols += '<td class="text-start salerate">'+value.price.sales_rate+'</td>';
                    cols += '<td class="text-start mrp">'+value.price.mrp+'</td>';
                    cols += '<td class="text-start"><input type="text" name="price1['+key+']" class="form-control price1" id="price" '+(priceval1)+' data-price1="'+value.price.price1+'" value="'+value.price.price1+'"></td>';
                    cols += '<td class="text-start"><input type="text" name="price2['+key+']" class="form-control price2" id="price" '+(priceval2)+' data-price2="'+value.price.price2+'" value="'+value.price.price2+'"></td>';
                    cols += '<td class="text-start"><input type="text" name="price3['+key+']" class="form-control price3" id="price" '+(priceval3)+' data-price3="'+value.price.price3+'" value="'+value.price.price3+'"></td>';
                    cols += '<td class="text-start"><input type="text" name="margin['+key+']" class="form-control margin" id="price" data-margin="'+value.price.margin+'" value="'+value.price.margin+'"></td>';
                    cols += '<td><a href="javascript:void(0);" class="btn btn-danger update">Update</a></td>';
                    cols += "</tr>";
                });
                $('#itemList tbody').html(cols);
                $('#global-loader').hide();
            }
        }
    });
});

$(document).on('change', '.pricelist', function(e){
    var priceList = $(this).val();
    if(priceList == 'Price1')
    {
        $('.price1').attr('readonly', false);
        $('.price2').attr('readonly', true);
        $('.price3').attr('readonly', true);
    }
    else if(priceList == 'Price2')
    {
        $('.price1').attr('readonly', true);
        $('.price2').attr('readonly', false);
        $('.price3').attr('readonly', true);
    }
    else if(priceList == 'Price3')
    {
        $('.price1').attr('readonly', true);
        $('.price2').attr('readonly', true);
        $('.price3').attr('readonly', false);
    }
    else
    {
        $('.price1').attr('readonly', false);
        $('.price2').attr('readonly', false);
        $('.price3').attr('readonly', false);
    }
});
</script>

<script type="text/javascript">
    $(document).on('click', '#fillvalues', function(e){
        var pricelist = $('#pricelist option:selected').val();
        var ratelist = $('#ratelist option:selected').val();
        var operand = $('#operand option:selected').val();
        var amounttype = $('#amounttype option:selected').val();
        var discval = $('#discval').val();
        
        $('#itemList > tbody  > tr').each(function(index, tr) {
            var grandamount = 0;
            var costval = $(this).find('.cost').text();
            var prateval = $(this).find('.prate').text();
            var salerateval = $(this).find('.salerate').text();
            var mrpval = $(this).find('.mrp').text();

            var price1val = $(this).find('.price1').data('price1');
            var price2val = $(this).find('.price2').data('price2');
            var price3val = $(this).find('.price3').data('price3');
            if(ratelist == 'Cost')
            {
                var operatAmount = costval;
            }
            else if(ratelist == 'PurchaseRate')
            {
                var operatAmount = prateval;
            }
            else if(ratelist == 'SalesRate')
            {
                var operatAmount = salerateval;
            }
            else
            {
                var operatAmount = mrpval;
            }

            if(amounttype == 'amt')
            {
                if(operand == '+')
                {
                    grandamount = parseFloat(operatAmount) + parseFloat(discval);
                }
                else
                {
                    grandamount = parseFloat(operatAmount) - parseFloat(discval);
                }
            }
            else
            {
                if(operand == '+')
                {
                    grandamount = parseFloat(operatAmount) + (parseFloat(operatAmount * discval) / 100);
                }
                else
                {
                    grandamount = parseFloat(operatAmount) - (parseFloat(operatAmount * discval) / 100);
                }
            }

            if(pricelist == 'None')
            {
                $(this).find('.price1').val(parseFloat(grandamount).toFixed(2));
                $(this).find('.price2').val(parseFloat(grandamount).toFixed(2));
                $(this).find('.price3').val(parseFloat(grandamount).toFixed(2));
            }
            else if(pricelist == 'Price1')
            {
                $(this).find('.price1').val(parseFloat(grandamount).toFixed(2));
                $(this).find('.price2').val(parseFloat(price2val).toFixed(2));
                $(this).find('.price3').val(parseFloat(price3val).toFixed(2));
            }
            else if(pricelist == 'Price2')
            {
                $(this).find('.price1').val(parseFloat(price1val).toFixed(2));
                $(this).find('.price2').val(parseFloat(grandamount).toFixed(2));
                $(this).find('.price3').val(parseFloat(price3val).toFixed(2));
            }
            else
            {
                $(this).find('.price1').val(parseFloat(price1val).toFixed(2));
                $(this).find('.price2').val(parseFloat(price2val).toFixed(2));
                $(this).find('.price3').val(parseFloat(grandamount).toFixed(2));
            }
        });
    });
</script>

<script type="text/javascript">
    $(document).on('click', '.update', function(e){
        var productid = $(this).parents('tr').find('.prdid').val();
        var pricelist1 = $(this).parents('tr').find('.price1').val();
        var pricelist2 = $(this).parents('tr').find('.price2').val();
        var pricelist3 = $(this).parents('tr').find('.price3').val();
        var margin = $(this).parents('tr').find('.margin').val();
        $.ajax({
            url: "{{route('product.pricelist.update.item')}}",
            type: "POST",
            data: {
                productid: productid,
                pricelist1: pricelist1,
                pricelist2: pricelist2,
                pricelist3: pricelist3,
                margin: margin,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function (res) {
                if(res.success)
                {
                    alert(res.message);
                }
                else
                {
                    alert(res.message);
                }
            }
        });
    });
</script>

@endsection

@section('content')

<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Price List</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Masters</a></li>
            <li class="breadcrumb-item active" aria-current="page">Price List</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->
<div class="p-2">
    @if(count($errors) > 0)
        <div class="alert alert-danger d-flex" role="alert"> <span class="badge badge-center rounded-pill bg-danger border-label-danger p-3 me-2"><i class="bx bx-store fs-6"></i></span>
            <div class="d-flex flex-column ps-1">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-1">Error!!</h6>
                @foreach ($errors->all() as $error)
                    <span>{{ $error }}</span>
                @endforeach
            </div>
        </div>
    @endif
    
    @if($message = Session::get('success'))
        <div class="alert alert-success d-flex align-items-center" role="alert"> <span class="badge badge-center rounded-pill bg-success border-label-success p-3 me-2"><i class="bx bx-desktop fs-6"></i></span>
            <div class="d-flex flex-column ps-1">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-0">{{ $message }}</h6>
            </div>
        </div>
    @endif
</div>
<!-- Permission Table -->
<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="col">
                    <label class="form-label" for="category">Category</label>
                    <select id="category" name="category" class="form-control category" data-placeholder="Select Category" required>
                        <option></option>
                        <option value="All">All</option>
                        @foreach($categories as $category)
                            <option value="{{$category->id}}">{{$category->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <div class="card-datatable">
                    <table class="datatables-permissions table table-bordered text-nowrap border-bottom" id="file-datatable">
                        <thead>
                            <tr>
                                <th width="20%">Price List</th>
                                <th width="20%">Rate</th>
                                <th width="15%" class="text-end">Values</th>
                                <th width="15%">Calculation Type</th>
                                <th width="10%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select id="pricelist" name="pricelist" class="form-select form-control pricelist" required>
                                        <option value="None">None</option>
                                        <option value="Price1">Price 1</option>
                                        <option value="Price2">Price 2</option>
                                        <option value="Price3">Price 3</option>
                                    </select>
                                </td>
                                <td>
                                    <select id="ratelist" name="ratelist" class="form-select form-control ratelist" required>
                                        <option value="Cost">Cost</option>
                                        <option value="PurchaseRate">Purchase Rate</option>
                                        <option value="SalesRate">Sales Rate</option>
                                        <option value="MRP">MRP</option>
                                    </select>
                                </td>
                                <td>
                                    <div class="input-group mb-3">
                                        <select id="operand" name="operand" class="form-select form-control operand" required>
                                            <option value="+">+</option>
                                            <option value="-">-</option>
                                        </select>
                                        <span class="input-group-text">=</span>
                                        <input type="number" id="discval" name="discval" class="form-control discval" style="border-color: #e9edf4;" value="0.00" placeholder="0.00" required />
                                    </div>
                                </td>
                                <td>
                                    <select id="amounttype" name="amounttype" class="form-select form-control amounttype" required>
                                        <option value="amt">Add Amount</option>
                                        <option value="percentage">Add Percentage</option>
                                    </select>
                                </td>
                                <td class="text-center">
                                    <a href="javascript:void(0);" id="fillvalues" class="btn btn-warning fillvalues">Fill Values</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form id="purchaseForm" method="post" action="{{ route('product.pricelist.update') }}">
                @csrf
                    <table id="itemList" class="table">
                        <thead>
                            <tr>
                                <th>Sl.No</th>
                                <th>Code</th>
                                <th>Name</th>
                                <th>Cost</th>
                                <th>Purchase Rate</th>
                                <th>Sale Rate</th>
                                <th>MRP</th>
                                <th>Price 1</th>
                                <th>Price 2</th>
                                <th>Price 3</th>
                                <th>Margin</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                    <div class="col-12 text-center demo-vertical-spacing">
                        <button type="submit" class="btn btn-primary me-sm-3 me-1">Bulk Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--/ Permission Table -->
@endsection