@extends('admin.layouts.master')
@section('title', 'Recieve')
@section('content')
    <style>
        .some-text {
            color: red;
            font-style: italic;
            font-size: 15px;
        }

        .help-block {
            color: red;
            font-size: 13px;
            font-weight: normal;
        }
        .box_small {
            background: #ffffff;
            color: #737373;
            font-size: 15px;
            padding: 10px 15px;
            margin-bottom: 10px;
            border-radius: 10px;
            box-shadow: 0px 0px 4px #dedede;
        }
        .box_small span{
            float: right;
            display: inline-block;
            color: #444444;
            background: #efefef;
            border-radius: 5px;
            width: auto;
            height: 25px;
            font-size: 12px;
            text-align: center;
            padding: 5px 7px;
            font-weight: 400;
            line-height: 17px;
            position: relative;
            top: -2px;
            user-select: none;
        }
        .label_box_right .box_small span{
            float: left;
        }

    </style>
         <!-- loader -->
        <div class="loading-wraper">
            <div class="loading"></div>
        </div>
        <!-- loader -->
        

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">

            <div class="row">

                <div class="col-md-12">
                    @include('admin.includes.msg')
                    <div class="card card-table">
                        <div class="card-body">
                            <div class="card-header">
                                <h4 class="card-title">Recieve


                                </h4>
                                <script>function submitnow() {
                                        $("#admin-form").submit();
                                    }</script>
                            </div>

                            <style>

                                input::-webkit-outer-spin-button,
                                input::-webkit-inner-spin-button {
                                    -webkit-appearance: none;
                                    margin: 0;
                                }

                                /* Firefox */
                                input[type=number] {
                                    -moz-appearance: textfield;
                                }

                                td {
                                    font-size: 13px;
                                }

                                .w120 {
                                    width: 120px;
                                }

                                .w30 {
                                    width: 60px;
                                }

                                .select2 {
                                    width: 100% !important;
                                }

                                .select2-selection--single {
                                    height: 36px !important;
                                    width: 100%;
                                }

                                .select2-container--default .select2-selection--single .select2-selection__rendered {
                                    height: 36px !important;
                                    line-height: 36px !important;
                                }

                                .original_price {
                                    display: inline-block;
                                }

                                .mrp_price {
                                    display: inline-block;
                                    float: right;
                                    color: red;
                                }

                                .user_details {
                                    margin-bottom: 10px;
                                }

                                .user_details .user_name {
                                    font-weight: 500;
                                    color: #333;
                                    font-size: 18px;
                                }

                                .user_details div {
                                    color: #333;
                                    font-size: 16px;
                                }

                                .quantity span {
                                    display: inline-block;
                                    cursor: pointer;
                                    transition: 0.3s;
                                }

                                .quantity {
                                    /* display: inline-block;*/
                                    text-align: left;
                                }

                                .minus, .plus {
                                    background: #f87b44;
                                    padding: 0;
                                    font-size: 14px;
                                    font-weight: 400;
                                    border-radius: 50%;
                                    border: 0 solid #f87b44;
                                    vertical-align: middle;
                                    text-align: center;
                                    width: 25px;
                                    height: 25px;
                                    line-height: 24px;
                                    color: #ffffff;
                                    transition: 0.3s;
                                }

                                .quantity span:hover {
                                    background: #ff9668;
                                    color: #ffffff;
                                }

                                .quantity input {
                                    border: none;
                                    background: none;
                                    max-width: 40px;
                                }

                                .quantity input {
                                    width: 100px;
                                    height: auto;
                                    border-radius: 20px;
                                    text-align: center;
                                    font-size: 14px;
                                    border: 1px solid #f87b44;
                                    display: inline-block;
                                    vertical-align: middle;
                                    background: #ffffff;
                                    outline: 0px;
                                    color: #f87b44;
                                }

                                .add_btn button {
                                    border: 0;
                                    background: #f87b44;
                                    color: #fff;
                                    padding: 5px 20px;
                                    outline: 0;
                                    border-radius: 30px;
                                }

                                .add_btn button:hover {
                                    background: #ff9668;
                                }

                                .btn-section {
                                    width: 130px;
                                    padding: 2px 10px !important;
                                    text-align: center;
                                }

                                .quantity-section {
                                    width: 115px;
                                    text-align: left;
                                    margin-left: 15px;
                                }

                                .quantity-section div {
                                    margin-left: 10px;
                                }

                                .quantity-section .quantity {
                                    display: inline-block;
                                }

                                .delete_btn div {
                                    background: #f44336;
                                    color: #fff;
                                    border-radius: 50%;
                                    font-size: 13px;
                                    font-weight: 700;
                                    border: 0 !important;
                                    cursor: pointer;
                                    width: 22px;
                                    height: 22px;
                                    padding: 0 !important;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    margin: 5px;
                                }

                                .delete_btn_td {
                                    width: 70px;
                                }

                                .delete_btn {
                                    margin-left: 10px;
                                }

                                .select2-selection {
                                    width: 400px;
                                }

                                .heading {
                                    background: #f3f3f3 !important;
                                    color: #333;
                                    font-weight: 600;
                                }

                                .heading th {
                                    background: #f3f3f3 !important;
                                    color: #333;
                                    font-weight: 600;
                                }

                                .item_img {
                                    width: 70px;
                                    padding: 5px 5px !important;
                                }

                                .price_section {
                                    width: 130px;
                                    padding: 2px 10px !important;
                                }

                                .myfilter .select2-container--default .select2-selection--single {
                                    width: 100% !important;
                                    border: 1px solid #e2e2e2;
                                    height: 38px !important;
                                }

                                .product_search input {
                                    width: 99%;
                                    border: 1px solid #e2e2e2;
                                    padding: 0px 10px;
                                    margin-left: 5px;
                                    margin-bottom: 15px;
                                    border-radius: 4px;
                                    height: 38px !important;
                                }
                            </style>

                            <div class="before_mystocktable ">
                                <div class="row">
                                    <div class="col-md-6">
                                        {{--<table class="myfilter">
                                            <tr>
                                                <td>
                                                    <form action="" method="get">
                                                        <select name="user" class="filter-search" onchange="this.form.submit()">
                                                            <option value="">Select Customer</option>
                                                            @foreach($user as $u)
                                                                <option value="{{$u->id}}" @if(isset($_GET['user']) && $_GET['user']==$u->id) selected @endif>{{$u->name}} / {{$u->orderno}}</option>
                                                            @endforeach
                                                        </select>
                                                    </form>
                                                </td>
                                            </tr>
                                        </table>--}}

                                        <div class="">
                                            <div class="select_user">
                                                <form action="" method="get">

                                                    <div class="form-group">
                                                        <label for="orderno">Order Number</label>
                                                        <input type="text" id="orderno" class="form-control" name="orderno"
                                                               @if(isset($_GET['orderno']) && !empty($_GET['orderno'])) value="{{$_GET['orderno']}}" @endif>
                                                               
                                                    </div>
                                                    <input type="submit" class="btn btn-success" value="Search">
                                                </form>
                                            </div>
                                        </div>                                        
                                    </div>
                                    <div class="col-md-3">
                                        
                                    </div>


                                </div>
                                @if(isset($order) && !empty($order))
                                    <div class="card">

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="datatable1 table table-stripped">
                                    <thead>
                                    <tr>
                                        <!--<th>Sl.No</th>-->
                                        <th>Order Id</th>
                                        <th>Price</th>
                                        <th>Return</th>
                                        <th>Discount</th>
                                        <th>total Epay</th>
                                        <th>total cash</th>
                                        <th>total payment</th>
                                        <th>outstanding amount</th>
                                        <th>Deliveryboy</th>
                                        <th>Status</th>
                                        <th>Delivered Date</th>
                                        <th>payment logs</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                        @php  $totalreceive=0;$totalreturn_price=0;$totalcommission=0; @endphp
                                        @foreach($order as $key=>$val)

                                            <tr>
                                                <!--<td>{{$key+1}}</td>-->
                                                <td>{{ $val->orderId}}<br>
                                                    @php echo date('h:i A, d M', strtotime($val->created_at)) @endphp
                                                </td>
                                                <td>Rs {{ $val->totalPrice}} @php  $totalreceive+=$val->totalPrice; @endphp</td>
                                                <td>Rs {{ $val->return_price}} @php  $totalreturn_price+=$val->return_price; @endphp</td>
                                                <td>Rs {{ $val->discount}}</td>                                                
                                                <td>
                                                    Rs {{ number_format(floatval($val->payment_mode['Epay'] ?? 0), 2) }}
                                                </td>
                                                <td>
                                                    Rs {{ number_format(floatval($val->payment_mode['ByCash'] ?? 0), 2) }}
                                                </td> 
                                                <td>
                                                    Rs {{ number_format(($val->totalPrice ?? 0) - ($val->return_price ?? 0) - ($val->discount ?? 0) - ($val->outstandingamount ?? 0), 2) }}
                                                </td>
                                                <td>
                                                    Rs {{ $val->outstandingamount}} 
                                                    @if(empty($Orderreceivepayments[0]))
                                                    <span style="display: none;" id="collectspan">{{ $val->outstandingamount}}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $val->deliveryboy}}
                                                </td>
                                                <td>{{ $val->orderStatus}}</td>
                                                <td>{{ $val->delivered_date}}</td>
                                                <td>
                                                    <a href="#" data-toggle="modal" data-target="#myModal" onclick="details({{ $val->payment_method_details }})"><img src="../admin/assets/img/details.png" style="width: 20px;">Details</a>
                                                </td>                                                
                                                <td>
                                                    @if(empty($Orderreceivepayments[0]))
                                                        @if($val->outstandingamount!=0)
                                                            <a href="javascript:void(0)" class="btn-info btn" onclick="showDiv();"> Recieve</a>
                                                        @else
                                                            Received
                                                        @endif
                                                    @else
                                                        N/A
                                                    @endif    
                                                </td>

                                            </tr>
                                        @endforeach

                                        
                                        @foreach($Orderreceivepayments as $key=>$valo)

                                            <tr>
                                                <!--<td>{{$key+1}}</td>-->
                                                <td>{{ $order[0]->orderId}}</td>
                                                <td>Rs {{ $valo->order_initial_amount}}</td>
                                                <td>N/A</td>
                                                <td>Rs {{ $valo->discount}}</td>                                                
                                                <td>
                                                    Rs {{ number_format(floatval($valo->payment_mode['Epay'] ?? 0), 2) }}
                                                </td>
                                                <td>
                                                    Rs {{ number_format(floatval($valo->payment_mode['ByCash'] ?? 0), 2) }}
                                                </td> 
                                                <td>
                                                    Rs {{ number_format($valo->total_collected_amount, 2) }}
                                                </td>
                                                <td>
                                                    Rs {{ $valo->outstanding_amount}} 
                                                    @if(($key+1) == count($Orderreceivepayments))
                                                    <span style="display: none;" id="collectspan">{{ $valo->outstanding_amount}}</span>
                                                    @endif
                                                </td>
                                                <td>N/A</td>
                                                <td>N/A</td>
                                                <td>{{ $valo->payment_received_date}}</td>
                                                <td>
                                                    <a href="#" data-toggle="modal" data-target="#myModal" onclick="details({{ $valo->payment_method_details }})"><img src="../admin/assets/img/details.png" style="width: 20px;">Details</a>
                                                </td>                                                
                                                <td>
                                                    @if(($key+1) == count($Orderreceivepayments))
                                                        @if($valo->outstanding_amount!=0)
                                                            <a href="javascript:void(0)" class="btn-info btn" onclick="showDiv();"> Recieve</a>
                                                        @else
                                                            Received
                                                        @endif
                                                    @else
                                                        N/A
                                                    @endif
                                                </td>

                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                
                <div class="paymentmethod col-md-7">
                    
                    <form action="{{ route('savePaymentmethodbyRetailer') }}" method="post" id="deliverypaymentrecieve">
                        @csrf
                    <div style="display: none;" id="paymentmethod">
                        <input type="hidden" name="id" value="{{$order[0]->id}}">
                        <div class="form-group sub_price_box">
                            <div>
                                 
                                <div class="col-md-12 row">
                                    <select class="box_small col-md-2" name="payment_mode[]">
                                        <option value="Epay">Epay</option>
                                        <option value="By Cash">By Cash</option>
                                    </select>
                                    <input class="box_small col-md-4 numberInput" type="text" name="payment_amount[]" onkeypress="return decimalsonly(event);" onkeyup="totalamount();" placeholder="Enter Price">
                                    <span class="col-md-6">
                                        <a href="javascript:void(0);" onclick="addMorePrice(this);" class="text-gray">
                                            <img src="../admin/assets/img/plus.png" style="width: 20px;">
                                        Add method
                                        </a>
                                    </span>
                                </div>
                                <div class="col-md-12 row">
                                    <div class="col-md-2">&nbsp;</div>
                                    <div class="col-md-5 row">
                                        <input class="box_small col-md-12" type="text" name="payment_amount_note[]" placeholder="Enter Note">
                                    </div>
                                    <div class="col-md-5">&nbsp;</div>
                                </div>
                                                               
                            </div>                            
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-md-2">Discount : </label><input class="box_small col-md-4" type="text" value="" name="discount" id="discount" onkeypress="return decimalsonly(event);" onkeyup="totalamount();">
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-md-4"><u>Total Amount</u> : <br><span id="collect_amount"></span><input type="hidden" name="collectamount" id="collectamount"></label>
                            <label class="col-form-label col-md-4"><u>Outstanding Amount</u> : <br><span id='outstanding_amount'></span><input type="hidden" name="outstandingamount" id="outstandingamount"></label>
                            <label id="nopayment"></label>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Collect Now                                   
                                </button>                               
                            </label>
                            <label class="col-form-label col-md-4">
                                @php 
                                if($order[0]->deliveryboy_recieved_payment){
                                }else{@endphp
                                <div id="formContainer"></div>
                                <button type="button" class="btn btn-primary" onclick="cancelorder({{$order[0]->id}});">Cancel Order</button>
                                @php } @endphp
                            </label>
                        </div>
                    </div>
                    </form>    
                </div>

                            </div>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- /Main Wrapper -->
    </div>
    <script>
        @if(isset($current_user) && !empty($current_user))

        function addtocart(user_id, product_id) {
            $.get("/updatecart/add/" + user_id + "/" + product_id+ "/01", function (res) {
                $(".cart").html(res);
            })
        }

        addtocart({{$current_user->id}}, 0);
        @endif
    </script>
    <style>
        .form-control {
            min-width: 60px;
        }
    </style>

    <SCRIPT language=Javascript>
        <!--
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31
                && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }

        //-->
    </SCRIPT>
    <script>
        $(document).ready(function () {
            $("#gsearch").on("keyup blur", function () {
                var value = $(this).val().toLowerCase();
                $("#mytable tbody tr").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>

    {{--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>--}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.filter-search').select2();
        });
    </script>
    <script>
            $(document).ready(function(){
                $(".loading-wraper").remove();
            });
        </script>
        
        <script>
    function details(id) {
        const jsonData = JSON.stringify(id, null, 2);
        const data = JSON.parse(jsonData);
//        alert(data);
        // Get table body element
        const tableBody = document.getElementById('paymentTable').querySelector('tbody');
        // Function to populate the table
        function populateTable(data) {
            tableBody.innerHTML = ''; 
            if (Array.isArray(data) && data.length > 0) {
                data.forEach(row => {
                    const tr = document.createElement('tr');
                    const paymentAmount = parseFloat(row.payment_amount || 0).toFixed(2);
            
                    tr.innerHTML = `
                        <td>${row.payment_mode}</td>
                        <td>₹${paymentAmount}</td>
                        <td>${row.payment_note || 'N/A'}</td>
                    `;
                    tableBody.appendChild(tr);
                });
            }else{
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td colspan="3" style="text-align: center;">No Payment Details</td>
                `;
                tableBody.appendChild(tr);
            }
        }

        // Call the function
        populateTable(data);

        
        //let d = JSON.stringify(id, null, 2);
        //alert(d);
        $(".modal-footer").hide();
        $(".modal-title").text("Payment logs");
        //$.get("/details/" + id, function (res) {
            //$(".modal-body").html(d);
        //})
    }
    function showDiv() {
        document.getElementById('paymentmethod').style.display = "block";
        totalamount();
    }
    function addMorePrice(obj){
        //let dd = '<div><select class="box_small col-md-2" name="payment_mode[]"><option value="Epay">Epay</option><option value="By Cash">By Cash</option></select>&nbsp;<input class="box_small col-md-4 numberInput" type="text" name="payment_amount[]" onkeypress="return decimalsonly(event);" onkeyup="totalamount();">&nbsp;<span class="col-md-4"><a href="javascript:void(0);" onclick="removeMorePrice(this);" class="text-gray"><img src="../admin/assets/img/minus.png" style="width: 20px;">Remove</a></span></div>';
        let dd = '<div><div class="col-md-12 row">\n\
                    <select class="box_small col-md-2" name="payment_mode[]">\n\
                        <option value="Epay">Epay</option>\n\
                        <option value="By Cash">By Cash</option>\n\
                    </select>\n\
                    <input class="box_small col-md-4 numberInput" type="text" name="payment_amount[]" onkeypress="return decimalsonly(event);" onkeyup="totalamount();" placeholder="Enter Price">\n\
                    <span class="col-md-6">\n\
                        <a href="javascript:void(0);" onclick="removeMorePrice(this);" class="text-gray">\n\
                            <img src="../admin/assets/img/minus.png" style="width: 20px;">\n\
                        Remove\n\
                        </a>\n\
                    </span>\n\
                </div>\n\
                <div class="col-md-12 row">\n\
                    <div class="col-md-2">&nbsp;</div>\n\
                    <div class="col-md-5 row">\n\
                        <input class="box_small col-md-12" type="text" name="payment_amount_note[]" placeholder="Enter Note">\n\
                    </div>\n\
                    <div class="col-md-5">&nbsp;</div>\n\
                </div></div>';
        $(obj).parent().parent().parent().append(dd);
    }
    function removeMorePrice(obj){
        $(obj).parent().parent().parent().remove();
        totalamount();
    }
    
    function decimalsonly(e) {
        var unicode = e.charCode ? e.charCode : e.keyCode;
        if ((unicode !== 8) && (unicode !== 9)) {
            if ((unicode === 46) || (unicode >= 48 && unicode <= 57))
                return true;
            else
                return false;
        }
    }
    function totalamount(){
        var ta = 0;
        $('.numberInput').each(function() {
            ta += parseFloat($(this).val()) || 0;
        });
        $('#collect_amount').text('₹'+parseFloat(ta).toFixed(2));
        $('#collectamount').val(ta);
        let discount = parseFloat($('#discount').val()) || 0;
        ta += discount;        
        outstandingamount(ta);
    }
    
    function outstandingamount(ta){
        let ca = parseFloat($('#collectspan').html()) || 0;
        var oa = parseFloat((ca-ta)).toFixed(2);
        $('#outstanding_amount').text('₹'+oa);
        $('#outstandingamount').val(oa);
    }
</script>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Header</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered" id="paymentTable">
                    <thead>
                        <tr>
                            <th>Payment Mode</th>
                            <th>Payment Amount</th>
                            <th>Payment Note</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- JavaScript will populate rows here -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>


@endsection