<?php include 'controller/pageCode.php' ?>
<!DOCTYPE html>
<html lang="en">
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
    <meta charset="utf-8">
    <title>Return Items</title>
    <?php include 'inc/meta_inc.php'; ?>
    <!-- base css -->
    
    <?php include 'inc/styles_inc.php'; ?>
    <link rel="stylesheet" media="screen, print" href="assets/css/markdown.css">
    <link rel="stylesheet" media="screen, print" href="assets/css/datagrid/datatables/datatables.bundle.css">
    <script src="assets/js/jquery.min.js"></script>
    <style>
        .container {
            position: relative;
            width: 50%;
            max-width: 300px;
        }
        .image {
            display: block;
        }

        .overlay {
            position: absolute; 
            bottom: 0; 
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.5); /* Black see-through */
            color: #f1f1f1; 
            width: 80%;
            height:20px;
            transition: .5s ease;
            opacity:0.6;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
            color: white;
            font-size: 8px;
            padding: 5px;
            text-align: center;
        }

        #picture_holder{
            cursor:pointer;
        }

        .container:hover .overlay {
            opacity: 1;
        }
    </style>
</head>
    <body class="mod-bg-1 ">
        <!-- DOC: script to save and load page settings -->
        <?php include 'inc/theme_script_inc.php'; ?>
        <!-- BEGIN Page Wrapper -->
        <div class="page-wrapper" id="app">
            <div class="page-inner">
                <!-- BEGIN Left Aside -->
        <?php include 'inc/aside_inc.php'; ?>
<!-- END Left Aside -->
                <div class="page-content-wrapper">
                    <!-- BEGIN Page Header -->
        <?php include 'inc/header_inc.php'; ?>
<!-- END Page Header -->
                    <!-- BEGIN Page Content -->
                    <!-- the #js-page-content id is needed for some plugins to initialize -->
                    <main id="js-page-content" role="main" class="page-content">
                        <ol class="breadcrumb page-breadcrumb">
                            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
                        </ol>
                        <div class="row">
                            <div class="col-md-12">
                                <div id="panel-1" class="panel">
                                    <div class="panel-hdr" style="background-color:#415B78;">
                                        <h2 style="color:#FFF;">
                                            Return Items <span class="fw-300"><i></i></span>
                                        </h2>
                                        <div class="panel-toolbar"></div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <!-- profile summary -->
                                            <div class="card mb-g rounded-top">
                                                <div class="row no-gutters row-grid">
                                                    <div class="col-12">
                                                        <div class="p-5">
                                                        <div class="form-group">
                                                        <label for="invoice_no" style="font-weight:bold">Invoice No.#</label>
                                                        <input type="number" id="invoice_no" placeholder="Enter invoice No.#" class="form-control">
                                                            </div>
                                                            <div class="form-group d-none" id="category-group">
                                                                <select class="select2 form-control" id="category">
                                                                    <option value="">Select a Category</option>
                                                                <?php if($item_categories):?>
                                                                    <?php foreach($item_categories as $key):?>
                                                                        <option value="<?php echo $key['item_category_id'] ?>"><?php echo $key['item_category_name'] ?></option>
                                                                    <?php endforeach ?>
                                                                <?php endif ?>
                                                                </select>
                                                            </div>
                                                            <div class="form-group d-none" id="level-group">
                                                                <select class="select2 form-control" id="level">
                                                                    <option value="">Select a Level</option>
                                                                <?php if($item_levels):?>
                                                                    <?php foreach($item_levels as $key):?>
                                                                        <option value="<?php echo $key['item_level_id'] ?>"><?php echo $key['item_level_name'] ?></option>
                                                                    <?php endforeach ?>
                                                                <?php endif ?>
                                                                </select>
                                                            </div>
                                                            <center><h5 style="font-weight:bold">Results</h5></center>
                                                            <script>
                                                                let amount_due = 0;
                                                                let actual_amount = amount_due;
                                                                let final_amount_due = 0;
                                                                let final_actual_amount = final_amount_due;
                                                                let selected_items = [];
                                                                selected_item_ids = [];
                                                                selected_item_px = [];
                                                                selected_item_qtx = [];
                                                                selected_items = {};
                                                                let discount = 0;
                                                                let commission = 0;
                                                                
                                                            </script>
                                                            <div class="row request_container">
                                                            
                                                            </div>
                                                            <div>
                                                                <center>
                                                                    <!-- <button class="btn btn-xs btn-info" id="apply">
                                                                        Apply
                                                                    </button> -->
                                                                    <button class="btn btn-xs btn-info" id="apply">
                                                                       Apply&Continue
                                                                    </button>
                                                                    <button class="btn btn-xs btn-danger" id="return_items">
                                                                       Return Item(s)
                                                                    </button>
                                                                    <button class="btn btn-xs btn-default" id="cancel_request">
                                                                        New/Clear Request
                                                                    </button>
                                                                </center>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>
                    <!-- END Page Content -->
                    <!-- this overlay is activated only when mobile menu is triggered -->
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
<!-- BEGIN Page Footer -->
<?php include 'inc/footer_inc.php' ?>
<!-- END Page Footer -->
<!-- BEGIN Shortcuts -->
<!-- modal shortcut -->
<?php //include 'inc/header_menu.php'; ?>
 <!-- END Shortcuts -->
                </div>
            </div>
        </div>
        <!-- END Page Wrapper -->
        <!-- BEGIN Quick Menu -->
