@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>
    .modal-dialog{
        max-width: 70% !important;
    }
    .form-group .col-md-6{
        padding: 20px;
        border-radius: 20px;
    }
    .form-group .col-md-6 .inner-border{
        padding: 10px;
        border-radius: 10px;
        border: 2px solid #9c0c71;
    }
    .form-group .col-md-6 .inner-border label{
        font-size: 1.5rem;
        font-weight: bold;
    }
    .form-group .col-md-6 .inner-border input{
        width: 100%;
        border: none;
        transition: font-size 0.5s;
    }
    .form-group .col-md-6 .inner-border input:focus{
        font-size: 1.5rem;
    }

    
    .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 Phone Number</h4>
                </div>
                <form role="form" id="form">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Phone Number</label>
                                <input class="form-control" type="number" name="phone_number" placeholder="Phone Number">
                            </div>
                            <div class="col-12 col-md-3">
                                <label>Extension</label>
                                <input class="form-control" type="number" name="extension" placeholder="Please insert the extension">
                            </div>
                            <div class="col-12 col-md-3">
                                <label>Country Code</label>
                                <input class="form-control" type="number" name="country_code" placeholder="Country Code" pattern="[0-9\/]*">
                            </div>
                            <div class="col-12 col-md-3">
                                <label>Area Code</label>
                                <input class="form-control" type="number" name="area_code" placeholder="Area Code" limitlength="true" limit="2">
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-success w-100">Add Phone Number</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" style="width:100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Phone Number</th>
                                <th>Extension</th>
                                <th>Area Code</th>
                                <th>Country Code</th>
                                <th>Client ID</th>
                                <th>Plan ID</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>                
            </div>
        </div>
    </div>
    <!-- /.row -->



<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      {{-- <div class="modal-header text-right">
    </div> --}}
        <div class="modal-body">
            <button type="button" style="z-index:2" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            
            <div class="row" style="z-index:1">
            <div class="col-12 col-md-12">
                <h3 class="phone-number-title">Phone Number : <span class="phone"></span></h3>
                <form id="formPIC" role="form">
                    <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="form-group">
                            <label>Choose Plan:</label>
                            <div id="listplan"></div>
                        </div>
                        <input type="hidden" name="did">
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Notes:</label><br>
                           <textarea name="notes" class="form-control" rows="3"></textarea>
                        </div>
                    </div>   
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 1:</label><br>
                                        <input type="text" name="pic[0][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[0][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[0][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 2:</label><br>
                                        <input type="text" name="pic[1][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[1][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[1][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 3:</label><br>
                                        <input type="text" name="pic[2][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[2][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[2][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 4:</label><br>
                                        <input type="text" name="pic[3][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[3][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[3][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 5:</label><br>
                                        <input type="text" name="pic[4][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[4][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[4][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 6:</label><br>
                                        <input type="text" name="pic[5][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[5][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[5][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                            </div>
                        </div>                                
                    </div>        
                </form>
            </div>
            </div>
            <br>
            <div>
                <button type="submit" class="btn btn-success w-100" id="addClient">Add Client</button>
            </div>
            {{-- <div id="qrcode"></div> --}}
        </div>      
    </div>
  </div>
</div>

<div class="modal fade" id="EditPhoneModal" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" style="z-index:2" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            
            <div class="row" style="z-index:1">
            <div class="col-12 col-md-12">
                <form id="formEditPhone" role="form">
                    <h3 class="phone-number-title">Phone Number : <span class="phone"></span></h3>
                    <input type="hidden" name="client_id">
                    <input type="hidden" name="phone_number_id">
                    <div class="col-md-12"">
                        <div class="form-group">
                            <label>Extension</label><br>
                            <input class="form-control" type="number" name="extension" placeholder="Please insert the extension">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Country Code</label>
                            <input class="form-control" type="number" name="country_code" placeholder="Country Code" pattern="[0-9\/]*">
                        </div>                                
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Area Code</label>
                            <input class="form-control" type="number" name="area_code" placeholder="Area Code" limitlength="true" limit="2">
                        </div>                                
                    </div>         
                </form>
            </div>
            </div>
            <br>
            <div>
                <button type="submit" class="btn btn-success w-100" id="editPhoneNumber">Edit</button>
            </div>
        </div>      
    </div>
  </div>
</div>

<div class="modal fade" id="PICModal" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" style="z-index:2" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            
            <div class="row" style="z-index:1">
            <div class="col-12 col-md-12">
                <h3 class="phone-number-title">Phone Number : <span class="phone"></span></h3>
                <form id="formEditPIC" role="form">
                    <input type="hidden" name="client_id">
                    <input type="hidden" name="phone_number_id">
                    <div class="col-md-12"">
                        <div class="form-group">
                            <label>Notes:</label><br>
                            <textarea name="notes" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 1:</label><br>
                                        <button type="button" class="btn btn-outline-danger" onclick="removePIC(1)">Remove PIC</button>
                                        <input type="hidden" name="pic[0][id]"><br>
                                        <input type="text" name="pic[0][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[0][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[0][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 2:</label><br>
                                        <button type="button" class="btn btn-outline-danger" onclick="removePIC(2)">Remove PIC</button>
                                        <input type="hidden" name="pic[1][id]"><br>
                                        <input type="text" name="pic[1][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[1][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[1][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 3:</label><br>
                                        <button type="button" class="btn btn-outline-danger" onclick="removePIC(3)">Remove PIC</button>
                                        <input type="hidden" name="pic[2][id]"><br>
                                        <input type="text" name="pic[2][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[2][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[2][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 4:</label><br>
                                        <button type="button" class="btn btn-outline-danger" onclick="removePIC(4)">Remove PIC</button>
                                        <input type="hidden" name="pic[3][id]"><br>
                                        <input type="text" name="pic[3][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[3][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[3][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 5:</label><br>
                                        <button type="button" class="btn btn-outline-danger" onclick="removePIC(5)">Remove PIC</button>
                                        <input type="hidden" name="pic[4][id]"><br>
                                        <input type="text" name="pic[4][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[4][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[4][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-6">
                                    <div class="inner-border">
                                        <label>PIC 6:</label><br>
                                        <button type="button" class="btn btn-outline-danger" onclick="removePIC(6)">Remove PIC</button>
                                        <input type="hidden" name="pic[5][id]"><br>
                                        <input type="text" name="pic[5][name]" placeholder="PIC Name"><br>
                                        <input type="text" name="pic[5][number]" placeholder="PIC Number"><br>
                                        <input type="text" name="pic[5][email]" placeholder="PIC Email"><br>
                                    </div>
                                </div>
                                <br>
                            </div>
                        </div>                                
                    </div>        
                </form>
            </div>
            </div>
            <br>
            <div>
                <button type="submit" class="btn btn-success w-100" id="editPIC">Edit PIC</button>
            </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>
var table = $('#example1').DataTable({
    "scrollX": true,
    "processing": true,
    "serverSide": true,
    "ajax": '{{route("phone-number.datatable")}}', 
    "columns": [            
            { "name": "op.id", "data": "id" },
            { "name": "op.phone_number", "data": "phone_number" },
            { "name": "op.extension", "data": "extension" },
            { "name": "op.area_code", "data": "area_code", "searchable": true },
            { "name": "op.country_code", "data": "country_code", "searchable": true },
            { "name": "op.client_id", "data": function(data){
                if(data.client_id==null){
                    return '<button class="btn btn-outline-primary" onclick="showAddClientModal(\''+data.id+'\',\''+data.phone_number+'\')">Add Client</button>&nbsp;';
                }
                else{
                    return data.client_id
                }
            }, "searchable": true },
            { "name": "op.plan_id", "data": "plan_id", "searchable": true },
            { "name": "op.created_at", "data": "created_at", "searchable": true },

            { "name": "action", "data": function(data){
                if(data.client_id > 0){
                    return '<div class="form-group float-right"><button class="btn btn-outline-primary mr-2" onclick="showEditPICModal(\''+data.id+'\',\''+data.phone_number+'\',\''+data.client_id+'\')"><span class="fa fa-pencil"></span> Edit PIC</button><button class="btn btn-outline-success mr-2" onclick="showEditPhoneNumberModal(\''+data.id+'\',\''+data.phone_number+'\',\''+data.client_id+'\')"><span class="fa fa-pencil"></span> Edit Phone Number</button><button class="btn btn-outline-danger" onclick="clearDID(\''+data.id+'\')"><span class="fa fa-refresh"></span> Clear</button></div>';
                }else{
                    return '<button class="btn btn-outline-dark float-right" disabled onclick="clearDID(\''+data.id+'\')"><span class="fa fa-refresh"></span> Clear</button>';
                }
            }, "orderable": false, "searchable": false },
            
        ],
    "order" :[[ 0, 'asc' ]]
})

function showAddClientModal(id, phone_number){
    $('#myModal').modal('show');
    $('[name="did"]').val(id);
    $('[class="phone"]').html(phone_number);
}

$('#addClient').on('click', function(){
    addClientDID()
})

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

$('#editPIC').on('click', function(){
    
    editPICDID()
})


let addClientDID = () => {
    console.log($('#formPIC [name="pic[0][name]"]').val());
    
    // var pic = [[],[],[],[],[],[]];
    var pic = [];
    for(var x = 0; x <= 5; x++){
        pic.push({
            name:$('#formPIC [name="pic['+x+'][name]"]').val(),
            number:$('#formPIC [name="pic['+x+'][number]"]').val(),
            email:$('#formPIC [name="pic['+x+'][email]"]').val()
        });
    }

    console.log(pic);
    // pic = JSON.stringify(pic);
    // console.log(JSON.stringify(pic));

    let client = $('#formPIC [name="client_id"]').val();
    let plan = $('#formPIC [name="plan_id"]:checked').val();
    let notes = $('#formPIC [name="notes"]').val();
    let did = $('#formPIC [name="did"]').val();

    console.log(notes);
    

    Swal({ 
        title: 'Are you sure you want to add this number to this client?', 
        text: "Phone number will be set for this client!", 
        type: 'warning', 
        showCancelButton:true, 
        confirmButtonColor: '#3085d6', 
        cancelButtonColor: '#d33', 
        confirmButtonText: 'Yes, add it!' 
    }).then((result)=> { 
        if (result.value) {
            axios.put('{{route("phone-number.addClient")}}', { id: did, client_id: client, plan_id : plan, notes : notes, pic : pic }, config).then(res => {
                console.log(res.data.data.message);
                window.location = res.data.additional.redirect;
            }).catch(err => {
                $('.newerror').remove();
                console.log(err.response);
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: JSON.stringify(err.response.data.data.message),
                    // footer: '<a href>Why do I have this issue?</a>'
                })
            });
        } 
    })
}

let client = $("select[name='client_id']")

    $("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
        }
    });

    client.on('select2:select', function (e) {
            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);
            });
        });

    client.on("select2:unselect", function (e) { 
            
        })

    let radioplan = (data) => {
        return '<div class="callout callout-info">\
                        <div class="radio">\
                        <label>\
                        <input type="radio" name="plan_id" id="optionsRadios'+data.id+'" value="'+data.id+'">\
                        '+data.product_name+'\
                        <ul>\
                            <li>Expired At: '+data.expired+'</li>\
                            <li>Quota Meeting Room(s): '+data.quota.meeting_room_hours+'</li>\
                        </ul>\
                        </label>\
                    </div></div>'
    }

