@extends('operations.layout.mainlayout')

@section('content')
    {{--@if(session('role') != 4 && session('role') != 2 && session('role') != 5 && session('role') != 9 && session('role') != 1)
        {{exit("<h1>Unauthorized access</h1>")}}
    @endif--}}
    <style>
        #description {
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
        }

        #infowindow-content .title {
            font-weight: bold;
        }

        #infowindow-content {
            display: none;
        }

        #map #infowindow-content {
            display: inline;
        }

        .pac-card {
            margin: 10px 10px 0 0;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            font-family: Roboto;
        }

        #pac-container {
            padding-bottom: 12px;
            margin-right: 12px;
        }

        .pac-controls {
            display: inline-block;
            padding: 5px 11px;
        }

        .pac-controls label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 400px;
        }

        #pac-input:focus {
            border-color: #4d90fe;
        }

        #title {
            color: #fff;
            background-color: #4d90fe;
            font-size: 25px;
            font-weight: 500;
            padding: 6px 12px;
        }

        #target {
            width: 345px;
        }

        .pac-container {
            z-index: 10000 !important;
        }

        .wizard > .content > .body {
            position: relative !important;
        }
    </style>
    <style>
        .cards tbody tr {
            float: left;
            width: 19rem;
            margin: 0.5rem;
            border: 0.0625rem solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
        }

        .cards tbody td {
            display: block;
        }

        .cards thead {
            display: none;
        }

        .cards td:before {
            content: attr(data-label);
            position: relative;
            float: left;
            color: #808080;
            min-width: 4rem;
            margin-left: 0;
            margin-right: 1rem;
            text-align: left;
        }

        tr.selected td:before {
            color: #CCC;
        }

        .table .avatar {
            width: 50px;
        }

        .cards .avatar {
            width: 110px;
            margin: 15px;
        }

        #booking-users-table td {
            padding-bottom: 0;
        }

        #booking-users-table td:last-child {
            padding-bottom: 10px;
        }

        .buttons-csv {
            display: none !important;
        }

        .sw-theme-dots > .nav .nav-link.done {
            color: #e35a80;
            cursor: pointer;
        }

        .sw-theme-dots > .nav .nav-link.done::after {
            background-color: #e35a80;
        }

        .modal-title {
            width: 90%;
        }

        blinkid-in-browser {
            /* Customization of UI - see variables in src/components/shared/styles/_globals.scss */
            /* --mb-component-background: red; */
        }
    </style>

    <script src="https://unpkg.com/@microblink/blinkid-in-browser-sdk/dist/blinkid-sdk.min.js"></script>
    <script type="module"
            src=" https://unpkg.com/@microblink/blinkid-in-browser-sdk@5.15.0/ui/dist/blinkid-in-browser/blinkid-in-browser.esm.js"></script>


    <script src="/js/scan.js"></script>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Purchase Orders</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">

                        <!-- /.card -->

                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">
                                <button style="display:none;" id="loading" class="btn btn-primary float-right"
                                        type="button" disabled>
                                    <span class="spinner-border spinner-border-sm" role="status"
                                          aria-hidden="true"></span>
                                    Loading...
                                </button>
                                <br/>
                                @if(!empty($error))
                                    <div class="alert alert-danger" role="alert">
                                        {{$error}}
                                    </div>
                                @endif


                                <div class="row">
                                    <div class="col-md-12">
                                        <div id="smartwizard2">
                                            <ul class="nav">
                                                <li>
                                                    <a class="nav-link" href="#step-1">
                                                        Select Vendor
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="nav-link" href="#step-2">
                                                        Add Items
                                                    </a>
                                                </li>
                                                {{--<li>
                                                    <a class="nav-link" href="#step-3">
                                                       Review Order
                                                    </a>
                                                </li>--}}
                                            </ul>

                                            <div class="tab-content">
                                                <div id="step-1" class="tab-pane" role="tabpanel">

                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <span style="color:#e35a80"><b>Search Vendor</b></span>
                                                            <select id="vendor_id" name="vendor_id"
                                                                    class="form-control vendor_select">
                                                                <option value="0" selected="selected">Search Vendor
                                                                </option>
                                                            </select>
                                                            <br/>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div id="step-2" class="tab-pane" role="tabpanel">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <br/><br/>
                                                            <span style="color:#e35a80"><b>Items</b></span>
                                                            {{--<button style="margin-left:5px;" data-toggle="modal" data-target="#modal-lg" disabled="disabled" id="add-member" class="btn btn-info float-right"><i class="fas fa-lg fa-plus-circle"></i> Add Member</button><br /><br />--}}
                                                            <button style="margin-left:5px;" data-toggle="modal"
                                                                    data-target="#modal-tests" id="add-vendor-items"
                                                                    class="btn btn-info float-right"><i
                                                                        class="fas fa-lg fa-plus-circle"></i> Add Items
                                                            </button>
                                                            <br/><br/>
                                                            <table id="warehouse-items-table"
                                                                   class="table table-bordered table-striped">
                                                                <thead>
                                                                <tr>
                                                                    <th>Name</th>
                                                                    <th>Relation</th>
                                                                    <th>Gender</th>
                                                                    <th>Mobile Number</th>
                                                                    <th>Action</th>
                                                                </tr>
                                                                </thead>
                                                            </table>
                                                        </div>
                                                    </div>
                                                    <div class="row" style="display: none">
                                                        <div class="col" style="text-align: center"><br/>
                                                            <button style="min-width:130px" id="checkoutPurchase"
                                                                    disabled="disabled" type="submit"
                                                                    class="btn btn-info">Get Booking Details
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{--<div id="step-3" class="tab-pane" role="tabpanel">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <span style="color:#e35a80"><b>Included Patients</b></span>
                                                            <br /><br />
                                                            <table id="po-cart-items-table" class="table table-bordered table-striped" style="border: none;">
                                                                <thead>
                                                                <tr>
                                                                    <th>Test</th>
                                                                    <th>Name</th>
                                                                    <th>Mobile</th>
                                                                    <th>Identity</th>
                                                                    <th>ID No.</th>
                                                                    <th>Country</th>
                                                                    <th>Dob</th>
                                                                    <th>Gender</th>
                                                                    <th>Remove</th>
                                                                </tr>
                                                                </thead>

                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="step-4" class="tab-pane" role="tabpanel">
                                                    <div class="col">
                                                        <div class="alert alert-danger alert-danger-booking" role="alert" style="display: none;"></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col" style="text-align: center"><br />
                                                            <button style="min-width:130px" id="checkoutPurchase" disabled="disabled" type="submit" class="btn btn-info" >Get Booking Details</button>
                                                        </div>
                                                    </div>
                                                </div>--}}

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

                            <div class="row">

                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <div class="col-md-1"></div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <div class="modal fade" id="modal-booking">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Cart Quotation</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post" action="/operations/samples/">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col">
                                <div class="alert alert-danger alert-danger-booking-quote" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-order" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>

                        <div class="row" style="margin-top:20px">
                            <div class="col-8">
                                <span style="font-size:18px;color:#706967;font-weight: 500;margin-bottom: 10px;"><span
                                            id="packages_count"></span> {{trans("web.test_count")}}</span>
                            </div>
                            <div class="col-4" style="text-align: center">
                                <span style="font-size:18px;color:#112F53;text-align: center">SAR <span
                                            id="packages_amount"></span></span>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col-8">
                                <span style="font-size:18px;color:#706967;font-weight: 500;margin-bottom: 10px;">{{trans("web.vat")}}</span>
                            </div>
                            <div class="col-4" style="text-align: center">
                                <span style="font-size:18px;color:#112F53;text-align: center">SAR <span
                                            id="tax_amount"></span></span>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col-8">
                                <span style="font-size:18px;color:#112F53;font-weight: 600;margin-bottom: 10px;">{{trans("web.total")}}</span>
                            </div>
                            <div class="col-4" style="text-align: center">
                                <span style="font-size:18px;color:#112F53;text-align: center;font-weight: 600">SAR <span
                                            id="net_total"></span></span>
                            </div>
                        </div>

                        <label style="display:none;" for="sample-cash">Cash Amount</label>
                        <input style="display:none;" id="sample-cash" name="sample-cash" class="form-control" value="0"
                               type="number" step="0.01"/>
                        <label style="display:none;" for="sample-visa">Visa Amount</label>
                        <input style="display:none;" id="sample-visa" name="sample-visa" class="form-control" value="0"
                               type="number" step="0.01"/>
                        <label style="display: none;" for="location" id="location-label">Location</label>
                        <select style="display: none;" class="form-control" id="hospital-location">
                            <option value="">Select Location</option>
                        </select>
                        <div id="sample-password-div" class="row" style="margin-top:10px;display: none;">
                            <div class="col">
                                <label for="sample-password">Password</label>
                                <input id="sample-password" name="sample-password" class="form-control" value=""
                                       type="password"/>
                            </div>
                        </div>
                        <div id="home-visit-cmp" style="display:none;">
                            <div class="row">
                                <div class="col">
                                    <span style="font-size:18px;color:#706967;font-weight: 500;margin-bottom: 10px;">Home visit location</span>
                                    <div id="map" style="width:100%;height:400px"></div>
                                    <input id="pac-input" class="controls form-control"
                                           style="margin-top: 10px !important;" placeholder="{{trans("web.search")}}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer ">
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button"
                                class="btn btn-default" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;"
                                id="purchase_order" type="button" class="btn btn-info">Place Order
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-tests">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Items</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-member" role="alert"
                                 style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <input id="member-id" type="hidden"/>
                            <input id="is-member" type="hidden"/>
                            <table id="vendors-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Test</th>
                                    <th>Type</th>
                                    <th>Price</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button"
                            class="btn btn-default" data-dismiss="modal"
                            id="tests-cancel">{{trans("web.cancel")}}</button>
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;font-color: white !important;"
                            id="add_items" type="button" class="btn btn-info">Continue
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-import">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Import Patients</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post" action="/operations/samples/">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-import" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <a class="btn btn-secondary" target="_blank"
                                   href="/operations/followers/template?{{time()}}">Download Template</a><br/><br/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Upload
                                    Patients File</p>
                                <input style="padding:3px" class="form-control" name="import-file" id="import-file"
                                       type="file"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <br/>
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">
                                    Identification Types : 1=NationalID, 2=IqamehNo, 3=BorderNo, 4=GulfID</p>
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Genders :
                                    1,2 (Male = 1 / Female = 2)</p>
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">
                                    Nationality, Use the ID of the following file : <a class="btn btn-secondary"
                                                                                       target="_blank"
                                                                                       href="/operations/countries/template">Download
                                        Countries</a></p>
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Date of
                                    birth must be in the following format : YYYY-MM-DD</p>
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Mobile
                                    Number must start with 00 (example : 00966500xxxxxx)</p>
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">All fields
                                    are required, in case any column is missing or incorrect, the patient will be
                                    ignored</p>
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;color: red">
                                    Format the cells as text when modifying using excel, as excel tends to format the
                                    date, and mobile number differently</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button"
                                class="btn btn-default" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;"
                                id="import_followers" type="button" class="btn btn-success">Import Patients
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection

@section('warehouse_scripts')
    <script>

        $(document).ready(function () {

            $('.vendor_select').select2({
                ajax: {
                    url: '/operations/warehouse/searchVendors',
                    dataType: 'json'
                }
            });

            $('.vendor_select').on('change', function () {
                cartItemsTable()
            });

            function cartItemsTable() {

                var table = $("#warehouse-items-table");
                table.DataTable({
                    "responsive": true,
                    "autoWidth": false,
                    "destroy": true,
                    "searching": false,
                    "paging": false,
                    "bInfo": false,
                    columnDefs: [
                        {width: 20, targets: 4}
                    ],
                    serverSide: true,
                    "processing": true,
                    ajax: '/operations/warehouse/purchasing/cart/' + $("#vendor_id").val(),
                    "order": [[0, "desc"]],
                    columns: [
                        {data: "ID", title: "ID",},
                        {data: "ITEM_NAME", title: "Item Name"},
                        {data: "ITEM_PRICE", title: "Item Price"},
                        {data: "QTY", title: "Quantity"},
                        {
                            title: 'Action', "mRender": function (data, type, row) {
                                return '<a style="color:white !important;width: 130px; float: right" class="remove-item-cart form-control btn btn-danger" item-id="' + row.ID + '">Remove</a>';
                            }
                        }
                    ],
                    "rowCallback": function (row, data) {
                        $('td:eq(2)', row).html('<a href="#" class=" xedit-item-price" data-pk="' + data["ID"] + '" data-title="Enter Price">' + (data["ITEM_PRICE"] ? data["ITEM_PRICE"] : '') + '</a>');
                        $('td:eq(3)', row).html('<a href="#" class=" xedit-item-qty" data-pk="' + data["ID"] + '" data-title="Enter Quantity">' + (data["QTY"] ? data["QTY"] : '') + '</a>');
                    },
                    "drawCallback": function (settings) {
                        $("#smartwizard2").smartWizard("fixHeight");

                        $('.xedit-item-price').editable({
                            type: 'text',
                            url: "/operations/warehouse/purchasing/editPurchasingPrice",
                        });

                        $('.xedit-item-qty').editable({
                            type: 'text',
                            url: "/operations/warehouse/purchasing/editPurchasingQty",
                        });
                    }
                });

                $("body").on("click", ".remove-item-cart", function () {
                    var item_id = $(this).attr("item-id");
                    $.ajax({
                        type: "DELETE",
                        url: "/operations/warehouse/purchasing/items/" + item_id,
                        contentType: "application/json; charset=utf-8",
                    }).done(function (data) {
                        $('#warehouse-items-table').DataTable().ajax.reload();
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        alert("Error while remove item from cart");
                    });
                    return false;
                });

                $("#purchase_order").on("click", function () {
                    $('#purchase_order').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);

                    $(".alert-danger-booking-quote").slideUp("slow", function () {
                    });
                    var cart_amount = $('#packages_amount').text();
                    var vat = $('#tax_amount').text();
                    var net_total = $('#net_total').text();
                    var vendor_id = $('#vendor_id').val();
                    var cart_count = $('#packages_count').text();

                    var data = {
                        cart_amount: cart_amount,
                        cart_count: cart_count,
                        vat: vat,
                        net_total: net_total,
                        vendor_id: vendor_id,
                    }
                    $.ajax({
                        type: "POST",
                        url: "/operations/warehouse/purchasing/placeOrder",
                        data: JSON.stringify(data),
                        contentType: "application/json; charset=utf-8",
                    }).done(function (data) {
                        $('#purchase_order').html('Loading...').attr('disabled', false);
                        window.location.href = "/operations/warehouse/purchasing/orders/"+ data.response.ID;
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        $('#purchase_order').html('Place Order').attr('disabled', false);
                        /*$('#add-new-person').prop("disabled", false);*/
                        $(".alert-danger-booking-quote").html(jqXHR.responseJSON.errorMessage);
                        $(".alert-danger-booking-quote").slideDown("slow", function () {
                        });
                    });
                    return false;
                });
            }

            let VendorItemsArray = [];

            $("body").on("click", "#add-vendor-items", function () {

                VendorItemsArray = [];
                $('#vendors-table').DataTable().clear().destroy();
                VendorItems();
                $("#member-id").val($(this).attr("member-id"));
                $("#is-member").val($(this).attr("is-member"));
            });

            function VendorItems() {
                $("#vendors-table").DataTable({
                    "responsive": true,
                    "autoWidth": false,
                    "destroy": true,
                    "searching": true,
                    "paging": true,
                    "bInfo": true,
                    "lengthChange": false,
                    serverSide: true,
                    "processing": true,
                    ajax: '/operations/warehouse/vendors/items/' + $("#vendor_id").val(),
                    "order": [[0, "desc"]],
                    columns: [
                        {data: "NAME_EN", title: "Item Name"},
                        {data: "DESC_EN", title: "Description"},
                        {
                            data: "pivot_PRICE",
                            'orderable': false,
                            'searchable': false,
                            title: "PRICE",
                            'render': function (data, type, full, meta) {
                                data = full.PIVOT_PRICE + " SAR";
                                return data;
                            }
                        },
                        {data: "ID", name: "ID"}
                    ],
                    "rowCallback": function (row, data) {
                        const index = VendorItemsArray.indexOf(data["ID"]);
                        if (index > -1) {
                            $('td:eq(3)', row).html('<a style="color:white !important;" class="add-warehouse-item-test form-control btn btn-danger" test-id="' + data["ID"] + '" price="' + data["PIVOT_PRICE"] + '">Remove</a>');

                        } else {
                            $('td:eq(3)', row).html('<a style="color:white !important;" class="add-warehouse-item-test form-control btn btn-info" test-id="' + data["ID"] + '" price="' + data["PIVOT_PRICE"] + '">Add Test</a>');

                        }

                    }
                });
            }

            $("#add_items").on("click", function () {
                VendorItems()
                $('#add_items').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
                var vendor_id = $("#vendor_id").val();
                var items = VendorItemsArray.join("-");
                $(".alert-danger-member").slideUp("slow", function () {
                });
                $(".alert-danger-member").slideUp("slow", function () {
                });
                var data = {
                    vendor_id: vendor_id,
                    items: items
                }
                //var user_type = "user";
                //if($('#is-member').val() == 1) user_type = "member";
                $.ajax({
                    type: "POST",
                    url: "/operations/warehouse/purchasing/cart",
                    data: JSON.stringify(data),
                    contentType: "application/json; charset=utf-8",
                }).done(function (data) {
                    $('#modal-tests').modal('hide');
                    $('#add_items').html('Continue').attr('disabled', false);
                    $('#warehouse-items-table').DataTable().ajax.reload();
                    //ItemsCart();
                    //$("[member-id="+$("#member-id").val()+"]").html("Added").addClass("btn-success").removeClass("btn-info");
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    $(".alert-danger-member").html(jqXHR.responseJSON.errorMessage);
                    $(".alert-danger-member").slideDown("slow", function () {
                    });
                    $('#add_items').html('Continue').attr('disabled', false);
                });

            });

            $("body").on("click", ".add-warehouse-item-test", function () {
                if ($(this).hasClass("btn-info")) {
                    VendorItemsArray.push($(this).attr("test-id") + ',' + $(this).attr("price"));
                    $(this).removeClass("btn-info");
                    $(this).addClass("btn-danger");
                    $(this).html("Remove");
                    $("#add-new-person-contract").prop("disabled", false);
                } else if ($(this).hasClass("btn-danger")) {
                    const index = VendorItemsArray.indexOf($(this).attr("test-id"));
                    if (index > -1) {
                        VendorItemsArray.splice(index, 1);
                    }
                    $(this).removeClass("btn-danger");
                    $(this).addClass("btn-info");
                    $(this).html("Add Test");
                    if (VendorItemsArray.length <= 0) $("#add-new-person-contract").prop("disabled", true);
                }

                return false;
            });


            var btnFinish = $("<button></button>")
                .text("Cart Details")
                .addClass("btn btn-info sw-btn-group-extra2")
                .css("display", "none")
                .on("click", function () {
                    $("#checkoutPurchase").trigger("click");
                });
            $('#smartwizard2').smartWizard({
                theme: 'dots',
                enableURLhash: false,
                autoAdjustHeight: false,
                includeFinishButton: true,
                labelFinish: 'Finish',
                enableFinishButton: false,
                toolbarSettings: {
                    toolbarPosition: "bottom",
                    toolbarExtraButtons: [btnFinish],
                },
            });

            $("#smartwizard2").on("stepContent", function (e, anchorObject, stepNumber, stepDirection) {
                if (stepNumber === 1) {
                    $('.sw-btn-group-extra2').show();
                    $('.sw-btn-next').hide();
                } else {
                    console.log('n');
                    $('.sw-btn-group-extra2').hide();
                    $('.sw-btn-next').show();
                }

            });

            $("#checkoutPurchase").on("click", function () {
                if ($('#warehouse-items-table').DataTable().data().count() === 0) {
                    $('#purchase_order').attr('disabled', 'disabled')
                } else {
                    $('#purchase_order').removeAttr('disabled')
                }
                $('#checkoutPurchase').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);

                $("#packages_count").html("");
                $("#packages_amount").html("");
                $("#tax_amount").html("");
                $("#net_total").html("");
                $("cod_order").css("display", "none")
                $("credit_order").css("display", "none")
                $(".alert-danger-booking").slideUp("slow", function () {
                });
                $(".alert-danger-booking-quote").slideUp("slow", function () {
                });
                $.ajax({
                    type: "GET",
                    url: "/operations/warehouse/purchasing/calculateCart/" + $("#vendor_id").val(),
                    contentType: "application/json; charset=utf-8",
                }).done(function (data) {

                    $("#packages_count").html(data.response.TOTAL_ITEMS);
                    $("#packages_amount").html((data.response.TOTAL_PRICE).toFixed(2));
                    $("#tax_amount").html(data.response.VAT);
                    $("#net_total").html(data.response.NET_TOTAL);
                    if (data.response.has_code === true) $("#cod_order").css("display", "block");
                    else $("#cod_order").css("display", "none");
                    if (data.response.has_credit === true && $("#hospital_id").val() != "122886") $("#credit_order").css("display", "block");
                    else $("#credit_order").css("display", "none");

                    if (data.response.enable_location === true) {
                        $("#hospital-location").empty();
                        $("#hospital-location").append('<option value="0">Select Location</option>');
                        data.response.locations.forEach(function (element) {
                            $("#hospital-location").append('<option value="' + element.ID + '">' + element.NAME_EN + '</option>');
                        })
                        $("#hospital-location").css("display", "block");
                        $("#location-label").css("display", "block");
                    } else {
                        $("#hospital-location").css("display", "none");
                        $("#location-label").css("display", "none");
                    }

                    $('#modal-booking').modal('show');
                    $('#checkoutPurchase').html('Continue').attr('disabled', false);
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    $(".alert-danger-booking").html(jqXHR.responseJSON.errorMessage);
                    $(".alert-danger-booking").slideDown("slow", function () {
                    });
                    $('#checkoutPurchase').html('Continue').attr('disabled', false);
                });

            });
        });
    </script>
@endsection
<style>

    #loading {
        display: block;
    }

    #view-landing,
    #view-scan-from-camera,
    #view-scan-from-file,
    #view-results {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* Rules for better readability */
    img {
        display: block;
        width: 100%;
        max-width: 320px;
        height: auto;
    }

    video {
        width: 100%;
        height: 100%;
    }

    textarea {
        display: block;
    }

    /* Camera feedback */
    #screen-scanning {
        position: relative;
    }

    #view-scan-from-camera {
        position: relative;
    }

    #camera-feedback {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 100%;
    }

    #camera-guides {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-weight: bold;
    }

    /* Auxiliary classes */
    .hidden {
        display: none !important;
    }

</style>