@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--}}
    <link rel="stylesheet" href="/vendor/fontawesome/6.1.1/css/all.min.css"/>
    <style>
        .dataTable > thead > tr > th[class*="sort"]:before,
        .dataTable > thead > tr > th[class*="sort"]:after {
            content: "" !important;
        }
        .sar-v1{
            display: inline-block;
            width: 16px; /* Adjust size */
            height: 16px;
            background-image: url('../../../../img/sar.svg'); /* Replace with actual image */
            background-size: contain;
            background-repeat: no-repeat;
            margin-left: 3px;
        }


        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: 6px 6px;
        }

        .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>
    <style>
        .card-header h2 {
            float: left;
            padding: 10px 0px;
            margin: 0px 0px 0px 20px;
        }

        .blue {
            font-size: 16px;
            font-weight: 700;
        }

        .card .card-header h2 i {
            border-right: 1px solid #dbdee0;
            padding: 12px 0;
            height: 40px;
            width: 40px;
            display: inline-block;
            text-align: center;
            margin: -10px 20px -10px -20px;
            font-size: 16px;
        }

        .img-fluid {
            max-width: 70%;
            float: right;
        }

        .border-right {
            border-right: 1px solid #dbdee0;
        }

        .border-left {
            border-left: 1px solid #dee2e6 !important;
        }

        .card-information {
            padding-right: 15px;
            padding-left: 15px;
        }

        .order-card-container {
            border: 1px solid #ddd;
            background-color: #f6f6f6;
            box-shadow: none;
            border-radius: 0;
            padding: 19px;
            margin-bottom: 20px;
            font-size: 16px;
            margin-right: 7.5px;
            margin-left: 7.5px;
        }

        table.dataTable tbody th, table.dataTable tbody td, .table thead th {
            padding: 8px
        }

        .poTotal {
            text-align: right;
            font-weight: bold;
            padding: 1vw 10px 1vw 1vw !important;
        }

        .table > tfoot > tr > th {
            padding: 8px 4px !important;
        }

        .btn-group-vertical > .btn, .btn-group > .btn {
            width: 100%;
        }

        .btn-group, .btn-group-vertical {
            display: table-cell;
            float: none;
            width: 1%;
        }

        .btn-group-justified {
            display: table;
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
        }

        .btn-primary {
            border-color: #357ebd;
        }

        .btn {
            padding: 4px;
        }

        .buttons .btn {
            margin-bottom: 1vw;
        }

        @media (max-width: 1600px) {
            .fa-3x {
                font-size: 2em !important;
            }
        }

        img {
            display: initial;
            width: auto;
        }

        .payment-amount-row {
            border: 1px solid #ddd;
            background-color: #f6f6f6;
            box-shadow: none;
            border-radius: 0;
            padding: 8px;
            margin: 0;
        }

        .disabled {
            pointer-events: none;
            background: lightslategray;
        }

        td.details-control {
            background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
            cursor: pointer;
            width: 18px;
        }

        tr.shown td.details-control {
            background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
        }

        #po-received-table > thead {
            font-size: 15px;
        }

        td.item-description {
            padding: 2px 1vw !important;
            width: 33.33%;
        }

        @media (max-width: 500px) {
            .card-header h2 {
                margin: -2vw;
                padding: 0;
            }

            .card-information {
                margin-top: 1.5rem !important;
                text-align: center;
            }

            .order-image-information {
                margin: 2vw;
            }

            #po_received {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            #add_payment {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    </style>

    <input type="hidden" id="order_id" value="{{ $order->ID }}">
    <!-- 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;">
                            <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">P.O # <b>{{$order->ID}}</b> -
                                <span class="right badge {{$order->STATUSDETAILS->BADGE}}">{{$order->STATUSDETAILS->NAME}}</span>
                                @if($order->EMAIL_SENT)
                                    <span class="right badge badge-success">Mail Sent</span>
                                @endif
                            </h1>
                        </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">
                        <div class="alert alert-success" id="alert-email" style="display: none">
                            <button data-dismiss="alert" class="close" type="button">×</button>
                            <strong>Email has been sent successfully</strong><br>
                        </div>
                        <!-- /.card -->

                        <div class="card">
                            <div class="card-header"
                                 style=" color: #34383c;font-size: 16px;background: #f7f7f8;border-bottom: 1px solid #dbdee0; height: 3vw;;">
                                <h2 class="blue">
                                    <i class="fa-fw fa fa-file"></i>
                                    Purchase Number. {{$order->ID}} | WH: <span style="color: #007bff">{{$order->LOCATION->text ?? ''}}</span>
                                </h2>
                            </div>

                            <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 order-card-container">
                                    <div class="col-md-4 border-right card-information">
                                        <div class="col-md-2" style="float: left;">
                                            <img class="order-image-information" src="/images/vendor.png"
                                                 style="width: 65px; filter: drop-shadow(2px 4px 2px gray);"/>
                                        </div>
                                        <div class="col-md-10" style="float: right;">
                                            <h5 class="font-weight-bold">Vendor Information</h5>
                                            <ul class="ml-1 mb-0 fa-ul text-muted">
                                                <li class="small font-weight-bold">
                                                    {{$order->VENDOR->NAME}}
                                                </li>
                                                <li class="small">{{$order->VENDOR->ADDRESS_COUNTRY}} </li>
                                                <li class="small">{{$order->VENDOR->ADDRESS_CITY}}</li>
                                                <li class="small">{{$order->VENDOR->MOBILE}}</li>
                                                <li class="small">{{$order->VENDOR->LEAD_TIME}}</li>
                                            </ul>

                                        </div>

                                    </div>
                                    <div class="col-md-4 card-information">
                                        <div class="col-md-2" style="float: left;"><img class="order-image-information"
                                                                                        src="/images/cart.png"
                                                                                        style="width: 65px; filter: drop-shadow(2px 4px 2px gray);"/>
                                        </div>
                                        <div class="col-md-10" style="float: right;">
                                            <h5 class="font-weight-bold">Order Information</h5>
                                            <ul class="ml-1 mb-0 fa-ul text-muted">
                                                <li class="small font-weight-bold">
                                                    {{$order->VENDOR->NAME}}
                                                </li>
                                                <li class="small">Subtotal : {{$order->BASE_AMOUNT}} @if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                        {!! $global_symbol['currency'] !!}
                                                    @else
                                                        {{ $global_symbol['currency'] ?? 'SAR' }}
                                                    @endif</li>
                                                <li class="small">Total Items : {{$order->order_items_count}}</li>
                                                <li class="small">{{$global_symbol['tax'] ?? 'TAX'}}: {{$order->TAX}} @if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                        {!! $global_symbol['currency'] !!}
                                                    @else
                                                        {{ $global_symbol['currency'] ?? 'SAR' }}
                                                    @endif</li>
                                                <li class="small">Net total : {{$order->TOTAL_AMOUNT}} @if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                        {!! $global_symbol['currency'] !!}
                                                    @else
                                                        {{ $global_symbol['currency'] ?? 'SAR' }}
                                                    @endif</li>
                                            </ul>

                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="col-md-4 border-left card-information">
                                        <div class="col-md-2" style="float: left;"><img class="order-image-information"
                                                                                        src="/images/reference.png"
                                                                                        style="width: 65px; filter: drop-shadow(2px 4px 2px gray);"/>
                                        </div>
                                        <div class="col-md-10" style="float: right;">
                                            <h5 class="font-weight-bold">
                                                Reference: {{ $order->REFERENCE_NUMBER }} @if($order->STATUS != \App\Models\PURCHASEORDER::REVISED && $duplicates > 1)
                                                    - {{ $duplicates }}
                                                @endif</h5>
                                            <p></p>
                                            <ul class="ml-1 mb-0 fa-ul text-muted">
                                                <li style="margin-bottom: 5px" class="small font-weight-bold">
                                                    Date : {{$order->PO_DATE}}
                                                </li>
                                                <li style="margin-bottom: 5px" class="small font-weight-bold">
                                                    Status : {{$order->STATUSDETAILS->NAME}} </li>
                                                <li style="margin-bottom: 5px" class="small font-weight-bold"> Payment
                                                    Status
                                                    : {{ $order->PAYMENTSTATUS->NAME_EN }}
                                                </li>

                                            </ul>

                                        </div>
                                        <div class="col-md-12 order_barcodes">
                                            <img src="https://sma.tecdiary.net/admin/misc/barcode/UE8yMDIwLzA4LzAwMTE/code128/74/0/1"
                                                 alt="PO2020/08/0011" class="bcimg">
                                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAABeCAIAAAAlsDQ5AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADTUlEQVR4nO2cwW7EIAxEm6r//8vpoVIaBcaMxwbSyu/U7gIhxBODMXuc5/lR9Pjc3YH3UkMD+br+Oo4j2NZDm/cGh7JlCts9/KkVvIv7pctqIDU0kK9xESeGSZPWfhVL0YhMf2h4j7643+1gGV0N3kUJCmIJivEIJJpxtbWEduS7yH/XXBfz+lrD92+hBAVZ6qGYYl5jebizRPKHpovhhocuZpfoSlCQRVaT9Xjnyadlooe6aBVhjFRb3XB5UweoBAWZ66GYp5o1G1zqoV4YGxUWnPJdlKAgfavZPklHuDoWvIv9VnOe58PmtU/S2T80r2XRlC+dBZL/HZos+zTmbK5aWVeXKUFB9H0oLabt2pByYQTb+U/u7HnXaGZv1Jrx6ilBQfZYjWstzlTny/NQ+1BMDMGr5FxcoQySEhTksEc3a2t1ZTta/Fj0UHbg7lHM1RVtsFxiYZ59lxIUxOeh7KfkypGIiEvuxrDK3Yg6ayhNnPKtalPVIEyDJSiIPuVL31pKbznIYXsfLeOwhWlH0JF3Vu0SZgkKMrCai/S0uuDkLdifuUGJlH4HVzpymhNDCQqiR/mCSbBZZTSQW+xP+aYyOwN4RtCjBAX5Y6lHRoPphjkYmnY7FZWUXX7WrJLBte4rQUH0oESuAb9k3XQnenyDqZXoPoaKMML43o6VoCD68Q2mfOTIoRcjb5bvWOaUL77dg9p0KYJUlosSFGRulG9YJn7kUJsWMVnr7qFJCZS4SrqCG8a3FZRIw201wddt8PyFFmPX4idUtnnwqKDRD+YSiU6w1lA5JAQlIm6o+9W8Q08uuxM9VPdiwSTYZYkWZMdKUJBtJ3aZivOUxdDZoou26MzwaWtpLk8oY1cvQUEm/urRHWMRxMAryzaEuR7KheB02n+nxkYrl09hdbY5bwL2bDCLR4PjKB/vtoaxRcSkCV5idKIEBcn/1aPEKd/K6i2r3zWRGWbQGXspQUH2n4fSai1YVe2f8hllXPfPr4/IZktQkP1TPi1ImH76IzM5dh6uSOC8l04JCvJGq/mB1JEWr0DfspkSUx1k1nEqsn27WPfqJSjItl89CiarM7WCGzJ71lDe7gbfI1r7JShI/mbLv6GsBlJDA6mhgXwDVZhNbfUj4OQAAAAASUVORK5CYII="
                                                 alt="https://sma.tecdiary.net/admin/purchases/view/9" class="qrimg">
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-12 form-group">
                                    <div class="control-group table-group">
                                        <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>Unit</th>
                                                    <th>Net Unit Cost</th>
                                                    <th>Quantity</th>
                                                    <th>Quantity Received</th>
                                                    <th style="text-align: center">Product {{$global_symbol['tax'] ?? 'TAX'}}</th>
                                                    <th style="text-align: center">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>
                                                </tr>
                                                </thead>
                                                <tfoot id="poItemsFooter">
                                                <tr>
                                                    <th class="poTotal" style="border: 1px solid #ddd !important"
                                                        colspan="7">Total Amount (@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                            {!! $global_symbol['currency'] !!}
                                                        @else
                                                            {{ $global_symbol['currency'] ?? 'SAR' }}
                                                        @endif)
                                                    </th>
                                                    <th class="poTotal"></th>
                                                </tr>
                                                <tr>
                                                    <th class="poTotal" style="border: 1px solid #ddd !important"
                                                        colspan="7">Refunded (@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                            {!! $global_symbol['currency'] !!}
                                                        @else
                                                            {{ $global_symbol['currency'] ?? 'SAR' }}
                                                        @endif)
                                                    </th>
                                                    <th class="poTotal"></th>
                                                </tr>
                                                <tr>
                                                    <th class="poTotal" style="border: 1px solid #ddd !important"
                                                        colspan="7">Paid (@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                            {!! $global_symbol['currency'] !!}
                                                        @else
                                                            {{ $global_symbol['currency'] ?? 'SAR' }}
                                                        @endif)
                                                    </th>
                                                    <th class="poTotal"></th>
                                                </tr>
                                                <tr>
                                                    <th class="poTotal" style="border: 1px solid #ddd !important"
                                                        colspan="7">Balance (@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                            {!! $global_symbol['currency'] !!}
                                                        @else
                                                            {{ $global_symbol['currency'] ?? 'SAR' }}
                                                        @endif)
                                                    </th>
                                                    <th class="poTotal"></th>
                                                </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                @if($order->TOTAL_PAID != null)
                                    <div class="col-md-12 form-group">
                                        <label for="po-payments-table">Payment List</label>
                                        <table id="po-payments-table"
                                               class="table items table-striped table-bordered table-condensed table-hover sortable_table"></table>
                                    </div>
                                @endif


                                @if($order->PURCHASE_RECEIVED_COUNT != 0)
                                    <div class="col-md-12 form-group">
                                        <label for="po-purchase-received-table">Received List</label>
                                        <table id="po-purchase-received-table"
                                               class="table items table-striped table-bordered table-condensed table-hover sortable_table"></table>
                                    </div>
                                @endif
                                <div class="buttons col-md-12">
                                    <div class="btn-group btn-group-justified">
                                        <div class="btn-group">
                                            <a style="background-color: #5fc6e9;border-color: #bdd2d9;" href="#"
                                               data-toggle="modal" data-target="#receievd-modal"
                                               class="tip btn btn-primary tip" title="Purchase Receive"
                                               id="po_received"
                                               data-original-title="Purchase Receive">
                                                <i class="fa-solid fa-money-check-dollar"></i> <span
                                                        class="hidden-sm hidden-xs">Purchase Receive</span>
                                            </a>
                                        </div>
                                        <div class="btn-group">
                                            <a style="background-color: #5fc6e9;border-color: #bdd2d9;" href="#"
                                               class="tip btn btn-primary tip" title="" id="add_payment"
                                               data-target="#paymentModal" data-toggle="modal"
                                               data-original-title="Add Payment">
                                                <i class="fa-solid fa-money-check-dollar"></i> <span
                                                        class="hidden-sm hidden-xs">Add Payment</span>
                                            </a>
                                        </div>
                                        <div class="btn-group">
                                            <a style="background-color: #5fc6e9;border-color: #bdd2d9;" href="#"
                                               data-toggle="modal" data-target="#emailModal"
                                               class="tip btn btn-primary tip" title="" data-original-title="Email">
                                                <i class="fa-solid fa-envelope"></i> <span class="hidden-sm hidden-xs">Email</span>
                                            </a>
                                        </div>
                                        <div class="btn-group">
                                            <a style="background-color: #5fc6e9;border-color: #bdd2d9;"
                                               href="/operations/warehouse/purchasing-orders/{{$order->ID}}/pdf"
                                               target="_blank"
                                               class="tip btn btn-primary"
                                               role="button" data-tooltip="tooltip"
                                               data-placement="top"
                                               title="Download as PDF"
                                               data-original-title="Download as PDF">
                                                <i class="fa fa-download"></i> <span
                                                        class="hidden-sm hidden-xs">PDF</span>
                                            </a>
                                        </div>
                                        <div class="btn-group">
                                            @if($order->STATUS == \App\Models\PURCHASEORDER::CONFIRMED)
                                                <a href="/operations/warehouse/edit-purchasing-order/{{$order->ID}}"
                                                   class="tip btn btn-warning tip" title=""
                                                   data-original-title="Edit" id="po-edit">
                                                    <i class="fa fa-edit"></i> <span
                                                            class="hidden-sm hidden-xs">Edit</span>
                                                </a>
                                            @else
                                                <a href="javascript::void(0)"
                                                   style="pointer-events: none; background: #f1c953" disabled=""
                                                   class="tip btn btn-warning tip" title=""
                                                   data-original-title="Edit" id="po-edit">
                                                    <i class="fa fa-edit"></i> <span
                                                            class="hidden-sm hidden-xs">Edit</span>
                                                </a>
                                            @endif
                                        </div>
                                        @if($order->STATUS == \App\Models\PURCHASEORDER::CONFIRMED)
                                            <div class="btn-group">
                                                <a href="#" class="tip btn btn-danger bpo" title=""
                                                   data-html="true" data-placement="top" id="po_delete"
                                                   data-original-title="<b>Delete Purchase</b>">
                                                    <i class="fa-solid fa-trash"></i> <span class="hidden-sm hidden-xs">Delete</span>
                                                </a>
                                            </div>
                                        @else
                                            <div class="btn-group" disabled="">
                                                <a disabled="" style="pointer-events: none; background: #ef616e"
                                                   href="#" class="tip btn btn-danger bpo" title=""
                                                   data-html="true" data-placement="top"
                                                   data-original-title="<b>Delete Purchase</b>">
                                                    <i class="fa-solid fa-trash"></i> <span class="hidden-sm hidden-xs">Delete</span>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </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="receievd-modal">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="font-size: 16px; font-weight: bold;">Purchase Receive (Purchase
                        Reference: {{$order->REFERENCE_NUMBER}})</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="received-items-form" method="post" action="/operations/warehouse/purchasing/receivedItems">
                    <input type="hidden" name="po_id" id="po_id" value="{{ $order->ID }}">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-received" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-6">
                                <label>Select Location</label>
                                <select name="po_locations" id="po_locations" class="form-control">
                                    <option value="" selected disabled>Locations</option>
                                    @foreach($WhStorableLocations as $location)
                                        <option value="{{ $location->id }}">{{ $location->text ?? '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <table id="po-received-table" style="display: none"
                                       class="table table-responsive items table-striped table-bordered table-condensed table-hover sortable_table">

                                    <tfoot id="poReceivedItemsFooter">
                                    <tr>
                                        <th colspan="4">Total</th>
                                        <th colspan="1" style="border: 1px solid #ddd !important"></th>
                                        <th colspan="1" style="border: 1px solid #ddd !important"></th>
                                        <th colspan="1" style="border: 1px solid #ddd !important"></th>
                                        <th colspan="1" style="border: 1px solid #ddd !important"></th>
                                        <th colspan="1" style="border: 1px solid #ddd !important"></th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-info" id="submit-received-items">Place Received Order
                        </button>
                        <button class="btn btn-info" id="submit-received-items-loading" style="display: none" type="button" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Loading...
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="paymentModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="font-size: 16px; font-weight: bold;">ADD PAYMENT</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="payment-form" method="post" action="/operations/warehouse/purchasing/placePayment">

                    <input type="hidden" name="PO_ID" id="PO_ID" value="{{ $order->ID }}">
                    <div class="modal-body">
                        <p>Please fill in the information below. The field labels marked with * are required input
                            fields.</p>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group has-feedback">
                                    <label for="payment_date">Date <span class="red-star">*</span></label>
                                    <input style="padding:15px" class="form-control" type="date" id="payment_date"
                                           name="payment_date">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="reference_no">Reference No</label>
                                    <input type="text" name="reference_no" value="" class="form-control tip"
                                           id="reference_no">
                                </div>
                            </div>
                            <input type="hidden" value="9" name="purchase_id">
                        </div>
                        <div class="row payment-amount-row">
                            <div class="col-sm-6">
                                <div class="payment">
                                    <div class="form-group has-feedback">
                                        <label for="amount_1">Amount <span class="red-star">*</span></label>
                                        <input name="amount_paid" type="number" id="amount_paid"
                                               value="{{ $order->MUST_PAID }}" max="{{ $order->MUST_PAID }}"
                                               class="pa form-control kb-pad amount" required="required"
                                               data-bv-field="amount_paid">
                                        <i class="form-control-feedback" data-bv-icon-for="amount_paid"
                                           style="display: none;"></i>
                                        <small class="help-block" data-bv-validator="notEmpty" data-bv-for="amount_paid"
                                               data-bv-result="NOT_VALIDATED" style="display: none;">Please enter/select
                                            a value</small></div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group has-feedback">
                                    <label for="payment_method">Paying by <span class="red-star">*</span></label>
                                    <select name="payment_method" id="payment_method" class="form-control">
                                        <option value="Credit Card">Credit Card</option>
                                        <option value="Cash">Cash</option>
                                        <option value="Cheque">Cheque</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-info">Add Payment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="emailModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="font-size: 16px; font-weight: bold;">EMAIL PURCHASE</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="email-form" method="post" action="/operations/warehouse/purchasing-orders/sendPOEmail">

                    <input type="hidden" name="PO_ID" id="PO_ID" value="{{ $order->ID }}">
                    <div class="modal-body">
                        <p>Please fill in the information below. The field labels marked with * are required input
                            fields.</p>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group has-feedback">
                                    <label for="to_mail">To (seperated by comma) <span class="red-star">*</span></label>
                                    <input style="padding:15px" placeholder="email1@gmail.com,email2@gmail.com"
                                           value="{{ implode(',', $order->VENDOR->CONTACTS->pluck('EMAIL')->toArray()) }}"
                                           class="form-control" required type="text" id="to_mail"
                                           name="to_mail">
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group has-feedback">
                                    <label for="to_mail">CC (seperated by comma)</label>
                                    <input style="padding:15px" placeholder="CC"
                                           class="form-control" type="text" id="cc"
                                           name="cc">
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group has-feedback">
                                    <label for="subject">Subject <span class="red-star">*</span></label>
                                    <input style="padding:15px" placeholder="Subject"
                                           value="{{ $profileName }} - Purchase Details ({{ $order->REFERENCE_NUMBER }})"
                                           class="form-control" required type="text" id="subject"
                                           name="subject">
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group has-feedback">
                                    <label for="message">Message <span class="red-star">*</span></label>
                                    <textarea class="form-control" required name="message" id="message" cols="20"
                                              rows="10">Hello {{$order->VENDOR->NAME}},

Please find the attachment for our purchase order ({{ $order->REFERENCE_NUMBER }})
details.


Best regards,
{{ $profileName }}
                                    </textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-info" id="email-submit-btn">Send Email</button>
                        <button class="btn btn-info" id="loading-email-btn" style="display: none" type="button"
                                disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Loading...
                        </button>

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

    <div class="modal fade" id="prAttachmentModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="font-size: 16px; font-weight: bold;">Attachment List</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="pr-attachment-form" method="post" action="/operations/warehouse/purchasing-received/attachment">
                    <div class="modal-body">
                        <table class="table table-striped table-bordered table-condensed table-hover sortable_table">
                           <thead>
                            <tr>
                                <th>File</th>
                            </tr>
                           </thead>
                            <tbody id="pr-tbody-attachments">

                            </tbody>
                        </table>

                        <div class="row">
                            <input type="file" class="form-control" name="prAttachmentFiles" id="pr-attachment-file">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-info">Add Attachment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <input type="hidden" id="must-paid" value="{{ $order->MUST_PAID }}">
@endsection

@section('warehouse_scripts')

    <script src="/vendor/fontawesome/6.1.1/all.min.js"></script>
    <script>

        $(document).ready(function () {
            var today = new Date().toISOString().split('T')[0];
            $("#payment_date").val(today);

            if ($('#must-paid').val() === '0')
                $('#add_payment').addClass('disabled')
            @if($order->STATUS < 1)
            $('#add_payment').addClass('disabled')
            @endif

            @if($order->RECEIVED_STATUS || $order->STATUS < 1)
            $('#po_received').addClass('disabled')
            @endif
            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,
                columnDefs: [
                    {"targets": 5, "className": "text-right"},
                    {"targets": 6, "className": "text-right"},
                    {"targets": 7, "className": "text-right"},
                ],
                "processing": true,
                ajax: '/operations/warehouse/purchasing/itemsTable/' + $("#order_id").val(),
                "order": [[0, "desc"]],
                columns: [
                    {data: "ID", title: "Item (ID)",},
                    {data: "ITEM.NAME_EN", title: "Item (Code - Name)"},
                    {data: "UNITS", title: "Unit"},
                    {data: "PRICE", title: "Net Unit Cost"},
                    {data: "QTY", title: "Quantity"},
                    {data: "RECEIVED", title: "Quantity Received"},
                    {data: "TAX", width: "20%", title: "Product {{$global_symbol['tax'] ?? 'TAX'}}"},
                    {data: "qtyMultiplyPrice", width: "8%", title: "Subtotal"},
                ],
                "rowCallback": function (row, data) {
                },
                "drawCallback": function (settings) {
                },
                "footerCallback": function (row, data, start, end, display) {
                    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(7)
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    $(api.column(7).footer()).html(total);
                    @if($order->TOTAL_PAID == null)
                    $('tr:eq(2) th:eq(1)', api.table().footer()).html(0)
                    @else
                    $('tr:eq(2) th:eq(1)', api.table().footer()).html({{ $order->TOTAL_PAID }})
                    @endif
                    @if($order->TOTAL_RETURNS == null)
                    $('tr:eq(1) th:eq(1)', api.table().footer()).html(0)
                    @else
                    $('tr:eq(1) th:eq(1)', api.table().footer()).html({{ $order->TOTAL_RETURNS }})
                    @endif

                    $('tr:eq(3) th:eq(1)', api.table().footer()).html({{ $order->MUST_PAID }})
                },
            });

            $("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;
            });

            $('#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();

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

                var data = {
                    vendor_id: vendor_id,
                    ref_id: ref_id,
                    date: date,
                }
                $.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 () {
                    });
                });
            })

            $("#payment-form").submit(function (e) {

                //prevent Default functionality
                e.preventDefault();

                var action_url = e.currentTarget.action;

                if ($('#amount_paid').val() > {{ $order->MUST_PAID }})
                    return;

                $.ajax({
                    url: action_url,
                    type: 'post',
                    dataType: "json",
                    data: $("#payment-form").serialize(),
                    context: this,
                    success: function (data) {
                        window.location.reload();
                    }
                });


            });

            @if($order->STATUS == \App\Models\PURCHASEORDER::CONFIRMED)
            $('#po_delete').on('click', function (e) {
                e.preventDefault();
                if (window.confirm("Are you sure?")) {
                    $.ajax({
                        url: '/operations/warehouse/delete-purchasing/' + {{ $order->ID }},
                        type: 'DELETE',
                        success: function () {
                            window.location.href = "/operations/warehouse/purchasing/orders/"+ {{ $order->ID }};
                        },
                        error: function (e) {
                            alert(e.responseJSON.errorMessage)
                        }
                    })
                }
            })
            @endif

            $("#email-form").submit(function (e) {
                e.preventDefault();

                $('#email-submit-btn').css('display', 'none');
                $('#loading-email-btn').css('display', 'block');
                var action_url = e.currentTarget.action;
                var toEmail = $('#to_mail').val();
                $.ajax({
                    url: action_url,
                    type: 'post',
                    dataType: "json",
                    data: $("#email-form").serialize(),
                    context: this,
                }).done(function (data) {
                    $('#alert-email').removeClass('alert-danger').addClass('alert-success')
                    $('#alert-email strong').html(data.response)
                    $('#emailModal').modal('hide')
                    $('#alert-email').css('display', 'block')
                    $('#email-submit-btn').css('display', 'block');
                    $('#loading-email-btn').css('display', 'none');
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    $('#alert-email strong').html(jqXHR.responseJSON.errorMessage)
                    $('#alert-email').removeClass('alert-success').addClass('alert-danger')
                    $('#emailModal').modal('hide')
                    $('#alert-email').css('display', 'block')
                    $('#email-submit-btn').css('display', 'block');
                    $('#loading-email-btn').css('display', 'none');
                });


            });

            $("#po-payments-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/payments/' + $("#PO_ID").val(),
                "order": [[0, "desc"]],
                columns: [
                    {data: "ID", title: "Id",},
                    {data: "created_at", title: "Date",},
                    {data: "PAYMENT_REFERENCE", title: "Payment Reference"},
                    {data: "PAYMENT_METHOD", title: "Payment Method Type"},
                    {data: "PAID_AMOUNT", title: "Amount"},
                    {data: "user.USERNAME", title: "Created By"},
                ]
            });

            let number_of_received = [];
            var receivedTable = $("#po-received-table").DataTable({
                "responsive": true,
                "autoWidth": false,
                "destroy": true,
                "searching": false,
                "paging": false,
                sorting: false,
                "bInfo": false,
                serverSide: true,
                cache: false,
                "processing": true,
                ajax: {
                    "url": '/operations/warehouse/purchasing/itemsTable/' + $("#order_id").val(),
                    "data": {
                        "po_receiving_table": true
                    }
                },
                "order": [[0, "desc"]],
                /*columnDefs: [
                    {"targets": 3, "width": '10%'},
                ],*/
                columns: [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "searchable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    {data: "ID", title: "Item (ID)",},
                    {data: "ITEM.NAME_EN", title: "Item"}, // (Code - Name)
                    {data: "UNITS", title: "Unit"},
                    {data: "PRICE", title: "Net Unit Cost"},
                    {data: "QTY", title: "Quantity"},
                    {data: "RECEIVED", title: "Received"},
                    {data: "TAX", width: "20%", title: "Product {{$global_symbol['tax'] ?? 'TAX'}}"},
                    {data: "qtyMultiplyPrice", width: "8%", title: "Subtotal"},
                ],
                "rowCallback": function (row, data) {
                    if (data['ITEM']['HAS_LINE_ITEM'] === 0 && data['ITEM']['IS_BUNDLE'] === 0)
                        $('td:eq(0)', row).removeClass('details-control');

                    $('td:eq(6)', row).html('<input style="height: 30px" type="number" class="form-control xedit-item-received" row-id="' + data['DT_RowIndex'] + '" id="' + data['ID'] + '" value="0"/>');
                    //$('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(3)', row).html('<input style="height: 30px" type="number" class="form-control xedit-item-qty" id="' + data['ID'] + '" value="' + data['QTY'] + '"/>');
                    //$('td:eq(4)', row).html(tax.toFixed(2));
                },
                "drawCallback": function (settings) {
                    var api = this.api();
                    $('.xedit-item-received').on('blur', function (e) {
                        $(this).closest('tr').removeClass('shown')
                        $('#line-' + $(this).attr('id')).parent().css('display', 'none')
                        var qty = parseInt(api
                            .column(5).data()[$(this).attr('row-id') - 1]);
                        var rowId = this.id;
                        var value = parseInt(this.value);
                        if (value > qty) {
                            alert('Unexpected value provided!')
                            $(this).val(qty)

                            for (var i = 0; i < number_of_received.length; i++) {
                                var obj = number_of_received[i]
                                if (obj.id === rowId)
                                    number_of_received.splice(i, 1);
                            }
                            number_of_received.push({id: rowId, qty: qty});
                        } else {
                            // if (number_of_received.some(el => el.id === rowId)) //=> if found
                            for (var i = 0; i < number_of_received.length; i++) {
                                var obj = number_of_received[i]
                                if (obj.id === rowId)
                                    number_of_received.splice(i, 1);
                                //number_of_received.pop(i);
                            }

                            $(this).val(value)
                            //number_of_received.push({[rowId]: value});
                            number_of_received.push({id: rowId, qty: value});
                        }

                        //$("#po-received-table").DataTable().draw(false);
                    });

                },
                "footerCallback": function (row, data, start, end, display) {
                    var api = this.api();

                    var intVal = function (i) {
                        return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                    };

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

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

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

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

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

                    $(api.column(4).footer()).html(netCost);
                    $(api.column(5).footer()).html(qty);
                    $(api.column(6).footer()).html('');
                    $(api.column(7).footer()).html(tax.toFixed(2));
                    $(api.column(8).footer()).html(total.toFixed(2));
                },
            });

            $("#po-purchase-received-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/receivedTable/' + $("#PO_ID").val(),
                "order": [[0, "desc"]],
                columns: [
                    {data: "ID", title: "Id",},
                    {data: "created_at", title: "Date",},
                    {data: "REFERENCE_NUMBER", title: "Received Reference"},
                    {data: "LOCATION.text", title: "Location"},
                    {data: "user.USERNAME", title: "Created By"},
                    {
                        title: 'Attachments', "mRender": function (data, type, row) {
                            return '<button style="border-radius: 50%; padding: 7px;" class="btn btn-outline-success btn-sm p-r-attachments" id="' + row.ID + '"><i class="fa fa-file"></i></button>';
                        }
                    },
                ]
            });

            var childesArray = [];
            $('#po-received-table tbody').on('click', 'td.details-control', function (e) {
                var tr = $(this).closest('tr');
                /*var row = t.row( this );
                t.cell(row, 4).data("B").draw();*/
                var row = $("#po-received-table").DataTable().row(tr);
                let line_id = $('#line-' + row.data().ID);
                var t = $("#po-received-table").DataTable().row(this);
                var row2 = t.row(this);
                //row.child(template(row.data())).show();
                var qty = $('#' + t.cell(row2, 1).data()).val();
                var line_qty = 0;
                //if (row.child.isShown()) {
                if (tr.hasClass('shown')) {
                    if (line_id.length > 0) {
                        line_id.parent().css('display', 'none')
                    } else row.child.hide()

                    tr.removeClass('shown');
                } else {
                    if (qty === '0') {
                        alert('Please add quantity for received first!')
                        return;
                    }

                    // close all nodes
                    if (receivedTable.row('.shown').length) {
                        $('.details-control', receivedTable.row('.shown').node()).click();
                    }

                    if (line_id.length > 0) {
                        line_qty = line_id.attr('line-rows');
                        if (line_qty !== qty) {
                            if (line_qty > qty) {
                                var i;
                                var numberOfRows = line_qty - qty;
                                for (i = 0; i < numberOfRows; i++) {
                                    $('#table-' + row.data().ID + ' tr:last').remove();
                                    --line_qty;
                                }
                                line_id.attr('line-rows', line_qty)
                                $('#number_of_received' + row.data().ID).attr('value', qty)
                            } else {
                                var i;
                                var numberOfRows = qty - line_qty;
                                for (i = 0; i < numberOfRows; i++) {
                                    $('#table-' + row.data().ID).find('tbody').append('<tr class="expirey-line">' +
                                        '<td class="item-description">Expiry Date</td>' +
                                        '<td class="item-description">' +
                                        '<input type="date" class="form-control expiry_date" row-id="' + row.data().ID + '" value="" name="expiry_date[' + row.data().ID + '][]">' +
                                        '</td>' +
                                        '<td class="item-description">' +
                                        '<input type="text" placeholder="Lot Number" class="form-control serial_code" row-id="' + row.data().ID + '" value="" name="serial_code[' + row.data().ID + '][]">' +
                                        '</td>');
                                    ++line_qty;
                                }
                                line_id.attr('line-rows', line_qty)
                                $('#number_of_received' + row.data().ID).attr('value', qty)
                            }
                        }

                        line_id.parent().css('display', 'revert')
                    } else {
                        if (row.data().ITEM.IS_BUNDLE === '1'){
                            row.child(formatBundle(row.data(), qty)).show();
                        }else{
                            row.child(format(row.data(), qty)).show();
                        }
                    }
                    //console.log($.inArray(row.data().ID, childesArray) === -1)
                    tr.addClass('shown');
                }

                function format(data, numberOfRows) {
                    var i = 0;
                    var fill_all = '<div class="form-group col-md-12">' +
                        '<div class="row">' +
                        '<div class="col-md-4">' +
                        '<label for="lot_number">Expiry Date for all items</label>' +
                        '<input type="date" class="form-control" placeholder="Expiry Date" id="expiry_date_all">' +
                        '</div>' +
                        '<div class="col-md-4">' +
                        '<label for="lot_number">Lot number for all items</label>' +
                        '<input type="text" class="form-control" placeholder="Lot Number" id="lot_number">' +
                        '</div>' +
                        '<div class="col-md-4">' +
                        '<label style="padding-bottom: 2.3vw;"></label>' +
                        '<button row-id="' + data.ID + '" class="btn btn-primary btn-sm fill_all_btn" style="width: 50%; background-color: #5fc6e9;border-color: #bdd2d9;">Fill All</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>';

                    var table = '<div id="line-' + data.ID + '" line-rows="' + numberOfRows + '" style="height: 7vw; overflow: auto;" class="expiry-div"">' +
                        '<table id="table-' + data.ID + '" class="table expiry-div">';
                    var tr = '';
                    for (i; i < numberOfRows; i++) {
                        tr += '<tr class="expirey-line">' +
                            '<td class="item-description">Expiry Date</td>' +
                            '<td class="item-description">' +
                            '<input type="date" class="form-control expiry_date" row-id="' + data.ID + '" value="" name="expiry_date[' + data.ID + '][]">' +
                            '</td>' +
                            '<td class="item-description">' +
                            '<input type="text" placeholder="Lot Number" class="form-control serial_code" row-id="' + data.ID + '" value="" name="serial_code[' + data.ID + '][]">' +
                            '</td>' +
                            '</tr>';
                    }
                    return fill_all + table + tr + '</table></div><hr>';

                }

                function formatBundle(data, numberOfRows) {
                    var i = 0;
                    var fill_all = '<div class="form-group col-md-12">' +
                        '<div class="row">' +
                        '<div class="col-md-4">' +
                        '<label for="lot_number">Expiry Date for all items</label>' +
                        '<input type="date" class="form-control" placeholder="Expiry Date" id="expiry_date_all">' +
                        '</div>' +
                        '<div class="col-md-4">' +
                        '<label for="lot_number">Lot number for all items</label>' +
                        '<input type="text" class="form-control" placeholder="Lot Number" id="lot_number">' +
                        '</div>' +
                        '<div class="col-md-4">' +
                        '<label style="padding-bottom: 2.3vw;"></label>' +
                        '<button row-id="' + data.ID + '" class="btn btn-primary btn-sm fill_all_btn" style="width: 50%; background-color: #5fc6e9;border-color: #bdd2d9;">Fill All</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>';

                    var table = '<div id="line-' + data.ID + '" line-rows="' + numberOfRows + '" style="height: 7vw; overflow: auto;" class="expiry-div"">' +
                        '<table id="table-' + data.ID + '" class="table expiry-div">';
                    var tr = '';
                    for (i; i < data.ITEM.ITEMS.length; i++) {
                        tr += '<tr class="expirey-line">' +
                            '<td><b>'+data.ITEM.ITEMS[i].NAME_EN+'</b></td>' +
                            '<td class="item-description">' +
                            '<label style="color: #007bff; font-size: 10px">Expiry Date</label><input type="date" class="form-control expiry_date" row-id="' + data.ID + '" value="" name="expiry_date[' + data.ID + '][' + data.ITEM.ITEMS[i].ID + '][]">' +
                            '</td>' +
                            '<td class="item-description">' +
                            '<label style="color: #007bff; font-size: 10px">Lot #</label><input type="text" placeholder="Lot Number" class="form-control serial_code" row-id="' + data.ID + '" value="" name="serial_code[' + data.ID + '][' + data.ITEM.ITEMS[i].ID + '][]">' +
                            '</td>' +
                            '</tr>';
                    }
                    return fill_all + table + tr + '</table></div><hr>';

                }
            });

            $('#po_locations').on('change', function (e) {
                $('#po-received-table').css('display', 'block')
                //console.log($(this).val())
            })

            function sortByKey(array, key) {
                return array.sort(function (a, b) {
                    var x = a[key];
                    var y = b[key];
                    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                });
            }

            function convertToNested(flatObj) {
                var result = {};
                $.each(flatObj, function(key, value) {
                    var parts = key.split(/[\[\]]/).filter(function(part) { return part.length > 0; });
                    var temp = result;
                    for (var i = 0; i < parts.length; i++) {
                        if (i === parts.length - 1) {
                            if (temp[parts[i]] !== undefined) {
                                if (!Array.isArray(temp[parts[i]])) {
                                    temp[parts[i]] = [temp[parts[i]]];
                                }
                                temp[parts[i]].push(value);
                            } else {
                                temp[parts[i]] = value;
                            }
                        } else {
                            if (temp[parts[i]] === undefined) {
                                temp[parts[i]] = {};
                            }
                            temp = temp[parts[i]];
                        }
                    }
                });
                return result;
            }

            $("#received-items-form").submit(function (e) {
                e.preventDefault();
                $('#submit-received-items').css('display', 'none');
                $('#submit-received-items-loading').css('display', 'block');
                var action_url = e.currentTarget.action;
                var formArray = $(this).serializeArray();
                var flatObj = {};
                $.each(formArray, function() {
                    if (flatObj[this.name] !== undefined) {
                        if (!$.isArray(flatObj[this.name])) {
                            flatObj[this.name] = [flatObj[this.name]];
                        }
                        flatObj[this.name].push(this.value);
                    } else {
                        flatObj[this.name] = this.value;
                    }
                });
                var dataObj = convertToNested(flatObj);
                dataObj.received_items = sortByKey(number_of_received, 'id');
                $.ajax({
                    url: action_url,
                    type: 'post',
                    dataType: "json",
                    data: JSON.stringify(dataObj),
                    contentType: 'application/json',
                    success: function(data) {
                        window.location.reload();
                    },
                    error: function(response) {
                        $(".alert-danger-received").html(response.responseJSON.errorMessage);
                        $(".alert-danger-received").slideDown("slow");
                        $('#submit-received-items').css('display', 'block');
                        $('#submit-received-items-loading').css('display', 'none');
                    }
                });
            });

            $(document).on('click', '.fill_all_btn', function (e) {
                e.preventDefault();
                let expiryDate = $(this).closest('.row').find("input[type=date]").val();
                let lotNumber = $(this).closest('.row').find("input[type=text]").val();
                let rowId = $(this).attr('row-id');

                if (expiryDate !== '') {
                    $('input[type=date][row-id=' + rowId + ']').val(expiryDate)
                }

                if (lotNumber !== '') {
                    $('input[type=text][row-id=' + rowId + ']').val(lotNumber)
                }
            })

            $(document).on('click', '.p-r-attachments', function (e) {
                e.preventDefault();
                let purchaseReceiveId = $(this).attr('id');

                $.ajax({
                    url: '/operations/warehouse/purchasing-received/attachments',
                    data: {
                        pr_id: purchaseReceiveId
                    },
                    success:function (response) {
                        $('#pr-tbody-attachments').empty()
                        $.each(response, function (key, input) {
                            $('#pr-tbody-attachments').append('<tr><td><a href="'+input.PATH+'" target="_blank"> '+input.PATH+'</a></td></tr>')

                        });

                        //$('#pr-tbody-attachments').append();
                        $('#prAttachmentModal').modal('show');
                        $('#pr-attachment-form').off()
                        $('#pr-attachment-form').submit(function (e) {
                            e.preventDefault();
                            var action_url = e.currentTarget.action;
                            //var form = $(this).serializeArray();

                            //form.push({name: "pr_id", value: purchaseReceiveId});
                            var data = new FormData();
                            var form_data = $(this).serializeArray();

                            $.each(form_data, function (key, input) {
                                data.append(input.name, input.value);
                            });
                            var file_data = $('input[name="prAttachmentFiles"]')[0].files;
                            for (var i = 0; i < file_data.length; i++) {
                                data.append("prAttachmentFiles[]", file_data[i]);
                            }
                            data.append('pr_id', purchaseReceiveId);

                            $.ajax({
                                url: action_url,
                                type: 'post',
                                processData: false,
                                contentType: false,
                                data: data,
                                success: function (data) {
                                    $('#prAttachmentModal').modal('hide');
                                    $('#pr-attachment-form').trigger('reset')
                                    toastr.success(data.response);
                                },
                                error: function (response) {
                                    console.log(response.responseJSON.errorMessage)
                                }
                            });
                        })
                    }
                })


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