<div class="col-xs-12 text-center">
    <div class="col-sm-12 form-group <?php echo e(Auth::user()['userType']=='serviceProvider'?'hidden':''); ?>">
        <select id="addJobServiceProvider" data-placeholder="Select a contractor"
                class="form-control">
            <option></option>
            <?php foreach($serviceProviders as $serviceProvider): ?>
                <option value="<?php echo e($serviceProvider['id']); ?>" <?php echo e((Auth::user()['userType']=='serviceProvider' && Auth::user()['userTypeId']==$serviceProvider['id']) ? 'selected' : ''); ?>><?php echo e($serviceProvider['shortName']); ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div class="col-sm-3 form-group">
        <select id="addPurchaseJob" name="jobId" data-placeholder="Select a job" class="form-control">
            <option></option>
            <?php foreach($jobs as $job): ?>
                <option value="<?php echo e($job['id']); ?>"><?php echo e($job['id']); ?> : <?php echo e($job['client']); ?> : <?php echo e($job['building']); ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div class="col-sm-3 form-group">
        <select id="addPurchaseSupplier" name="supplierId" data-placeholder="Select a supplier"
                class="form-control">
            <option></option>
            <?php foreach($suppliers as $supplier): ?>
                <option value="<?php echo e($supplier['id']); ?>"><?php echo e($supplier['name']); ?>:<?php echo e($supplier['branch']); ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div class="col-sm-3 form-group">
        <select id="addPurchaseUserIdentity" name="userIdentity" data-placeholder="Select a user identity"
                class="form-control">
            <option></option>
            <?php foreach($users as $user): ?>
                <option value="<?php echo e($user['identity']); ?>"><?php echo e($user['identity']); ?> : <?php echo e($user['name']); ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div class="col-sm-3 form-group">
        <select id="addPurchaseStatus" name="purchaseStatus" data-placeholder="Select a status"
                class="form-control">
            <option></option>
            <?php foreach($purchaseStatusOptions as $purchaseStatus): ?>
                <option value="<?php echo e($purchaseStatus['value']); ?>"><?php echo e($purchaseStatus['value']); ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <hr/>

    <div class="col-xs-12">
        <div class="col-xs-4">
            <div class="row form-group">
                <label class="col-xs-4 control-label">Material Qty:</label>

                <div class="col-xs-8">
                    <input type="text" id="addPurchaseMaterialQuantity"
                           class="form-control"
                           value="0"/>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Name:</label>

                <div class="col-xs-8">
                    <input type="text" id="addPurchaseMaterialName" class="form-control"/>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Buy price:</label>

                <div class="col-xs-8">
                    <input type="text" id="addPurchaseMaterialCost" class="form-control"
                           value="0"/>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Sell price:</label>

                <div class="col-xs-8">
                    <input type="text" id="addPurchaseMaterialPrice" class="form-control"
                           value="0"/>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Margin &percnt;:</label>

                <div class="col-xs-8">
                    <input type="text" id="addPurchaseMaterialMargin" class="form-control"
                           value="0"/>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Serial:</label>

                <div class="col-xs-8">
                    <input type="text" id="addPurchaseMaterialSerial" class="form-control"/>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Model:</label>

                <div class="col-xs-8">
                    <input type="text" id="addPurchaseMaterialModel" class="form-control"/>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Description:</label>

                <div class="col-xs-8">
                    <textarea id="addPurchaseMaterialDescription" class="form-control"></textarea>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Website:</label>

                <div class="col-xs-8">
                    <textarea id="addPurchaseMaterialWebsite" class="form-control"></textarea>
                </div>
            </div>
            <div class="row form-group">
                <label class="col-xs-4 control-label">Line Total:</label>

                <div class="col-xs-8">
                    <input type="text" id="addMaterialPriceTotal" class="form-control"
                           value="0"/>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-4"></div>
                <div class="col-xs-8">
                    <a class="btn btn-primary form-control" id="addPurchaseMaterialButton"><i
                                class="fa fa-plus"></i>&nbsp;ADD</a>
                </div>
            </div>
        </div>
        <div id="purchaseMaterialList" class="col-xs-8">
        </div>
        <div class="col-xs-4"></div>
        <div class="row form-group col-xs-8">
            <label class="col-xs-4 control-label text-right">Sub total:</label>

            <div class="col-xs-8">
                <input type="text" id="addMaterialPriceSubTotal" class="form-control"
                       value="0"/>
            </div>
        </div>
        <div class="col-xs-4"></div>
        <div class="row form-group col-xs-8">
            <label class="col-xs-4 control-label text-right">Total:</label>

            <div class="col-xs-8">
                <input type="text" id="addPurchaseTotalNet" class="form-control"
                       value="0"/>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-12">
    <input type="hidden" id="addPurchaseId"/>
    <a class="btn btn-primary col-xs-12" id="addPurchaseButton"><i class="fa fa-plus"></i>&nbsp;Create
        Purchase Order</a>
