@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;">Warehouse Vendors List</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="mx-auto col-md-10">

                    <!-- /.card -->

                    <div class="card">

                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="warehouse-vendors-datatable" class="table table-bordered table-striped"></table>
                            <div class="row">
                                <div class="col" style="text-align: center">
                                    @permission('warehouse_settings_manage_vendors')
                                    <a class="btn btn-info" href="/operations/warehouse/vendor/0">Add New Vendor</a>
                                    @endpermission
                                </div>
                            </div>

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


@endsection

@section('warehouse_scripts')
<script>
    $("#warehouse-vendors-datatable").DataTable({
        dom: 'Bfrtip',
        "buttons" : [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "responsive": true,
        "autoWidth": false,
        "order": [[ 0, "desc" ]],
        ajax: {url: '/operations/warehouse/vendors/datatable'},
        columns: [
            {
                title: 'ID', "mRender": function (data, type, row) {
                return '<a href="/operations/warehouse/vendor/' + row.ID + '" >' + row.ID + '</a>';
            }
            },
            {data: 'NAME', title: 'Account Name'},
            {data: 'LEGAL_NAME', title: 'Name'},
            {data: 'MOBILE', title: 'Mobile'},
            {data: 'LEAD_TIME', title: 'Lead Times (Days)'},
            {
                title: 'Status', "mRender": function (data, type, row) {
                    let checked = (row.STATUS === '1') ? 'checked' : ''

                    return '<div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px; ">' +
                        '<input name="status" type="checkbox" class="custom-control-input vendor-status"  '+checked+' id="'+row.ID+'"> ' +
                        '<label class="custom-control-label" for="'+row.ID+'"></label>' +
                        '</div>'
                }
            },
        ]
    });

    $(document).on('change', '.vendor-status', function (e) {
        let vendor_id = $(this).attr('id');
        var data = {
            vendor_id: vendor_id,
        }
        if($(this).is(":checked")) {
            data['status'] = 1;
            $.ajax({
                url: "/operations/warehouse/vendors/status/"+vendor_id,
                data: data,
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert("Error while changing vendor");
            });

        } else  {
            data['status'] = 0;
            $.ajax({
                url: "/operations/warehouse/vendors/status/"+vendor_id,
                data: data,
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert("Error while changing vendor");
            });
        }
    })


</script>
    @endsection