@extends('admin::curd.index')
@section('heading')
    <i class="fa fa-file-text-o"></i> {!! trans('capa::capa.names') !!}
    <br>
    <small>Corrective and preventive actions</small>
@stop

@section('title')
    {!! trans('Open CAPA Management') !!}
@stop

@section('breadcrumb')
    <ol class="breadcrumb">
        <li><a href="{!! trans_url('admin') !!}"><i class="fa fa-dashboard"></i> {!! trans('cms.home') !!} </a></li>
        <li class="active">{!! trans('Open CAPA Management') !!}</li>
    </ol>
@stop

@section('entry')
    <div class="box box-warning" id='capa-capa-entry'>
    </div>
@stop

@section('tools')
@stop

@section('content')
<div class="box-body text-sm">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs primary">
            <li class="inactive"><a href="{!!trans_url('admin/capas/capa')!!}" class="active">All CAPA</a></li>
            <li class="active"><a href="{{ route('capa.pending') }}">Open CAPA</a></li>
            <li class="inactive"><a href="{{ route('capa.updated') }}">Updated CAPA</a></li>
            <li class="inactive"><a href="{{ route('capa.closed') }}">Closed CAPA</a></li>
        </ul>
    </div>
</div>
    <div class="table-responsive text-sm">
      <table id="capa-capa-list" class="table table-striped data-table">
        <thead class="list_head">
            <th>
                <div class="reset" style="display:none;"></div>
            </th>
            <th style="width: 10%">CAPA No.</th>
            <th style="width: 8%">CAPA Date</th>
            <th style="width: 12%">Asset ID</th>
            <th style="width: 6%">Month</th>
            <th >Work Department</th>
            {{-- <th >Division</th> --}}
            <th style="width: 8%">Status</th> 
            <th>Count</th> 
            <th style="width: 12%">Asset Name</th>
            <th >Root Cause Analysis</th>
            <th >Actions</th>
        </thead>
        <thead class="search_bar">
            <th>
                <div class="reset" style="display:none;"><a id="resetnow" class="headpicture" style="cursor:pointer;"><i
                            class="fa fa-refresh" style="color:#000;"></i></a></div>
            </th>
            <th>{!! Form::text('search[ref]')->id('ser_code')->placeholder('Search')->raw() !!}</th>               
            <th>{!! Form::date('search[created_at]')->addClass('datepick')->placeholder('Search')->id('ser_capa_date')->raw() !!}</th>
            <th>{!! Form::select('search[asset_id]')->addClass('js-selectt2')->options([])->id('ser_asset_id')->raw() !!}</th>                    
            <th>{!! Form::text('search[capa_month]')->placeholder('Search')->id('ser_capa_month')->raw() !!}</th>
            {{-- <th>{!! Form::select('search[category_id]')->options([''=>'All']+Department::Departments())->id('dep_ser')->raw()!!}</th> --}}
            {{-- <th>{!! Form::select('search[sub_category_id]')->id('qt_ser')->raw()!!}</th> --}}
            <th>{!! Form::select('search[work_department_id]')->options(['' => 'All'] + WorkDepartment::work_departments())->id('workdepartmentid')->raw() !!}</th>
            <th>{!! Form::select('search[status]')->options([''=>'All','Pending' => 'Pending','Updated' => 'Updated','Closed'=> 'Closed'])->id('search_sub_category_id')->raw()!!}</th>
            <th>{!! Form::text('search[count]')->placeholder('Search')->id('ser_count')->raw() !!}</th>
            <th>{!! Form::text('search[asset_name]')->placeholder('Search')->id('ser_asset_name')->raw() !!}</th>
            <th></th>
            <th></th>
        </thead>
        </table>
    </div>
    </div>
@stop

