@extends('templates.structure')

@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<style>
    .btn-lights { background: whitesmoke; color: rgb(156, 12, 113); }
    /* Start by setting display:none to make this hidden.
    Then we position it in relation to the viewport window
    with position:fixed. Width, height, top and left speak
    for themselves. Background we set to 80% white with
    our animation centered, and no-repeating */
    .modal_ajaxloading {
        display:    none;
        position:   fixed;
        z-index:    10000;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        background: rgba( 255, 255, 255, .8 )
                    url('{{asset("ajax-loader.gif")}}')
                    50% 50%
                    no-repeat;
    }

    /* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
    body.loading .modal_ajaxloading {
        overflow: hidden;
    }

    /* Anytime the body has the loading class, our
    modal element will be visible */
    body.loading .modal_ajaxloading {
        display: block;
    }
</style>
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Add New Call</h4>
                </div>
                <form role="form" id="form">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <label>Client Name</label>
                                <select name="client_id" class="form-control"></select>
                            </div>
                            <div class="col-12 col-md-6">
                                <label>Caller Name</label>
                                <input class="form-control" name="caller_name" placeholder="Caller Name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                 <button type="button" id="btn_dtClientCall" class="btn btn-lights w-100 mt-3">Show Detail</button>
                            </div>
                        </div>
                        <div class="row detailClientCall d-none">
                            <div class="col-12">
                                <div id="picData"></div>
                            </div>
                            
                            {{-- @foreach() --}}
                            {{--  --}}
                            {{-- @endforeach --}}
                        </div>
                        <div class="row mt-2 pt-3 border-top">
                            <div class="col-12 col-md-6">
                                <label>Caller Number</label>
                                <input class="form-control" name="caller_number" placeholder="+62909332111 (Please use correct format!)">
                            </div>
                            <div class="col-12 col-md-6">
                                <label>Status</label>
                                <select class="form-control" name="status">
                                    <option value="">Call Status</option>
                                    <option value="0">Accepted</option>
                                    <option value="1">Rejected</option>
                                    <option value="2">Forwarded</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-12">
                                <label>Messages</label>
                                <textarea name="messages" class="form-control w-100">

                                </textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-success w-100">Log Call</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <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 table-responsive" style="width:100%">
                        <thead>
                            <tr>
                                <th>Client ID</th>
                                <th>Client Name</th>
                                <th>Company Name</th>
                                <th>Caller Name</th>
                                <th>Caller Number</th>
                                <th>Date & Time</th>
                                <th>Status</th>
                                <th>Handled By</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>                
            </div>
        </div>
    </div>
    <!-- /.row -->


    <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      {{-- <div class="modal-header text-right">
    </div> --}}
        <div class="modal-body" style="max-height: 800px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>&nbsp;&nbsp;&nbsp;        
            <button class="close" style="margin-left:10px;margin-right:10px" onclick="print()"><span class="fa fa-print"></span></button>
            <div id="printThis" style="width:530; margin:0 auto;background-color: white;">
                <div id="qrcode" style="display: flex; justify-content: center; text-align: center; ">
                </div>
                
                <table id="dataPrintTable" width="100%" style="margin:0 auto;">
                    <thead>
                        <tr>
                           <td colspan="3">
                               <h3 class="text-center" style="margin: 0 auto;"><strong><span id="name_cafe"></span></strong></h3>
                           </td>
                        </tr>
                    </thead>
                    {{-- <tbody style="font-size: 14px"></tbody> --}}
                    <tfoot>
                        {{-- <tr>
                            <td><br></td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <p class="text-center" style="margin: 0 auto;font-size: 14px"><strong>Let's Thrive Together !</strong></p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <p class="text-center" style="margin: 0 auto;font-size: 14px">How to load this Voucher</p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <p style="font-size: 10px;padding-left:10px;margin-bottom:0px;">
                                    <label style="margin-bottom:0px;">1. Login to UnionSpace App</label>
                                    <label style="margin-bottom:0px;">2. Clabelck on Scan Now</label>
                                    <label style="margin-bottom:0px;">3. Scan this QR code</label>
                                    <label style="margin-bottom:0px;">4. The privilages on this Voucher will be loaded into your account</label>
                                </p>                                
                            </td>
                        </tr> --}}
                        <tr>
                            <td colspan="3">
                                <p style="width: 100%;
                                    text-align: center;
                                    border-bottom: 1px solid black;
                                    line-height: 0.1em;
                                    margin: 10px 0; "></p>
                                {{-- <hr style=" border: 1px solid black;margin: 0 0;">                                 --}}
                                <p class="text-center" style="margin: 0 auto;font-size: 10px">Powered by</p>
                                <p class="text-center" style="margin: 0 auto;">
                                <img src="{{asset('unionspace-logo-dark.png')}}" alt="unionspacelogo" style="width: 100px;">
                                </p>
                                <br>
                                 
                            </td>
                        </tr>
                    </tfoot>
                </table>

            </div>
            <div id="previewImage" style="display:none">
            </div>
            {{-- <div id="qrcode"></div> --}}
        </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="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script>
