@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>
        .dataTable > thead > tr > th[class*="sort"]:before,
        .dataTable > thead > tr > th[class*="sort"]:after {
            content: "" !important;
        }


        table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
            border: 1px solid #ddd !important;
        }

        table.dataTable tbody th, table.dataTable tbody td {
            padding: 4px 7px;
        }

        #warehouse-items-table tr td {
            height: 10px !important;
        }

        .table > tfoot > tr > th {
            background-color: #f5f5f5;
        }

        .table > tfoot > tr {
            border: 1px solid #ddd;;
        }

        .table thead th {
            padding: 5px 2px;
        }

        .input-group-addon:first-child {
            border-right: 0;
            padding-left: 10px;
            padding-right: 10px;
        }

        .well {
            border: 1px solid #ddd;
            background-color: #f6f6f6;
            box-shadow: none;
            padding: 9px;
            border-radius: 3px;
        }

        .well-sm {
            min-height: 20px;
        }

        .panel {
            margin-bottom: 15px;
            border-radius: 0;
            box-shadow: none;
            background-color: #fff;
            border: 1px solid transparent;
        }

        .panel-warning > .panel-heading {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .panel-warning {
            border-color: #faebcc;
        }

        .panel-body {
            padding: 5px;
        }

        .panel-heading {
            border-radius: 0;
            font-weight: 700;
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
        }

        .introtext {
            background: #f9f9f9;
            margin: -20px -20px 20px;
            padding: 10px;
            border-bottom: 1px solid #dbdee0;
        }

        #description {
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
        }

        .red-star {
            color: red;
        }

        #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: var(--blazma-primary);
            cursor: pointer;
        }

        .sw-theme-dots > .nav .nav-link.done::after {
            background-color: var(--blazma-primary);
        }

        .modal-title {
            width: 90%;
        }

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

    <!-- 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: var(--blazma-text)!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">
                            <div class="card-header">
                                <h4 style="color: var(--blazma-text)"><i class="fa-fw fa fa-plus"></i>Add Purchase Order</h4>
                            </div>

                            <div class="card-body">
                                <p class="introtext">Please fill in the information below. The field labels marked with
                                    <span class="red-star">*</span> are required input fields.</p>
                                <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 form-group">
                                    <div class="col-md-4">
                                        <label for="po_date">Date <span class="red-star">*</span></label>
                                        <input style="padding:15px" class="form-control" type="date" id="po_date"
                                               name="po_date">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="reference_no">Reference
                                            No {{--<span class="red-star">*--}}</span></label>
                                        <input class="form-control" type="text" id="reference_no" name="reference_no">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel panel-warning">
                                            <div class="panel-heading">Vendor
                                            </div>
                                            <div class="panel-body" style="padding: 5px;">
                                                <div class="col-md-4 form-group">
                                                    <label for="po_vendor_id"></label>
                                                    <input type="hidden" id="po_vendor_id"
                                                           value="{{ $purchaseRequest->VENDOR->ID }}">
                                                    <select disabled
                                                            class="form-control vendor_select">
                                                        <option value="{{ $purchaseRequest->VENDOR->ID }}"
                                                                selected="selected"
                                                                disabled>{{ $purchaseRequest->VENDOR->NAME }}
                                                            - {{ $purchaseRequest->VENDOR->LEGAL_NAME }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 form-group">
                                    <div class="control-group table-group">
                                        <label class="table-label">Order Items</label>
                                        <div class="controls table-controls">
                                            <table id="warehouse-items-table"
                                                   class="table items table-striped table-bordered table-condensed table-hover sortable_table">
                                                <thead>
                                                <tr>
                                                    <th>Item (ID)</th>
                                                    <th>Item (Code - Name)</th>
                                                    <th>Units</th>
                                                    <th>Net Unit Cost</th>
                                                    <th>Quantity</th>
                                                    <th>Product Tax</th>
                                                    <th>Subtotal (<span class="currency">SAR</span>)</th>
                                                    <th></th>
                                                </tr>
                                                </thead>
                                                <tfoot id="poItemsFooter">
                                                <tr>
                                                    <th>Total</th>
                                                    <th></th>
                                                    <th></th>
                                                    <th>Net Unit Cost</th>
                                                    <th>Quantity</th>
                                                    <th>Product Tax</th>
                                                    <th>Subtotal (<span class="currency">@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                                {!! $global_symbol['currency'] !!}
                                                            @else
                                                                {{ $global_symbol['currency'] ?? 'SAR' }}
                                                            @endif</span>)</th>
                                                    <th></th>
                                                </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 form-group text-center">
                                    <input type="submit" style="width: 20%; font-weight: bold;" class="btn btn-info"
                                           value="Submit" id="po_submit">
                                </div>

                            </div>


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

@endsection

@section('warehouse_scripts')

    <script>

        $(document).ready(function () {

            var today = new Date().toISOString().split('T')[0];
            $("#po_date").val(today);

            let rowArray = [];
            let initTable = 0;
            let sum_qty = 0;
            let sum_price = 0;
            let sum_tax = 0;
            let sum_total = 0;
            let total_tax = 0;
            let total_price = 0;
            let array_length = 0;
            let taxArray = [];

            var table = $("#warehouse-items-table");

            table.DataTable({
                "responsive": true,
                "autoWidth": false,
                "destroy": true,
                "searching": false,
                "paging": false,
                sorting: false,
                "bInfo": false,
                serverSide: true,
                cache: false,
                "processing": true,
                ajax: '/operations/warehouse/purchasing-request/items/' + {{$po_id}},
                "order": [[0, "desc"]],
                columnDefs: [
                    {"targets": 7, "className": "text-center pt-2"},
                ],
                columns: [
                    {data: "ID", title: "Item (ID)",},
                    {data: "ITEM.NAME_EN", title: "Item (Code - Name)"},
                    {data: "ITEM_UNIT_ID", title: "UNITS"},
                    {data: "PRICE", title: "Net Unit Cost"},
                    {data: "QTY", title: "Quantity"},
                    {data: "TAX", title: "Product Tax"},
                    {data: "qtyMultiplyPrice", title: "Subtotal (<span class='currency'>SAR</span>)"},
                    {
                        title: 'Action', sortable: false, width: "5%", "mRender": function (data, type, row) {
                            return '<i style="cursor: pointer;" item-id="' + row.ID + '" class="remove-item-cart fa fa-times"></i>'
                            //return '<a style="color:white !important;width: 40px; border-radius: 50%; padding: 10%;" class="remove-item-cart form-control btn btn-danger" item-id="' + row.ID + '"></a>';
                        }
                    }
                ],
                "rowCallback": function (row, data) {
                    if (initTable < parseInt(data['ITEMS_COUNT'])) {
                        rowArray.push({
                            id: data['ID'],
                            qty: data['QTY'],
                            price: data['PRICE'],
                            item_id: data['ITEM_ID'],
                            tax: data['ITEM_ID'],
                            item_unit_id: data['ITEM_UNIT_ID'],
                        });
                    }
                    initTable++;
                    array_length++;
                    var entry = rowArray.find(function (e) {
                        return e.id === data['ID'];
                    });

                    if (entry !== undefined) {
                        var qtyMultiplyPrice = parseInt(entry.qty) * parseInt(entry.price)
                        sum_tax = parseFloat((qtyMultiplyPrice - (qtyMultiplyPrice / (1 + parseFloat(data['TAX_VALUE'])))).toFixed(2))

                        $('td:eq(5)', row).html('<span class="sum_tax">' + sum_tax + '</span>');
                        $('td:eq(6)', row).html('<span class="sum_tax">' + qtyMultiplyPrice + '</span>');
                    }


                    for (var i = 0; i < taxArray.length; i++) {
                        var obj = taxArray[i]
                        if (obj.id === data['ID'])
                            taxArray.splice(i, 1);
                    }
                    taxArray.push({
                        id: data['ID'],
                        sum_price: qtyMultiplyPrice,
                        sum_tax: sum_tax,
                    });


                    let select = '<select style="height: calc(1.9rem + 2px); padding: .275rem .45rem;" class="form-control select-units">';
                    let options = '';

                    $.each(data['UNITS'], function (key, value) {
                        if (value.ITEM_UNIT_ID === entry.item_unit_id)
                            options += '<option item-id="' + data['ITEM_ID'] + '" item-unit-id="' + data['ITEM_UNIT_ID'] + '" id="unit-' + data['ID'] + '" value="' + value.ITEM_UNIT_ID + '" selected>' + value.UnitItem.UNIT.UNIT + '(' + value.UnitItem.QTY + ')</option>'
                        else
                            options += '<option item-id="' + data['ITEM_ID'] + '" item-unit-id="' + data['ITEM_UNIT_ID'] + '" id="unit-' + data['ID'] + '" value="' + value.ITEM_UNIT_ID + '">' + value.UnitItem.UNIT.UNIT + '(' + value.UnitItem.QTY + ')</option>'
                    })

                    let htmlSelect = select + options + '</select>';
                    $('td:eq(2)', row).html(htmlSelect)

                    $('td:eq(3)', row).html('<input style="height: 30px" type="number" class="form-control xedit-item-price" item-id="' + data['ITEM_ID'] + '" item-unit-id="' + data['ITEM_UNIT_ID'] + '" id="price-' + data['ID'] + '" value="' + entry.price + '"/>');
                    //$('td:eq(3)', row).html('<a href="#" class=" xedit-item-qty" data-pk="' + data["ID"] + '" data-title="Enter Quantity">' + (data["QTY"] ? data["QTY"] : '') + '</a>');
                    $('td:eq(4)', row).html('<input style="height: 30px" type="number" max="1000" class="form-control xedit-item-qty"  item-id="' + data['ITEM_ID'] + '" item-unit-id="' + data['ITEM_UNIT_ID'] + '" id="qty-' + data['ID'] + '" value="' + entry.qty + '"/>');
                    //$('td:eq(4)', row).html(tax.toFixed(2));
                },
                "drawCallback": function (settings) {
                    $('.xedit-item-price').on('change', function (e) {

                        let rowId = $(this).attr('id');
                        let itemId = $(this).attr('item-id');
                        let itemUnitId = $(this).attr('item-unit-id');
                        let value = $(this).val();
                        let id = rowId.replace("price-", "");
                        var qty = $('#qty-' + id).val();

                        for (var i = 0; i < rowArray.length; i++) {
                            var obj = rowArray[i]
                            if (obj.id === id)
                                rowArray.splice(i, 1);
                        }
                        rowArray.push({id: id, qty: qty, price: value, item_id: itemId, item_unit_id: itemUnitId});

                        $('#warehouse-items-table').DataTable().draw(false);
                    })
                    $('.xedit-item-qty').on('change', function (e) {

                        let rowId = $(this).attr('id');
                        let itemId = $(this).attr('item-id');
                        let value = $(this).val();
                        let id = rowId.replace("qty-", "");
                        var price = $('#price-' + id).val();
                        let itemUnitId = $(this).attr('item-unit-id');

                        for (var i = 0; i < rowArray.length; i++) {
                            var obj = rowArray[i]
                            if (obj.id === id)
                                rowArray.splice(i, 1);
                        }

                        rowArray.push({id: id, qty: value, price: price, item_id: itemId, item_unit_id: itemUnitId});

                        $('#warehouse-items-table').DataTable().draw(false);
                    })
                },
                "footerCallback": function (row, data, start, end, display) {

                    sum_qty = 0;
                    sum_price = 0;
                    sum_tax = 0;
                    sum_total = 0;
                    total_tax = 0;
                    total_price = 0;

                    var api = this.api();
                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                    };

                    total = api
                        .column(6)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    qty = api
                        .column(4)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    tax = api
                        .column(5)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    netCost = api
                        .column(3)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    for (var i = 0; i < rowArray.length; i++) {
                        var obj = rowArray[i]
                        sum_qty += parseInt(obj.qty)
                        sum_price += parseInt(obj.price)
                        //var qtyMultiplyPrice = parseInt(obj.qty) * parseInt(obj.price)
                        //sum_tax += parseFloat((qtyMultiplyPrice - (qtyMultiplyPrice / (1 + parseFloat(data[i]['TAX_VALUE'])))).toFixed(2))
                    }

                    for (var i = 0; i < taxArray.length; i++) {
                        var obj = taxArray[i]
                        total_tax += parseInt(obj.sum_tax)
                        total_price += parseInt(obj.sum_price)
                    }

                    //$(api.column(2).footer()).html(netCost);
                    $(api.column(3).footer()).html(sum_price);
                    //$(api.column(3).footer()).html(qty);
                    $(api.column(4).footer()).html(sum_qty);
                    $(api.column(5).footer()).html(total_tax.toFixed(2));
                    //$(api.column(4).footer()).html(sum_tax.toFixed(2));
                    $(api.column(6).footer()).html(total_price);
                },
            });

            $(document).on('change', '.select-units', function (e) {
                e.preventDefault();
                let itemUnitId = $(this).val();
                let rowId = $('option:selected', this).attr('id');
                let itemId = $('option:selected', this).attr('item-id');
                let id = rowId.replace("unit-", "");
                var qty = $('#qty-' + id).val();
                var price = $('#price-' + id).val();

                for (var i = 0; i < rowArray.length; i++) {
                    var obj = rowArray[i]
                    if (obj.id === id)
                        rowArray.splice(i, 1);
                }

                rowArray.push({id: id, qty: qty, price: price, item_id: itemId, item_unit_id: itemUnitId});
                //$('#warehouse-items-table').DataTable().draw(false);
            })

            $("body").on("click", ".remove-item-cart", function () {
                var item_id = $(this).attr("item-id");

                $('#qty-' + item_id).closest('tr').remove()

                for (var i = 0; i < rowArray.length; i++) {
                    var obj = rowArray[i]
                    if (obj.id === item_id)
                        rowArray.splice(i, 1);
                }
                /*$.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 deleting lab category item");
                });*/
                return false;
            });

            $('#po_submit').on('click', function (e) {
                e.preventDefault();
                var vendor_id = $('#po_vendor_id').val();
                var ref_id = $('#reference_no').val();
                var date = $('#po_date').val();
                const queryString = window.location.search;
                const urlParams = new URLSearchParams(queryString);
                const selectedLocation = urlParams.get('wh');

                if (vendor_id === '0') {
                    alert('Please select vendor')
                    return;
                }
                if ($('#warehouse-items-table').DataTable().rows().count() === 0) {
                    alert('Please add items before continue')
                    return;
                }


                var data = {
                    vendor_id: vendor_id,
                    pq_id: {{ $po_id }},
                    rows: rowArray,
                    ref_id: ref_id,
                    date: date,
                    selectedLocation: selectedLocation,
                }
                $.ajax({
                    type: "POST",
                    url: "/operations/warehouse/purchasing-request/placeOrderFromRequest",
                    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 () {
                    });
                });

            })
        });
    </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>