@extends('layouts.app')

@section('title', 'Purchase Invoice')

@section('content')

<div class="load">

    <div class="loader"></div>

</div>


@if (isset ($preceive->sno))
<form action="" method="post" id="preceive">
    @else
    <form action="{{ route('savepreceive') }}" method="post" id="preceive">
        @endif

        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        @csrf

        <div class="container">

            {{-- <h1>Sales Order</h1> --}}

            <br><br>

            <div class="row">

                <div class="col-sm-3">

                    <div class="row">

                        <div class="col-4">

                            <label for="sno">S.No</label>

                        </div>

                        <div class="col-6">

                            <input autocomplete="off" type="text" {{-- name="sno" --}}
                                value="{{ isset ($preceive->sno) ? old('sno', $preceive->sno) : old('sno') }}" id="sno"
                                class="form-control" readonly>

                        </div>

                    </div>

                </div>

                <div class="col-1">

                    <button type="button" onclick="$('#modal-user-settings3').modal('show');" data-toggle="modal">L</button>

                </div>

                <div class="col-1"></div>

                <div class="col-3">

                    <div class="row">

                        <div class="col-3">

                            <label for="type">Type</label>

                        </div>

                        <div class="col-9">

                            {{ Form::select('type', ['ONE' => 'Select Type....', 'IMPORT' => 'IMPORT', 'LOCAL' => 'LOCAL'], isset($preceive->type) ? old('type', $preceive->type) : old('type') , ['class' => 'form-control type']) }}

                        </div>

                    </div>

                </div>

                <div class="col-1"></div>

                <div class="col-3">

                    <div class="row">

                        <div class="col-3">

                            <label for="date">Date</label>

                        </div>

                        <div class="col-5">

                            <input autocomplete="off" tabindex="1" type="tel" maxlength="10" placeholder="dd/mm/yyyy"
                                oninput="this.value = DDMMYYYY(this.value, event , this)"
                                value="{{ isset($preceive->date) ? old('date', \Carbon\Carbon::parse(str_replace('/', '-', $preceive->date))->format('d/m/Y')) : old('date' , \Carbon\Carbon::now()->setTimezone('Asia/Karachi')->format('d/m/Y')) }}"
                                name="date" id="date" class="form-control">

                        </div>

                    </div>

                </div>

            </div>

            <br>

            <div class="row">

                <div class="col-6">

                    <div class="row">

                        <div class="col-2">

                            <label for="vendor">Vendor</label>

                        </div>

                        <div class="col-3">

                            <input autocomplete="off" tabindex="1000" type="text" name="vendor"
                                value="{{ isset ($preceive->vendor) ? old('vendor', $preceive->vendor) : old('vendor') }}"
                                id="vendor" class="form-control" readonly>

                        </div>

                        <div class="col-6">

                            <input autocomplete="off" tabindex="1000" type="text" name="vendor1"
                                value="{{ isset ($preceive->vendor1) ? old('vendor1', $preceive->vendor1) : old('vendor1') }}"
                                id="vendor1" class="form-control">

                        </div>

                        <div class="col-1">

                            <!-- <button type="button" tabindex="1" onclick="$('#modal-user-settings3').modal('show');" data-toggle="modal">L</button> -->

                        </div>

                    </div>

                </div>

                <div class="col-1"></div>

                <div class="col-2">

                    <div class="row">

                        <div class="col-5">

                            <label for="pono" style="white-space: nowrap;">Po Number</label>

                        </div>

                        <div class="col-7">

                            <input autocomplete="off" tabindex="1" type="text" name="pono"
                                value="{{ isset ($preceive->pono) ? old('pono', $preceive->pono) : old('pono') }}"
                                id="pono" class="form-control">

                        </div>

                    </div>

                </div>



                <div class="col-2">

                    <div class="row">

                        <div class="col-4">

                            <label for="podate">Po Date</label>

                        </div>

                        <div class="col-8">

                            <input autocomplete="off" tabindex="1" type="tel" maxlength="10" placeholder="dd/mm/yyyy"
                                oninput="this.value = DDMMYYYY(this.value, event , this)"
                                value="{{ isset ($preceive->podate) ? old('podate', \Carbon\Carbon::parse(str_replace('/', '-', $preceive->podate))->format('d/m/Y')) : old('podate') }}"
                                name="podate" id="podate" class="form-control">

                        </div>

                    </div>

                </div>

            </div>



            <br>



            <div class="row">

                <div class="col-4">

                    <div class="row">

                        <div class="col-3">

                            <label for="remarks">Remarks</label>

                        </div>

                        <div class="col-9">

                            <input autocomplete="off" tabindex="1" type="text" name="remarks"
                                value="{{ isset ($preceive->remarks) ? old('remarks', $preceive->remarks) : old('remarks') }}"
                                id="remarks" class="form-control">

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <br>

        <div class="container box-to" style="margin-left: 85px;">

            <div class="add_m">

                <div class="row">

                    <!-- <div class="col-1"></div> -->

                    <div class="col-1 change_it p-1">

                        <label for="pcode">Product</label>

                    </div>

                    <div class="col-2 change_it p-1">

                        <label for="desc1">Desc</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="batch">Batch</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="expiry">Expiry</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="qty">Pack</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="unit">Unit</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="qty1">Qty</label>

                    </div>


                    <div class="col-1 change_it p-1">

                        <label for="rate">Price</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="gross">gross</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="disc">disc</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="stax">stax</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="net">net</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="atax">A.Tax</label>

                    </div>

                    <div class="col-1 change_it p-1">

                        <label for="amt">Total</label>

                    </div>

                </div>

                @if (isset ($preceive->sno))

                <div class="m_sa">

                    @foreach($preceive->preceived as $key => $cl)

                    <div class="row">

                        <!-- <div class="col-1"></div> -->

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->pcode }} " type="text" name="item[{{$key}}][pcode]" id="pcode"
                                class="form-control pcode" readonly>

                        </div>

                        <div class="col-2 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->desc1 }} " type="text" name="item[{{$key}}][desc1]" id="desc1"
                                class="form-control desc1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->batch }} " type="text" name="item[{{$key}}][batch]" id="batch"
                                class="form-control batch">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" type="tel" maxlength="10" placeholder="dd/mm/yyyy"
                                oninput="this.value = DDMMYYYY(this.value, event , this)"
                                value="@if($cl->expiry != NULL){{\Carbon\Carbon::parse(str_replace('/', '-', $cl->expiry))->format('d/m/Y')}}@endif" name="item[{{$key}}][expiry]" id="expiry" class="form-control expiry">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->qty }} " type="text" name="item[{{$key}}][qty]" id="qty"
                                class="form-control qty change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->unit }} " type="text" name="item[{{$key}}][unit]" id="unit"
                                class="form-control unit change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->qty1 }} " type="text" name="item[{{$key}}][qty1]" id="qty1"
                                class="form-control qty1 change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->rate }} " type="text" name="item[{{$key}}][rate]" id="rate"
                                class="form-control rate change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->gross }} " type="text" name="item[{{$key}}][gross]" id="gross"
                                class="form-control gross change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->disc }} " type="text" name="item[{{$key}}][disc]" id="disc"
                                class="form-control disc change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->stax }} " type="text" name="item[{{$key}}][stax]" id="stax"
                                class="form-control stax change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->net }} " type="text" name="item[{{$key}}][net]" id="net"
                                class="form-control net change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->atax }} " type="text" name="item[{{$key}}][atax]" id="atax"
                                class="form-control atax change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value=" {{ $cl->net }} " type="text" name="item[{{$key}}][amt]" id="amt"
                                class="form-control amt change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <button type="button" style="width:25px;" name="ck" class="form-control fa fa-trash ck"></button>

                        </div>

                    </div>

                    @endforeach

                </div>

                @else

                <div class="m_sa"></div>

                @endif

            </div>

            <br>

            <div class="row">

                <div class="col-11"></div>

                <!-- <div class="col-1">

                    <button type="button" onclick="func();" data-toggle="modal">Add</button>

                </div> -->


                <div class="col-1 p-2">

                    <input type="text" style="margin-left:205px;" name="gtotal" id="gtotal" class="form-control gtotal" readonly>

                </div>

            </div>

            <br>

            <div class="row">

                <div class="col-10"></div>

                <div class="col-1">

                    <button type="button" onclick="func();" data-toggle="modal">Add</button>

                </div>

                <div class="col-1 p-0">

                    <button type="button" class='delete_m'>Delete</button>

                </div>

            </div>

        </div>

        <br>

        <div class="row">

            <div class="col-5"></div>

            <div class="col-2">

                <button type="submit" name="add_user" value="1" class="btn btn-primary btn-lg mt-2"
                    style="margin: auto; border-radius: 13px;">Submit</button>

            </div>

        </div>

        </div>

    </form>

    @endsection

    @section('scripts')

    <script>
        $(window).ready(function() {

            $('[name="date"]').focus();

            @if(!isset($preceive-> sno))

            $("select").val("")

            @endif

        });



        var i = 2;

        $(".addmore").on('click', function() {

            // alert(0);

            var m = $('.m_sa > .row').length + 1;



            data = `<div class="row">
                 
                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][pcode]" id="pcode"
                                class="form-control pcode" readonly>

                        </div>

                        <div class="col-2 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][desc1]" id="desc1"
                                class="form-control desc1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][batch]" id="batch"
                                class="form-control batch" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" type="tel" maxlength="10" placeholder="dd/mm/yyyy"
                                oninput="this.value = DDMMYYYY(this.value, event , this)"
                                value="" name="item[` + m + `][expiry]" id="expiry" class="form-control expiry">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][qty]" id="qty"
                                class="form-control qty change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][unit]" id="unit"
                                class="form-control unit change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][qty1]" id="qty1"
                                class="form-control qty1 change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][rate]" id="rate"
                                class="form-control rate change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][gross]" id="gross"
                                class="form-control gross change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="0" type="text" name="item[` + m + `][disc]" id="disc"
                                class="form-control disc change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="0" type="text" name="item[` + m + `][stax]" id="stax"
                                class="form-control stax change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][net]" id="net"
                                class="form-control net change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][atax]" id="atax"
                                class="form-control atax change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][net]" id="net"
                                class="form-control net change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <button type="button" style="width:25px;" name="ck" class="form-control fa fa-trash ck"></button>

                        </div>

                    </div>`;

            var m = 0;

            $('.add_m > .row:last-child input').each(function() {

                console.log($(this).val());

                if ($(this).val() == '') {

                    m = 1;

                }

            })

            $('.add_m > .row:last-child select').each(function() {

                console.log($(this).val());

                if ($(this).val() == '') {

                    m = 1;

                }

            })

            if (m == 0) {

                $('.m_sa').append(data);

            }

        });


        $('.delete_m').click(function() {

            var m = 0;

            $('.m_sa > .row:last-child input').each(function() {

                console.log($(this).val());

                if ($(this).val() != '' && $(this).val() != null) {

                    m = 1;

                }

            })

            $('.m_sa > .row:last-child select').each(function() {

                console.log($(this).val());

                if ($(this).val() != '' && $(this).val() != null) {

                    m = 1;

                }

            })

            if (m == 0) {

                $('.m_sa > .row:last-child').remove();

            }

        })

        $("#vendor").change(function() {

            var check = $("#vendor").val();

            var t = $('this');

            var request = $.ajax({

                url: "{{ url('/') }}/api/sorder/" + check,

                method: "GET",

            });

            request.done(function(msg, textStatus, xhr) {

                // console.log(xhr.status)

                if (xhr.status == 201) {

                    $("form").submit(function(e) {

                        //e.preventDefault();

                    });

                    alert(msg.error);

                    $('[name="pono"]').focus();

                }

                console.log(msg.data.company)

                $('[name="vendor1"]').val(msg.data.company)

            })

        })

        $("body").on('change', '.pcode', function() {

            var check = $(".pcode").val();

            var t = $(this);

            var p = t.parent().parent();

            // console.log($('this'));

            var request = $.ajax({

                url: "{{ url('/') }}/api/sorder1/" + check,

                method: "GET",

            });

            request.done(function(msg, textStatus, xhr) {

                // console.log(xhr.status)

                if (xhr.status == 201) {

                    $("form").submit(function(e) {

                        e.preventDefault();

                    });

                    alert(msg.error);

                    t.val('');

                    t.focus();

                }

                console.log(msg);

                p.find('.desc1').val(msg.data.product)

                // $('[name="customer1"]').val(msg.data.product)

            })

        })

        function DDMMYYYY(value, event, $d) {

            let newValue = value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');

            const dayOrMonth = (index) => index % 2 === 1 && index < 4;

            // console.log(dayOrMonth);

            // on delete key.  

            if (!event.data) {

                return value;

            }

            if (newValue.split('').length != 8) {

                return value;

            }

            $dates = newValue.split('').map((v, i) => dayOrMonth(i) ? v + '/' : v).join('');

            // if(!isValidDate($dates)){

            //     $($d).addClass('required');

            // }else{



            //     $($d).removeClass('required');

            // }



            return $dates;

        }

        $('[oninput="this.value = DDMMYYYY(this.value, event , this)"]').focusout(function() {

            $dates = $(this).val();

            if (!isValidDate($dates)) {

                $(this).addClass('required');

                $(this).focus()



            } else {



                $(this).removeClass('required');

            }



        })



        function isValidDate(dateString)

        {

            // First check for the pattern

            var regex_date = /^\d{1,2}\/\d{1,2}\/\d{4}$/;

            console.log(regex_date);

            if (!regex_date.test(dateString))

            {

                return false;

            }



            // Parse the date parts to integers

            var parts = dateString.split("/");

            var day = parseInt(parts[0], 10);

            var month = parseInt(parts[1], 10);

            var year = parseInt(parts[2], 10);



            // Check the ranges of month and year

            if (year < 1000 || year > 3000 || month == 0 || month > 12)

            {

                return false;

            }



            var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];



            // Adjust for leap years

            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))

            {

                monthLength[1] = 29;

            }



            // Check the range of the day

            return day > 0 && day <= monthLength[month - 1];

        }



        $(document).ready(function() {

            $(document).on("keydown", "form", function(event) {

                return event.key != "Enter";

            });

        });
    </script>

    <!-- User Settings, modal which opens from Settings link (found in top right user menu) and the Cog link (found in sidebar user info) -->

    <div id="modal-user-settings2" class="modal fade modal-xl" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <!-- Modal Header -->

                <div class="modal-header text-center">

                    <h2 class="modal-title"><i class="fa fa-pencil"></i> Products</h2>

                </div>

                <!-- END Modal Header -->

                <!-- Modal Body -->

                <div class="modal-body">

                    <div>

                        <div class="col ab-side tblisting">

                            <table class="table table1">

                                <thead>

                                    <tr>

                                        <th>Id</th>

                                        <th>Product</th>

                                        <th>Comapny</th>

                                        <th>Price</th>

                                        <th></th>

                                    </tr>

                                </thead>

                                <tbody>

                                    @foreach($products as $cl)

                                    <tr>

                                        <td>

                                            {{ $cl->sno }}

                                        </td>

                                        <td>

                                            {{ $cl->product }}

                                        </td>

                                        <td>

                                            @if($cl->company4)
                                            {{ $cl->company4->company }}
                                            @endif

                                        </td>

                                        <td>

                                            {{ $cl->price1 }}

                                        </td>
                                        <td>
                                            <input autocomplete="off" type="button" name="check" value="Add" class="btn btn-primary check" data-id="{{ $cl->sno }}" data-name="{{ $cl->product }}" data-rate="{{ $cl->price1 }}">
                                        </td>

                                    </tr>

                                    @endforeach

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <!-- END Modal Body -->

            </div>

        </div>

    </div>


    <div id="modal-user-settings3" class="modal fade modal-xl" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <!-- Modal Header -->

                <div class="modal-header text-center">

                    <h2 class="modal-title"><i class="fa fa-pencil"></i> Purchase Orders</h2>

                </div>

                <!-- END Modal Header -->

                <!-- Modal Body -->

                <div class="modal-body">

                    <div>

                        <div class="col ab-side">

                            <table class="table table2">

                                <thead>

                                    <tr>

                                        <th>Id</th>

                                        <th>Date</th>

                                        <th>Vendor Name</th>

                                        <th>Remarks</th>

                                        <th></th>

                                    </tr>

                                </thead>

                                <tbody>

                                    @foreach($purchase as $cl)

                                    <tr>

                                        <td>

                                            {{ $cl->sno }}

                                        </td>

                                        <td>

                                            {{ $cl->date }}

                                        </td>

                                        <td>

                                            {{ $cl->vendor1 }}

                                        </td>

                                        <td>

                                            {{ $cl->remarks }}

                                        </td>

                                        <td>
                                            <button type="button" name="" value="" class="btn  btn-primary btn-xs mt-2 clickcustomer"
                                                style="margin: auto; border-radius: 13px;" data-id="{{ $cl->sno }}" data-vendor="{{ $cl->vendor }}" data-vendor1="{{ $cl->vendor1 }}" data-remarks="{{ $cl->remarks }}" data-date="{{ $cl->date }}">Select</button>
                                        </td>

                                    </tr>

                                    @endforeach

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <!-- END Modal Body -->

            </div>

        </div>

    </div>

    @endsection

    @section('scripts')

    <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

    <link href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        .btn1 {

            padding: 5px;

            font-size: 13px;

            height: auto;

            line-height: 1;

            margin: 0px;

        }

        .table1 {

            font-size: 13px;

        }

        .text1 {

            padding: 0px;

            height: 30px;

            font-size: 15px;

        }

        .table td,
        .table th {

            padding: 2px 5px;

        }

        table.dataTable tbody th,
        table.dataTable tbody td {

            padding: 2px 5px;

        }

        td {}
    </style>

    @endsection

    @section('ccss')

    <style>
        .required {

            background: #ffafaf !important;
            border-color: red !important;

        }

        .container {

            margin: 0;

        }

        .container {}

        .add_m .row>* {
            width: 100px;
            float: left;
        }

        .add_m .row>*:nth-child(2) {
            width: 220px;
        }

        .add_m {
            display: inline-block;
            width: 100%;
        }

        .ck {}

        .add_m .row {
            white-space: nowrap;
            display: inline-block;
            width: 1700px;
        }

        .add_m {
            width: 100%;
            overflow-x: scroll;
        }

        .loader {
            width: 120px;
            height: 20px;
            background: linear-gradient(90deg, #0000, orange) left -50px top 0/50px 20px no-repeat lightblue;
            animation: l2 1s infinite linear;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .load {
            position: fixed;
            z-index: 9999999999999999999999999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #00000070;
            display: none;
        }

        @keyframes l2 {
            100% {
                background-position: right -50px top 0
            }
        }
    </style>

    <script>
        function f() {
            $('.table2').DataTable({
                order: [
                    [0, 'desc']
                ]
            });
            $('.table1').DataTable({
                order: [
                    [0, 'desc']
                ]
            });
        }

        function addpro(id = 0, name = 0, rate = 0, qty = 0, unit = 0) {

            // alert(0);

            var m = $('.m_sa > .row').length + 1;

            data = `<div class="row">

                        <div class="col-1 change_it p-1">



                            <input autocomplete="off" tabindex="1" value="` + id + `" type="text" name="item[` + m + `][pcode]" id="pcode"
                                class="form-control pcode" readonly>

                        </div>

                        <div class="col-2 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="` + name + `" type="text" name="item[` + m + `][desc1]" id="desc1"
                                class="form-control desc1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][batch]" id="batch"
                                class="form-control batch" >

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" type="tel" maxlength="10" placeholder="dd/mm/yyyy"
                                oninput="this.value = DDMMYYYY(this.value, event , this)"
                                value="" name="item[` + m + `][expiry]" id="expiry" class="form-control expiry">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="` + qty + `" type="text" name="item[` + m + `][qty]" id="qty"
                                class="form-control qty change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="` + unit + `" type="text" name="item[` + m + `][unit]" id="unit"
                                class="form-control unit change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][qty1]" id="qty1"
                                class="form-control qty1 change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="` + rate + `" type="text" name="item[` + m + `][rate]" id="rate"
                                class="form-control rate change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][gross]" id="gross"
                                class="form-control gross change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="0" type="text" name="item[` + m + `][disc]" id="disc"
                                class="form-control disc change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="0" type="text" name="item[` + m + `][stax]" id="stax"
                                class="form-control stax change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][net]" id="net"
                                class="form-control net change1" readonly>

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="0" type="text" name="item[` + m + `][atax]" id="atax"
                                class="form-control atax change1">

                        </div>

                        <div class="col-1 change_it p-1">

                            <input autocomplete="off" tabindex="1" value="" type="text" name="item[` + m + `][amt]" id="amt"
                                class="form-control amt change1" readonly>

                        </div>
                        
                        <div class="col-1 change_it p-1">

                            <button type="button" style="width:25px;" name="ck" class="form-control fa fa-trash ck"></button>

                        </div>

                    </div>`;



            var m = 0;

            $('.add_m > .row:last-child input').each(function() {

                console.log($(this).val());

                if ($(this).val() == '') {

                    m = 1;

                }

            })

            $('.add_m > .row:last-child select').each(function() {

                console.log($(this).val());

                if ($(this).val() == '') {

                    m = 1;

                }

            })

            if (m == 0) {

                $('.m_sa').append(data);

            }

        }
        $(window).ready(function() {
            f();

            $('body').on('click', '.clickcustomer', function() {
                $id = $(this).attr('data-id');
                $na = $(this).attr('data-vendor');
                $na1 = $(this).attr('data-vendor1');
                $da = $(this).attr('data-date');
                $rm = $(this).attr('data-remarks');

                $.ajax({
                        method: "GET",
                        url: "https://medicosmarketing.com/admin/admin/public/api/preceive/" + $id,
                    })
                    .done(function(msg) {

                        console.log(msg);

                        for (let i = 0; i < msg.data.length; i++) {
                            addpro(msg.data[i].pcode, msg.data[i].desc1, msg.data[i].rate, msg.data[i].qty, msg.data[i].unit);

                        }

                    });

                $('#vendor').val($na);
                $('#vendor1').val($na1);
                $('#pono').val($id);
                $('#podate').val($da);
                $('#remarks').val($rm);
                $('#modal-user-settings3').modal('hide');

            })

            $('body').on('click', '.check', function() {

                $id = $(this).attr('data-id');
                $na = $(this).attr('data-name');
                $pa = $(this).attr('data-rate');

                addpro($id, $na, $pa);

                // console.log($id)
                // console.log($na)
                // console.log($pa)
                $('#modal-user-settings2').modal('hide');

            })

            function calculateGrandTotal() {
                let grandTotal = 0;

                // Iterate over each row's "total" field and sum the values
                $('.amt').each(function() {
                    const rowTotal = parseFloat($(this).val()) || 0; // Handle NaN values
                    grandTotal += rowTotal;
                });

                // Update the grand total field
                document.getElementById('gtotal').value = grandTotal.toFixed(2);

                console.log("Grand Total: ", grandTotal); // Debugging log
            }

            $('body').on('change', '.change1', function() {

                $qt = $(this).parent().parent().find('.qty1').val();
                $rice = $(this).parent().parent().find('.rate').val();

                $(this).parent().parent().find('.gross').val($qt * $rice);
                $g = parseInt($qt) * parseFloat($rice);

                $disc = $(this).parent().parent().find('.disc').val();
                $stax = $(this).parent().parent().find('.stax').val();
                $discount = $g - ((parseFloat($disc) * parseFloat($g)) / 100);

                $stax = $(this).parent().parent().find('.stax').val();

                stax = ((parseFloat($stax) * parseFloat($g)) / 100);

                $net = parseFloat($discount) + parseFloat(stax)
                $(this).parent().parent().find('.net').val($net);

                $atax = $(this).parent().parent().find('.atax').val();
                $(this).parent().parent().find('.amt').val($net+($net * $atax)/100);

                let grandTotal = 0;
                $('.amt').each(function() {
                    const rowTotal = parseFloat($(this).val()) || 0; // Get total value, handle NaN
                    grandTotal += rowTotal; // Add to grand total
                });

                document.getElementById('gtotal').value = grandTotal.toFixed(2);

                console.log('The Grand Total: ', grandTotal);
            });

            // Calculate the initial grand total on page load for existing rows
            window.onload = calculateGrandTotal;

        })

        function func() {
            $('.load').show(0)
            var request = $.ajax({



                url: "{{ url('/') }}/api/modal/",



                method: "GET",



            });



            request.done(function(msg, textStatus, xhr) {



                // console.log(xhr.status)





                console.log(msg)



                $('.tblisting').html(msg)


                $('.tblisting .table1').DataTable({
                    order: [
                        [0, 'desc']
                    ]
                });

                $('#modal-user-settings2').modal('show');
                $('.load').hide(0)

            })
        }

        $('body').on('click', '.ck', function() {
            $(this).parent().parent().remove();
            // $(this).closest('div').remove();
        })
    </script>
    @endsection