$("select[name='client_id']").select2({
    placeholder: 'Client name',
    width: '100%',
    allowClear: true,
    minimumInputLength:3,
    ajax: {            
        url: '{{route("clients.datatable")}}',
        delay: 150,
        dataType: 'json',
        data: function(params) {                
            return {                    
                start: params.page == NaN ? 0 : (params.page-1) * 25,
                length: 25,
                columns: {
                    0:{
                    name: 'op.fullname',
                    orderable: true,
                    searchable: true
                    },
                    1:{
                    name: 'op.company_name',
                    orderable: true,
                    searchable: true
                    },
                    2:{
                    name: 'op.clientid',
                    orderable: true,
                    searchable: true
                    },
                    3:{
                    name: 'op.status',
                    orderable: true,
                    searchable: true,
                    search: {
                            regex: true,
                            value : '1',
                        },
                    }
                },
                search: {value: params.term},
                order: {0:{dir:'asc'}}
            }
        },
        processResults: function (data, params) {
            params.page = params.page || 1;                
            var newData = []
            $.each(data.data, function(key, val){
                var text = val.clientid;
                text += (val.fullname != null ? ' - '+val.fullname : '');
                text += (val.company_name != null ? ' - '+val.company_name : '');

                newData[key] = {'id' : val.clientid, 'text' : text};                    
            })

            data.results = newData;
        
            return {
                results: data.results,
                pagination: {
                    more: (params.page * 25) < data.recordsFiltered
                }
            }

        },
        cache: true
    }
});

