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

@section('vendor-style')
<!-- <link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<style type="text/css">
    .table td{ padding: 0.73rem 0.2rem; }
    .bottom-table th{ padding: 0.5rem; font-size: 0.76rem; width: 110px; vertical-align: middle; }
</style>
@endsection

@section('vendor-script')
<script>
// Disable right-click
document.addEventListener('contextmenu', (e) => e.preventDefault());

function ctrlShiftKey(e, keyCode) {
  return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}

document.onkeydown = (e) => {
  // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
  if (
    event.keyCode === 123 ||
    ctrlShiftKey(e, 'I') ||
    ctrlShiftKey(e, 'J') ||
    ctrlShiftKey(e, 'C') ||
    (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
  )
    return false;
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$('.branch').select2({
    minimumResultsForSearch: '',
    width: '100%'
});

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

<script type="text/javascript">
$('#customer').select2({
  placeholder: 'Select Customer',
  ajax: {
    url: "{{route('customerSearch')}}",
    dataType: 'json',
    delay: 250,
    processResults: function (data) {
      return {
        results: $.map(data, function (item) {
              return {
                  text: item.name,
                  id: item.id
              }
          })
      };
    },
    cache: true
  }
});

$('#customer').on('change', function () {
    var customer_id = this.value;
    $("#customer_address").html('');
    $("#contact_no").html('');
    $.ajax({
        url: "{{route('customerDetails')}}",
        type: "POST",
        data: {
            customer_id: customer_id,
            _token: '{{csrf_token()}}'
        },
        dataType: 'json',
        success: function (res) {
            $("#customer_address").html(res.address);
            $("#contact_no").html(res.mobile);
        }
    });
});

$('#pricelist').on('change', function () {
    $(this).attr('readonly', true);
    $(this).attr("style", "pointer-events: none;");
});
</script>

<script type="text/javascript">
    $(function() {

        // Remove button click
        $(document).on('click','.remove',function(){
            $(this).parents('tr').remove();
            i = i - 1;
            $('.reindex').each(function(i){
                $(this).find('.prdid').attr('name', 'prdid[' + (i + 1)+']');
                $(this).find('.code').attr('name', 'code[' + (i + 1)+']');
                $(this).find('.product').attr('name', 'search[' + (i + 1)+']');
                $(this).find('.quantity').attr('name', 'quantity[' + (i + 1)+']');
                $(this).find('.freequantity').attr('name', 'freequantity[' + (i + 1)+']');
                $(this).find('.purchase_rate').attr('name', 'purchase_rate[' + (i + 1)+']');
                $(this).find('.cost').attr('name', 'cost[' + (i + 1)+']');
                $(this).find('.salerate').attr('name', 'salerate[' + (i + 1)+']');
                $(this).find('.mrp').attr('name', 'mrp[' + (i + 1)+']');
                $(this).find('.taxableamt').attr('name', 'taxableamt[' + (i + 1)+']');
                $(this).find('.disc_per').attr('name', 'disc_per[' + (i + 1)+']');
                $(this).find('.disc_amt').attr('name', 'disc_amt[' + (i + 1)+']');
                $(this).find('.taxablerow').attr('name', 'taxablerow[' + (i + 1)+']');
                $(this).find('.cgst').attr('name', 'cgst[' + (i + 1)+']');
                $(this).find('.cgst_amt').attr('name', 'cgst_amt[' + (i + 1)+']');
                $(this).find('.sgst').attr('name', 'sgst[' + (i + 1)+']');
                $(this).find('.sgst_amt').attr('name', 'sgst_amt[' + (i + 1)+']');
                $(this).find('.total').attr('name', 'total[' + (i + 1)+']');
            });

            $('#itemList >tbody >tr').each(function(index) {
                $(this).find('.slno').html(index+1);
            });
            calcAllRowTotals();
        });

        var i = 1;
        // Add button click
        $(document).on('click', '.addProduct', function(e) {
            e.preventDefault();
            var size = $('#itemList >tbody >tr').length;
            var container = $(this).closest('[data-role="dynamic-fields"]');
            var newRow = $("<tr class='parentDiv reindex'>");
            var cols = "";
            cols += '<td class="slno text-center">'+size+'</td>';
            cols += '<td class="d-none"><input type="hidden" data-field-name="id" id="prdid_'+i+'" name="prdid['+i+']"class="prdid" required/><input type="text" data-field-name="code" id="code_'+i+'" name="code['+i+']" placeholder="Code" class="input form-control code search" required autofocus/></td>';
            cols += '<td><input type="text" data-field-name="name" id="search_'+i+'" name="search['+i+']" placeholder="Product" class="input form-control product search" required/></td>';
            cols += '<td><input type="number" value="1" name="quantity['+i+']" class="input quantity form-control" required step=".01"></td>';
            cols += '<td class="d-none"><input type="number" value="0" name="freequantity['+i+']" class="freequantity form-control" required min="0"></td>';
            cols += '<td><input type="text" value="0" id="purchaserate_'+i+'" name="purchase_rate['+i+']" class="input purchase_rate form-control" required></td>';
            cols += '<td class=""><input type="text" value="0" id="mrp_'+i+'" name="mrp['+i+']" class="mrp form-control col-md-12" required readonly></td>';
            cols += '<td class="d-none"><input type="text" class="taxableamt form-control" name="taxableamt['+i+']" id="taxableamt_'+i+'" readonly></td>';
            cols += '<td class="d-none"><input type="text" value="0" name="disc_per['+i+']" class=" disc_per form-control col-md-12" required></td>';
            cols += '<td class="d-none"><input type="text" value="0" name="disc_amt['+i+']" class=" disc_amt form-control col-md-12" required></td>';
            cols += '<td><input type="text" value="0" name="taxablerow['+i+']" class="taxablerow form-control col-md-12" required readonly></td>';
            cols += '<td><input type="text" value="0" name="cgst['+i+']" id="igst_'+i+'" class="cgst form-control col-md-12" required readonly></td>';
            cols += '<td class="d-none"><input type="text" value="0" name="cgst_amt['+i+']" class="cgst_amt form-control col-md-12" required></td>';
            cols += '<td class="d-none"><input type="text" value="0" name="sgst['+i+']" id="sgst_'+i+'" class="sgst form-control col-md-12" required></td>';
            cols += '<td class="d-none"><input type="text" value="0" name="sgst_amt['+i+']" class="sgst_amt form-control col-md-12" required></td>';
            cols += '<td><input type="text" value="0" name="total['+i+']" class="total form-control col-md-12" readonly></td>';
            cols += '<td><a href="javascript:void(0);" class="btn btn-danger remove"><span class="fa fa-trash"></span></a></td>';
            newRow.append(cols);
            container.find("tr:last").before(newRow);
            $("#code_"+i).focus();
            i = i+1;
        });
    });
</script>

<script type="text/javascript">
    function getElementId(element)
    {
        var id, idArr;
        id = element.attr('id');
        idArr = id.split("_");
        return idArr[idArr.length - 1];
    }
    var route = "{{ route('product.autocomplete') }}";
    $(document).on('focus', '.search', function(e) {
        var dataField, thisElement;
        thisElement = $(this);
        dataField = thisElement.data('field-name');
        if(typeof dataField === 'undefined')
        {
            return false;
        }
        thisElement.autocomplete({
            source: function( data, cb ) {   
                $.ajax({
                    url: route,
                    method: 'GET',
                    dataType: 'json',
                    data: {
                        name:  data.term,
                        fieldName: dataField
                    },
                    success: function(res){
                        var result;
                        result = [
                            {
                                label: 'There is no matching record found for '+data.term,
                                value: ''
                            }
                        ];

                        if (res.length)
                        {
                            result = $.map(res, function(obj){
                                
                                return {
                                    label: obj[dataField]+' - Rs:'+obj.price.sales_rate,
                                    value: obj[dataField],
                                    data : obj
                                };
                            });
                        }
                        cb(result);
                    }
                });
            },
            autoFocus: true,            
            minLength: 2,
            select: function( event, selectedData ) {
                if(selectedData && selectedData.item && selectedData.item.data)
                {
                    var rowNo, data;
                    rowNo = getElementId(thisElement);
                    data = selectedData.item.data;
                    $('#prdid_'+rowNo).val(data.id);
                    $('#code_'+rowNo).val(data.code);
                    $('#search_'+rowNo).val(data.name);
                    var pricelist = $('#pricelist').find(":selected").val();

                    var taxincl = data.tax.inclusive_sale;
                    $('#purchaserate_'+rowNo).attr('data-inclusive', taxincl);
                    if(taxincl == 1)
                    {
                        if(pricelist == 'Price1')
                        {
                            var beftax = parseFloat(data.price.price1 / (100 + parseFloat(data.tax.gst))) * 100;
                            $('#purchaserate_'+rowNo).val(beftax.toFixed(3));
                        }
                        else if(pricelist == 'Price2')
                        {
                            var beftax = parseFloat(data.price.price2 / (100 + parseFloat(data.tax.gst))) * 100;
                            $('#purchaserate_'+rowNo).val(beftax.toFixed(3));
                        }
                        else if(pricelist == 'Price3')
                        {
                            var beftax = parseFloat(data.price.price3 / (100 + parseFloat(data.tax.gst))) * 100;
                            $('#purchaserate_'+rowNo).val(beftax.toFixed(3));
                        }
                        else
                        {
                            var beftax = parseFloat(data.price.sales_rate / (100 + parseFloat(data.tax.gst))) * 100;
                            $('#purchaserate_'+rowNo).val(beftax.toFixed(3));
                        }
                    }
                    else
                    {
                        if(pricelist == 'Price1')
                        {
                            $('#purchaserate_'+rowNo).val(data.price.price1);
                        }
                        else if(pricelist == 'Price2')
                        {
                            $('#purchaserate_'+rowNo).val(data.price.price2);
                        }
                        else if(pricelist == 'Price3')
                        {
                            $('#purchaserate_'+rowNo).val(data.price.price3);
                        }
                        else
                        {
                            $('#purchaserate_'+rowNo).val(data.price.sales_rate);
                        }
                    }

                    $('#salesrate_'+rowNo).val(data.price.sales_rate);
                    $('#mrp_'+rowNo).val(data.price.mrp);
                    $('#igst_'+rowNo).val(data.tax.gst);
                    $('#sgst_'+rowNo).val(data.tax.gst/2);
                    calcAllRowTotals();
                }
            }
        });
    });

    $(document).ready(function() {
        $('tr .input:first').focus();
            
        $(document).on("keydown", '.input', function(e) {
           var n = $(".input").length;
           if (e.which == 13) 
           { //Enter key
                e.preventDefault(); //to skip default behavior of the enter key
                var nextIndex = $('.input').index(this) + 1;
                if(nextIndex < n)
                {
                    $('.input')[nextIndex].focus();
                    $('.input')[nextIndex].select();
                }
                else
                {
                    $('.input')[nextIndex-1].blur();
                    $('.addProduct').click();
                }
           }
        });
    });

    $('#itemList tbody').on('keyup change',function(){
        calcAllRowTotals();
    });

    $(document).on('change', '.purchase_rate', function(e){

        var fieldVal = $(this).val();
        var inclTax = $(this).data('inclusive');
        var taxval = $(this).parents('tr').find('.cgst').val();
        if(inclTax == 1)
        {
            var beftax = parseFloat(fieldVal / (100 + parseFloat(taxval))) * 100;
            $(this).val(beftax.toFixed(3));
        }
        else
        {
            $(this).val(fieldVal);
        }
        
    });
</script>

<script type="text/javascript">
    var $itemList = $('#itemList tbody');
    var $subtotal = $('.subtotal');
    var $cgstamt = $('.cgstamt');
    var $sgstamt = $('.sgstamt');
    var $totaltax = $('.totaltax');
    var $itemdiscount = $('.itemdiscount');
    var $netvalue = $('.netvalue');
    var $finalamount = $('.finalamount');
    var $taxable = $('.taxable');

    // Calculate totals for each row
    function calcRowTotals($row)
    {
        var actqty = parseFloat($row.find('.quantity').val());
        var purchase_rate = parseFloat($row.find('.purchase_rate').val());
        var product_total = actqty * purchase_rate;
        var disc_per = parseFloat($row.find('.disc_per').val());
        var disc_amt = (disc_per / 100) * product_total;
        var total_after_discount = parseFloat(product_total - disc_amt);

        if($('.totaldiscountper').val() > 0)
        {
            var totalDiscAmount = $('.totaldiscountper').val();
            var discount_amt = (parseFloat(totalDiscAmount / 100) * parseFloat(total_after_discount));
            var afterdisc_amt = parseFloat(total_after_discount - discount_amt);
            var roundedVal = parseFloat(afterdisc_amt).toFixed(2);
        }
        else
        {
            var roundedVal = total_after_discount.toFixed(2);
        }


        var cgst = parseFloat($row.find('.cgst').val()) / 2;
        var sgst = parseFloat($row.find('.cgst').val()) / 2;
        var cgstamount = (roundedVal / 100) * cgst;
        var sgstamount = (roundedVal / 100) * sgst;
        var totalamt = parseFloat(roundedVal) + parseFloat(cgstamount) + parseFloat(sgstamount);

        $row.find('.taxableamt').val(product_total.toFixed(2));
        $row.find('.disc_amt').val();
        $row.find('.taxablerow').val(roundedVal).parent().attr("data-actval", total_after_discount.toFixed(2));
        $row.attr("data-taxable", total_after_discount);

        $row.find('.cgst_amt').val(cgstamount.toFixed(2));
        $row.find('.sgst_amt').val(sgstamount.toFixed(2));
        $row.find('.total').val(totalamt.toFixed(2));
    }

    // Calculate totals for all rows
    function calcAllRowTotals()
    {
        var sub_total = 0, cgstamt = 0, sgstamt = 0, discountamt = 0, grosstotal = 0, taxable_amt = 0, grossTax = 0, costDisc = 0, costdiscamt = 0, taxable = 0;

        $itemList.find('tr.parentDiv').each(function() {
            var $thisRow = $(this);
            calcRowTotals($thisRow);

            sub_total += parseFloat($thisRow.find('.total').val());
            cgstamt += parseFloat($thisRow.find('.cgst_amt').val());
            sgstamt += parseFloat($thisRow.find('.sgst_amt').val());
            discountamt += parseFloat($thisRow.find('.disc_amt').val());
            grosstotal += parseFloat($thisRow.find('.taxableamt').val());
        });

        $subtotal.html(sub_total.toFixed(2));
        $cgstamt.val(cgstamt.toFixed(2));
        $sgstamt.val(sgstamt.toFixed(2));
        $totaltax.val((cgstamt + sgstamt).toFixed(2));
        $itemdiscount.val(discountamt.toFixed(2));

        grossTax = parseFloat(grosstotal - discountamt);

        costDisc = (parseFloat($('.totaldiscountper').val() / 100) * parseFloat(grossTax));
        costdiscamt = parseFloat(grossTax - costDisc);
        taxable = costdiscamt.toFixed(2);

        $taxable.val(taxable);
        $taxable.parent().attr("data-taxableamt", taxable);
        $taxable.parent().attr("data-totaltaxableamt", grossTax);
        $('.grosstotal').val(grosstotal.toFixed(2));

        var cessval = (parseFloat($('.cessamt').val() / 100) * parseFloat(sub_total));
        var addcessval = (parseFloat($('.addcess').val() / 100) * parseFloat(sub_total));
        var netval = parseFloat(sub_total) + parseFloat(cessval) + parseFloat(addcessval);
        $netvalue.val(netval.toFixed(2));

        calcExpenses(netval.toFixed(2));
    }

    // Calculate expenses
    function calcExpenses(total)
    {
        var freightcoolie = parseFloat($('.freightcoolie').val());
        var otherexp = parseFloat($('.otherexp').val());
        var costfactor = parseFloat($('.costfactor').val());
        var totalItems = $itemList.find('tr.parentDiv').length;

        var freightcooliebyitem = (freightcoolie > 0) ? (freightcoolie / totalItems) : 0;
        var otherexpbyitem = (otherexp > 0) ? (otherexp / totalItems) : 0;
        var costfactorbyitem = (costfactor > 0) ? (costfactor / totalItems) : 0;

        var totalbefdisc = parseFloat(total) + parseFloat(costfactor) + parseFloat(freightcoolie) + parseFloat(otherexp);
        var totaldisc = totalbefdisc - parseFloat($('.cashdisc').val());
        var finalTotal = totaldisc.toFixed($('.roundval').val());
        $finalamount.val(finalTotal);
        $subtotal.html(finalTotal);
    }

    // Event listeners
    $(document).on('keyup change', '.quantity, .purchase_rate, .disc_per, .disc_amt', function() {
        calcRowTotals($(this).closest('tr.parentDiv'));
        calcAllRowTotals();
    });

    $('.cessamt, .addcess, .freightcoolie, .otherexp, .costfactor, .cashdisc, .roundval').on('keyup change', function() {
        calcAllRowTotals();
    });

    $(document).on('keyup', '.totaldiscountper', function() {
        var taxableAmount = parseFloat($('.taxable').parent().attr('data-totaltaxableamt'));
        var discountAmount = ($(this).val() / 100) * taxableAmount;
        $('.taxable').val((taxableAmount - discountAmount).toFixed(2));
        $('.totaldiscountamt').val(discountAmount.toFixed(2));
        calcAllRowTotals();
    });

    $(document).on('keyup', '.totaldiscountamt', function() {
        var taxableAmount = parseFloat($('.taxable').parent().attr('data-totaltaxableamt'));
        var discountPercentage = ($(this).val() / taxableAmount) * 100;
        $('.taxable').val((taxableAmount - $(this).val()).toFixed(2));
        $('.totaldiscountper').val(discountPercentage.toFixed(2));
        calcAllRowTotals();
    });

    $(document).on('keyup change', '.disc_per', function(){
        var discount = $(this).val();
        var parent = $(this).closest('tr.parentDiv');
        percentage_discount = discount > 0 ? discount : 0;
        var grstotal = parseFloat(parent.find('.quantity').val()) * parseFloat(parent.find('.purchase_rate').val());
        var disc = parseFloat(percentage_discount / 100) * parseFloat(grstotal);
        var ttamt = disc.toFixed(2);
        parent.find('.disc_amt').val((ttamt > 0)?ttamt:0);
        calcAllRowTotals();
    });

    $(document).on('keyup change', '.disc_amt', function(){
        var discount = $(this).val();
        var parent = $(this).closest('tr.parentDiv');
        discountamt = discount > 0 ? discount : 0;
        var grstotal = parseFloat(parent.find('.quantity').val()) * parseFloat(parent.find('.purchase_rate').val());
        var discper = ((parseFloat(discount) / parseFloat(grstotal)) * 100);
        var ttamt = discper.toFixed(2);
        parent.find('.disc_per').val((ttamt > 0)?ttamt:0);
        calcAllRowTotals();
    });

</script>

<script type="text/javascript">
    var $seloption = $('#mop').find('option:selected');
    var selvalue = $seloption.val();
    if(selvalue == 'Cash')
    {
        $('#cashmode').removeClass('d-none');
    }
    else
    {
        $('#cashmode').addClass('d-none');
    }
    $(document).on('change', '#mop', function(){
        var $option = $(this).find('option:selected');
        var value = $option.val();
        if(value == 'Cash')
        {
            $('#cashmode').removeClass('d-none');
        }
        else
        {
            $('#cashmode').addClass('d-none');
        }
    });

    $(document).on('click', '#createbtn', function(e){
        $('#settleVal').val('0');
    });

    $('form#purchaseForm').submit(function(){
        $('#createbtn').prop( "disabled", true);
        if($('.recamt').val() > 0)
        {
            $('#settleVal').val('1');
        }
    });

    $(document).on('click', '#settlementbtn', function(e){
        $('#settleVal').val('1');
    });

    $(document).on('keyup', '.recamt', function(e){
        let settleamt = $('#settleamt').text();
        let balanceamt = parseFloat($(this).val()) - parseFloat(settleamt);
        $('#balanceAmount').text(balanceamt.toFixed(2));
    });

    document.addEventListener('keydown', function(event) {
        if(event.ctrlKey && event.key === 'm')
        {
            $('#settleVal').val('1');
            $('.settlementBtn').trigger('click');
        }
    });
    
    $('#settlement').on('shown.bs.modal', function () {
        $('#recamt').focus();
    });
</script>
@endsection

@section('content')
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Sales</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Inventory</a></li>
            <li class="breadcrumb-item active" aria-current="page">Create Sales</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

@if(count($errors) > 0)
    <div class="row mb-2">
        <div class="col-lg-12">
            <div class="alert alert-danger alert-dismissible" role="alert">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-1">Error!!</h6>
                @foreach ($errors->all() as $error)
                    <p class="mb-0">{{ $error }}</p>
                @endforeach
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
            </div>
        </div>
    </div>
@endif
@if($message = Session::get('error'))
    <div class="row mb-2">
        <div class="col-lg-12">
            <div class="alert alert-danger alert-dismissible" role="alert">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-0">{{ $message }}</h6>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
            </div>
        </div>
    </div>
@endif
@if($message = Session::get('success'))
    <div class="row mb-2">
        <div class="col-lg-12">
            <div class="alert alert-success alert-dismissible" role="alert">
                <h6 class="alert-heading d-flex align-items-center fw-bold mb-0">{{ $message }}</h6>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
            </div>
        </div>
    </div>
@endif

<form id="purchaseForm" method="post" action="{{ route('sales.store') }}">
    @csrf
    <input type="hidden" name="typeofSale" value="0">
    <input type="hidden" name="purpose" value="1">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-4">
                    <div class="row mb-1">
                        <div class="col-6">
                            <label class="form-label" for="billdate">Date</label>
                            <input type="date" id="billdate" name="billdate" class="form-control" value="{{ old('billdate')?old('billdate'):date('Y-m-d') }}" placeholder="Date" autofocus required />
                        </div>
                                                <div class="col-6">
                            <label class="form-label" for="customer_name">Customer</label>
                            <input type="text" id="customer_name" name="customer_name" class="form-control" value="{{ old('customer_name')?old('customer_name'):'Cash' }}" placeholder="Customer" required />
                        </div>
                    </div>

                    <div class="row mb-1">
                        
                        <div class="col-6 d-none">
                            <label class="form-label" for="tax">Tax</label>
                            <select id="tax" name="tax" class="form-control" required>
                                <option value="GST">GST</option>
                                <option value="IGST">IGST</option>
                                <option value="No Tax">No Tax</option>
                            </select>
                        </div>

                        <div class="col-6 d-none">
                            <label class="form-label" for="sales_type">Type</label>
                            <select id="sales_type" name="sales_type" class="form-control" required>
                                <option value="B2B">B2B</option>
                                <option value="B2CS" selected>B2CS</option>
                                <option value="B2CL">B2CL</option>
                            </select>
                        </div>
                    </div>
                </div>
                                <div class="col-4">
                    <div class="row mb-1">
                        <div class="col">
                            <label class="form-label" for="sales_man">Sales Man</label>
                            <select id="sales_man" name="sales_man" class="form-control" required>
                                @foreach($employees as $employee)
                                <option value="{{$employee->id}}">{{$employee->name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col">
                            <label class="form-label" for="branch">Branch</label>
                            <select id="branch" name="branch" class="form-control branch" required>
                                <option value="">--Select--</option>
                                @foreach($companys as $company)
                                <option value="{{$company->id}}" {{ (count($companys) == 1)?'selected':'' }}>{{$company->name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col ">
                            <label class="form-label" for="pricelist">Price List</label>
                            <select id="pricelist" name="pricelist" class="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>
                        </div>
                    </div>
                </div>

                <div class="col-4 d-flex align-items-center justify-content-end">
                    <a href="{{ route('counter.sale') }}" class="btn btn-primary mx-1" target="_blank">New Sale</a>
                    <a href="{{ route('counter.sale.status', '1') }}" class="btn btn-primary mx-1" target="_blank">Settled</a>
                    <a href="{{ route('counter.sale.status', '0') }}" class="btn btn-primary mx-1" target="_blank">Unsettled</a>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <table class="table table-hover" id="itemList">
                <thead>
                    <tr>
                        <th class="text-center text-capitalize">No</th>
                        
                        <th class="text-center text-capitalize" width="25%">Product</th>
                        <th class="text-center text-capitalize" width="5%">Quantity</th>
                        <th class="text-center text-capitalize d-none">Free Qty</th>
                        <th class="text-center text-capitalize" width="10%">Unit Price</th>
                        <th class="text-center text-capitalize " width="10%">MRP</th>
                        <th class="text-center text-capitalize d-none">Gross Amt</th>
                        <th class="text-center text-capitalize d-none" width="10%">Disc %</th>
                        <th class="text-center text-capitalize d-none" width="10%">Discount</th>
                        <th class="text-center text-capitalize" width="10%">Price</th>
                        <th class="text-center text-capitalize" width="10%">GST %</th>
                        <th class="text-center text-capitalize d-none">CGST Amt</th>
                        <th class="text-center text-capitalize d-none">SGST %</th>
                        <th class="text-center text-capitalize d-none">SGST Amt</th>
                        <th class="text-center text-capitalize" width="10%">Total</th>
                        <th class="text-center text-capitalize"></th>
                    </tr>
                </thead>
                <tbody data-role="dynamic-fields">
                    <tr class="parentDiv">
                        <td class="text-center">1</td>
                        <td class="d-none">
                            <input type="hidden" data-field-name="id" id="prdid_0" name="prdid[0]"class="prdid" required/>
                            <input type="text" data-field-name="code" id="code_0" name="code[0]" placeholder="Code" class="input form-control code search" required autofocus/>
                        </td>
                        <td><input type="text" data-field-name="name" id="search_0" name="search[0]" placeholder="Product" class="input form-control product search" required/></td>
                        <td><input type="number" value="1" name="quantity[0]" class="input quantity form-control" required step=".01"></td>
                        <td class="d-none"><input type="number" value="0" name="freequantity[0]" class="freequantity form-control" required min="0"></td>
                        <td><input type="text" value="0" id="purchaserate_0" name="purchase_rate[0]" class="input purchase_rate form-control" required></td>
                        <td class=""><input type="text" value="0" name="mrp[0]" id="mrp_0" class="mrp form-control col-md-12" required readonly></td>
                        <td class="d-none"><input type="text" value="0" name="taxableamt[0]" class="taxableamt form-control" id="taxableamt_0" readonly></td>
                        <td class="d-none"><input type="text" value="0" name="disc_per[0]" class=" disc_per form-control col-md-12" required></td>
                        <td class="d-none"><input type="text" value="0" name="disc_amt[0]" class=" disc_amt form-control col-md-12" required></td>
                        <td><input type="text" value="0" name="taxablerow[0]" class="taxablerow form-control col-md-12" required readonly></td>
                        <td><input type="text" value="0" name="cgst[0]" id="igst_0" class="cgst form-control col-md-12" required readonly></td>
                        <td class="d-none"><input type="text" value="0" name="cgst_amt[0]" class="cgst_amt form-control col-md-12" required></td>
                        <td class="d-none"><input type="text" value="0" name="sgst[0]" id="sgst_0" class="sgst form-control col-md-12" required></td>
                        <td class="d-none"><input type="text" value="0" name="sgst_amt[0]" class="sgst_amt form-control col-md-12" required></td>
                        <td><input type="text" value="0" name="total[0]" class="total form-control col-md-12" readonly></td>
                        <td>
                            <a href="javascript:void(0);" class="btn btn-outline-danger"><span class="fa fa-hand-o-down"></span></a>
                        </td>
                    </tr>
                    <tr id="divlast"><td></td><td colspan="17" class="text-end"><a href="javascript:void(0);" class="btn btn-primary addProduct">Add <span class="fa fa-plus"></span></a></td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card">
        <div class="card-header"> <h3 class="card-title">Price Section</h3> </div>
        <div class="card-body">
            <div class="col-12">
                <input type="hidden" name="finalamount" class="finalamount" id="finalamount">
                <div class="row">
                    <div class="col-10">
                        <table class="table bottom-table">
                            <tbody>
                                <tr>
                                    <th class="text-capitalize">Gross Total</th><td><input type="text" value="0" name="grosstotal" class="form-control grosstotal" required readonly></td>
                                    <th class="text-capitalize">Taxable</th><td><input type="text" value="0" name="taxable" class="form-control taxable" required readonly></td>
                                    <th class="text-capitalize">CGST Amt</th><td><input type="text" value="0" name="cgstamt" class="form-control cgstamt" required readonly></td>
                                    <th class="text-capitalize d-none">Sales Value</th><td class="d-none"><input type="text" value="0" name="salesvalue" class="form-control taxable" required></td>
                                    <th class="text-capitalize">Other Expense</th><td><input type="text" value="0" name="otherexp" class="form-control otherexp" required></td>
                                    <th class="text-capitalize d-none">Cost Factor</th><td class="d-none"><input type="text" value="0" name="costfactor" class="form-control costfactor" required></td>
                                </tr>
                                <tr>
                                    <th class="text-capitalize ">Discount</th>
                                    <td >
                                        <div class="input-group mb-3">
                                            <input type="text" name="discountfinal" class="form-control totaldiscountper" placeholder="%" aria-label="%">
                                            <input type="text" name="discountfinalamt" class="form-control totaldiscountamt" placeholder="Amount" aria-label="Amount">
                                        </div>
                                    </td>
                                    <th class="text-capitalize">Total Tax</th><td><input type="text" value="0" name="totaltax" class="form-control totaltax" required readonly></td>
                                    <th class="text-capitalize">SGST Amt</th><td><input type="text" value="0" name="sgstamt" class="form-control sgstamt" required readonly></td>
                                    <th class="text-capitalize">Net Value</th><td><input type="text" value="0" name="netvalue" class="form-control netvalue" required readonly></td>
                                    <th class="text-capitalize ">Freight Coolie</th><td ><input type="text" value="0" name="freightcoolie" class="form-control freightcoolie" required></td>
                                    <th class="text-capitalize" colspan="2"></th>
                                </tr>
                                <tr>
                                    <th class="text-capitalize d-none">Item Discount</th><td class="d-none"><input type="text" value="0" name="itemdiscount" class="form-control itemdiscount" required readonly></td>
                                    <th class="text-capitalize d-none">Exempted</th><td class="d-none"><input type="text" value="0" name="exempted" class="form-control exempted" required></td>
                                    <th class="text-capitalize d-none">IGST Amt</th><td class="d-none"><input type="text" value="0" name="igstamt" class="form-control igstamt" required readonly></td>
                                    <th class="text-capitalize d-none">Cess Amt</th><td class="d-none"><input type="text" value="0" name="cessamt" class="form-control cessamt" required></td>
                                    <th class="text-capitalize d-none">Add.Cess</th><td class="d-none"><input type="text" value="0" name="addcess" class="form-control addcess" required></td>
                                    <th class="text-capitalize" colspan="2"></th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-2">
                        <table class="table bottom-table">
                            <tbody>
                                <tr>
                                    <th class="text-capitalize">Cash Discount</th><td><input type="text" value="0" name="cashdisc" class="form-control cashdisc" required></td>
                                </tr>
                                <tr>
                                    <th class="text-capitalize">Round Off</th><td><input type="text" value="2" name="roundval" class="form-control roundval" required></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="card cart">
                            <div class="card-header p-2">
                                <h3 class="card-title p-0" style="font-size: 0.8rem;">Bill Amount</h3>
                            </div>
                            <div class="card-body p-2">
                                <div class="">
                                    &#8377; <h1 class="fw-semibold d-inline subtotal">0.00</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 text-center demo-vertical-spacing">
                <button type="submit" id="createbtn" class="btn btn-primary me-sm-3 me-1">Create</button>
                <button type="button" class="btn btn-info me-sm-3 me-1 settlementBtn" data-bs-toggle="modal" data-bs-target="#settlement">Settlement (ctrl+m)</button>
            </div>
        </div>
    </div>
    <div class="modal fade" id="settlement" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bill Settlement</h5>
                    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">

                    <h1 class="subtotal text-center mt-3" id="settleamt"></h1>
                    <input type="hidden" name="settleVal" id="settleVal" value="0">
                    <div class="mb-1 mt-3">
                        <label class="form-label" for="mop">MOP</label>
                        <select id="mop" name="mop" class="form-control" required>
                            <option value="Cash" selected>Cash</option>
                            <option value="Card">Card</option>
                            <option value="Transfer">Transfer</option>
                            <option value="Credit">Credit</option>
                            <option value="UPI">UPI</option>
                        </select>
                    </div>
                    <div id="cashmode" class="d-none">
                        <div class="mb-1">
                            <label class="form-label text-center" for="recamt">Received Amount</label>
                            <input type="number" id="recamt" name="recamt" class="form-control recamt" value="" placeholder="Amount" step=".01" tabindex="5" autofocus />
                        </div>
                        <h1 class="text-center mt-3" id="balanceAmount"></h1>
                    </div>
                </div>
                <div class="modal-footer text-center">
                    <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary" id="settlementbtn" type="submit">Save</button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection