<section class="container" style="padding-bottom: 2rem;">
	<div class="card bg-light-transparent">  
        <div class="card-header bg-white">
            <h5>Panel Clinic Claim</h5>
            <a href="#" class="btn btn-outline-dark btn-sm" title="Add New Panel Clinic" data-toggle="modal" data-target="#add_panel_claim">
                <i class="fa fa-plus"></i> Add New Claim Detail
            </a>
            <a href="<?php echo base_url('hr/claim/printClaimDetail/'.$this->uri->segment(4)); ?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print Panel Clinic">
                <i class="fa fa-print"></i>Print
            </a>
        </div>

        <div class="card-body">
            <div class="card no-shadow">
                <div class="card-body">
                    <table class="table table-hover table-bordered p-0 m-0">
                    	<thead>
                    		<tr>
                    			<th class="text-center">#</th>
                    			<th class="text-center">Date of Treatment</th>
                    			<th class="text-center">Employee Name/ Patient(Relation)</th>
                                <th class="text-center">IC No.</th>
                    			<th class="text-center">Treatment</th>
                    			<th class="text-center">Amount</th>
                    			<th class="text-center">Action</th>
                    		</tr>
                    	</thead>
                        <tbody>
                            <?php $total_amount = 0; ?>
                            <?php if(!empty($claim_details)) foreach ($claim_details as $key => $claim_detail): ?>
                            <?php $total_amount += $claim_detail->amount; ?>
                            <tr>
                                <td class="text-center"><?php echo $key+1; ?></td>
                                <td class="text-center"><?php echo date('d-F-Y',strtotime($claim_detail->date)); ?></td>
                                <td class="text-center"><?php echo $claim_detail->patient_name; ?></td>
                                <td class="text-center"><?php echo $claim_detail->patient_ic_no; ?></td>
                                <td class="text-center"><?php echo $claim_detail->treatment; ?></td>
                                <td class="text-center"><?php echo ($claim_detail->amount)?'RM'.number_format($claim_detail->amount,2):null; ?></td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#edit_panel_claim" data-placement="top" title="Edit" onclick="editModal(this)" data-content="<?php echo base64_encode(json_encode($claim_detail)); ?>">
                                            <i class="fas fa-edit text-white"></i>
                                        </a>
                                        <a class="btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" data-counter="<?php echo $claim_detail->id; ?>" title="delete" onclick="removeDetail(this)">
                                            <i class="fas fa-trash-alt text-white"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach ?>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5" class="text-center"><b>Total (RM)</b></td>
                                <td class="text-center">
                                    <?php echo 'RM'.number_format($total_amount,2); ?>
                                </td>
                                <td class="p-0"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>        
    </div>
</section>

<!-- Modal add claim detail -->
<div class="modal fade" id="add_panel_claim" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Panel Clinic Claim Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form method="post" action="<?php echo base_url('hr/claim/addPanelClaimDetail/'); ?>">
                <div class="modal-body">

                	<div class="row form-group">
                        <div class="col">
                            <input type="hidden" class="form-control" name="panel_claim_id" id="add-clinic-id" value="<?php echo $this->uri->segment(4); ?>">
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col">
                            <label><b>Date of Treatment</b> <span class="text-danger">*</span></label>               
                            <input required type="text" class="datepicker form-control" name="date" id="add-date" placeholder="Enter Date" autocomplete="off">
                        </div>
                        <div class="col">
                            <label><b>Claim Type</b></label>
                            <select id="add-claim-type" name="claim_type" type="text" class="form-control" onChange="typeChange(this)">
                                <option value="-1" selected="selected" data-description="" >Select Claim Type</option>
                                <?php foreach ($claim_types as $key => $type): ?>
                                    <option value="<?php echo $type->id; ?>" data-description="<?php echo $type->description; ?>"><?php echo $type->code; ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label><b>Description</b></label>
                        <textarea class="form-control text-danger" rows="3" id="add-claim-description" disabled style="resize:none;"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label><b>Search [Name/ Patient/ IC]</b><span class="text-danger">*</span></label> 
                        <div class="input-group mb-2">
                            <input type="text" class="form-control dropdown-toggle dropdown-toggle-split" id="add-search" placeholder="[Name/ Patient/ IC]" onkeyup="searchPatientInfomation(this)" data-toggle="dropdown" data-flip="false">
                            <div class="input-group-prepend">
                              <button type="button" class="btn btn-success"><i class="fas fa-search"></i></button>
                            </div>


                            <div class="dropdown-menu" style="width:100%;" id="add-dropdown-menu">
                                
                            </div>
                        </div>
                    </div>

                    <div class=" form-group">
                        <label><b>Employee Name </b><span class="text-danger">*</span></label>               
                        <input required type="text" class="form-control" name="employee_name" id="add-employee-name" placeholder="Enter Employee Name">
                        <input type="hidden" class="form-control" name="employee_id" id="add-employee-id" placeholder="Enter Employee id">
                    </div>

                    <div class="form-group">
                        <label><b>Employee IC No</b><span class="text-danger">*</span></label>
                        <input required type="text" class="form-control" name="employee_ic" id="add-employee-ic" placeholder="Enter Employee IC No">
                    </div>

                    <div class="form-row">
                        <div class="col">
                            <label><b>Patient Name</b></label><br>
                            <input required type="text" class="form-control" name="patient_name" id="add-patient-name" placeholder="Enter Employee Name">
                        </div>
                        <div class="col">
                            <label><b>Relation</b></label>
                            <select id="add-relation" name="relation" type="text" class="form-control">
                                <option value="0" selected="selected">Select Relation</option>
                                <option value="0">Self</option>
                                <?php if(!empty($relations)) foreach ($relations as $key => $relation): ?>
                                    <option value="<?php echo $relation['id']; ?>"><?php echo $relation['relations']; ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col">
                            <div class=" form-group">
                                <label><b>Patient IC No.</b><span class="text-danger">*</span></label>               
                                <input required type="text" class="form-control" name="patient_ic" id="add-patient-ic" placeholder="Enter Employee Name" >
                            </div>
                        </div>
                        <div class="col">
                            <div class=" form-group">
                                <label><b>Treatment</b> <span class="text-danger">*</span></label>               
                                <input required type="text" class=" form-control" name="treatment" id="add-treatment" placeholder="Enter Treatment">
                            </div>
                        </div>
                    </div>

                    <div class=" form-group">
                        <label><b>Amount</b><span class="text-danger">*</span></label>               
                        <div class="input-group mb-2">
                            <div class="input-group-prepend">
                              <div class="input-group-text">RM</div>
                            </div>
                            <input type="text" class="form-control" name="amount" id="add-amount" placeholder="Amount">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" type="button"  class="btn btn-success btn-sm" style="margin-bottom:15px; width: 200px;">
                        <i class="fa fa-plus"></i> Add
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" style="margin-bottom:15px; width: 200px;" data-dismiss="modal">
                        <i class="fa fa-ban"></i> Cancel
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>
<!-- Modal add claim detail -->