let editPhoneNumber = () => {
    var client_id = $('#formEditPhone [name="client_id"]').val();
    var did = $('#formEditPhone [name="phone_number_id"]').val();
    var extension = $('#formEditPhone [name="extension"]').val();
    var country_code = $('#formEditPhone [name="country_code"]').val();
    var area_code = $('#formEditPhone [name="area_code"]').val();
    console.log(extension);

    Swal({ 
        title: 'Are you sure to edit this number?', 
        text: "Phone number will be set for this phone number!", 
        type: 'warning', 
        showCancelButton:true, 
        confirmButtonColor: '#3085d6', 
        cancelButtonColor: '#d33', 
        confirmButtonText: 'Sure!' 
    }).then((result)=> { 
        if (result.value) {
            axios.put('{{route("phone-number.updatePhoneNumber")}}', { id: did, client_id: client_id, extension : extension, country_code : country_code, area_code : area_code }, config).then(res => {
                console.log(res.data.data.message);
                window.location = res.data.additional.redirect;
            }).catch(err => {
                $('.newerror').remove();
                console.log(err.response);
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: JSON.stringify(err.response.data.data.message),
                    // footer: '<a href>Why do I have this issue?</a>'
                })
            });
        } 
    })
}
    
let editPICDID = () => {
    
    var client_id = $('#formEditPIC [name="client_id"]').val();
    var did = $('#formEditPIC [name="phone_number_id"]').val();
    var notes = $('#formEditPIC [name="notes"]').val();
    console.log(notes);

    var pic = [];
    for(var x = 0; x <= 5; x++){
        pic.push({
            id:$('#formEditPIC [name="pic['+x+'][id]"]').val(),
            name:$('#formEditPIC [name="pic['+x+'][name]"]').val(),
            number:$('#formEditPIC [name="pic['+x+'][number]"]').val(),
            email:$('#formEditPIC [name="pic['+x+'][email]"]').val(),
        });
    }

    console.log(pic);

    Swal({ 
        title: 'Are you sure you want to add this number to this client?', 
        text: "Phone number will be set for this client!", 
        type: 'warning', 
        showCancelButton:true, 
        confirmButtonColor: '#3085d6', 
        cancelButtonColor: '#d33', 
        confirmButtonText: 'Yes, add it!' 
    }).then((result)=> { 
        if (result.value) {
            axios.put('{{route("phone-number.updatePIC")}}', { did: did, client_id: client_id, notes : notes, pic : pic }, config).then(res => {
                console.log(res.data.data.message);
                window.location = res.data.additional.redirect;
            }).catch(err => {
                $('.newerror').remove();
                console.log(err.response);
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: JSON.stringify(err.response.data.data.message),
                    // footer: '<a href>Why do I have this issue?</a>'
                })
            });
        } 
    })
}

function removePIC(PICID){
    
    var id = PICID-1;
    var picid = $('#formEditPIC [name="pic['+id+'][id]"]').val();
    // id = id - 1;
    console.log(picid);
    Swal({ 
        title: 'Are you sure you want to remove this PIC?', 
        text: "PIC will be removed for this Phone Number!", 
        type: 'warning', 
        showCancelButton:true, 
        confirmButtonColor: '#3085d6', 
        cancelButtonColor: '#d33', 
        confirmButtonText: 'Yes, add it!' 
    }).then((result)=> { 
        if (result.value) {
            axios.put('{{route("phone-number.removePIC")}}', { id: picid }, config).then(res => {
                console.log(res.data.data.message);
                window.location = res.data.additional.redirect;
            }).catch(err => {
                $('.newerror').remove();
                console.log(err.response);
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: JSON.stringify(err.response.data.data.message),
                    // footer: '<a href>Why do I have this issue?</a>'
                })
            });
        } 
    })
}


