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

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

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-12">
                <dl class="row mb-0" style="font-size: 16px;">
                    <div class="col-sm-2 text-sm-right"><dt> Material Code :</dt> </div>
                    <div class="col-sm-4 text-sm-left">
                        <dd class="mb-1 firefox firefox">
                           {{$material->material_code}}
                        </dd>
                    </div>
                    <div class="col-sm-2 text-sm-right"><dt> Weight Full :</dt> </div>
                    <div class="col-sm-4 text-sm-left">
                        <dd class="mb-1 firefox firefox">
                           {{$material->weight_full}}
                        </dd>
                    </div>
                </dl>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <dl class="row mb-0" style="font-size: 16px;">
                    <div class="col-sm-2 text-sm-right"><dt> Material Name :</dt> </div>
                    <div class="col-sm-4 text-sm-left">
                        <dd class="mb-1 firefox firefox">
                           {{$material->material_name}}
                        </dd>
                    </div>
                    <div class="col-sm-2 text-sm-right"><dt> Weight Left :</dt> </div>
                    <div class="col-sm-4 text-sm-left">
                        <dd class="mb-1 firefox firefox">
                           {{$material->weight_left}}
                        </dd>
                    </div>
                </dl>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover dataTables-example nowarp" id="materialtable">
                <thead>
                <tr>
                    <th>Serial No</th>
                    <th>Weight Full roll(kg.)</th>
                    <th>Weight Left (kg.)</th>
                    <th>Paper roll</th>
                    <th>Updated By</th>
                    <th>Updated Date</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <th>Serial No</th>
                        <th>Weight Full roll(kg.)</th>
                        <th>Weight Left (kg.)</th>
                        <th>Paper roll</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="{{asset('assets/plugins/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('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();
        $(this).html( '<input class="form-control" style="min-width:150px;" type="text" placeholder="Search '+title+'" />' );

} );
$('#materialtable').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 0, "desc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'material_code',name:'material.material_code',searchable: true,orderable:true},
            {data:'weight_full',name:'material.weight_full',
                    render: function ( data, type, row, meta ) {
                        if(type == "display"){
                            return numberWithCommas(data);
                        }
                        return data;
                    },searchable: true,orderable:true
            },
            {data:'weight_left',name:'material.weight_left',
                    render: function ( data, type, row, meta ) {
                        if(type == "display"){
                            return numberWithCommas(data);
                        }
                        return data;
                    },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:'updatedby',name:'updatedby',searchable: true,orderable:true},
            {data:'updated_at',name:'material.updated_at',searchable: true,orderable:true},

        ],
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{route('materialpaperdetaildatatable')}}",
            type: 'post',
            data: function (d) {
                d.material_id = "{!! $material->id !!}";
            },
        },
        initComplete: function () {

                this.api()
                .columns()
                .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(' ');
    }
}
</script>
@endpush