@section('script')
{{-- @include('op_feedback::admin.op_feedback.filter_sub_category') --}}

    <script type="text/javascript">
        var oTable;
        $(document).ready(function() {
            $(".datepick").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true
        }).prop('type', 'text');
            // app.load('#capa-capa-entry', '{!! trans_url('admin/insta/insta/0') !!}');
            oTable = $('#capa-capa-list').dataTable({
                "bProcessing": true,
                "sDom": 'R<>rt<ilp><"clear">',
                "bServerSide": true,
                "sAjaxSource": '{!! trans_url('/admin/capas/pending') !!}',
                "fnServerData": function(sSource, aoData, fnCallback) {

                    $('#capa-capa-list .search_bar input, #capa-capa-list .search_bar select').each(
                        function() {
                            aoData.push({
                                'name': $(this).attr('name'),
                                'value': $(this).val()
                            });
                        }
                    );
                    app.dataTable(aoData);
                    $.ajax({
                        'dataType': 'json',
                        'data': aoData,
                        'type': 'GET',
                        'url': sSource,
                        'success': fnCallback                        
                    });
                },               
                "columns": [
                    {
                        data: 'dresets'
                    },
                    {
                        data :'ref'
                    },
                    {
                        data: 'capa_date' ,class: 'right-align'
                    },
                    {
                        data :'asset_id'
                    },
                    {
                        data: 'capa_month',class: 'right-align'
                    },
                    
                    {
                        data: 'work_department_id'
                    },
                    // {
                    //     // data: 'sub_category_id'
                    // }, 
                    {
                        data: 'status'
                    },                   
                    {
                        data: 'count',class: 'right-align'
                    },
                    
                    {
                        data: 'asset_name' 
                    }, 
                    {
                        data: 'root_cause_analysis'
                    },
                    {
                        data: 'capa_action' 
                    }, 
                    
                ],
                "pageLength": 25,
                "order": [
                    [0, "desc"]
                ],
            });
            $("#resetnow").click(function() {
                $('.search_bar input, .search_bar select').each(function() {
                    $(this).val('');
                })      
                oTable.api().draw();
                $(".reset").css({
                    'display': 'none'
                });
            });
            $('.search_bar').change(function() {
                $(".reset").css({
                    'display': 'inline'
                });
                return;
            });
            $('#capa-capa-list tbody').on('click', 'tr', function() {

                oTable.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');

                var d = $('#capa-capa-list').DataTable().row(this).data();

                $('#capa-capa-entry').load('{!! trans_url('admin/capas/capa') !!}' + '/' + d.id);
            });

            $("#capa-capa-list .search_bar input, #capa-capa-list .search_bar select").on('keyup select', function(
                e) {
                e.preventDefault();
                if (e.keyCode == 13 || e.keyCode == 9) {
                    oTable.api().draw();
                }
            });
            $("#capa-capa-list .search_bar input").on("keypress", function(e) {
            if (e.which === 32 && !this.value.length)
                e.preventDefault();
            });

            $("#capa-capa-list .search_bar select, .datepick").on('change', function(e) {
                e.preventDefault();
                oTable.api().draw();
            });

            $(".js-selectt2").select2({
                ajax: {
                    url: "{{ trans_url('admin/assets/select2/asset') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                    return {
                    q: params.term, // search term
                    page: params.page
                };
                },
                processResults: function (data, params) {

                params.page = params.page || 1;
                return {
                    results: data.items,
                    pagination: {
                    more: (params.page * 30) < data.total_count
                    }
                };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
            initSelection : function (element, callback) {
                callback({id:"{{@$capa->asset_id}}",rfc:"{{@$capa->asset->rfc.'&nbsp;&nbsp;&nbsp;&nbsp;'.@$capa->asset->name.'&nbsp;&nbsp;&nbsp;&nbsp;'.@$capa->asset->bar_code}}"});
            },
            minimumInputLength: 1,
            templateResult: formatRepo, // omitted for brevity, see the source of this page
            templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
            });

                function formatRepo (repo) {
                if (repo.loading) return repo.rfc;
                var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result'><span>"+ repo.rfc +"&nbsp;"+repo.name+"&nbsp"+repo.bar_code+"</span></div>";

                return markup;
                }

                function formatRepoSelection (repo) {
                    return repo.rfc;
                }     
});
    </script>
@stop