@extends('operations.layout.mainlayout')

@section('content')
    <div class="content-wrapper">
        <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;">Warehouse Units List</h1>
                    </div>
                    <div class="col-sm-6">

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

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

                        <div class="card">

                            <div class="card-body">
                                <table id="warehouse-units-datatable"
                                       class="table table-bordered table-striped"></table>
                                <div class="row">
                                    <div class="col" style="text-align: center">
                                        @permission('warehouse_settings_manage_units')
                                            <button class="btn btn-info" data-target="#modal-unit" data-toggle="modal"
                                                    id="add_new_unit">Add New Unit
                                            </button>
                                        @endpermission
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="modal-unit">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Unit</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-8">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Unit Name</p>
                            <input required type="text" class="form-control" placeholder="Unit Name"
                                   name="unit_name" id="unit_name">
                        </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-unit" type="button" class="btn btn-info">
                        Save
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@section('warehouse_scripts')
    <script>
        $("#warehouse-units-datatable").DataTable({
            dom: 'Bfrtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "responsive": true,
            "autoWidth": false,
            "order": [[0, "desc"]],
            ajax: {url: '/operations/warehouse/units/datatable'},
            columns: [
                {data: 'ID', title: 'ID'},
                {data: 'UNIT', title: 'Unit'},
                /*{
                    title: 'Action', sortable: false, width: "5%", "mRender": function (data, type, row) {
                        return '<i style="cursor: pointer;" item-id="' + row.ID + '" class="remove-item-cart fa fa-times"></i>'
                        //return '<a style="color:white !important;width: 40px; border-radius: 50%; padding: 10%;" class="remove-item-cart form-control btn btn-danger" item-id="' + row.ID + '"></a>';
                    }
                }*/
            ],
            "rowCallback": function (row, data) {
                $('td:eq(1)', row).html('<a href="#" class="xedit-unit" data-pk="' + data["ID"] + '" data-title="Edit Unit">' + (data["UNIT"] ? data["UNIT"] : '') + '</a>');
            },
            "drawCallback": function (settings) {
                $('.xedit-unit').editable({
                    type: 'text',
                    url: "/operations/warehouse/item/editUnitName",
                });
            }
        });

        $('#add-new-unit').click(function (e) {
            e.stopPropagation()
            let unitName = $('#unit_name').val();
            if (unitName === '') {
                alert('Unit name is required');
                return false;
            }
            var data = {
                unitName: unitName
            }
            $.ajax({
                type: "POST",
                url: "/operations/warehouse/units",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $("#warehouse-units-datatable").DataTable().ajax.reload()
                    $('#modal-unit').modal('hide');
                }
            });
        })
    </script>
@endsection