@extends('operations.layout.mainlayout')

@section('content')
   
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark"
                            style="color: #e35a80!important;">@if(!empty($vendor->NAME)){{$vendor->NAME}} @else Add
                            Vendor @endif</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/operations">Home</a></li>
                            <li class="breadcrumb-item active">Item Details</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

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

                        <!-- /.card -->

                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">

                                <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist"
                                    style="margin-bottom: 15px;">
                                    <li class="nav-item">
                                        <a class="nav-link active"
                                           style="color: #e35a80 !important;@if(empty($vendor->NAME)) color:#a9a9a9 !important; @endif"
                                           id="custom-content-below-home-tab" data-toggle="pill"
                                           href="#custom-content-below-home" role="tab"
                                           aria-controls="custom-content-below-home" aria-selected="true">Vendor
                                            Information</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link @if(empty($vendor->NAME)) disabled @endif"
                                           style="color: #e35a80 !important;@if(empty($vendor->NAME)) color:#a9a9a9 !important; @endif"
                                           id="custom-content-below-messages-tab" data-toggle="pill"
                                           href="#custom-content-below-messages" role="tab"
                                           aria-controls="custom-content-below-messages" aria-selected="false">Vendor
                                            Items</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link @if(empty($vendor->NAME)) disabled @endif"
                                           style="color: #e35a80 !important;@if(empty($vendor->NAME)) color:#a9a9a9 !important; @endif"
                                           id="vendor-contact-list-tab" data-toggle="pill"
                                           href="#vendor-contact-list" role="tab"
                                           aria-controls="vendor-contact-list" aria-selected="false">Contact
                                            Lists</a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="custom-content-below-tabContent">

                                    <div class="tab-pane fade active show" id="custom-content-below-home"
                                         role="tabpanel" aria-labelledby="custom-content-below-home-tab">
                                        <form method="post" action="/operations/warehouse/manageWarehouseVendor"
                                              enctype="multipart/form-data">
                                            <input id="vendor_id" type="hidden" name="vendor_id"
                                                   value="@if(!empty($vendor->ID)){{$vendor->ID}} @endif">

                                            <p style="color:#e35a80;font-weight: 600;">Profile Information</p>

                                            <div class="row" style="margin-top:20px">
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Account Name</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" required value="@if(!empty($vendor->NAME)){{$vendor->NAME}} @endif" placeholder="Account Name" type="text" id="name" name="name" />

                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Legal Name</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" required value="@if(!empty($vendor->LEGAL_NAME)){{$vendor->LEGAL_NAME}} @endif" placeholder="Legal Name" type="text"  id="legal_name" name="legal_name" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Mobile Number</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" required value="@if(!empty($vendor->MOBILE)){{$vendor->MOBILE}} @endif" placeholder="Mobile Number" type="text"  id="mobile" name="mobile" />
                                                    </div>
                                                </div>
                                            </div>

                                            <p style="color:#e35a80;font-weight: 600; margin-top: 20px">Invoicing Information</p>
                                            <div class="row" style="margin-top:20px">
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Vendor Building #</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" value="@if(!empty($vendor->ADDRESS_BUILDING)){{$vendor->ADDRESS_BUILDING}} @endif" type="text" id="address_building" name="address_building" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Vendor Street</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" value="@if(!empty($vendor->ADDRESS_STREET)){{$vendor->ADDRESS_STREET}} @endif" type="text" step="1" id="address_street" name="address_street" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Vendor District</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" value="@if(!empty($vendor->ADDRESS_DISTRICT)){{$vendor->ADDRESS_DISTRICT}} @endif" type="text" id="address_district" name="address_district" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row" style="margin-top:20px">
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Vendor City</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" value="@if(!empty($vendor->ADDRESS_CITY)){{$vendor->ADDRESS_CITY}} @endif" type="text" id="address_city" name="address_city" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Vendor Country</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" value="@if(!empty($vendor->ADDRESS_COUNTRY)){{$vendor->ADDRESS_COUNTRY}} @endif" type="text" id="address_country" name="address_country" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Vendor Postal Code</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control" value="@if(!empty($vendor->ADDRESS_POSTAL_CODE)){{$vendor->ADDRESS_POSTAL_CODE}} @endif" type="text" id="address_postal" name="address_postal" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4" style="margin-top: 20px;">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Lead Time (Days)</span>
                                                        </div>
                                                        <input style="padding:15px" class="form-control"  required value="@if(!empty($vendor->LEAD_TIME)){{$vendor->LEAD_TIME}} @endif" type="text" id="lead_time" name="lead_time" />
                                                    </div>
                                                </div>
                                                <div class="col-md-4" style="margin-top: 20px;">
                                                    <div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px;">
                                                        <input name="status" type="checkbox" class="custom-control-input" @if(!empty($vendor->STATUS) && $vendor->STATUS == 1) checked="checked" @endif id="status">
                                                        <label class="custom-control-label" for="status"> Active</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <br>
                                            <div class="row">
                                                <div class="col" style="text-align: center">
                                                    @if(!empty(session('role')) && (session('role') == 4))
                                                        <input style="width:130px" type="submit" class="btn btn-info"
                                                               value="@if(!empty($vendor->NAME)) Edit Vendor @else Add Vendor @endif"/>
                                                    @endif
                                                </div>
                                            </div>
                                        </form>
                                    </div>

                                    <div class="tab-pane fade" id="custom-content-below-messages" role="tabpanel"
                                         aria-labelledby="custom-content-below-messages-tab">
                                        <div class="row">
                                            <div class="col">
                                                <table id="warehouse-vendor-items"
                                                       class="table table-bordered table-striped">
                                                </table>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col" style="text-align: center">
                                                <button style="width:130px;color:#fff" data-toggle="modal"
                                                        data-target="#modal-item" id="add-test-item"
                                                        class="btn btn-info">Add Item
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="vendor-contact-list" role="tabpanel"
                                         aria-labelledby="vendor-contact-list-tab">
                                        <div class="row">
                                            <div class="col">
                                                <table id="warehouse-vendor-contact-list"
                                                       class="table table-bordered table-striped">
                                                </table>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col" style="text-align: center">
                                                <button style="width:130px;color:#fff" data-toggle="modal"
                                                        data-target="#modal-contact" id="add-vendor-contact"
                                                        class="btn btn-info">Add Contact
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <div class="modal fade" id="modal-item">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Vendor Item</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-item" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Select
                                Item</p>
                            <select class="form-control " id="item-id" name="item_id">
                                <option selected disabled>Select Item</option>
                                @isset($items)
                                    @foreach($items as $item)
                                        <option value="{{$item->ID}}">{{$item->NAME_EN}}</option>
                                    @endforeach
                                @endisset
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Select
                                Unit</p>
                            <select class="form-control" disabled id="unit_id" name="unit_id">
                                <option selected disabled>Select Unit</option>
                                {{--@foreach($units as $unit)
                                    <option value="{{$unit->ID}}">{{$unit->UNIT}}</option>
                                @endforeach--}}
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Lead Time (Days)</p>
                            <input required type="number" step="0.1" class="form-control" placeholder="Lead Time (Days)" name="pivot_lead_time" id="pivot_lead_time">
                        </div>
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Price</p>
                            <input required type="number" step="0.1" class="form-control" placeholder="Price" name="pivot_price" id="pivot_price">
                        </div>
                    </div>

                </div>
                <div class="modal-footer justify-content-between">
                    <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel
                    </button>
                    <button style="width:130px;color:#fff" id="add-new-item-Item" type="button" class="btn btn-info">
                        Save
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-contact">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Contact</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-item" role="alert" style="display: none;"></div>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Name</p>
                            <input required type="text" class="form-control" placeholder="Contact Name" name="contact_name" id="contact_name">
                        </div>
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Email</p>
                            <input required type="text" class="form-control" placeholder="Contact Email" name="contact_email" id="contact_email">
                        </div>
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Mobile</p>
                            <input required type="text" class="form-control" placeholder="Mobile" name="contact_mobile" id="contact_mobile">
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Job Title</p>
                            <input required type="text" class="form-control" placeholder="Job Title" name="job_title" id="job_title">
                        </div>
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Notes</p>
                            <input required type="text" class="form-control" placeholder="Notes" name="contact_notes" id="contact_notes">
                        </div>
                    </div>

                </div>
                <div class="modal-footer justify-content-between">
                    <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel
                    </button>
                    <button style="width:130px;color:#fff" id="add-new-contact" type="button" class="btn btn-info">
                        Save
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection
@section('warehouse_scripts')
    <script>

        $('#item-id').on('change', function (e) {

            let itemId = $(this).val();
            let selectUnits = $('#unit_id');
            $.ajax({
                url: "/operations/warehouse/item/units-with-qty/"+itemId,
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    let listItems = '';
                    $.each(data.data, function(key, value) {
                        listItems += `<option value="${value.ID}">${value.UNIT_NAME} (${value.QTY})</option>`;

                    });
                    selectUnits.find('option').not(':first').remove();
                    selectUnits.append(listItems);
                }
            })
           $('#unit_id').removeAttr('disabled');
        })
        var itemId = $("#vendor_id").val() === '' ? 0 : $("#vendor_id").val();

        $("#warehouse-vendor-items").DataTable({
            "responsive": true,
            "autoWidth": false,
            "searching": true,
            "paging": true,
            "bInfo": false,
            "lengthChange": false,
            "language": {
                "emptyTable": "There are no items added to this package yet"
            },
            serverSide: true,
            "processing": true,
            ajax: '/operations/warehouse/vendors/items/' + itemId,
            "order": [[0, "desc"]],
            columns: [
                {data: "NAME_EN", title: "Item English Name"},
                {data: "NAME_AR", title: "Item Arabic name"},
                {data: "PIVOT_PRICE", title: "Price"},
                {data: "PIVOT_LEAD_TIME", title: "Lead Time (Days)"},
                {data: "UNIT_NAME", title: "Unit"},
                {
                    title: 'Action', "mRender": function (data, type, row) {
                    return '<a style="color:white !important;width: 130px;" class="remove-vendor-item form-control btn btn-danger" item-id="' + row.PIVOT_ID + '">Remove</a>';
                }
                }
            ],
            "rowCallback": function( row, data ) {
                $('td:eq(2)', row).html('<a href="#" class=" xedit-pivot-price" data-pk="'+data["PIVOT_ID"]+'" data-title="Enter Price">'+ (data["PIVOT_PRICE"] ? data["PIVOT_PRICE"] : '') +'</a>');
                $('td:eq(3)', row).html('<a href="#" class=" xedit-pivot-lead-time" data-pk="'+data["PIVOT_ID"]+'" data-title="Enter Lead Time">'+ (data["PIVOT_LEAD_TIME"] ? data["PIVOT_LEAD_TIME"] : '') +'</a>');
            },
            "drawCallback": function( settings ) {
                $('.xedit-pivot-price').editable({
                    type: 'text',
                    url: "/operations/warehouse/item/editVendorPivotPrice",
                });

                $('.xedit-pivot-lead-time').editable({
                    type: 'text',
                    url: "/operations/warehouse/item/editVendorPivotLeadTime",
                });
            }
        });

        $('#add-new-item-Item').click(function(){
            $(".alert-danger-person").slideUp( "slow", function() {});
            $('#add-new-item-Item').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            var vendor_id = $("#item-id").val();
            var package_id = $("#vendor_id").val();
            var pivot_lead_time = $("#pivot_lead_time").val();
            var pivot_price = $("#pivot_price").val();
            var unit_id = $("#unit_id").val();

            var data = {
                vendor_id: vendor_id,
                pivot_lead_time: pivot_lead_time,
                pivot_price: pivot_price,
                unit_id: unit_id,
            }
            $.ajax({
                type: "POST",
                url: "/operations/warehouse/vendors/items/"+package_id,
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                $('#add-new-item-Item').prop("disabled",false);
                $('#warehouse-vendor-items').DataTable().ajax.reload();
                $(".alert-danger-item").html("");
                $(".alert-danger-item").slideUp( "slow", function() {});
                $('#modal-item').modal('hide');
                $('#add-new-item-Item').html('Save').attr('disabled', false);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $('#add-new-item-Item').prop("disabled",false);
                $(".alert-danger-item").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-item").slideDown( "slow", function() {});
                $('#add-new-item-Item').html('Save').attr('disabled', false);
            })
            return false;
        });

        $('#add-new-contact').click(function(){
            $(".alert-danger-person").slideUp( "slow", function() {});
            $('#add-new-contact').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            var vendor_id = $("#vendor_id").val();
            var contact_name = $("#contact_name").val();
            var contact_mobile = $("#contact_mobile").val();
            var contact_email = $("#contact_email").val();
            var job_title = $("#job_title").val();
            var contact_notes = $("#contact_notes").val();
            var data = {
                vendor_id: vendor_id,
                contact_name: contact_name,
                contact_mobile: contact_mobile,
                contact_email: contact_email,
                job_title: job_title,
                contact_notes: contact_notes,
            }
            $.ajax({
                type: "POST",
                url: "/operations/warehouse/vendors/contacts/"+vendor_id,
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                $('#add-new-contact').prop("disabled",false);
                $('#warehouse-vendor-contact-list').DataTable().ajax.reload();
                $(".alert-danger-item").html("");
                $(".alert-danger-item").slideUp( "slow", function() {});
                $('#modal-contact').modal('hide');
                $('#add-new-contact').html('Save').attr('disabled', false);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $('#add-new-contact').prop("disabled",false);
                $(".alert-danger-item").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-item").slideDown( "slow", function() {});
                $('#add-new-contact').html('Save').attr('disabled', false);
            })
            return false;
        });

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

            $.ajax({
                type: "DELETE",
                url: "/operations/warehouse/vendors/items/"+vendor_id,
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                $('#warehouse-vendor-items').DataTable().ajax.reload();
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert("Error while deleting lab category item");
            });
            return false;
        });

        $("body").on("click", ".remove-contact",function(){
            var contact_id = $(this).attr("contact-id");

            $.ajax({
                type: "DELETE",
                url: "/operations/warehouse/vendors/contacts/"+contact_id,
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                $('#warehouse-vendor-contact-list').DataTable().ajax.reload();
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert("Error while deleting lab category item");
            });
            return false;
        });

        $("#warehouse-vendor-contact-list").DataTable({
            "responsive": true,
            "autoWidth": false,
            "searching": true,
            "paging": true,
            "bInfo": false,
            "lengthChange": false,
            "language": {
                "emptyTable": "There are no items added to this package yet"
            },
            serverSide: true,
            "processing": true,
            ajax: '/operations/warehouse/vendors/contacts/' + itemId,
            "order": [[0, "desc"]],
            columns: [
                {data: "NAME", title: "Name"},
                {data: "EMAIL", title: "Email"},
                {data: "MOBILE", title: "Mobile"},
                {data: "JOB_TITLE", title: "Job Title"},
                {data: "NOTES", title: "Notes"},
                {
                    title: 'Action', "mRender": function (data, type, row) {
                        return '<a style="color:white !important;width: 130px;" class="remove-contact form-control btn btn-danger" contact-id="' + row.ID + '">Remove</a>';
                    }
                }
            ],
            "rowCallback": function( row, data ) {
                $('td:eq(0)', row).html('<a href="#" class=" xedit-name" data-pk="'+data["ID"]+'" data-title="Enter Name">'+ (data["NAME"] ? data["NAME"] : '') +'</a>');
                $('td:eq(1)', row).html('<a href="#" class=" xedit-email" data-pk="'+data["ID"]+'" data-title="Enter Email">'+ (data["EMAIL"] ? data["EMAIL"] : '') +'</a>');
                $('td:eq(2)', row).html('<a href="#" class=" xedit-mobile" data-pk="'+data["ID"]+'" data-title="Enter Mobile">'+ (data["MOBILE"] ? data["MOBILE"] : '') +'</a>');
                $('td:eq(3)', row).html('<a href="#" class=" xedit-job-title" data-pk="'+data["ID"]+'" data-title="Enter Job Title">'+ (data["JOB_TITLE"] ? data["JOB_TITLE"] : '') +'</a>');
                $('td:eq(4)', row).html('<a href="#" class=" xedit-notes" data-pk="'+data["ID"]+'" data-title="Enter Notes">'+ (data["NOTES"] ? data["NOTES"] : '') +'</a>');
            },
            "drawCallback": function( settings ) {
                $('.xedit-name').editable({
                    type: 'text',
                    url: "/operations/warehouse/vendors/contacts/editVendorContactName",
                });

                $('.xedit-mobile').editable({
                    type: 'text',
                    url: "/operations/warehouse/vendors/contacts/editVendorContactMobile",
                });

                $('.xedit-email').editable({
                    type: 'text',
                    url: "/operations/warehouse/vendors/contacts/editVendorContactEmail",
                });

                $('.xedit-job-title').editable({
                    type: 'text',
                    url: "/operations/warehouse/vendors/contacts/editVendorContactJobTitle",
                });

                $('.xedit-notes').editable({
                    type: 'text',
                    url: "/operations/warehouse/vendors/contacts/editVendorContactNotes",
                });
            }
        });
    </script>
@endsection