@extends('templates.structure')

@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                {{-- <div class="card-header">
                    <h3 class="card-title">Data Table With Full Features</h3>
                </div> --}}
                <!-- /.card-header -->
                <div class="card-body">                                    
                    <table id="example1" class="table table-hover" style="width:100%">
                        <thead>
                            <tr>                              
                                <th></th>                                
                                <th>Client ID</th>                                
                                <th>Client Name</th>                                
                                <th>Company Name</th>                                
                                <th>Items</th>
                                <th>Status</th>
                                <th>Created By</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>                    
                </div>                
            </div>
        </div>
    </div>
    <!-- /.row -->

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Form Received</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formRevceived" role="form">
                    <div class="form-group">
                        <label for="receipent_details" class="col-form-label">Receipent Details</label>
                        <textarea class="form-control" id="receipent_details" name="receipent_details"></textarea>                        
                    </div>
                    <input type="hidden" name="id">                    
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="saveRevceived">Save</button>
            </div>
            </div>
        </div>
    </div>

@endsection

@section('custom_js')
<!-- DataTables -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.14.0/printThis.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
let statusArr = [
    'Pending Pick Up',
    'Released',
    ];

var table = $('#example1').DataTable({
    "scrollX": true,
    "processing": true,
    "serverSide": true,
    "ajax": '{{route("mail-handling.datatable")}}',
    "columns": [
            { "name": "op.created_at", "data": function ( row, type, set ) {
                    return row.created_at
                }, "searchable": false, "orderable": true, "visible": false },            
            { "name": "op.client_id", "data": "client_id", "searchable": true, "orderable": true },
            { "name": "unity_clients_ht.fullname", "data": "fullname", "searchable": true, "orderable": true },
            { "name": "unity_clients_ht.company_name", "data": "company_name", "searchable": true, "orderable": true },
            { "name": "op.items", "data": "items", "searchable": true, "orderable": true },            
            { "name": "op.status", "data": function ( row, type, set ) {
                return statusArr[row.status]
            }, "searchable": false, "orderable": false },            
            { "name": "op.created_b", "data": function ( row, type, set ) {
                return row.created_b
            }, "searchable": false, "orderable": false },            
            { "name": "action", "data": null, "orderable": false, "searchable": false },
        ],
    "order" :[[ 0, 'desc' ]],
    "columnDefs": [
        {
        "targets": -1,
        "data": "action",
        "render": function ( data, type, row, meta ) {                        
            
            var newArr = (JSON.stringify(data))

            var action = '<div class="btn-group float-right" role="group" aria-label="Basic example">';        
            action += '<button class="btn btn-outline-success details-control" ><span class="fa fa-info"></span></button>&nbsp;'
            if(data.status == "0"){
                action += '<button class="btn btn-outline-info" onclick="setReceived(\''+data.id+'\')"><i class="fa fa-check"></i> '+statusArr[data.status]+'</button>'
            }
            action += '</div>';
            return action            
            }
        }
    ],
})

let setReceived = (id) => {
    $('#exampleModal').modal('show')
    $('[name="id"]').val(id)
}

$('#saveRevceived').on('click', function(){
    setStatusReceive()
})

let setStatusReceive = () => {

    let id = $('#formRevceived [name="id"]').val()
    let receipent_details = $('#formRevceived [name="receipent_details"]').val()

    axios.put('{{url("mail-handling")}}/'+id, { receipent_details: receipent_details }, config) .then(function (response) {
        console.log(response);                    
        window.location = response.data.additional.redirect;

    })
    .catch(function (error) { console.log(error);
        $('.newerror').remove()
        var msgs = error.response.data.data.message
        $.each(msgs, function (index, value) {
                if(index.split(".").length > 1){
                    var newindex = index.split(".")
                    $('[name="'+newindex[0]+'['+newindex[1]+']"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                } else {

                    $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                }
                // console.log(value[0])
            });
    });
}

</script>
@endsection

@section('addCustomInfo')
if(v.name == 'created_b'){
    valuename = null
}
if(v.name == 'forward_b'){
    valuename = null
}
if(v.name == 'forwarded_by'){
    valuename = data.forward_b
}
if(v.name == 'status'){
    
    valuename = statusArr[data.status]
}
@endsection