</div>

<script type="text/javascript">
    $("#addPurchaseSupplier").selectize();
    $("#addPurchaseJob").selectize();
    $("#addPurchaseStatus").selectize();
    $("#addPurchaseUserIdentity").selectize();
    $("#addJobServiceProvider").selectize();

    $('#addMaterialPriceTotal').numeric();
    $('#addPurchaseMaterialQuantity').numeric();
    $('#addPurchaseMaterialCost').numeric();
    $('#addPurchaseMaterialPrice').numeric();
    $('#addPurchaseMaterialMargin').numeric();

    function getPurchaseTypeAheadMaterialsData() {
        $.post('<?php echo e(URL::action("PurchaseController@getTypeAheadMaterials")); ?>', {
            _token: '<?php echo e(csrf_token()); ?>'
        }).done(function (result) {
            $('#addPurchaseMaterialName').typeahead({
                source: function (query, process) {
                    objects = [];
                    map = {};
                    var data = result;
                    $.each(data, function (i, object) {
                        map[object.label] = object;
                        objects.push(object.label);
                    });
                    process(objects);
                },
                updater: function (item) {
                    setTimeout(function () {
                        $('#addPurchaseMaterialName').val(map[item].name);
                        $('#addPurchaseMaterialCost').val(map[item].cost);
                        $('#addPurchaseMaterialPrice').val(map[item].price);
                        $('#addPurchaseMaterialMargin').val(map[item].margin);
                        $('#addPurchaseMaterialSerial').val(map[item].serial);
                        $('#addPurchaseMaterialModel').val(map[item].model);
                        $('#addPurchaseMaterialDescription').val(map[item].description);
                        $('#addPurchaseMaterialWebsite').val(map[item].website);

                        var total = $('#addPurchaseMaterialQuantity').val() * $('#addPurchaseMaterialCost').val();
                        $('#addMaterialPriceTotal').val(total.toFixed(2));
                    }, 382);
                    return item;
                }
            });
        });
    }
    getPurchaseTypeAheadMaterialsData();

    $('#addPurchaseMaterialCost').change(function () {
        var total = $('#addPurchaseMaterialQuantity').val() * $('#addPurchaseMaterialCost').val();
        $('#addMaterialPriceTotal').val(total.toFixed(2));
    });
    $('#addPurchaseMaterialQuantity').change(function () {
        var total = $('#addPurchaseMaterialQuantity').val() * $('#addPurchaseMaterialCost').val();
        $('#addMaterialPriceTotal').val(total.toFixed(2));
    });

    $('#addPurchaseMaterialButton').click(function () {
        var ahref = $(this);
        ahref.text('adding...');
        ahref.bind('click', false);
        if ($('#addPurchaseSupplier').val()) {
            loadingOverlay();
            $.post('<?php echo e(URL::action("PurchaseController@addMaterial")); ?>', {
                name: $('#addPurchaseMaterialName').val(),
                quantity: $('#addPurchaseMaterialQuantity').val(),
                cost: $('#addPurchaseMaterialCost').val(),
                price: $('#addPurchaseMaterialPrice').val(),
                margin: $('#addPurchaseMaterialMargin').val(),
                description: $('#addPurchaseMaterialDescription').val(),
                serial: $('#addPurchaseMaterialSerial').val(),
                website: $('#addPurchaseMaterialWebsite').val(),
                supplierId: $('#addPurchaseSupplier').val(),
                jobId: $('#addPurchaseJob').val(),
                userIdentity: $('#addPurchaseUserIdentity').val(),
                purchaseOrderId: $('#addPurchaseId').val(),
                serviceProviderId: $('#addJobServiceProvider').val(),
                _token: '<?php echo e(csrf_token()); ?>'
            }).done(function (data) {
                loadingRemove();
                ahref.text('ADD');
                ahref.unbind('click', false);
                $('#addPurchaseSupplier')[0].selectize.disable();
                $('#addPurchaseId').val(data['purchaseOrderId']);
                calculatePurchaseMaterialSubTotal('<?php echo e(URL::action("PurchaseController@calculatePurchaseMaterialSubTotal")); ?>', $('#addPurchaseId').val(), '<?php echo e(csrf_token()); ?>');
                generatePurchaseMaterial('<?php echo e(URL::action("PurchaseController@generatePurchaseMaterial")); ?>', $('#addPurchaseId').val(), '<?php echo e(csrf_token()); ?>');
                loadingRemove();
                new PNotify({
                    title: 'Success',
                    text: 'Add successfully!',
                    type: 'success',
                    icon: 'fa fa-check'
                });
            }).fail(function (data) {
                loadingRemove();
                ahref.text('ADD');
                ahref.unbind('click', false);
                loadingRemove();
                new PNotify({
                    title: 'Fail',
                    text: 'Add failed, please re-check purchase inputs!',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            });
        } else {
            new PNotify({
                title: 'Fail',
                text: 'Add failed, please select the supplier!',
                type: 'error',
                icon: 'fa fa-times'
            });
        }
    });

    $('#addPurchaseButton').click(function () {
        if ($('#addPurchaseSupplier').val()) {
            var ahref = $(this);
            ahref.text('adding...');
            ahref.bind('click', false);
            loadingOverlay();
            $.post('<?php echo e(URL::action("PurchaseController@uiAdd")); ?>', {
                jobId: $('#addPurchaseJob').val(),
                supplierId: $('#addPurchaseSupplier').val(),
                purchaseId: $('#addPurchaseId').val(),
                invoiceStatus: $('#addPurchaseStatus').val(),
                userIdentity: $('#addPurchaseUserIdentity').val(),
                totalNet: $('#addMaterialPriceSubTotal').val(),
                serviceProviderId: $('#addJobServiceProvider').val(),
                _token: '<?php echo e(csrf_token()); ?>'
            }).done(function (data) {
                ahref.text('Create Purchase Order');
                ahref.unbind('click', false);
                loadingRemove();
                new PNotify({
                    title: 'Success',
                    text: 'Add successfully!',
                    type: 'success',
                    icon: 'fa fa-check'
                });
                generateFormAddPurchase('<?php echo e(URL::action("PurchaseController@generateFormAddPurchase")); ?>', '<?php echo e(csrf_token()); ?>');

                refreshPurchases();
            }).fail(function (data) {
                ahref.text('Create Purchase Order');
                ahref.unbind('click', false);
                loadingRemove();
                new PNotify({
                    title: 'Fail',
                    text: 'Add failed, please re-check purchase inputs!',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            });
        } else {
            new PNotify({
                title: 'Fail',
                text: 'Add failed, please re-check purchase inputs!',
                type: 'error',
                icon: 'fa fa-times'
            });
        }
    });

</script>