<div class="container mb-5">
    <div class="card no-shadow">
        <div class="card-body">
            
            <div class="row">
                <div class="col mb-3">
                    <h2>Add Entertainment Claim (Submission <?php echo date('F-Y',strtotime('01-'.$month.'-'.$year)); ?>)</h2>
                </div>
            </div>
            
            <div class="row">
                <div class="col-12 col-md-2">
                    <label><b>Amount</b></label>
                </div>
                <div class="col-12 col-md-4">
                    <input type="text" class="form-control currency_input" id="amount">
                </div>
                <!-- <div class="col-12 col-md-2">
                    <label><b>Type</b></label>
                </div>
                <div class="col-12 col-md-4">
                    <select name="type" class="form-control" id="ent_type">
                        <option value="0">Client</option>
                        <option value="1">Staff</option>
                    </select>
                </div> -->
            </div>

            <div class="row">
                <div class="col-12 col-md-2 mb-3">
                    <label><b>Description</b></label>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mb-3">
                    <textarea name="" cols="30" rows="5" class="form-control" id="description"></textarea>
                </div>
            </div>

            <div class="row">

                <div class="col-12">
                    <b>Attachment</b>
                </div>

                <div class="col-12">
                    <button class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#mdl_attachment_entertainment"><i class="fas fa-plus"></i></button>
                </div>
                
                <div class="col-12 table-responsive">
                    <table class="table table-bordered" id="table-entertainment-attachment">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                
            </div>

            <div class="row">
                <div class="col">
                    <button class="btn btn-success float-right" id="save_entertainment"><i class="fas fa-save"></i> Save</button>
                </div>
            </div>

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

<div class="modal fade" id="mdl_attachment_entertainment" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Upload Attachment</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-12 mb-3">
                <b>Attachment</b>
            </div>
        </div>

        <div class="row">
            <div class="col-12 mb-3">
                <input type="file" id="upload_attachment">
            </div>
        </div>

        <div class="row">
            <div class="col-12 mb-3">
                <b>Description</b>
            </div>
        </div>

        <div class="row">
            <div class="col-12 mb-3">
                <textarea name="" id="description" cols="30" rows="5" 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" onclick="upload_attachment();">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
var attachments = []; 

$(document).ready(function(){
    $('#save_entertainment').click(function(){
        let amount = $('#amount').val();
        let description = $('#description').val();
        let type = $('#ent_type').val();
        let error_message = '';
        let bool = true;

        if(amount <= 0 || amount == null)
        {
            error_message = 'Amount is empty.Please insert some amount to claim.';
            bool = false;
        }

        if(description.length == 0)
        {
            error_message = 'Description cannot be empty.';
            bool = false;
        }

        if(bool == true)
        {
            $.ajax({
                url: '<?php echo base_url('hr/claim/add_entertainment'); ?>',
                type: 'POST',
                data:{
                    claim_id: <?php echo $claim_id; ?>,
                    year:<?php echo $year; ?>,
                    month:<?php echo $month; ?>,
                    user_id:<?php echo $user_id; ?>,
                    amount:amount,
                    description:description,
                    // type:type,
                    attachments:JSON.stringify(attachments)
                },
                dataType: 'JSON',
                success: function(data){
                    window.location.href = '<?php echo base_url('hr/claim/myClaimDetail/'.$year.'/'.$month.'/'.$user_id.'/'.$claim_id); ?>';
                },
                error:function(err){
                    iziToast.error({
                        title: 'Error',
                        message: 'Failed to create entertainment claims.'
                    });
                }   
            });
        }

    });
});


function fill_table_attachment() 
{
    console.log(attachments);
    var table_attachment = $('#table-entertainment-attachment').DataTable();
    table_attachment.clear().draw();    
    $.each(attachments,function(index,value){
        table_attachment.row.add({
            0:value.orig_name,
            1:value.description,
            2:'<button class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i></button>',
        }).draw();
    });
}

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

    $.ajax({
        url: '<?php echo base_url('hr/claim/addAttachment/9'); ?>',
        type: 'POST',
        data:formData,
        contentType:false,       
        cache: false,             
        processData:false,
        dataType: 'JSON',
        success: function(data){
            attachments.push(data);
            fill_table_attachment();
            $('#mdl_attachment_entertainment').modal('hide');
        },
        error:function(data){
            console.log('failed to upload attachment');
        }
    });

}

</script>