@extends('layout.app_706')
@section('title')
    Job List Checker
@endsection
@section('content')
    <!--begin::Subheader-->
    <div class="subheader py-2 py-lg-4  subheader-solid " id="kt_subheader">
        <div class=" container-fluid  d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-2">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                    @yield('title')
                </h5>
                <!--end::Page Title-->
            </div>
            <!--end::Info-->
        </div>
    </div>
    <!--end::Subheader-->

    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class=" container-fluid ">
            <div class="row">
                <div class="col-12">
                    <div class="card" id="data">
                        <div class="card-body">
                            <div class="m-section" id="data-kategori">
                                <div class="m-section__content">
                                    <table class="table _table-hover table-separate table-head-custom" id="tabel"
                                        width="100%">
                                        <thead>
                                            <tr>
                                                <th>Bagian Terkait</th>
                                                <th>Requirement</th>
                                                <th>Remark SPV</th>
                                                <th>Tgl Selesai</th>
                                                <th>Option</th>
                                            </tr>
                                        </thead>
                                        <tbody data-link="row" class="rowlinks">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->

    <div class="modal" id="pickJob" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Ambil Job
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            ×
                        </span>
                    </button>
                </div>
                {!! Form::open(['route' => 'listjob-update', 'id' => 'updateJob', 'enctype' => 'multipart/form-data']) !!}
                <input type="hidden" name="recid" id="recid">
                <input type="hidden" name="status" id="status">
                <div class="modal-body">
                    <div class="col-lg-12" id="penyelesaian" style="display: none">
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">Uraian Penyelesian</label>
                            <textarea name="uraian" class="form-control" placeholder="Uraian Penyelesaian" id="uraian"></textarea>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">Upload File</label>
                            <input type="file" class="form-control" name="fileUpload" id="fileUpload"
                                accept=".jpg,.jpeg,.png,.pdf">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" id="submitJob" class="btn btn-primary">
                        Save changes
                    </button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <div class="modal" id="ModalviewJob" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="header-review">
                        Review Job
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            ×
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="col-lg-12" id="penyelesaian">
                                <div class="form-group m-form__group">
                                    <label class="col-form-label">Judul</label>
                                    <input type="text" name="estimasi" readonly class="form-control" id="judul">
                                    <input type="hidden" id="data_id" class="form-control">
                                </div>
                            </div>
                            <div class="col-lg-12" id="penyelesaian">
                                <div class="form-group m-form__group">
                                    <label class="col-form-label">Bagian Pemohon</label>
                                    <input type="text" name="estimasi" readonly class="form-control" id="bagian">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group m-form__group">
                                    <label class="col-form-label">Uraian</label>
                                    <textarea name="uraianremarkSpv" readonly class="form-control" id="uraian_"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="m-accordion m-accordion--default m-accordion--toggle-arrow" id="detailworker"
                                role="tablist">
                            </div>
                            <div class="form-group m-form__group">
                                <label class="col-form-label" for="uraian">Remark Checker</label>
                                <textarea class="form-control m-input m-input--air" readonly id="remarkcheker" name="remarkcheker" rows="3"></textarea>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-success" id="simpan">
                                          Simpan
                                         </button>-->
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-approve" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Approve Job
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            ×
                        </span>
                    </button>
                </div>
                <form class="m-form m-form--fit m-form--label-align-right" method="post"
                    action="{{ route('checker-approve') }}" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group m-form__group">
                                    <label for="fileName">
                                        File Browser
                                    </label>
                                    <div></div>
                                    <div class="custom-file">
                                        <input type="hidden" id="recid1" name="recid" class="form-control">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}"
                                            class="form-control">
                                        <input type="file" class="custom-file-input" id="photo" name="photo">
                                        <label class="custom-file-label" for="fileName">
                                            Choose file
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">
                            Approve
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-reject" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Reject Job
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            ×
                        </span>
                    </button>
                </div>
                <form class="m-form m-form--fit m-form--label-align-right" method="post"
                    action="{{ route('checker-reject') }}">
                    <input type="hidden" id="recid2" name="recid" class="form-control">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}" class="form-control">

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group m-form__group">
                                    <label class="col-form-label" for="uraian">Remark Checker</label>
                                    <textarea class="form-control m-input m-input--air" name="remark" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">
                            Reject
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('css')
    <link href="{{ asset('assets_7.0.6/plugins/custom/datatables/datatables.bundle.css?v=7.0.6') }}" rel="stylesheet"
        type="text/css" />
    <style type="text/css">
        @media (max-width: 991.98px) {
            .d-none-mobile {
                display: none !important;
            }

            .w_200px {
                max-width: 100px !important;
            }
        }

        @media (min-width: 992px) {
            .modal-lg {
                max-width: 75%;
            }

            /* .table th, .table td {
                                       overflow: hidden;
                                       text-overflow: ellipsis;
                                       white-space: nowrap;
                                        -webkit-line-clamp: 3;
                                      } */
            .table td div {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                -webkit-line-clamp: 3;
            }

            .w-100px {
                max-width: 100px !important;
            }

            .w_200px {
                width: 200px !important;
            }

            .w-200px {
                max-width: 200px !important;
            }

            .w-300px {
                max-width: 300px !important;
            }

            .w-400px {
                max-width: 400px !important;
            }
        }
    </style>
