@extends('modules.head') @section('contenido')

<!-- List banners-->
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">My Work Orders</h3></br>
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="table-my_orders" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Code</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Type</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Created by</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Creation date</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Status</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<div class="modal" id="kycLinkedToWorkOrderModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title">KYC Details</h3>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <table id="kycLinkedToWorkOrderModalTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>Company</th>
                            <th>Code</th>
                            <th>Email</th>
                            <th>KYC Type</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

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

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="{{ asset('js/work_orders.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $('#table-my_orders thead tr')
                .clone(true)
                .addClass('filters')
                .prependTo('#table-my_orders thead');

            $('#table-my_orders thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
            $("#table-my_orders").dataTable().fnDestroy();
            _table = $('#table-my_orders').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "order": [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: '/work_orders/get_my_orders',
                },
                columns: [{
                        data: 'code',
                        name: 'code',
                        "width": "30%",
                        render: function(data, type, row) {
                            if (row.order_type.kyc_type_id) {
                                return `<a style="cursor:pointer" data-id='${row.id}' data-toggle="modal" data-target="#kycLinkedToWorkOrderModal">${data}</a>`;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'order_type.name',
                        name: 'order_type.name',
                        "width": "30%"
                    },
                    {
                        data: 'created_by',
                        name: 'created_by',
                        render: function(data) {
                            if (data) {
                                return data.first_name + " " + data.last_name;
                            }
                            return "";
                        }
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data) {
                            return new Date(data).toLocaleString();
                        }
                    },
                    {
                        data: 'status.name',
                        name: 'status.name',
                        render: function(data, type, row) {
                            let btn_note = btnNote(row.status.id, row.id, row.note_id, row.order_type.name);
                            let name = row.status.name.charAt(0).toUpperCase() + row.status.name.slice(1);
                            return `<span class="badge ${row.status.css_class}">${name}</span>${btn_note}`;
                        }
                    },

                    {
                        data: 'id',
                        name: 'id',
                        "width": "5%",
                        render(data, type, row) {
                            let buttonName = getButtonName(row.status.id);
                            if (row.status.id != 3) {
                                return `<a type="button" class="btn btn-default" style="width:80px" onClick="executeOrder(${data}, ${row.status.id},'${row.order_type.name}', ${row.order_type.kyc_type_id})">${buttonName}</a>
                                `;
                            } else {
                                return '';
                            }
                        }
                    },
                ],
                columnDefs: [{
                    targets: 0,
                    className: 'workOrderCode',
                }],
                initComplete: addFiltersForDataTable
            });

            $('#table-my_orders').on('click', 'td.workOrderCode a', function(e) {
                let workOrderId = $(this).attr('data-id');
                if (workOrderId) {
                    $.ajax({
                        type: 'get',
                        url: `/kyc/get-details/${workOrderId}`,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        success: function(r) {
                            displayModalWithKycData(r);
                        }
                    })
                }
            });
        });
    });

    function displayModalWithKycData(r) {
        if (r.status) {
            let table = $('#kycLinkedToWorkOrderModalTable > tbody');

            // Cleaning texts
            $(table).find('tr:first').children('td:first').text("");
            $(table).find('tr:first').children('td:nth-child(2)').text("");
            $(table).find('tr:first').children('td:nth-child(3)').text("");
            $(table).find('tr:first').children('td:nth-child(4)').text("");
           
            // Assigning text value
            if (r.data.pending_account_id) {
                $(table).find('tr:first').children('td:first').text(r.data.pending_account.company_name);
                $(table).find('tr:first').children('td:nth-child(2)').text(`L${r.data.pending_account.id}`);
                $(table).find('tr:first').children('td:nth-child(3)').text(r.data.pending_account.email);
                $(table).find('tr:first').children('td:nth-child(4)').text(r.data.kyc_type.code);
            }
            else{
                $(table).find('tr:first').children('td:first').text(r.data.customer.first_name);
                $(table).find('tr:first').children('td:nth-child(2)').text(r.data.customer.document);
                $(table).find('tr:first').children('td:nth-child(3)').text(r.data.customer.email);
                $(table).find('tr:first').children('td:nth-child(4)').text(r.data.kyc_type.code);
            }

        }
    }
</script>
@include('work_order/modal_notes')
@include('work_order/modal_cycle_count_notes')

<style type="text/css">
    .sTooltip {
        position: relative;
    }

    .sTooltip i {
        cursor: pointer;
    }

    .sTooltip b {
        display: none;
        position: absolute;
        background-color: #fff;
        border: solid 1px #444;
        border-radius: 10px;
        padding: 10px;
        width: 250px;
        bottom: 100%;
        right: 0;
        font-size: 13px;
        font-weight: normal;
        z-index: 4;
        box-shadow: 2px 2px 2px #999;
    }

    .sTooltip i:hover~b {
        display: block;
    }
</style>

@endsection