<!-- to add more items, please make sure to change the variable '$menu-items: number;' in your _page-components-shortcut.scss -->
<nav class="shortcut-menu d-none d-sm-block">
    <input type="checkbox" class="menu-open" name="menu-open" id="menu_open" />
    <label for="menu_open" class="menu-open-button ">
        <span class="app-shortcut-icon d-block"></span>
    </label>
    <a href="#" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Scroll Top">
        <i class="fal fa-arrow-up"></i>
    </a>
    <a href="login/logout.php" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Logout">
        <i class="fal fa-sign-out"></i>
    </a>
    <a href="#" class="menu-item btn" data-action="app-fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen">
        <i class="fal fa-expand"></i>
    </a>
    <a href="#" class="menu-item btn" data-action="app-print" data-toggle="tooltip" data-placement="left" title="Print page">
        <i class="fal fa-print"></i>
    </a>
</nav>
<!-- END Quick Menu -->
<!-- BEGIN Page Settings -->
 <!-- END Page Settings -->
 <?php $employee_id = $_SESSION['employee_id'] ?>
<?php include 'inc/script_inc.php' ?>
        <script src="assets/js/datagrid/datatables/datatables.bundle.js"></script>
        <script>
            $(document).ready(function()
            {
                
                toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": true,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": true,
                    "onclick": null,
                    "showDuration": 300,
                    "hideDuration": 5000,
                    "timeOut": 5000,
                    "extendedTimeOut": 1000,
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
                let btn_template = `
                                    <div class="process">
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        <span class="sr-only"> ...</span>
                                    </div> `;
                let invoice_no = null;
                let level_id = null;
                let customer_id = null;
                $('#invoice_no').on('change',function(){
                    let invoice_no = $('#invoice_no').val();
                    invoice = invoice_no;
                    var serverData = {
                        invoice_no:invoice_no,
                        items_to_return:''
                    }
                    if(invoice_no){
                        $.post('controller/itemCode.php',serverData,function(serverResponse){
                          
                            $('body .request_container').html(serverResponse);
                        });
                    }else{
                        $('#category-group').addClass('d-none');
                        toastr.warning('Please Select a Customer to Proceed!', 'Admin');
                        toastr.clear()
                    }
                });
                $('#return_items').on('click',function(){
                    $('#return_items').html(btn_template);
                    
                    var total = amount_due;
                    // amount_due -= discounted_value+commissioned_value;
                    var serverData = {
                        invoice_no:invoice_no,
                        return_items:'',
                        selected_request_items:selected_items,
                        request_total:amount_due
                    }
                    
                    $.post('controller/requestCode.php',serverData,function(serverResponse){
                        console.log(serverResponse)
                        if(serverResponse){
                                let response = JSON.parse(serverResponse);
                                if(response.data=="success"){
                                    $('#return_items').html('Return Item(s)');
                                    toastr.success('Items Returned Successfully.', 'Admin');
                                    toastr.clear()
                                }else if(response.data=="fail"){
                                    $('#return_items').html('Return Item(s)');
                                    toastr.warning('Action Failed!', 'Admin');
                                    toastr.clear()
                                }else{
                                    $('#return_items').html('Return Item(s)');
                                    toastr.error('Internal Error!', 'Admin');
                                    toastr.clear()
                                }
                            }
                    });
                });

                $('#apply').on('click',function(){
                    // $('#apply').html(btn_template);
                    // var discount = $('#discount').val();
                    // var commission = $('#commission').val();
                    
                    var selected_elements = $('.selected_request_items:checked');
                    $('.selected_request_items:checked').each(function(i,obj){
                        
                        if (selected_item_ids.includes(obj.value) === false){
                            selected_item_ids.push(obj.value);
                            selected_item_px.push(obj.name);
                            selected_item_qtx.push(obj.title);

                        }else{
                            $key = selected_item_ids.indexOf(obj.value)
                            selected_item_px[$key] = obj.name;
                            selected_item_qtx[$key] = obj.title;
                        }
                        
                    });
                    // for(var k=0;k<selected_item_ids.length;k++){
                    //     console.log(k)
                    //     amount_due += parseFloat(selected_item_px[k])*parseFloat(selected_item_qtx[k]);
                    // }
                    final_amount_due = 0;
                    selected_item_ids.forEach(function(element,i){
                        
                        if (selected_item_ids.includes(element) === true){
                            final_amount_due += parseFloat(selected_item_px[i])*parseFloat(selected_item_qtx[i])
                            // console.log(element)
                        }
                        
                        
                    });
                    console.log(final_amount_due)
                    
                    amount_due = final_amount_due
                    
                    if(amount_due<0){
                        amount_due = 0;
                    }

                    $("#amount_due").text(amount_due);
                    selected_items = {
                        selected_item_ids:selected_item_ids,
                        selected_item_px:selected_item_px,
                        selected_item_qtx:selected_item_qtx
                    }
                    console.log(selected_items)

                    
                        
                    });

                    $('#cancel_request').click(function(){
                        $('#cancel_request').html(btn_template);
                        window.location.reload();
                    });
                    
                    // Event Lot
                    var events = $("#app-eventlog");

                    $('.select2').select2();

                    $(".select2-placeholder-multiple").select2(
                    {
                        placeholder: "Select State"
                    });
                    $(".js-hide-search").select2(
                    {
                        minimumResultsForSearch: 1 / 0
                    });
                    $(".js-max-length").select2(
                    {
                        maximumSelectionLength: 2,
                        placeholder: "Select maximum 2 items"
                    });
                $(".select2-placeholder").select2(
                {
                    placeholder: "Select a state",
                    allowClear: true
                });

                $(".js-select2-icons").select2(
                {
                    minimumResultsForSearch: 1 / 0,
                    templateResult: icon,
                    templateSelection: icon,
                    escapeMarkup: function(elm)
                    {
                        return elm
                    }
                });

                function icon(elm)
                {
                    elm.element;
                    return elm.id ? "<i class='" + $(elm.element).data("icon") + " mr-2'></i>" + elm.text : elm.text
                }

            });

            
            
        </script>
    </body>

</html>
