<div class="card border10 shadow">
    <div class="card-header">
        <div class="row">
            <div class="col-md-8">
                Shipping To :<br>
                <ul class="ul" style="list-style:none;margin-left:27px;padding:5px">

                    <li style=" margin-left: -37px;"><i class="fa fa-mobile-alt"></i> Mobile :
                        <?php if (!empty($order->customer_mob)) : ?> <?= $order->customer_mob ?> <?php endif ?> </li>
                    <li style=" margin-left: -37px;"><i class="fa fa-address-card"></i> Address:
                        <?php if (!empty($order->adress)) : ?> <?= $order->adress ?> <?php endif ?></li>
                </ul>
            </div>
            <div class="col-md-4 ">
                <ul class="ul" style="list-style:none;">
                    <li></li>
                    <li>Order ID :<?php if (!empty($order->invoice_id)) : ?>#<?= $order->invoice_id ?> <?php endif ?>
                    </li>
                    <li>Order Time :<?php if (!empty($order->created_at)) : ?>
                        <?= date("Y-m-d h:i:a", strtotime($order->created_at)) ?> <?php endif ?></li>

                </ul>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-borderless table-striped table-hover shadow">
                <tr>

                    <th>Image</th>
                    <th>Name</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>Get Cashback</th>
                    <th>Total</th>

                    <th>Refund</th>

                </tr>
                <?php $total = 0; ?>
                <?php foreach ($orderDetails as $detail) : ?>
                    <tr>
                        <?php $total += $detail->customer_price * $detail->quan; ?>

                        <td><img src="https://myadmin.mali-mart.com/images/products/<?= $detail->thumb ?>" width="50px" height="40px"></td>
                        <td><a href="https://www.mali-mart.com/<?= $detail->product_name ?>" target="_blank"><?= $detail->product_name ?></a></td>
                        <td><?= $detail->quan ?></td>
                        <td>৳ <?= number_format($detail->customer_price, 2) ?></td>
                        <td>৳ <?= number_format($detail->cashback, 2) ?></td>
                        <td>৳ <?= number_format($detail->customer_price * $detail->quan, 2) ?></td>
                        <?php if ($detail->return_last_time != null) : ?>
                            <?php if (date('Y-m-d H:i:a') <= $detail->return_last_time && $detail->return_status == 0 && $detail->status != 2) : ?>
                                <td><button style="cursor: pointer;" data-pdt_id="<?= $detail->pdt_id ?>" data-order_id="<?= $order->id ?>" data-id="<?= $detail->id ?>" data-marcent_id=<?= $detail->marchant_seller_id ?> data-qty="<?= $detail->quan ?>" data-pdt_img="<?= $detail->thumb ?>" data-toggle="modal" data-target="#refund" onclick="setData(this)" class="badge badge-warning ">Add Refund</button></td>

                            <?php elseif ($detail->return_status == 1) : ?>

                                <td><button class="badge badge-info">Refund Processing</button></td>

                            <?php elseif ($detail->return_status == 2) : ?>

                                <td><button class="badge badge-success">Refunded</button></td>
                            <?php elseif ($detail->status == 2) : ?>

                                <td><button class="badge badge-info">No Refund</button></td>


                            <?php else : ?>

                                <td><button class="badge badge-primary">Time over</button></td>
                            <?php endif ?>
                        <?php endif ?>

                    </tr>
                <?php endforeach ?>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>

                    <th>Sub Total</th>
                    <th>৳ <?= number_format($total, 2) ?></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>

                    <th>Shipping Charge (+)</th>
                    <th>৳ <?= number_format($order->shipping, 2) ?></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>

                    <th>Cashback Cost (-)</th>
                    <th>৳ <?= number_format($order->blance_use, 2) ?></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>

                    <th>Total Paid Amount</th>
                    <th>৳ <?= number_format($total - $order->blance_use + $order->shipping, 2) ?></th>
                </tr>
            </table>
        </div>

    </div>
</div>

<div class="col-md-12 col-sm-12 col-xs-12 modal fade" id="refund">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title"> <i class="mdi mdi-arrow-down-bold"></i> Return Request</b></h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div>
                    <img id="img" src="" width="100px" height="80px" />
                </div>
                <br><br>
                <input type="hidden" id="order_id" />
                <input type="hidden" id="id" />
                <input type="hidden" id="pdt_id" />
                <input type="hidden" id="marcent_id" />
                <input type="hidden" id="marcent_number" />

                <h6> Return Reasion (required)</h6>
                <select class="form-control" id="reason_type">
                    <option disabled selected>Please select reason</option>
                    <option value="Missing treebies">Missing treebies</option>
                    <option value="Not as advertised">Not as advertised</option>
                    <option value="Wrong size">Wrong size</option>
                    <option value="Wrong/fake item">Wrong/fake item</option>
                    <option value="Does not fit">Does not fit</option>
                    <option value="Change of mind">Change of mind</option>
                    <option value="Damaged">Damaged</option>
                </select>

                <br><br>
                <h6><i class="mdi mdi-message-outline"></i> Additional Comments (optional)</h6>
                <textarea class="form-control" id="additional_cmnt" cols="30" rows="3" class="form-control" placeholder=" Additional Comments....."></textarea>


            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button id="submit" type="button" class="btn btn-info">Submit <i class="" id="loading"></i></button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
<script>
    let order_id = document.getElementById('order_id');
    let pdt_id = document.getElementById('pdt_id');
    let id = document.getElementById('id');
    let marcent_id = document.getElementById('marcent_id');

    function setData(e) {

        let img = document.getElementById('img');
        order_id.value = e.getAttribute('data-order_id');
        id.value = e.getAttribute('data-id');
        pdt_id.value = e.getAttribute('data-pdt_id');
        marcent_id.value = e.getAttribute('data-marcent_id');
        img.src = 'https://myadmin.mali-mart.com/images/products/' + e.getAttribute('data-pdt_img');

    }



    let onSelect = document.getElementById('reason_type');

    onSelect.addEventListener('change', () => {
        $.ajax({
            type: "GET",
            url: "https://work.mali-mart.com/LoginRegCtrl/marcentNumber/" + marcent_id.value,
            dataType: "json",
            success: function(response) {
                document.getElementById('marcent_number').value = response;
            }
        });
    });

    let submitBtn = document.getElementById('submit');

    submitBtn.addEventListener('click', () => {

        let reasionType = document.getElementById('reason_type');
        let reasionDesc = document.getElementById('additional_cmnt');
        let number = document.getElementById('marcent_number');
        let user_id = "<?= $_SESSION['user_id'] ?>";
        if (reasionType.value == "Please select reason") {
            alert('please select your return reasion');
            return false;
        }

        var formData = new FormData();
        formData.append('order_detail_id', id.value);
        formData.append('order_id', order_id.value);
        formData.append('user_id', user_id);
        formData.append('marcent_id', marcent_id.value);
        formData.append('pdt_id', pdt_id.value);
        formData.append('reasion_type', reasionType.value);
        formData.append('additional_cmnt', reasionDesc.value);
        formData.append('marcent_number', number.value);


        if (confirm('are you sure return your product')) {

            let loading = document.getElementById('loading');
            loading.className = 'fa fa-refresh fa-spin';
            submitBtn.setAttribute("disabled", true);

            $.ajax({
                type: "post",
                url: "https://myadmin.mali-mart.com/api/product-return",
                data: formData,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function(response) {
                    if (response.message === 'success') {
                        alert("Your product return successfully submitted !!");
                        window.location.reload()

                    } else {
                        alert("sometimes wrong");
                    }

                }
            });
        }

    })
</script>