@extends('templates.structure')
@section('custom_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); }
    .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">
            <form role="form" id="form">
                <div class="card-body">

                    <div class="row">  
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Location ID</label>                                
                                <select name="location_id" class="form-control">                                    
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Client:</label>
                                <br>
                                <select name="client_id" class="form-control">
                                </select>                                
                            </div>                                
                        </div>        
                        <div class="col-md-12">
                            {{-- <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="col-md-12">
                            <div class="row detailClientCall d-none">
                            <div class="col-md-12">
                                <div id="picData"></div>
                            </div>
                        </div> 
                        </div>      
                        <div class="col-md-12 mt-3">
                            <div class="form-group">
                                <label>Sender Info</label> 
                                <textarea name="sender_info" class="form-control" rows="5"></textarea>                                
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Items</label> 
                                <textarea name="items" class="form-control" rows="5"></textarea>                                
                            </div>
                        </div>
                    </div>

                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>                    
                </div>
            </form>
        </div>

    </div>
</div>
@endsection


@section('custom_js')
<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,
        ajax: {            
            url: '{{route("clients.datatable")}}',
            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");
    console.log(e.params.data);
    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 => {
            console.log('res');
            console.log(res);

            var vd = '';
            res.pic_list.forEach(data => {
                vd+=
                // '<div class="col-12 col-md-4 mb-3"><div class="border p-4 shadow-sm"style="background:white">\
                // <label>Name PIC :</label>&nbsp;<span>'+data.pic_name+'</span><br>\
                // <label>Email PIC :</label>&nbsp;<span>'+data.pic_email+'</span><br>\
                // <label>Number PIC :</label>&nbsp;<span>'+data.pic_number+'</span><br></div></div>';
                '<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">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-2">\
                        </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>'    
                    
            );
        });

    }).catch(err => {
        $('.newerror').remove();
        console.log(err);
        Swal({
            type: 'error',
            title: 'Oops...',
            text: err.response.data.message,
        })
    });
});


//Initialize Elements
$('[name="location_id"]').select2({
        placeholder: 'Choose location ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("locations.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.location_name',
                        orderable: true,
                        searchable: true
                        }
                    },
                    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){
                    newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                })

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

            },
            cache: true
        }
    });

$( "#form" ).submit(function( e ) {
    e.preventDefault()

    let bodyFormData = $(this).serialize();

    axios.post('{{route("mail-handling.store")}}', bodyFormData, 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])
                });
            });
})

$(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