<!-- modal edit panel claim -->
<div class="modal fade" id="edit_panel_claim" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Panel Clinic Claim</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" action="<?php echo base_url('hr/claim/editPanelClaimDetail') ?>">
                <div class="modal-body">  

                    <div class="row form-group">
                        <div class="col">
                            <input type="hidden" class="form-control" name="panel_claim_id" id="edit_panel_claim_id" value="<?php echo $this->uri->segment(4); ?>">
                            <input type="hidden" class="form-control" name="detail_id" id="edit_detail_id" >
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col">
                            <label><b>Date of Treatment<span class="text-danger">*</span></b></label>               
                            <input required type="text" class="datepicker form-control" name="date" id="edit_date" placeholder="<?php echo date('d-m-Y') ?>" autocomplete="off">
                        </div>
                        <div class="col">
                            <label><b>Claim Type</b></label>
                            <select id="edit-claim-type" name="claim_type" type="text" class="form-control" onChange="typeChange(this)">
                                <option value="-1" selected="selected" data-description="" >Select Claim Type</option>
                                <?php foreach ($claim_types as $key => $type): ?>
                                    <option value="<?php echo $type->id; ?>" data-description="<?php echo $type->description; ?>"><?php echo $type->code; ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label><b>Search [Name/ Patient/ IC]</b><span class="text-danger">*</span></label> 
                        <div class="input-group mb-2">
                            <input type="text" class="form-control dropdown-toggle dropdown-toggle-split" id="edit-search" placeholder="[Name/ Patient/ IC]" onkeyup="searchPatientInfomation(this)" data-toggle="dropdown">
                            <div class="input-group-prepend">
                              <button type="button" class="btn btn-success"><i class="fas fa-search"></i></button>
                            </div>

                            <div class="dropdown-menu" style="width:100%;" id="edit-dropdown-menu">
                                
                            </div>
                        </div>
                    </div>

                    <div class=" form-group">
                        <label><b>Employee Name</b><span class="text-danger">*</span></label>               
                        <input required  type="text" class="form-control" name="employee_name" id="edit_employee_name" placeholder="Enter Employee Name" >
                    </div>

                    <div class="form-group">
                        <label><b>Employee IC No. </b><span class="text-danger">*</span></label>
                        <input required type="text" class="form-control" name="employee_ic" id="edit_employee_ic" placeholder="Enter Employee IC">
                        <input type="hidden" class="form-control" name="employee_id" id="edit_employee_id" placeholder="Enter Employee ID">
                    </div>

                    <div class="form-row">
                        <div class="col">
                            <label for="master_company" class=""><b>Patient Name</b></label><br>
                             <input required type="text" class="form-control" name="patient_name" id="edit_patient_name" placeholder="Enter Patient Name" >
                        </div>
                        <div class="col">
                            <label><b>Relation</b></label>
                            <select id="edit_relation" name="relation" type="text" class="form-control">
                                <option value="-1" selected="selected">Select Relation</option>
                                <?php if(!empty($relations)) foreach ($relations as $key => $relation): ?>
                                    <option value="<?php echo $relation['id']; ?>"><?php echo $relation['relations']; ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col">
                            <div class=" form-group">
                                <label><b>Patient IC No.</b><span class="text-danger">*</span></label>               
                                <input required type="number" class="form-control" name="patient_ic_no" id="edit_patient_ic_no" placeholder="Enter Patient IC No" >
                            </div>
                        </div>
                        <div class="col">
                            <div class=" form-group">
                                <label><b>Treatment</b><span class="text-danger">*</span></label>               
                                <input required type="text" class="form-control" name="treatment" id="edit_treatment" placeholder="Enter Treatment">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label><b>Amount</b><span class="text-danger">*</span></label>               
                        <div class="input-group mb-2">
                            <div class="input-group-prepend">
                              <div class="input-group-text">RM</div>
                            </div>
                            <input type="text" class="form-control" placeholder="Enter Amount" name="amount" id="edit_amount">
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="submit" type="button"  class="btn btn-success btn-sm" style="margin-bottom:15px; width: 200px;"><i class="fa fa-save"></i> save</button>
                    <button type="button" class="btn btn-danger btn-sm" style="margin-bottom:15px; width: 200px;" data-dismiss="modal"><i class="fa fa-ban"></i> Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- modal edit panel claim -->