function clearDID(id){
    console.log(id);
    let formBodyData = id;

    Swal({ 
        title: 'Are you sure you want to clear this number?', 
        text: "You won't be able to redo it once it's cleared!", 
        type: 'warning', 
        showCancelButton:true, 
        confirmButtonColor: '#3085d6', 
        cancelButtonColor: '#d33', 
        confirmButtonText: 'Yes, clear it!' 
    }).then((result)=> { 
        if (result.value) {
            axios.put('{{route("phone-number.flushDID")}}', { id: id}, config).then(res => {
                console.log(res.data);
                window.location = res.data.additional.redirect;
            }).catch(err => {
                $('.newerror').remove();
                console.log(err);
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: err.response.data.message,
                    // footer: '<a href>Why do I have this issue?</a>'
                })
            });
        } 
    })
}

function showEditPhoneNumberModal(id, phone_number, client_id){
    $("body").addClass("loading");
    $('#EditPhoneModal').modal('show');
    $('[name="phone_number_id"]').val(id);
    $('[name="client_id"]').val(client_id);
    $('[class="phone"]').html(phone_number);

    axios.get('{{route("phone-number.getPIC.datatable")}}?id='+id+'&status=1', {}, config).then(res => {
         $("body").removeClass("loading");
        console.log(res.data.data);
        
        $('#EditPhoneModal [name="extension"]').val(res.data.data.extension);
        $('#EditPhoneModal [name="country_code"]').val(res.data.data.country_code);
        $('#EditPhoneModal [name="area_code"]').val(res.data.data.area_code);

        // window.location = res.data.additional.redirect;
    }).catch(err => {
        $('.newerror').remove();
        console.log(err);
        Swal({
            type: 'error',
            title: 'Oops...',
            text: err.response.data.message,
            // footer: '<a href>Why do I have this issue?</a>'
        })
    });
}

function showEditPICModal(id, phone_number, client_id){
    $("body").addClass("loading");
    $('#PICModal').modal('show');
    $('[name="phone_number_id"]').val(id);
    $('[name="client_id"]').val(client_id);
    $('[class="phone"]').html(phone_number);

    axios.get('{{route("phone-number.getPIC.datatable")}}?id='+id+'&status=1', {}, config).then(res => {
         $("body").removeClass("loading");
        console.log(res.data.data);
        
        $('#formEditPIC [name="notes"]').val(res.data.data.notes);
        var x = 0
        res.data.data.data.forEach(res => {
            $('[name="pic['+x+'][id]"]').val(res.id);
            $('[name="pic['+x+'][name]"]').val(res.pic_name);
            $('[name="pic['+x+'][number]"]').val(res.pic_number);
            $('[name="pic['+x+'][email]"]').val(res.pic_email);
            x++;
        });

        // window.location = res.data.additional.redirect;
    }).catch(err => {
        $('.newerror').remove();
        console.log(err);
        Swal({
            type: 'error',
            title: 'Oops...',
            text: err.response.data.message,
            // footer: '<a href>Why do I have this issue?</a>'
        })
    });
}



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

    console.log(formBodyData);

    // Add extension to table
    Swal({ 
        title: 'Are you sure you want to add this number?', 
        text: "You won't be able to delete it once it's added!", 
        type: 'warning', 
        showCancelButton:true, 
        confirmButtonColor: '#3085d6', 
        cancelButtonColor: '#d33', 
        confirmButtonText: 'Yes, add it!' 
    }).then((result)=> { 
        if (result.value) {
            axios.post('{{route("phone-number.store")}}', formBodyData, config).then(res => {
                console.log(res.data);
                window.location = res.data.additional.redirect;
            }).catch(err => {
                console.log(err.response.data.data.message);
                $('.newerror').remove();

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

$('#PICModal').on('hidden.bs.modal', function () {
    // do something…
    console.log("asd");
    $('#PICModal')
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();

    $('#myModal')
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
    console.log("qwe");
    $('#PICModal')
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();

    $('#myModal')
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})


</script>
@endsection