<section class="container collapse" id="tncInfo">
    <div class="jumbotron bg-white">
        <h6 class="text-danger">Telephone / Telex / Telegraph / Email</h6>
        <ul>
            <li>
                <b>Business Calls</b>
                <ul>
                    <li>
                        5.6.1.1 All telephone/telex calls made form home or whils overseas on official business will be reimbursed on actual bills
                    </li>
                    <li>
                        5.6.1.2 All claims for telephone, telex and telegraph charges must indicate the purpise of the call and the person contacted
                    </li>
                </ul>
            </li>
            <li>
                <b>Personal Calls</b>
                <ul>
                    <li>
                        5.6.2.1 The company will reimburse staff for personal calls made while on official business trips within the following limits:
                        <table class="table-bordered" width="100%">
                            <thead>
                                <tr>
                                    <th>Type of Call</th>
                                    <th>Local (Malaysia, Singapore and Brunei)</th>
                                    <th>International</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Frequency</td>
                                    <td>Two call for a maximum period of tem minutes per day</td>
                                    <td>One call for maximum period of five (10) minutes every 2 days</td>
                                </tr>
                            </tbody>
                        </table>
                    </li>
                </ul>
            </li>
        </ul>
        <small>Reference : <a href="http://salihin.noip.me/spserp/assets/uploads/hr/tnc/Travel_-_(Revision_2).pdf" target="_blank">Local and Business Travel (Revision no: 2) Effective date : 1st January 2018</a></small>
    </div>
</section>

<section class="container">
    <div class="card no-shadow">
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <h2>Business Calls and Personal Calls <small>(Submission <?php echo date('F-Y',strtotime('01-'.$month.'-'.$year)); ?>)</small> </h2>
                </div>
                <div class="col-2 text-right">
                    <button class="btn btn-sm btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="" type="button" data-toggle="collapse" data-target="#tncInfo" data-original-title="Terms and Condition Reference">
                        <i class="fas fa-info"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="container mb-5">
    <div class="card no-shadow">
        <div class="card-body">
            <div class="row">

                <div class="col-lg-2">
                    <label><b>Amount</b></label>
                </div>
                <div class="col-lg-4">
                    <input type="number" class="form-control" id="amount"/>
                </div>  

            </div>
            
            <div class="row">
                <div class="col">
                    <label><b>Calls</b></label>
                    <div class="row">
                        <div class="col text-right pr-4">
                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#mdl-callInfo"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Client Name</th>
                                <th>Date</th>
                                <th>Duration</th>
                                <th>Contact</th>
                                <th>Type of Call</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <label><b>Attachments</b></label>
                    <div class="row">
                        <div class="col text-right pr-4">
                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#mdl-attachment"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                    <table class="table table-bordered" id="table-attachments">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>


            <div class="row">
                <div class="col text-right">
                    <button class="btn btn-success" onclick="createCalls()"><i class="fas fa-save"></i> Save</button>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- attachements modal -->
<div class="modal fade" id="mdl-attachment" tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Uploading Attachments</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="col">
                <label><b>File</b></label>
                <input type="file" class="form-control" id="attachments_doc">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <label><b>Description</b></label>
                <textarea cols="30" rows="10" class="form-control" id="attachment-description"></textarea>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="uploadAttachment()">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- attachments modal -->

<!-- call info modal -->
<div class="modal fade" id="mdl-callInfo" tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Call Information</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="row">
            <div class="col">
                <label><b>Client Name</b></label>
                <select class="form-control">
                        <?php foreach($customers as $key => $value): ?>
                            <option value="<?php echo $value->customer_id; ?>" ><?php echo $value->name; ?></option>
                        <?php endforeach; ?>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <label><b>Date</b></label>
                <input type="text" class="form-control claimdate" />
            </div>
            <div class="col">
                <label><b>Duration</b></label>
                <!-- <input type="text" class="form-control"> -->
                <div class="input-group mb-3">
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                        <span class="input-group-text">Minutes</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <label><b>Contact</b></label>
                <input type="text" class="form-control"/>
            </div>
            <div class="col">
                <label><b>Type of Call</b></label>
                <select class="form-control">

                    <option>Tye of call </option>
                    
                </select>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <label><b>File</b></label>
                <input type="file" class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <label><b>Description</b></label>
                <textarea cols="30" rows="10" class="form-control"></textarea>
            </div>
        </div>
      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="createCallDetail()">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- call info modal -->