$("select[name='client_id']").on('select2:select', function (e) 
{
    $("body").addClass("loading");
    axios.get('{{route("phone-number.getPIC.datatable")}}?client_id='+e.params.data.id+'&status=2', {}, config).then(res => {
        
        $("body").removeClass("loading");
        res.data.data.forEach(res => {

            var vd = '';
            res.pic_list.forEach(data => {
                vd+=
               '<tbody><tr><td>'+data.pic_name+'</td><td>'+data.pic_email+'</td><td>'+data.pic_number+'</td></tr></tbody>';
            });
            
            var notes = '';
            if(res.notes === ''){
                notes = '<b class="text-danger">No Data Available!</b>';
            }else{
                notes = '<textarea name="notes" class="form-control" rows="3" disabled>'+res.notes+'</textarea>';
            }

            $('#picData').append(
                    '<div class="row">\
                        <div class="col-md-12">\
                            <hr>\
                            <div class="form-group">\
                                <label class="plan-title pt-1">Plan Name :</label>\
                                <span class="ml-1">'+res.product_name+'</span>\
                            </div>\
                            <hr>\
                        </div>\
                    </div>\
                    <div class="row mt-1 pt-2 pb-4">\
                        <div class="col-2">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Phone Number :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    <span>'+res.phone_number+'</span>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="col-2">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Extension :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    <span>'+res.extension+'</span>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="col-2">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Country Code :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    <span>'+res.country_code+'</span>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="col-2">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Area Code :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    <span>'+res.area_code+'</span>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="col">\
                            <div class="row">\
                                <div class="col">\
                                    <label class="plan-title pt-1">Notes :</label>\
                                </div>\
                            </div>\
                            <div class="row">\
                                <div class="col">\
                                    '+notes+'\
                                </div>\
                            </div>\
                        </div>\
                    </div>\
                    <div class="row">\
                        <div class="col">\
                            <div class="row pb-3">\
                                <table id="example1" class="table table-hover" style="width:100%"><thead class="thead-dark"><tr><th>PIC Name</th><th>PIC Email</th><th>PIC Number</th></tr></thead>\
                                    '+vd+'\
                                </table>\
                            </div>\
                        </div>\
                </div>'    
                    
            );
        });

        // window.location = res.data.additional.redirect;
    }).catch(err => {
        $('.newerror').remove();
        Swal({
            type: 'error',
            title: 'Oops...',
            text: err.response.data.message,
            // footer: '<a href>Why do I have this issue?</a>'
        })
    });
            // axios.get('{{route("plan.datatable")}}?columns[0][name]=op.members&columns[0][searchable]=true&columns[0][search][value]='+e.params.data.id+'&columns[1][name]=op.status&columns[1][searchable]=true&columns[1][search][value]=3', config) .then(function (response) {
            //     // console.log(response.data.data.length)
            //     $('#listplan').html('')
            //     if (response.data.data.length > 0){

            //         $.each(response.data.data, function (index, value) {

            //             var param = {
            //                 id: value.id,
            //                 product_name: value.product_name,
            //                 expired: value.next_renew_date,
            //                 quota: {
            //                     working_pass: value.working_pass,
            //                     meeting_room_hours: value.meeting_room_hours,
            //                 },
            //             };
                        
            //             $('#listplan').append(radioplan(param))
            //         })

            //     } else {
            //         $('#listplan').html('No Plan!')
            //     }
                
            // })
            // .catch(function (error) { 
                
            //     console.log(error);
            // });
        });



var table = $('#example1').DataTable({
    "scrollX": true,
    "processing": true,
    "serverSide": true,
    "ajax": '{{route("call-handling.datatable")}}', 
    "columns": [            
            { "name": "ch.client_id", "data": "client_id" },
            { "name": "cl.fullname", "data": "fullname" },
            { "name": "cl.company_name", "data": function(data){
                if(data.company_name == null){
                    return 'N/A';
                }else{
                    return data.company_name;
                }
            } },
            { "name": "ch.caller_name", "data": "caller_name", "searchable": false },
            { "name": "ch.caller_number", "data": "caller_number", "searchable": false },
            { "name": "created_at", "data": "created_at", "searchable": false },
            { "name": "status", "searchable": false, "data": function(data, type, row, meta){
                if(data.status == 0){
                    return "<span class='badge badge-success'>Accepted</span>";
                }else if (data.status == 1) {
                    return "<span class='badge badge-danger'>Rejected</span>";
                }else if (data.status == 2) {
                    return "<span class='badge badge-primary'>Forwarded</span>";
                }
            } },
            { "name": "operator_name", "data": "operator_name", "searchable": false }
        ],
    "order" :[[ 5, 'desc' ]]
})

$("#form").submit(function(e) {
    e.preventDefault();
    
    let formBodyData = $(this).serialize();


    Swal({ 
        title: 'Are you sure to notify the client?', 
        text: "You won't be able to cancel it once it's sent!", 
        type: 'warning', 
        showCancelButton:true, 
        confirmButtonColor: '#3085d6', 
        cancelButtonColor: '#d33', 
        confirmButtonText: 'Yes, notify client!' 
    }).then((result)=> { 
        if (result.value) {
            axios.post('{{route("call-handling.store")}}', formBodyData, config).then(res => {
                console.log(res.data);
                window.location = res.data.additional.redirect;
            }).catch(err => {
                $('.newerror').remove();

                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: err.response.data.data.message,
                    // footer: '<a href>Why do I have this issue?</a>'
                })
            });
        } 
    })
})

$(document).ready(function () {
    
    $("#btn_dtClientCall").click(function () {
        var element = $(".detailClientCall");
        if(element.hasClass('d-block')){
            element.addClass('d-none');
            element.removeClass('d-block');
        }else{
            element.removeClass('d-none');
            element.addClass('d-block');
        }
    });
});
</script>
@endsection