EVOLUTION-NINJA

Edit File: my_pin_requests.php

<?php echo view('includes/headerSidebar'); ?>

/* Style table */
#datatable {
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px; /* Adjust font size */
    background-color: #fff;
}

/* Header styling */
#datatable thead {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
}

/* Row styling */
#datatable tbody tr {
    border-bottom: 1px solid #ddd;
}

#datatable tbody tr:hover {
    background-color: #f9f9f9; /* Highlight on hover */
}

/* Action buttons */
.crud--buttons .btn {
    margin: 0 5px; /* Small spacing between buttons */
    font-size: 12px; /* Smaller font for buttons */
    padding: 5px 10px; /* Compact button size */
    border-radius: 3px;
}

/* Eye icon button */
.view--butt {
    color: #fff;
    background-color: #17a2b8; /* Bootstrap 'info' color */
    border: none;
}

/* Menu icon button */
.menu--butt {
    color: #fff;
    background-color: #6c757d; /* Bootstrap 'secondary' color */
    border: none;
}

/* Icon sizes */
.fas {
    font-size: 14px;
    vertical-align: middle;
}

/* Serial number column */
#datatable td:first-child {
    text-align: center;
    font-weight: bold;
}
.btn-close {
    background:white;
    border: none;
    appearance: none;
    width: 2em;
    height: 2em;
    opacity: 0.5;
    border-radius:25px;
}
.btn-close::before {
    content: "×";
    font-size: 1.5rem;
    color: #000;
}

.modalform.fullscreen-modal {
            padding: 0 !important;
        }

.modalform.fullscreen-modal .modal-dialog {
            margin: 0;
            width: 100vw;
            max-width: 60vw;
            height: 100vh;
            max-height: 60vh;
            margin:130px 0px 0px 350px;
        }

.modalform.fullscreen-modal .modal-content {
            height: 100%;
            border-radius: 0;
        }

.modalform.fullscreen-modal .modal-body {
            overflow-y: auto;
        }
        .createBtn{
     margin-left:930px;
        }
     
    
</style>
<div id="main" class="p-4">
<section class="home-section fullpage">
    <div class="home-content">
        <i class='bx bx-menu'></i>
        
    </div>

<div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">My Pin Request</h1>
        </div>
    </div>
    <div class="container">
     <div class="row">
        <button type="button" class="btn btn-primary createBtn"  data-bs-toggle="modal" data-bs-target="#fullscreenModal">Create</button>
    </div>
      </div>
      <br><br>
      
      
    
    
    <div class="row">
        <div class="col-sm-12">
         <div class="container deptable">
               <table id="datatable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>SL No</th> 
            <th>ID</th>
            <th>REQUEST ID</th>
            <th>NO OF PINS REQUESTED</th>
            
            <th>SCHEME</th>
            <th>COUNT</th>
            <th>APPROVE STATUS</th>
            <th>PAYMENT STATUS</th>
            <th>REMARKS</th>
            <th>REQUESTED ON</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>
            </div>
    </div>
        
        </div>
        
        
    </div>
    </div>

<div class="modal fade fullscreen-modal modalform" id="fullscreenModal" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="fullscreenModalLabel">MY PIN REQUEST</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
           <form id="pin-request-form">
                  <div class="row">
       
                  <div class="col-sm-6">
                 <label for="">SCHEME</label>
                    
                    <select class="form-control" id="scheme" name="scheme">
                        
                    </select>
               </div>
               <div class="col-sm-6">
                  <label for="">NO OF PIN REQUESTED</label>
                  <input type="text" class="form-control" placeholder="eg:30" name="no_of_pin">
               </div>
            </div>
            <br>
        <div class="row">
             <div class="col-sm-6">
                 <label for="">PAYMENT STATUS</label>
                    <input type="text" class="form-control" placeholder="Payment status"  name="payment_status">
               </div>
        <div class="col-sm-6">
            <label for="">REMARKS</label>
            <input type="text" class="form-control" placeholder="Transaction No" name="remarks">
         </div>
         
       </div>
        <br><br>
          <div class="row">
               <div  style="float:left;margin-left:10px;">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
            </div>
           </div>
        
          
                    </form>
                </div>
            </div>
        </div>

</section>

</div>

</body>

$('#btn-cancel').click(function (e) {
            e.preventDefault();
            $('#form-department')[0].reset();
        })
    })
</script>

},
                        error: function (xhr, textStatus, errorThrown) {
                            console.error(xhr.responseText);
                        }
                    })
            
            })
    
        })
    
    </script>

$(document).ready(function () {
    $.ajax({
        url: '<?php echo base_url("fetch-scheme"); ?>', 
        method: 'GET',
        success: function (response) {
          
            if (response.length > 0) {
                var options = '<option value="">Select Scheme</option>'; 
               
                $.each(response, function (key, value) {
                    options += `<option value="${value.id}">${value.scheme}</option>`;
                });
                $('#scheme').html(options); 
            } else {
                // alert('No funds found');
            }
        },
        error: function (xhr, status, error) {
            console.error("Error fetching scheme:", error);
        }
    });
});
</script>

</html>