<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="openFormModal();" type="button" class="btn btn-outline-dark btn-sm"><i class="fa fa-plus"></i> Add Form</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 class="text-center">Code</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Department</th>
                                        <!-- <th>Category</th> -->
                                        <th></th>
                                    </thead>
                                    <tbody>
                                    <?php if($forms): ?>
                                        <?php foreach($forms as $form): ?>
                                            <tr>
                                                <td class="text-center"><?php echo $form['code']; ?></td>
                                                <td><a target="_blank" href="<?php echo base_url($form['file_location'].$form['file_name']); ?>"><?php echo $form['title']; ?></a></td>
                                                <td><?php echo $form['description']; ?></td>
                                                <td><?php echo $form['dept_name']; ?></td>
                                                <!-- <td><?php echo $form['category']; ?></td> -->
                                                <td class="text-center">
                                                    <div class="btn-group btn-group-sm" role="group">
                                                        <a download href="<?php echo base_url($form['file_location'].$form['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 $form['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 $form['id']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete Form"><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($departments as $dept): ?>
                    <div class="card no-shadow bg-dark-transparent">
                        <div class="card-header bg-dark text-white">
                            <h5 class="card-title"><?php echo $dept['name'].' ('.$dept['branch_name'].')'; ?></h5>
                        </div>
                        <div class="card-body">
                            <?php if($forms): ?>
                                <div class="row">
                                    <?php $count = 0; ?>
                                    <?php foreach($forms as $form): ?>
                                        <?php if($form['department_id'] == $dept['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($form['file_location'].$form['file_name']); ?>"><?php echo $form['title']; ?></a></h5>
                                                        </div>
                                                        <div class="float-right">
                                                            <div class="btn-group btn-group-sm" role="group">
                                                                <a download href="<?php echo base_url($form['file_location'].$form['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 $form['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 $form['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 $form['description']; ?></p>
                                                        <!-- <p class="card-text"><?php echo $form['dept_name'].' ('.$form['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="formModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="form-modal-title">New Form</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="formForm" 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="form_id" id="form_id" value="">
						</div>
                    </div>
					<div class="form-row">
                        <!-- <div class="col">
                            <div class="form-group">
                                <label for="form_category">Category</label>
                                <select required data-parsley-error-message="Form category is required." class="select form-control" name="form_category" id="form_category">
                                    <option value="">Choose</option>
                                    <?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 form.</small>
                            </div>
                        </div> -->
                        <div class="col">
                            <div class="form-group">
                                <label for="form_department">Department</label>
                                <select required data-parsley-error-message="Department is required." class="form-control select" name="form_department" id="form_department">
                                    <option selected value="">Choose</option>
                                    <?php foreach($branches as $branch): ?>
                                        <optgroup label="<?php echo $branch['name']; ?>">
                                            <?php foreach($departments as $dept): ?>
                                                <?php if($dept['branch_id'] == $branch['id']): ?>
                                                    <option value="<?php echo $dept['id']; ?>"><?php echo $dept['name']; ?></option>
                                                <?php endif; ?>
                                            <?php endforeach; ?>
                                        </optgroup>
                                    <?php endforeach; ?>
                                </select>
                                <small class="form-text text-muted">Choose department for form.</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-3">
                            <div class="form-group">
                                <label for="form_code">Form Code</label>
                                <input type="text" required data-parsley-error-message="Form Code is required." class="form-control" name="form_code" id="form_code" placeholder="Code">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="form_title">Title</label>
                                <input type="text" required data-parsley-error-message="Title is required." class="form-control" name="form_title" id="form_title" placeholder="Title">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="form_description">Form Description</label>
                        <input type="text" class="form-control" name="form_description" id="form_description" placeholder="Form Description">
                    </div>
                    <div class="form-group">
                        <label for="form_file">File Upload</label>
                        <input type="file" required data-parsley-error-message="Form file is required." class="form-control" name="form_file" id="form_file" aria-describedby="formHelp">
                        <small id="formHelp" class="form-text text-muted">We only accept the following image formats: jpg, jpeg, bmp, png, gif, svg, ico</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="uploadForm();" 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 openFormModal(id)
    {
        if(id != null)
        {
            clearForm("#formForm");

            $.ajax({
                url: "<?php echo base_url('hr/form/getForms'); ?>",
				type: "POST",
				data: {id : id},
				dataType: "JSON",
				success: function(data) {
					if(data.status == 'Success')
					{
                        var form = data.form;
                        console.log(form.department_id);
                        $('#form-modal-title').html('Update Form');
                        $('#modalSubmitBtn').attr('onclick', 'updateForm()');
                        $('#form_file').attr('required', false);

                        $('#form_id').val(id);
                        $('#form_department').val(form.department_id).trigger('change.select2');
                        $('#form_code').val(form.code);
                        $('#form_title').val(form.title);
                        $('#form_description').val(form.description);
					}
				}
            });
        }
        else
        {
            $('#form-modal-title').html('Add New Form');
            $('#form_file').attr('required', true);
            $('#modalSubmitBtn').attr('onclick', 'uploadForm()');

            clearForm("#formForm");
        }

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

    function uploadForm()
	{
		validateForm("#formForm", "Are you sure you want to add this form?", function(){
			var form_data = new FormData();

			// form_data.append("category", $('#form_category').val());
			form_data.append("department_id",  $('#form_department').val());
			form_data.append("code",  $('#form_code').val());
			form_data.append("title",  $('#form_title').val());
			form_data.append("description",  $('#form_description').val());
            
			form_data.append("form", $('#form_file').prop('files')[0]);

			$.ajax({
				url: "<?php echo base_url('hr/form/uploadForm'); ?>",
				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 updateForm()
    {
        validateForm("#formForm", "Are you sure you want to update this form?", function(){
			var form_data = new FormData();

			form_data.append("id", $('#form_id').val());
			form_data.append("department_id",  $('#form_department').val());
			form_data.append("code",  $('#form_code').val());
			form_data.append("title",  $('#form_title').val());
			form_data.append("description",  $('#form_description').val());

            if($('#form_file').get(0).files.length > 0){
                form_data.append("form", $('#form_file').prop('files')[0]);
            }
             
			$.ajax({
				url: "<?php echo base_url('hr/form/updateForm'); ?>",
				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 deleteForm(id)
	{
		toastConfirm("Are you sure you want to delete this form?", function(){
			$.ajax({
				type: 'POST',
				url: '<?php echo base_url('hr/form/deleteForm'); ?>',
				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>