<section class="container" style="padding-bottom: 2rem;">
    <div class="card bg-light-transparent">
        <div class="card-header bg-light" <?php if(strtolower($this->logged_module['role'])!='admin') echo 'hidden'; ?> >
            <div class="float-left">
                <?php if($this->logged_module['role'] == 'admin'): ?>
                    <button onclick="openPolicyModal();" type="button" class="btn btn-outline-dark btn-sm"><i class="fa fa-plus"></i> Add Policies</button>
                <?php endif; ?>
                <button id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm" data-toggle="collapse" data-target="#collapseFilter"><i class="fas fa-filter"></i> Show Filters</button>
            </div>
            <div class="float-right">
                <nav>
                    <div class="nav nav-tabs btn-group btn-group-sm" role="tablist">
                        <a class="btn btn-outline-dark active" id="table-view-tab" data-toggle="tab" href="#tableView" role="tab" aria-controls="nav-table" aria-selected="true" data-tooltip="tooltip" title="Show List View"><i class="fas fa-list"></i></a>
                        <a class="btn btn-outline-dark" id="card-view-tab" data-toggle="tab" href="#cardView" role="tab" aria-controls="nav-card" aria-selected="false" data-tooltip="tooltip" title="Show Card View"><i class="fas fa-th-large"></i></a>
                    </div>
                </nav>
            </div>
        </div>
        <div class="collapse" id="collapseFilter">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card no-shadow">
                            <div class="card-body">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, sed. Veritatis fugiat quasi expedita accusantium inventore quo dolor magnam. Ex soluta itaque quibusdam illum veritatis earum odio porro corrupti enim.
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card no-shadow">
                            <div class="card-body">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae a, quae fugiat tempora animi ipsam? Vero distinctio et tenetur earum quod, rem, adipisci hic explicabo ipsam dolore nulla cumque magnam.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
                <div class="card-body">
                    <div class="card no-shadow">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="table_forms" class="table table-bordered table-hover">
                                    <thead>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Category</th>
                                        <th></th>
                                    </thead>
                                    <tbody>
                                    <?php if($policies): ?>
                                        <?php foreach($policies as $policy): ?>
                                            <tr>
                                                <td><a target="_blank" href="<?php echo base_url($policy['file_location'].$policy['file_name']); ?>"><?php echo $policy['title']; ?></a></td>
                                                <td><?php echo $policy['description']; ?></td>
                                                <td><?php echo $policy['category']; ?></td>
                                                <td class="text-center">
                                                    <div class="btn-group btn-group-sm" role="group">
                                                        <a download href="<?php echo base_url($policy['file_location'].$policy['file_name']); ?>" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Download Policy"><i class="far fa-arrow-alt-circle-down"></i></a>
                                                        <?php if($this->logged_module['role'] == 'admin'): ?>
                                                            <button type="button" class="btn btn-outline-dark" onclick="openPolicyModal(<?php echo $policy['id']; ?>)" data-trigger="hover" data-tooltip="tooltip" title="Edit Policy"><i class="far fa-edit"></i></button>
                                                            <button type="button" class="btn btn-outline-dark" onclick="deletePolicy(<?php echo $policy['id']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete Policy"><i class="far fa-trash-alt"></i></button>
                                                        <?php endif; ?>
                                                    </div>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="cardView" role="tabpanel" aria-labelledby="nav-card-tab">
                <div class="card-body">
                <?php foreach($categories as $cat): ?>
                    <div class="card no-shadow bg-dark-transparent">
                        <div class="card-header bg-dark text-white">
                            <h5 class="card-title"><?php echo $cat['category']; ?></h5>
                        </div>
                        <div class="card-body">
                            <?php if($policies): ?>
                                <div class="row">
                                    <?php $count = 0; ?>
                                    <?php foreach($policies as $policy): ?>
                                        <?php if($policy['category_id'] == $cat['id']): ?> 
                                            <?php if($count==3): echo "<div class='w-100' style='padding-bottom: 2rem;'></div>"; $count = 0; endif; ?>
                                            <?php $count++; ?>
                                            <div class="col-4">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <div class="float-left">
                                                            <h5 class="card-title"><a target="_blank" href="<?php echo base_url($policy['file_location'].$policy['file_name']); ?>"><?php echo $policy['title']; ?></a></h5>
                                                        </div>
                                                        <div class="float-right">
                                                            <div class="btn-group btn-group-sm" role="group">
                                                                <a download href="<?php echo base_url($policy['file_location'].$policy['file_name']); ?>" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Download Form"><i class="far fa-arrow-alt-circle-down"></i></a>
                                                                <?php if($this->logged_module['role'] == 'admin'): ?>
                                                                    <button type="button" class="btn btn-outline-dark" onclick="openFormModal(<?php echo $policy['id']; ?>)" data-trigger="hover" data-tooltip="tooltip" title="Edit Form"><i class="far fa-edit"></i></button>
                                                                    <button type="button" class="btn btn-outline-dark" onclick="deleteForm(<?php echo $policy['id']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete Form"><i class="far fa-trash-alt"></i></button>
                                                                <?php endif; ?>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <p class="card-text"><?php echo $policy['description']; ?></p>
                                                        <!-- <p class="card-text"><?php echo $policy['dept_name'].' ('.$policy['dept_branch_name'].')'; ?></p> -->
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="w-100" style="padding-top: 0.75rem; padding-bottom: 0.75rem;"></div>
                <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="policyModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="policy-modal-title">New Policy</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="policyForm" class="form">
                <div class="modal-body">
					<div class="col" hidden>
						<div class="form-group">
							<label for="form_id">ID</label>
							<input type="text" class="form-control" name="policy_id" id="policy_id" value="">
						</div>
                    </div>
					<div class="form-row">
                        <div class="col">
                            <div class="form-group">
                                <label for="policy_category">Category</label>
                                <select required data-parsley-error-message="Policy category is required." class="select form-control" name="policy_category" id="policy_category">
                                    <option value="">Choose</option>
                                    <!-- <?php foreach($categories as $cat): ?>
                                        <optgroup label="<?php echo $cat['category']; ?>">
                                            <?php foreach($sub_categories as $sub_cat): ?>
                                                <?php if($sub_cat['parent_id'] == $cat['id']): ?>
                                                    <option value="<?php echo $cat['id']; ?>"><?php echo $sub_cat['category']; ?></option>
                                                <?php endif; ?>
                                            <?php endforeach; ?>
                                        </optgroup>  
                                    <?php endforeach; ?> -->
                                    <?php foreach($categories as $cat): ?>
                                        <option value="<?php echo $cat['id']; ?>"><?php echo $cat['category']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <small class="form-text text-muted">Choose category for policy.</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="policy_title">Title</label>
                        <input type="text" required data-parsley-error-message="Title is required." class="form-control" name="policy_title" id="policy_title" placeholder="Title">
                    </div>
                    <div class="form-group">
                        <label for="policy_description">Description</label>
                        <input type="text" class="form-control" name="policy_description" id="policy_description" placeholder="Policy Description">
                    </div>
                    <div class="form-group">
                        <label for="policy_file">File Upload</label>
                        <input type="file" required data-parsley-error-message="Policy file is required." class="form-control" name="policy_file" id="policy_file" aria-describedby="policyHelp">
                        <small id="policyHelp" class="form-text text-muted">The system only accept the following file formats: pdf, doc, docx</small>
                    </div>
                </div>
                <div class="modal-footer">
                   <div class="btn-group float-right">
						<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
						<button type="button" id="modalSubmitBtn" onclick="uploadPolicy();" class="btn btn-light">Save</button>
					</div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $('#collapseFilter').on('show.bs.collapse', function () {
        $('#btnShowFilters').addClass('active');
    })
    $('#collapseFilter').on('hide.bs.collapse', function () {
        $('#btnShowFilters').removeClass('active');
    })

    function openPolicyModal(id)
    {
        if(id != null)
        {
            clearForm("#policyForm");

            $.ajax({
                url: "<?php echo base_url('hr/policy/getPolicies'); ?>",
				type: "POST",
				data: {id : id},
				dataType: "JSON",
				success: function(data) {
					if(data.status == 'Success')
					{
                        var policy = data.policy;
                        $('#policy-modal-title').html('Update Policy');
                        $('#modalSubmitBtn').attr('onclick', 'updatePolicy()');
                        $('#policy_file').attr('required', false);

                        $('#policy_id').val(id);
                        $('#policy_category').val(policy.category_id).trigger('change.select2');
                        $('#policy_title').val(policy.title);
                        $('#policy_description').val(policy.description);
					}
				}
            });
        }
        else
        {
            $('#policy-modal-title').html('Add New Policy');
            $('#policy_file').attr('required', true);
            $('#modalSubmitBtn').attr('onclick', 'uploadPolicy()');

            clearForm("#policyForm");
        }

        $('#policyModal').modal('show');
    }

    function uploadPolicy()
	{
		validateForm("#policyForm", "Are you sure you want to add this policy?", function(){
            $("#modalSubmitBtn").attr('disabled', true).append("&nbsp;&nbsp;<i class='fas fa-spinner fa-spin'>");

			var form_data = new FormData();

			form_data.append("category_id", $('#policy_category').val());
			form_data.append("title",  $('#policy_title').val());
			form_data.append("description",  $('#policy_description').val());
            
			form_data.append("policy", $('#policy_file').prop('files')[0]);

			$.ajax({
				url: "<?php echo base_url('hr/policy/uploadPolicy'); ?>",
				type: "POST",
				data: form_data,
				dataType: "JSON",
				processData: false,
				contentType: false,
				success: function(data) {
					if(data.status == 'Success')
					{
						$('#policyModal').modal('hide');
						
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						location.reload();
					}
				}
			});
		});
	}

    function updatePolicy()
    {
        validateForm("#policyForm", "Are you sure you want to update this policy?", function(){
            $("#modalSubmitBtn").attr('disabled', true).append("&nbsp;&nbsp;<i class='fas fa-spinner fa-spin'>");

			var form_data = new FormData();

			form_data.append("id", $('#policy_id').val());
			form_data.append("category_id",  $('#policy_category').val());
			form_data.append("title",  $('#policy_title').val());
			form_data.append("description",  $('#policy_description').val());

            if($('#policy_file').get(0).files.length > 0){
                form_data.append("form", $('#policy_file').prop('files')[0]);
            }
             
			$.ajax({
				url: "<?php echo base_url('hr/policy/updatePolicy'); ?>",
				type: "POST",
				data: form_data,
				dataType: "JSON",
				processData: false,
				contentType: false,
				success: function(data) {
					if(data.status == 'Success')
					{
						$('#formModal').modal('hide');
						
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						location.reload();
					}
				}
			});
		});
    }

    function deletePolicy(id)
	{
		toastConfirm("Are you sure you want to delete this policy?", function(){
			$.ajax({
				type: 'POST',
				url: '<?php echo base_url('hr/policy/deletePolicy'); ?>',
				data: {
					'id' : id
				},
				dataType: 'JSON',
				success: function(data) {
					if(data.status == 'Success')
					{
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						location.reload();
					}
				}
			});
		});
	}

    function clearForm(e)
	{
		$(e).parsley().reset();

		$(e).find("input, textarea").val("");
		$(e).find("select").val("").trigger('change.select2');
	}
</script>