@extends('layouts.app')
@section('title')
Stock
@endsection
@push('styles')
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/custom.css">
@endpush

@section('content')
<!-- BEGIN page-header -->
<h1 class="page-header">Stock</h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        <a href="#addmaterialmodal" class="btn btn-primary mb-2" data-bs-toggle="modal">Add Material</a>
        <div class="table-responsive">
            <table id="stock_table" class="table table-striped table-bordered align-middle nowrap w-100">
                <thead>
                    <tr>
                        <th></th>
                        <th>Material Code</th>
                        <th>Name</th>
                        <th>Current Stock</th>
                        <th>Minimum</th>
                        <th>Status</th>
                        <th>Updated By</th>
                        <th>Updated Date</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Material Code</th>
                        <th>Name</th>
                        <th>Current Stock</th>
                        <th>Minimum</th>
                        <th>Status</th>
                        <th>Updated By</th>
                        <th>Updated Date</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- END panel -->

@include('modals.materialadd')
@include('modals.materialedit')
@endsection

@push('scripts')
<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>

<script>
$('#stock_table tfoot th').each( function (index,element) {
    var title = $(this).text();

    if(index ==  0 || index ==  5){}
    else{
        $(this).html( '<input class="form-control" style="min-width:150px;" type="text" placeholder="Search '+title+'" />' );
    }
} );
$('#stock_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 1, "desc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'id',name:'material.id',className:'text-center',
                render: function ( data, type, row, meta ) {

                    var html = "";
                    @can('edit-material')
                        html += `<a href="javascript:void(0);" onclick="editmaterial(`+data+`)" class="btn btn-info btn-sm "><i class="fa fa-edit"></i></a>`;
                    @endcan
                    @can('delete-material')
                        if(row.delete_trigger == 0){
                            html += `<a class="btn btn-danger btn-sm " onclick="deletematerial(`+data+`)"><i class="fa fa-times"></i></a>`;
                        }
                    @endcan

                    if(row.advance_material != 0){
                        html += `<a href="materialdetail/`+data+`/`+row.advance_material+`" class="btn btn-info btn-sm "><i class="fa fa-list"></i></a>`;
                    }

                    return html;

                },searchable: false,orderable:false
            },
            {data:'material_code',name:'material.material_code',searchable: true,orderable:true},
            {data:'material_name',name:'material.material_name',searchable: true,orderable:true},
            {data:'current_stock',name:'material.current_stock',
                render: function ( data, type, row, meta ) {
                    if(type == "display"){
                        return numberWithCommas(data);
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:'minimum',name:'material.minimum',
                render: function ( data, type, row, meta ) {
                    if(type == "display"){
                        return numberWithCommas(data);
                    }
                    return data;
                },searchable: true,orderable:true
            },
            {data:'status',name:'material.status',
                render: function(data,type,row,meta){
                    var html = '';
                    if(row.status == 1){
                        html = `<span class="badge bg-green">{{trans('custom.stock.status.1')}}</span>`
                    }
                    else if(row.status == 2){
                        html = `<span class="badge bg-warning">{{trans('custom.stock.status.2')}}</span>`
                    }
                    else if(row.status == 3){
                        html = `<span class="badge bg-danger">{{trans('custom.stock.status.3')}}</span>`
                    }
                    return html;
                },searchable: true,orderable:true
            },
            {data:'updateusername',name:'users.username',searchable: true,orderable:true},
            {data:'updated_at',name:'material.updated_at',searchable: true,orderable:true},

        ],
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{route('stockdatatable')}}",
            type: 'post',
            data: function (d) {

            },
        },
        initComplete: function () {

                this.api().columns([5]).every( function ()
                {
                    var column = this;
                    var select = $('<select class="form-select" style="min-width:150px;"><option value="">Search '+column.header().textContent+'</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());

                            column.search( val ? val: '', true, false ).draw();

                        });

                        select.append( '<option value="1">Normal</option><option value="2">Lower than minimum</option><option value="3">Unchange more than 30 days</option>' );

                });

                this.api()
                .columns([1,2,3,4,6,7])
                .every(function () {
                    var that = this;

                    $('input', this.footer()).on('keypress', function (e) {
                        if (that.search() !== this.value && e.key === "Enter") {
                            that.search(this.value).draw();
                        }
                    });
                });

        },
});



function editmaterial(id){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: "{{route('editmaterial')}}",
        type: "POST",
        data: {'id':id},
        dataType: 'json',
        success: function(response)
        {
        var html = '';
        if(response.data.delete_trigger == 0){
            html += '<div class="form-group">';
            html += '<label>Material Code <span style="color:red;">*</span></label>';
            html += '<input type="text"  name="editmaterialcode" id="editmaterialcode" value="'+response.data.material_code+'" class="form-control">';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<label>Material Name <span style="color:red;">*</span></label>';
            html += '<input type="text"  name="editmaterialname" id="editmaterialname" value="'+response.data.material_name+'" class="form-control">';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<label>Owner<span style="color:red;">*</span></label>';
            html += '<input type="text"  name="editowner" id="editowner" value="'+response.data.owner+'" class="form-control">';
            html += '</div>';
        }
        $("#notrans").html(html);
        $("#editid").val(response.data.id);
        $("#editminimum").val(response.data.minimum);
        $("#editowner").val(response.data.owner);
        $("#editmaterialmodal").modal("show");

        },
        error: function(response){
                    Swal.fire(
                    'Error!!',
                    'Contract Admin',
                    'error'
                    )
        }
    });
}

function advanceadd(){
    if($('#advancematerial').prop('checked')){
        var html = '';
        html += '<div class="form-group">';
        html += '<label>Select Advance Material <span style="color:red;">*</span></label> ';
        html += '<select name="advanceselect" id="advanceselect" class="form-control">';
        html += '<option value="0">Normal</option>';
        html += '<option value="1">Paper Roll</option>'
        html += '</select>';
        html += '</div>';
        $('#advanceselectdiv').html(html);
    }else{
        $('#advanceselectdiv').html(' ');
    }
}

function deletematerial(id){

    Swal.fire({
        title: 'Delete Material?',
        text: 'Are you sure? Can not redo this action!',
        icon: 'warning',
        showCancelButton: true,
        reverseButtons: true,
    }).then((willDelete) => {
        if (willDelete.isConfirmed) {
            $.ajax({
                type: "post",
                url: "{{route('deletematerial')}}",
                data: {id:id},
                dataType: "json",
                success: function (response) {
                    if(response.status == 'success'){
                        $('#roles_table').DataTable().ajax.reload(null,false);
                        Swal.fire({
                            title: 'Delete Material',
                            text: 'Success',
                            icon: 'success',
                        });

                        $('#stock_table').DataTable().ajax.reload(null,false);
                    }else{
                        Swal.fire({
                            title: 'Fail',
                            text: 'Can not delete Material.',
                            icon: 'error',
                        });
                    }
                }
            });
        }
    });
}
</script>
@endpush