<script>
    function typeChange(elem){
        var description = $(elem).find(':selected').data('description');
        $('#add-claim-description').val(description);
    }

    /* searching patient name */
    function searchPatientInfomation(elem){
        $.ajax({
            url: '<?php echo base_url('/hr/claim/searchPatient/'); ?>',
            type: 'POST',
            data:{search_field:$(elem).val()},
            dataType: 'JSON',
            success: function(data){
                console.log(data);
                $('#add-dropdown-menu').empty();
                $('#edit-dropdown-menu').empty();

                $(data).each(function(index,value){
                    if(index <= 4){ //only display 5 list of name
                        if(value.family_name){
                            var dropdownItem = '<a class="dropdown-item" onclick="selectDropdown(this)" \
                            data-patient="'+value.family_name+'" data-employee="'+value.staff_name+'" \
                            data-relation="'+value.relation+'" data-ic_no="'+value.family_ic_no+'" data-emp_ic_no="'+value.staff_ic_no+'" data-emp_id="'+value.staff_id+'">\
                            <b>Patient : </b>'+value.family_name+'('+value.family_ic_no+'), <b>Employee : </b>'+value.staff_name+'('+value.staff_ic_no+')\
                            </a>';
                        }else{
                            var dropdownItem = '<a class="dropdown-item" onclick="selectDropdown(this)" \
                            data-patient="'+value.staff_name+'" data-employee="'+value.staff_name+'" \
                            data-relation="'+value.relation+'" data-ic_no="'+value.staff_ic_no+'" data-emp_ic_no="'+value.staff_ic_no+'" data-emp_id="'+value.staff_id+'">\
                            <b>Patient & Employee : </b>'+value.staff_name+'('+value.staff_ic_no+')\
                            </a>';
                        }

                         $('#add-dropdown-menu').append(dropdownItem);
                        $('#edit-dropdown-menu').append(dropdownItem);
                    }
                });
            }
        });
    }

    function selectDropdown(elem){
        var patient     = $(elem).data('patient');
        var family      = $(elem).data('employee');
        var relation    = $(elem).data('relation');
        var ic_no       = $(elem).data('ic_no');
        var emp_ic_no   = $(elem).data('emp_ic_no');
        var emp_id      = $(elem).data('emp_id');

        $('#add-employee-name').val(family);$('#edit_employee_name').val(family);
        $('#add-patient-name').val(patient);$('#edit_patient_name').val(patient);
        if(relation){
            $('#add-relation').val(relation);$('#edit_relation').val(relation);
        }else{
            $('#add-relation').val(0);$('#edit_relation').val(0);
        }
        
        $('#add-patient-ic').val(ic_no);$('#edit_patient_ic_no').val(ic_no);
        $('#add-employee-ic').val(emp_ic_no);$('#edit_employee_ic').val(emp_ic_no);
        $('#add-employee-id').val(emp_id);$('#edit_employee_id').val(emp_id);
    }
    /* searching patient name */

    function editModal(elem) {
        var content = JSON.parse(atob($(elem).data('content')));
        $('#edit_detail_id').val(content.id);
        $('#edit_date').val(content.date);
        $('#edit-claim-type').val(content.claim_type_id);
        $('#edit_employee_name').val(content.employee_name);
        $('#edit_employee_ic').val(content.employee_ic_no);
        $('#edit_employee_id').val(content.staff_id);
        $('#edit_relation').val(content.relation);
        $('#edit_patient_name').val(content.patient_name);
        $('#edit_patient_ic_no').val(content.patient_ic_no);
        $('#edit_treatment').val(content.treatment);
        $('#edit_amount').val(content.amount);
    }

    function removeDetail(elem){
        toastConfirm('Are you sure you want remove this item',function(){
            var url = '<?php echo base_url('/hr/claim/removeClaimDetail/'); ?>';
            var data = {
                id:$(elem).data('counter'),
            };
            var redirect = '<?php echo current_url(); ?>';

            ajxRequest(url, 'POST', data, redirect);
        });
    }
</script>