@endsection
@section('js')
    <!--begin::Page Vendors -->
    <script src="{{ asset('assets_7.0.6/js/pages/crud/forms/editors/summernote.js?v=7.0.6') }}" type="text/javascript">
    </script>
    <script src="{{ asset('assets_7.0.6/plugins/custom/datatables/datatables.bundle.js?v=7.0.6') }}" type="text/javascript">
    </script>
    <script src="{{ asset('assets_7.0.6/plugins/custom/moment/moment.min.js?v=7.0.6') }}"></script>
    <script src="{{ asset('assets_7.0.6/plugins/custom/moment/moment_locales.min.js?v=7.0.6') }}"></script>
    <script src="{{ asset('assets_7.0.6/plugins/custom/extensions/rowlink.js?v=7.0.6') }}"></script>
    <script src="{{ asset('assets_7.0.6/js/pages/custom/todo/todo.js?v=7.0.6') }}"></script>
    <script src="{{ asset('assets_7.0.6/js/pages/custom/chat/chat.js?v=7.0.6') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".date-picker").datepicker({
                format: "dd-mm-yyyy",
                todayHighlight: !0,
                orientation: "bottom left",
                templates: {
                    leftArrow: '<i class="la la-angle-left"></i>',
                    rightArrow: '<i class="la la-angle-right"></i>'
                },
                autoHide: true
            });
            $('#tabel').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('checker-data') }}",
                "columns": [
                    // {data: 'tgl_selesai'},
                    // {data: 'data.jabatan.namajabatan'},
                    // {data: 'requirement'},
                    // {data: 'remark'},
                    // {data: 'option','class':'text-center',orderable: false,searchable: false},				
                    // {data: 'date_entry'},	
                    {
                        data: null,
                        name: 'data.judul',
                        className: 'align-top w_200px',
                        orderable: false,
                        defaultContent: "",
                        render: function(data, type, row, meta) {
                            if (data.data.user_pemohon == null) {
                                // var user_img 	= 'user-pdam.png';
                                // var nama 		= data.data.bagian_pemohon;
                                // var bagian 		= "";							
                                var user_img = data.data.nip_spvworker.trim() + '.jpg';
                                var nama = data.data.data_spv.nama.trim();
                                var bagian = data.data.bagian_pemohon;
                            } else {
                                var user_img = data.data.user_pemohon.nip.trim() + '.jpg';
                                var nama = data.data.user_pemohon.nama;
                                // var bagian = data.data.bagian_pemohon;
                                if (data.data.bagian_pemohon == null) {
                                    var bagian = 'STAFF'
                                } else if (data.data.user_pemohon.is_manajer == 9) {
                                    var bagian = 'Admin'
                                } else {
                                    var bagian = data.data.jabatan.namajabatan.replace('Manajer ',
                                        '');
                                }
                            }
                            output = '<div class="d-flex align-items-center">\
                                    								<div class="symbol symbol-40 symbol-sm flex-shrink-0">\
                                    									<img class="" src="avatar/' + user_img + '" onerror="this.onerror=null; this.src=\'avatar/user-pdam.png\'" alt="photo">\
                                    								</div>\
                                    								<div class="d-none-mobile ml-4">\
                                    									<div class="text-dark-75 font-weight-bolder font-size-lg mb-0">' + nama + '</div>\
                                    									<span class="text-muted font-weight-bold text-hover-primary">' + bagian + '</span>\
                                    								</div>\
                                    							</div>';
                            return output;
                        }
                    },
                    {
                        data: null,
                        name: 'requirement',
                        className: 'align-top w-400px',
                        orderable: false,
                        defaultContent: "",
                        render: function(data, type, row, meta) {
                            // console.log(data);
                            var output = '';
                            output += '<div class="font-weight-bolder font-size-lg mb-0">' + data
                                .requirement + '</div>';
                            output += '<div class="text-truncate">';
                            if (data.data.judul !== null) {
                                // output += '<span class="d-none-mobile">' + data.data.judul.replace(/<\/?[^>]+>/ig, " ") + '</span>';
                                output += '<span class="d-none-mobile">' + data.data.judul +
                                    '</span>';
                            }
                            if (data.data.uraian !== null) {
                                output += '<span class="text-muted d-none-mobile"> - ' + data.data
                                    .uraian.replace(/<\/?[^>]+>/ig, " ") + '</span>';
                            }
                            // output += '<span class="d-none-mobile">' + data.data.judul.replace(/<\/?[^>]+>/ig, " ") + '</span>';
                            // output += '<span class="text-muted d-none-mobile"> - ' + data.data.uraian.replace(/<\/?[^>]+>/ig, " ") + '</span>';
                            output += '</div>';
                            if (data.keterangan !== null) {
                                output += '<div class="font-weight-bold text-muted">' + data
                                    .keterangan + '</div>';
                            }
                            return output;
                        }
                    },
                    {
                        data: 'remark',
                        className: 'align-top',
                        visible: false
                    },
                    {
                        data: null,
                        name: 'tgl_selesai',
                        className: 'align-top text-right w-100px',
                        searchable: false,
                        defaultContent: "",
                        render: function(data, type, row, meta) {
                            // console.log(data.tgl_selesai);
                            var output = '';
                            if (data.tgl_selesai) {
                                var new_date = moment(data.tgl_selesai).format('DD MMM YYYY');
                            } else {
                                var new_date = "-";
                            }

                            output += '<div class="font-weight-bolder text-primary mb-0">' +
                                new_date + '</div>';
                            return output;
                        }
                    },
                    {
                        data: 'option',
                        'class': 'w-100px align-top text-center rowlink-skip',
                        orderable: false,
                        searchable: false
                    },
                ],
                "order": [
                    [0, 'asc']
                ],
                "drawCallback": function(settings) {
                    var api = this.api();
                    api.$('td').not(".NoClick").css('cursor', 'pointer');
                    // api.$('td a').ripple();
                },
            });

            $('#updateJob').submit(function(event) {
                event.preventDefault();
                var post_url = $(this).attr("action"); //get form action url
                var form = $('#updateJob')[0]; // You need to use standard javascript object here
                var formData = new FormData(form);
                $.ajax({
                    type: "POST",
                    url: post_url,
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function(response) {
                        if (response.status == true) {
                            $('body').append(response.message);
                            $('#tabel').DataTable().ajax.reload();
                            $('#updateJob').trigger('reset');
                            $('#recid').val('');
                            $('#status').val('');
                            $('#pickJob').modal('hide');
                        } else {
                            $('body').append(response.message);
                        }
                    }
                });

            });

            $('#simpan').click(function(event) {
                event.preventDefault();
                var recid = $('#data_id').val();
                $.ajax({
                    type: "POST",
                    url: "{{ route('checker-simpan') }}",
                    data: {
                        'recid': recid,
                        'remark': $('#remarkcheker').val(),
                        '_token': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status == true) {
                            $('body').append(response.message);
                            $('#tabel').DataTable().ajax.reload();
                            $('#ModalviewJob').modal('hide');
                        }
                        $('body').append(response.message);
                    }
                });

            });

            $('#ModalviewJob').on('shown.bs.modal', function() {
                $('#ModalviewJob textarea').each(function() {
                    var $textArea = $(this);
                    $textArea.summernote({
                        height: 75,
                        toolbar: false,
                        tabsize: 2
                    }).summernote("disable");;
                });
            });

            $('#ModalviewJob').on('hidden.bs.modal', function() {
                $('#ModalviewJob textarea').each(function() {
                    var $textArea = $(this);
                    $textArea.summernote("destroy");
                });
            });
        });

        function approvejob(id) {
            $('#recid1').val(id);
            $('#modal-approve').modal('show');
        }

        function rejectjob(id) {
            $('#recid2').val(id);
            $('#modal-reject').modal('show');
        }

        function viewjob(id) {
            KTApp.block("#tabel", {
                overlayColor: "#000000",
                type: "loader",
                state: "success",
                message: "Please wait...",
                // baseZ: 1000, 
            });
            $('#detailworker').empty();
            $.ajax({
                type: "POST",
                url: "{{ route('checker-view') }}",
                data: {
                    'recid': id,
                    '_token': '{{ csrf_token() }}'
                },
                success: function(response) {
                    // console.log(response);
                    if (response.status) {
                        // $('body').append(response.message);
                        $('#data_id').val(response.data.recid); //.prop('disabled',true);
                        $('#judul').val(response.data.data.judul); //.prop('disabled',true);
                        if (response.data.data.jabatan != null) {
                            $('#bagian').val(response.data.data.jabatan.namajabatan); //.prop('disabled',true);
                        } else {
                            $('#bagian').val(response.data.data.bagian_pemohon); //.prop('disabled',true);
                        }
                        // $('#uraian').empty();
                        $('#uraian_').text(response.data.data.uraian); //.prop('disabled',true);
                        $('#remarkcheker').text(response.data.remark_checker); //.prop('disabled',true);
                        $('#header-review').text('Review Job [REQ_' + response.data.data_recid + '_' + response
                            .data.recid + ']'); //.prop('disabled',true);
                        // alert(response.data.uraian);	
                        var image = '';
                        if (response.data.ext_file != null) {
                            var url = "{{ url('api/gambar') }}/image&" + response.data.ext_file;
                            image = '<a href="' + url +
                                '" target="_blank"><button type="button" class="btn btn-outline-success"><i class="fa fa-file-image"></i> File Image</button></a>';
                        }
                        var index = 0;
                        $("#detailworker").append(
                            '<div class="card m-accordion__item m-accordion__item--success">' +
                            '<div class="card-header m-accordion__item-head collapsed" srole="tab" id="m_accordion_5_item_' +
                            index + '_head" data-toggle="collapse" href="#m_accordion_5_item_' + index +
                            '_body" aria-expanded="  false">' +
                            '<span class="card-title m-accordion__item-title">' +
                            '<i class="fa flaticon-user-ok mr-3"></i>' +
                            response.data.worker.nama +
                            '</span>' +
                            '<span class="m-accordion__item-mode"></span>' +
                            '</div>' +
                            '<div class="card-body m-accordion__item-body collapse" id="m_accordion_5_item_' +
                            index +
                            '_body" class=" " role="tabpanel" aria-labelledby="m_accordion_5_item_' +
                            index + '_head" data-parent="#detailworker">' +
                            '<div class="m-accordion__item-content">' +
                            '<h4>Disposisi SPV</h4>' +
                            '<p>' + response.data.remarkspv + '</p>' +
                            '<p>Estimasi ' + response.data.estimasi + ' Hari</p>' +
                            '<h4>Penyelesaian</h4>' +
                            '<p>' + response.data.penyelesaian + '</p>' +
                            '<div class="form-group m-form__group">' +
                            image +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>');

                        $('#ModalviewJob').modal('show');
                        KTApp.unblock("#tabel");

                    } else {
                        $('body').append(response.message);
                    }
                }
            });
        }
    </script>
@endsection