
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body"> 
                <style type="text/css">     
                    #datatable-fixedheader thead tr th:nth-child(1), #datatable-fixedheader tbody tr td:nth-child(1) {width: 5% !important; text-align: center;}
                    #datatable-fixedheader thead tr th:nth-child(2),
                    #datatable-fixedheader tbody tr td:nth-child(2){
                        width: 250px !important;
                        max-width: 250px !important;
                    }
                    
                    #datatable-fixedheader tbody tr td:nth-child(2){
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    
                     
                    #datatable-fixedheader thead tr th:nth-child(3),
                    #datatable-fixedheader tbody tr td:nth-child(3){
                        width: 350px !important;
                        max-width: 350px !important;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    #datatable-fixedheader thead tr th:nth-child(4) {width: 15% !important;}
                    #datatable-fixedheader thead tr th:nth-child(5), #datatable-fixedheader tbody tr td:nth-child(5) {width: 10% !important; text-align: center;}
                    
                    #datatable-fixedheader thead tr th:nth-child(6), #datatable-fixedheader tbody tr td:nth-child(6) {width: 10% !important; text-align: left;}
                    #datatable-fixedheader thead tr th:last-child, #datatable-fixedheader tbody tr td:last-child {text-align: center;}
                </style>
                <table id="datatable-fixedheader" class="table table-hover table-bordered dt-responsive nowrap">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Position Title</th> 
                            <th>Experience</th>   
                            <th>Date Time</th> 
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody> 
                    </tbody>
                </table>

                <!-- Add/Edit Modal -->
                <div class="modal fade modal1" id="#modal1" tabindex="-1">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Add Career Position</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div id="form">
                                    <input type="hidden" name="id" id="id">
                                    
                                    <div class="mb-3">
                                        <label class="form-label" for="title">Position Title *</label>
                                        <input type="text" name="title" id="title" class="form-control" required>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label" for="department">Department</label>
                                            <input type="text" name="department" id="department" class="form-control">
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label" for="location">Location</label>
                                            <input type="text" name="location" id="location" class="form-control" value="Rajkot">
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label" for="experience">Experience</label>
                                            <input type="text" name="experience" id="experience" class="form-control">
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-8 mb-3">
                                            <label class="form-label" for="qualification">Qualification</label>
                                            <input type="text" name="qualification" id="qualification" class="form-control">
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label" for="posted_date">Posted Date</label>
                                            <input type="text" name="posted_date" id="posted_date" class="form-control" value="<?php echo date('d-m-Y'); ?>">
                                        </div>
                                    </div>
                                    
                                      <div class="mb-3">
                                                        <label class="form-label" for="description">Description</label>
                                                        <textarea name="description" id="description" class="form-control" rows="3" required></textarea>
                                                    </div>
                                    
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                                        <button type="button" id="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>  
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<?php $this->load->view('includes/footer'); ?>