@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')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
<style>
.ck-content { min-height:400px; max-height:auto; }
</style>
@endsection
@section('content')

<div class="row">
    <div class="col-12 col-md-8">
        <div class="card mb-2">
            <div class="card-header">
                <h3 class="card-title">Invoice ID : {{$invoice_id}}</h3>

                <div class="card-tools">
                  {{-- <button type="button" class="btn btn-tool" data-widget="remove"><i class="fa fa-times"></i></button> --}}
                  <button class="btn btn-outline-info" onclick="sendMail({{$invoice_id}}, '{{$client_data->email}}')"><span class="fa fa-send"></span> Compose</button>
                </div>
            </div>
            
            <div class="row p-4">
                <div class="col-12 mb-1">
                    Client Info & Plan Details : 
                </div>
                <div class="col-12 table-responsive mb-1">
                    <table class="table table-bordered">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">
                                    <strong>
                                        Client ID
                                    </strong>
                                </th>
                                <th scope="col">
                                    <strong>
                                        Client Name
                                    </strong>
                                </th>
                                <th scope="col">
                                    <strong>
                                        Email
                                    </strong>
                                </th>
                                <th scope="col">
                                    <strong>
                                        Contact Number
                                    </strong>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    {{$client_data->clientid}}
                                </td>
                                <td>
                                    {{$client_data->firstname}} {{$client_data->lastname}}
                                </td>
                                <td>
                                    {{$client_data->email}}
                                </td>
                                <td>
                                    {{$client_data->phone}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="col-12 mb-1">
                    Follow Up Details : 
                </div>
                <div class="col-12 table-responsive">

                    <table id="example1" class="table table-bordered table-striped w-100">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">Last Follow Up</th>
                                <th scope="col">Action</th>
                                <th scope="col">Next Follow Up</th>
                                <th scope="col">Operator</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card mb-2">
            <div class="card-header">
                <h3 class="card-title">Create Follow Up</h3>
            </div>
            
            <form role="form" id="form">
                <div class="card-body">
                    <div class="row">                        
                        <div class="col-12">
                            <div class="form-group">
                                <label>Action</label>
                                <br>
                                <select name="action" class="form-control">
                                </select>
                                <input name="clientId" type="hidden" value="{{$client_data->clientid}}">
                            </div>                                
                        </div> 
                        <div class="col-12">
                            <div class="form-group">
                                <label>Result</label>
                                <br>
                                <textarea name="result" class="form-control" rows="4"></textarea>
                            </div>
                        </div>
                        <div class="col-12 mb-2">
                            <div class="form-group">
                                <label>Next Follow Up</label>
                                <br>
                                <input name="next-follow-up" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-info w-100">Save</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form id="formMail" role="form">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Form Mail</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                        <input type="hidden" name="invoice_id">
                        {{-- <div class="form-group">
                            <label for="paid_reference" class="col-form-label">From:</label>
                            <input type="text" class="form-control" id="sending_from" name="sending_from">
                        </div> --}}
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">To:</label>
                            <input type="text" class="form-control" id="sending_to" name="sending_to">
                        </div>
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">Cc:</label>
                            <input type="text" class="form-control" id="sending_cc" name="sending_cc">
                        </div>
                        <div class="form-group">
                            <label for="amount_paid" class="col-form-label">Bcc:</label>
                            <input type="text" class="form-control" id="sending_bcc" name="sending_bcc">
                        </div>
                        <div class="form-group">
                            <label for="date_paid" class="col-form-label">Subject:</label>
                            <input type="text" class="form-control" id="subject" name="subject">
                        </div>                        
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">Message:</label>                        
                            <textarea id="editor1" name="sending_message" style="width: 100%;" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Attach Invoice</label>
                            <div class="input-group">
                                <div class="radio">
                                    <label for="optionsRadios1" style="font-weight:400">
                                        <input type="radio" name="attach" id="optionsRadios1" value="1" checked>
                                        Yes
                                    </label>
                                </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="radio">
                                    <label for="optionsRadios2" style="font-weight:400">
                                        <input type="radio" name="attach" id="optionsRadios2" value="0">
                                        No
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="date_paid" class="col-form-label">Next Follow Up:</label>
                            <input type="text" class="form-control tanggal" id="next_follow_up" name="next_follow_up">
                        </div>                        
                    </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="sendMail">Send</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 src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>

<script>
    let action = $("select[name='action']");
    let nextFollowUp = $("input[name='next-follow-up']");
    let form = $('#form');

    action.select2({
        placeholder: 'Select action ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("invoice.followUpAction")}}',
            dataType: 'json',
            data: function(params) {                
                return {
                    start: 0,
                    length: 25,
                    columns: {
                        0:{
                            name: '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.name};                    
                })

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

            },
            cache: true
        },
        minimumInputLength: 0,
    });

    nextFollowUp.datepicker({
        autoclose: true,
        format: "yyyy-mm-dd"
    });

    form.submit(e => {
        e.preventDefault();

        var formData = new FormData();
        formData.append('invoice_id', '{{$invoice_id}}');
        formData.append('client_id', '{{$client_data->clientid}}');
        formData.append('action', $('select[name="action"]').val());
        formData.append('result', $('textarea[name="result"]').val());
        formData.append('next_follow_up', $('input[name="next-follow-up"]').val());

         axios.post('{{route("invoice.storeFU")}}', formData, config) .then(res => {
            console.log(res.data.status);
            $('#form')[0].reset();
            table.ajax.reload();

        }).catch(err => { 
            console.log(err);
        });
    });

    var table = $('#example1').DataTable({
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "searching" : true,
        "ajax": {
            url: '{{url("/invoice/follow-up-datatable")}}/{{$invoice_id}}',
            data: {
                'columns[0][searchable]':true,
                'columns[0][name]':'op.invoice_id',
                'columns[0][search][value]':'{{$invoice_id}}',
            }
        },
        "columns": [
            {"data": "created_at", "orderable": true, "searchable": false},
            {"data": "action", "orderable": true, "searchable": true},
            {"data": "next_follow_up", "orderable": true, "searchable": false},
            {"data": "created_by", "orderable": true, "searchable": true}
        ],

    });



    // sendmail modal ///////////////
$('.tanggal').datepicker({
    autoclose: true,
    format: "yyyy-mm-dd",
    container: '#exampleModal',
});

var myEditor;
ClassicEditor
    .create(document.querySelector('#editor1'))
    .then(function (editor) {
        // The editor instance
        // console.log( 'Editor was initialized', editor );            
        myEditor = editor;
    })
    .catch(function (error) {
        console.error(error)
    })

$( "#formMail" ).submit(function( e ) {
    e.preventDefault();

    let input = ''
    let bodyFormData = new FormData();
    let inputonject = input.split("&")

    input = $(this).serialize();

    for (const key in inputonject) {
        if (inputonject.hasOwnProperty(key)) {
            var setInput = inputonject[key].split('=')
            bodyFormData.append(setInput[0], setInput[1])
        }
    }

    bodyFormData.append('sending_message', myEditor.getData() != "<p>&nbsp;</p>" ? myEditor.getData() : '')    

    axios.post('{{route("invoice.send-mail-invoice.store")}}', input, config).then(function (response) {
        // console.log(response);        
        Swal({
            type: 'success',
            title: 'Send Success!',
            text: '',
            // footer: '<a href>Why do I have this issue?</a>'
        })
        $('#exampleModal1').modal('hide')
        // table.ajax.reload();
    })
    .catch(function (error) { console.log(error);        
        $('.newerror').remove()
        var msgs = error.response.data.data.message
        $.each(msgs, function (index, value) {
                $('[name="'+index+'"]').after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
            });
    });
})

let sendMail = (invoiceId, email) => {
    $('#sending_to').val(email)
    $('#exampleModal1 [name="invoice_id"]').val(invoiceId)
    $('#exampleModal1').modal('show')
}

let hideMailModal = () => {
    $('.newerror').remove()
    $('#exampleModal1').find("input, textarea").val("");    
    myEditor.setData('');
    $('#sendMail').removeAttr('onlick')
}

$('#exampleModal1').on('hidden.bs.modal', function (e) {
  // do something...
  hideMailModal()
})
</script>
@endsection