<script>
    var clients         = [];
    var attachments     = [];

    var claim_year      = <?php echo $year; ?>; //2018
    var claim_month     = <?php echo $month; ?>; //8

    var date = new Date();
    var full_start_date = date.setFullYear(claim_year,claim_month-1 , 1);
    var start_claim     = moment(full_start_date).subtract(2,'months').startOf('month').format('DD-MM-YYYY');

    var full_end_date = date.setFullYear(claim_year,claim_month,1);
    var end_claim     = moment(full_end_date).subtract(2,'months').endOf('month').format('DD-MM-YYYY');

    $(document).ready(function(){
        $( ".claimdate" ).datepicker({
            uiLibrary: 'bootstrap4',
            format: 'dd-mm-yyyy',
            autoclose: true,
            changeMonth: true, 
            changeYear: true,
            startDate :start_claim,
            endDate:end_claim
        });
    });


    function createTableAttachment()
    {
        var table   = $('#table-attachments').DataTable();
        table.clear().draw();

        $.each(attachments,function(index,value){

            table.row.add({
                0:value.orig_name,
                1:value.description,
                2:'<button class="btn btn-danger btn-sm" onclick="removeAttachments('+index+')" ><i class="fas fa-trash-alt"></i></button>'
            }).draw();

        });
    }

    function removeAttachments(index)
    {
        attachments.splice(index,1);
        createTableAttachment();
    }

    function uploadAttachment()
    {
    
        formData = new FormData();
        formData.append('files',$('#attachments_doc').prop('files')[0]);
        formData.append('description',$('#attachment-description').val());

        $.ajax({
            url: '<?php echo base_url('hr/claim/addAttachment/74/'); ?>',
            type: "POST",             
            data: formData, 
            contentType:false,       
            cache: false,             
            processData:false,
            dataType: 'JSON',
            success: function(data)
            {
                if(data.status == false)
                {
                    iziToast.error({
                        position: 'bottomRight',
                        title: 'Uploading Attachments Failed',
                        message: data[0].error,
                    });
                }else
                {
                    attachments.push(data);
                    createTableAttachment();

                }


            }
        });

    }


    function createCallDetail()
    {
        // create form submit 
        // let client                  = $().val();
        // let date                    = $().val();
        // let duration_time           = $().val();
        // let duration_measure        = $().val();
        // let caller                  = $().val(); //person who makes the calls
        // let called                  = $().val(); //person who receive the calls
        // let type_of_call            = $().val();
        // let file_attachments        = $().val();
        // let description             = $().val();
        //if file attachments and description fills..upload a
        
    }

    function createCalls()
    {
        let amount              = $('#amount').val();
        let have_caller         = is_calls();
        let have_attachments    = is_attachment();
        if(amount && have_caller && have_attachment)
        {
            console.log('should create attachments');
        }
    }

    function is_calls()
    {
        if(clients.length > 0)
        {
            return true;
        }else{
            iziToast.error({
                position: 'bottomRight',
                title: 'Failed',
                message: 'Detail calls need to be specified',
            });
            return false;
        }

    }


    function is_attachment()
    {
        if(attachments.length > 0)
        {
            return true;
        }else{
            iziToast.error({
                position: 'bottomRight',
                title: 'Failed',
                message: 'Unable to find any attachments',
            });
            return false;
        }
    }
</script>