@extends('layouts.website.website')
@section('content')
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper site-min-height">
            <!-- page start-->
            <section class="">
                <header class="panel-heading">
                    Add New Payment
                </header>
                <div class="">
                    <div class="adv-table editable-table">
                        <div class="clearfix">
                            <!--  <div class="col-lg-12"> -->
                            <div class="">
                                <!--   <section class="panel"> -->
                                <section class="">
                                    <!--   <div class="panel-body"> -->
                                    <div class="">
                                        <style>
                                            .payment {
                                                padding-top: 10px;
                                                padding-bottom: 0px;
                                                border: none;
                                            }
                                            .pad_bot {
                                                padding-bottom: 5px;
                                            }

                                            form {
                                                background: #f1f1f1;
                                                padding: 15px 0px;
                                            }

                                            .modal-body form {
                                                background: #fff;
                                                padding: 21px;
                                            }

                                            .remove {
                                                width: 20%;
                                                float: right;
                                                margin-bottom: 10px;
                                                padding: 10px;
                                                height: 39px;
                                                text-align: center;
                                                border-bottom: 1px solid #f1f1f1;
                                            }

                                            .remove1 {
                                                width: 80%;
                                                float: left;
                                                margin-bottom: 10px;
                                                border-bottom: 1px solid #f1f1f1;
                                            }

                                            form input {
                                                border: none;
                                            }

                                            .pos_box_title {
                                                border: none;
                                            }

                                            .payment_label {
                                                text-align: left;
                                            }
                                        </style>

                                        <form role="form" id="editPaymentForm" class="clearfix" action="{{ route('patient_add_payment') }}" method="post" enctype="multipart/form-data">
                                            @csrf
                                            <div class="col-md-5 row">
                                                <div class="col-md-12 payment pad_bot">
                                                    <label for="exampleInputEmail1">Patient</label>
                                                    <select class="form-control m-bot15 pos_select" id="pos_select" name="patient" value="">
                                                        <option value="">choose</option>
                                                        @foreach (App\User::where('role_id',8)->where('status',1)->get() as $item)
                                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="pos_client">
                                                    <div class="col-md-6 payment pad_bot">
                                                        <label for="exampleInputEmail1"> Patient Name</label>
                                                        <input type="text" class="form-control pay_in" name="p_name" value="" placeholder="" />
                                                    </div>
                                                    <div class="col-md-6 payment pad_bot">
                                                        <label for="exampleInputEmail1"> Patient Email</label>
                                                        <input type="text" class="form-control pay_in" name="p_email" value="" placeholder="" />
                                                    </div>
                                                    <div class="col-md-6 payment pad_bot">
                                                        <label for="exampleInputEmail1"> Patient Phone</label>
                                                        <input type="text" class="form-control pay_in" name="p_phone" value="" placeholder="" />
                                                    </div>
                                                    <div class="col-md-6 payment pad_bot">
                                                        <label for="exampleInputEmail1"> Patient Age</label>
                                                        <input type="text" class="form-control pay_in" name="p_age" value="" placeholder="" />
                                                    </div>
                                                    <div class="col-md-6 payment pad_bot">
                                                        <label for="exampleInputEmail1"> Patient Gender</label>
                                                        <select class="form-control m-bot15" name="p_gender" value="">
                                                            <option value="Male"> Male </option>
                                                            <option value="Female"> Female </option>
                                                            <option value="Others"> Others </option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12 payment pad_bot">
                                                    <label for="exampleInputEmail1"> Refd By Doctor</label>
                                                    <select class="form-control m-bot15 add_doctor" id="add_doctor" name="doctor" value="">
                                                        <option value="">choose</option>
                                                        @foreach (App\User::where('role_id',4)->where('status',1)->get() as $item)
                                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="pos_doctor">
                                                    <div class="col-md-6 payment pad_bot">
                                                        <label for="exampleInputEmail1"> Doctor Name</label>
                                                        <input type="text" class="form-control pay_in" name="d_name" value="" placeholder="" />
                                                    </div>
                                                    <div class="col-md-6 payment pad_bot">
                                                        <label for="exampleInputEmail1"> Doctor Email</label>
                                                        <input type="text" class="form-control pay_in" name="d_email" value="" placeholder="" />
                                                    </div>
                                                    <div class="col-md-6 payment pad_bot">
                                                        <label for="exampleInputEmail1"> Doctor Phone</label>
                                                        <input type="text" class="form-control pay_in" name="d_phone" value="" placeholder="" />
                                                    </div>
                                                </div>

                                                <div class="col-md-12 payment">
                                                    <div class="form-group last">
                                                        <label for="exampleInputEmail1"> Select</label>
                                                        <select name="category_name[]" id="" class="multi-select" multiple="" id="my_multi_select3">
                                                            @foreach (App\Experiments::get()->unique('name') as $item)
                                                                <option class="ooppttiioonn" data-id="{{ $item->price }}" data-idd="{{ $item->id }}" data-cat_name="{{ $item->name }}" value="{{ $item->name }}">{{ $item->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="col-md-12 qfloww">
                                                    <label class="col-md-10 pull-left remove1">Items</label>
                                                    <label class="pull-right col-md-2 remove">Qty</label>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="col-md-12 payment right-six">
                                                    <div class="payment_label">
                                                        <label for="exampleInputEmail1">Sub Total </label>
                                                    </div>
                                                    <div class="">
                                                        <input type="text" class="form-control pay_in" name="subtotal" id="subtotal" value="" placeholder=" " readonly />
                                                    </div>
                                                </div>

                                                <div class="col-md-12 payment right-six">
                                                    <div class="payment_label">
                                                        <label for="exampleInputEmail1">Discount </label>
                                                    </div>
                                                    <div class="">
                                                        <input type="text" class="form-control pay_in" name="discount" id="dis_id" value="" placeholder="" />
                                                    </div>
                                                </div>

                                                <div class="col-md-12 payment right-six">
                                                    <div class="payment_label">
                                                        <label for="exampleInputEmail1">Gross Total </label>
                                                    </div>
                                                    <div class="">
                                                        <input type="text" class="form-control pay_in" name="grsss" id="gross" value="" placeholder=" " readonly />
                                                    </div>
                                                </div>

                                                <div class="col-md-12 payment right-six">
                                                    <div class="payment_label">
                                                        <label for="exampleInputEmail1">Note </label>
                                                    </div>
                                                    <div class="">
                                                        <input type="text" class="form-control pay_in" name="remarks" id="" value="" placeholder=" " />
                                                    </div>
                                                </div>

                                                <div class="col-md-12 payment right-six">
                                                    <div class="payment_label">
                                                        <label for="exampleInputEmail1">Deposited Amount </label>
                                                    </div>

                                                    <div class="">
                                                        <input type="text" class="form-control pay_in" name="amount_received" id="amount_received" value="" placeholder=" " />
                                                    </div>
                                                </div>

                                                <div class="col-md-12 payment right-six">
                                                    <div class="payment_label">
                                                        <label for="exampleInputEmail1">Deposit Type</label>
                                                    </div>
                                                    <div class="">
                                                        <select class="form-control m-bot15 js-example-basic-single selecttype" id="selecttype" name="deposit_type" value="">
                                                            <option value="Cash"> Cash </option>
                                                            <option value="Card"> Card </option>
                                                        </select>
                                                    </div>

                                                    <div class="card">
                                                        <hr />
                                                        <div class="col-md-12 payment pad_bot">
                                                            <label for="exampleInputEmail1"> Accepted Cards</label>
                                                            <div class="payment pad_bot">
                                                                <img src="uploads/card.png" width="100%" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group cashsubmit payment right-six col-md-12">
                                                        <button type="submit" name="submit2" id="submit1" class="btn btn-info row pull-right">Submit</button>
                                                    </div>
                                                    <div class="form-group cardsubmit right-six col-md-12 hidden">
                                                        <button type="submit" name="pay_now" id="submit-btn" class="btn btn-info row pull-right">Submit</button>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="id" value="" />
                                                <div class="row"></div>
                                                <div class="form-group"></div>
                                            </div>
                                        </form>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </section>
    <!--main content end-->

    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

<script>
    $(document).ready(function () {
        var tot = 0;
        //  $(".qfloww").html("");
        $(".ms-selected").click(function () {
            var idd = $(this).data("idd");
            $("#id-div" + idd).remove();
            $("#idinput-" + idd).remove();
            $("#categoryinput-" + idd).remove();
        });
        $.each($("select.multi-select option:selected"), function () {
            var curr_val = $(this).data("id");
            var idd = $(this).data("idd");
            var qtity = $(this).data("qtity");
            //  tot = tot + curr_val;
            var cat_name = $(this).data("cat_name");
            if ($("#idinput-" + idd).length) {
            } else {
                if ($("#id-div" + idd).length) {
                } else {
                    $("#editPaymentForm .qfloww").append('<div class="remove1" id="id-div' + idd + '">  ' + $(this).data("cat_name") + "- $ " + $(this).data("id") + "</div>");
                }

                var input2 = $("<input>")
                    .attr({
                        type: "text",
                        class: "remove",
                        id: "idinput-" + idd,
                        name: "quantity[]",
                        value: qtity,
                    })
                    .appendTo("#editPaymentForm .qfloww");

                $("<input>")
                    .attr({
                        type: "hidden",
                        class: "remove",
                        id: "categoryinput-" + idd,
                        name: "category_id[]",
                        value: idd,
                    })
                    .appendTo("#editPaymentForm .qfloww");
            }

            $(document).ready(function () {
                $("#idinput-" + idd).keyup(function () {
                    var qty = 0;
                    var total = 0;
                    $.each($("select.multi-select option:selected"), function () {
                        var id1 = $(this).data("idd");
                        qty = $("#idinput-" + id1).val();
                        var ekokk = $(this).data("id");
                        total = total + qty * ekokk;
                    });

                    tot = total;

                    var discount = $("#dis_id").val();
                    var gross = tot - discount;
                    $("#editPaymentForm").find('[name="subtotal"]').val(tot).end();
                    $("#editPaymentForm").find('[name="grsss"]').val(gross);

                    var amount_received = $("#amount_received").val();
                    var change = amount_received - gross;
                    $("#editPaymentForm").find('[name="change"]').val(change).end();
                });
            });
            var sub_total = $(this).data("id") * $("#idinput-" + idd).val();
            tot = tot + sub_total;
        });

        var discount = $("#dis_id").val();

        var gross = tot - discount;

        $("#editPaymentForm").find('[name="subtotal"]').val(tot).end();

        $("#editPaymentForm").find('[name="grsss"]').val(gross);

        var amount_received = $("#amount_received").val();
        var change = amount_received - gross;
        $("#editPaymentForm").find('[name="change"]').val(change).end();
    });

    $(document).ready(function () {
        $("#dis_id").keyup(function () {
            var val_dis = 0;
            var amount = 0;
            var ggggg = 0;
            amount = $("#subtotal").val();
            val_dis = this.value;
            ggggg = amount - val_dis;
            $("#editPaymentForm").find('[name="grsss"]').val(ggggg);

            var amount_received = $("#amount_received").val();
            var change = amount_received - ggggg;
            $("#editPaymentForm").find('[name="change"]').val(change).end();
        });
    });
</script>

<script>
    $(document).ready(function () {
        $(".multi-select").change(function () {
            var tot = 0;
            //  $(".qfloww").html("");
            $(".ms-selected").click(function () {
                var idd = $(this).data("idd");
                $("#id-div" + idd).remove();
                $("#idinput-" + idd).remove();
                $("#categoryinput-" + idd).remove();
            });
            $.each($("select.multi-select option:selected"), function () {
                var curr_val = $(this).data("id");
                var idd = $(this).data("idd");
                //  tot = tot + curr_val;
                var cat_name = $(this).data("cat_name");
                if ($("#idinput-" + idd).length) {
                } else {
                    if ($("#id-div" + idd).length) {
                    } else {
                        $("#editPaymentForm .qfloww").append('<div class="remove1" id="id-div' + idd + '">  ' + $(this).data("cat_name") + "- $ " + $(this).data("id") + "</div>");
                    }

                    var input2 = $("<input>")
                        .attr({
                            type: "text",
                            class: "remove",
                            id: "idinput-" + idd,
                            name: "quantity[]",
                            value: "1",
                        })
                        .appendTo("#editPaymentForm .qfloww");

                    $("<input>")
                        .attr({
                            type: "hidden",
                            class: "remove",
                            id: "categoryinput-" + idd,
                            name: "category_id[]",
                            value: idd,
                        })
                        .appendTo("#editPaymentForm .qfloww");
                }

                $(document).ready(function () {
                    $("#idinput-" + idd).keyup(function () {
                        var qty = 0;
                        var total = 0;
                        $.each($("select.multi-select option:selected"), function () {
                            var id1 = $(this).data("idd");
                            qty = $("#idinput-" + id1).val();
                            var ekokk = $(this).data("id");
                            total = total + qty * ekokk;
                        });

                        tot = total;

                        var discount = $("#dis_id").val();
                        var gross = tot - discount;
                        $("#editPaymentForm").find('[name="subtotal"]').val(tot).end();
                        $("#editPaymentForm").find('[name="grsss"]').val(gross);

                        var amount_received = $("#amount_received").val();
                        var change = amount_received - gross;
                        $("#editPaymentForm").find('[name="change"]').val(change).end();
                    });
                });
                var sub_total = $(this).data("id") * $("#idinput-" + idd).val();
                tot = tot + sub_total;
            });

            var discount = $("#dis_id").val();

            var gross = tot - discount;

            $("#editPaymentForm").find('[name="subtotal"]').val(tot).end();

            $("#editPaymentForm").find('[name="grsss"]').val(gross);

            var amount_received = $("#amount_received").val();
            var change = amount_received - gross;
            $("#editPaymentForm").find('[name="change"]').val(change).end();
        });
    });

    $(document).ready(function () {
        $("#dis_id").keyup(function () {
            var val_dis = 0;
            var amount = 0;
            var ggggg = 0;
            amount = $("#subtotal").val();
            val_dis = this.value;
            ggggg = amount - val_dis;
            $("#editPaymentForm").find('[name="grsss"]').val(ggggg);

            var amount_received = $("#amount_received").val();
            var change = amount_received - ggggg;
            $("#editPaymentForm").find('[name="change"]').val(change).end();
        });
    });
</script>

<!-- Add Patient Modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"><i class="fa fa-plus-circle"></i> Patient Registration</h4>
            </div>
            <div class="modal-body">
                <form role="form" action="patient/addNew?redirect=payment" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Name</label>
                        <input type="text" class="form-control" name="name" id="exampleInputEmail1" value="" placeholder="" />
                    </div>

                    <div class="form-group">
                        <label for="exampleInputEmail1">Address</label>
                        <input type="text" class="form-control" name="address" id="exampleInputEmail1" value="" placeholder="" />
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Phone</label>
                        <input type="text" class="form-control" name="phone" id="exampleInputEmail1" value="" placeholder="" />
                    </div>

                    <div class="form-group">
                        <label for="exampleInputEmail1">Image</label>
                        <input type="file" name="img_url" />
                    </div>

                    <input type="hidden" name="id" value="" />

                    <section class="">
                        <button type="submit" name="submit" class="btn btn-info">Submit</button>
                    </section>
                </form>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- Add Patient Modal-->

<script>
    $(document).ready(function () {
        $(".pos_client").hide();
        $(document.body).on("change", "#pos_select", function () {
            var v = $("select.pos_select option:selected").val();
            if (v == "add_new") {
                $(".pos_client").show();
            } else {
                $(".pos_client").hide();
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        $(".pos_doctor").hide();
        $(document.body).on("change", "#add_doctor", function () {
            var v = $("select.add_doctor option:selected").val();
            if (v == "add_new") {
                $(".pos_doctor").show();
            } else {
                $(".pos_doctor").hide();
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        $(".card").hide();
        $(document.body).on("change", "#selecttype", function () {
            var v = $("select.selecttype option:selected").val();
            if (v == "Card") {
                $(".cardsubmit").removeClass("hidden");
                $(".cashsubmit").addClass("hidden");
                $("#amount_received").prop("required", true);
                // $('#amount_received').attr("required");;
                $(".card").show();
            } else {
                $(".card").hide();
                $(".cashsubmit").removeClass("hidden");
                $(".cardsubmit").addClass("hidden");
                $("#amount_received").prop("required", false);
                //$('#amount_received').removeAttr('required');
            }
        });
    });
</script>
<script>
    function cardValidation() {
        var valid = true;
        var cardNumber = $("#card").val();
        var expire = $("#expire").val();
        var cvc = $("#cvv").val();

        $("#error-message").html("").hide();

        if (cardNumber.trim() == "") {
            valid = false;
        }

        if (expire.trim() == "") {
            valid = false;
        }
        if (cvc.trim() == "") {
            valid = false;
        }

        if (valid == false) {
            $("#error-message").html("All Fields are required").show();
        }

        return valid;
    }
    //set your publishable key
    Stripe.setPublishableKey("");

    //callback to handle the response from stripe
    function stripeResponseHandler(status, response) {
        if (response.error) {
            //enable the submit button
            $("#submit-btn").show();
            $("#loader").css("display", "none");
            //display the errors on the form
            $("#error-message").html(response.error.message).show();
        } else {
            //get token id
            var token = response["id"];
            //insert the token into the form
            $("#token").val(token);
            $("#editPaymentForm").append("<input type='hidden' name='token' value='" + token + "' />");
            //submit form to the server
            $("#editPaymentForm").submit();
        }
    }

    function stripePay(e) {
        e.preventDefault();
        var valid = cardValidation();

        if (valid == true) {
            $("#submit-btn").attr("disabled", true);
            $("#loader").css("display", "inline-block");
            var expire = $("#expire").val();
            var arr = expire.split("/");
            Stripe.createToken(
                {
                    number: $("#card").val(),
                    cvc: $("#cvv").val(),
                    exp_month: arr[0],
                    exp_year: arr[1],
                },
                stripeResponseHandler
            );

            //submit from callback
            return false;
        }
    }
</script>
<script>
    $(document).ready(function () {
        $("#pos_select").select2({
            placeholder: "Search Patient Name / ID",
            allowClear: true,
            // ajax: {
            //     url: "patient/getPatientinfoWithAddNewOption",
            //     type: "post",
            //     dataType: "json",
            //     delay: 250,
            //     data: function (params) {
            //         return {
            //             searchTerm: params.term, // search term
            //         };
            //     },
            //     processResults: function (response) {
            //         return {
            //             results: response,
            //         };
            //     },
            //     cache: true,
            // },
        });

        $("#add_doctor").select2({
            placeholder: "Search Doctor Name / ID",
            allowClear: true,
            // ajax: {
            //     url: "doctor/getDoctorWithAddNewOption",
            //     type: "post",
            //     dataType: "json",
            //     delay: 250,
            //     data: function (params) {
            //         return {
            //             searchTerm: params.term, // search term
            //         };
            //     },
            //     processResults: function (response) {
            //         return {
            //             results: response,
            //         };
            //     },
            //     cache: true,
            // },
        });
    });
</script>

<script src="common/js/moment.min.js"></script>

<script type="text/javascript" src="https://www.2checkout.com/checkout/api/2co.min.js"></script>


@endsection