|
|
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"></head><style>.required{ color: red;}/* Mobile screens - targeting devices with a max width of 767px */@media (max-width: 767px) { #campaignrequestform label{ margin-top: 10px; } }</style> <body> <!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
<div class="wrapper"> <!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end -->
<div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================--> <div class="main-content"> <div class="container-fluid"> <div class="page-header mb-2"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <i class="far fa-calendar-plus bg-blue"></i> <div class="d-inline"> <h5>Registration</h5> <span>C & D Waste Collectors Registrations</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="index"><i class="ik ik-home"></i></a></li> <li class="breadcrumb-item" aria-current="page">C & D Waste Collectors Registrations</li> <!-- <li class="breadcrumb-item active" aria-current="page">Create Campaign</li> --> </ol> </nav> </div> </div> </div> <h4 class="h4 text-right text-mute" style="font-size: 12px;"> Auto refresh in <font id="refresh-countdown">00</font> seconds </h4> <div class="row"> <div class="col-md-12"> <div class="card" style="margin-top: 0px;"> <div class="card-header justify-content-between align-items-center"> <h3><b>Registration Form</b></h3> </div> <div class="card-body"> <form id="cdwasteRegistrationForm"> <div class="form-group"> <div class="row"> <div class="col-sm-12 col-md-6"> <label for="name">Name<span class="required">*</span></label> <input type="text" class="form-control" id="name" placeholder="Enter Name" required> </div> <div class="col-sm-12 col-md-6"> <label for="mobileNo">Mobile No<span class="required">*</span></label> <input type="number" class="form-control" id="mobileNo" placeholder="Mobile No" required> </div> </div> </div> <div class="form-group"> <label for="address">Address<span class="required">*</span></label> <textarea class="form-control" id="address" rows="2" required></textarea> </div> <div class="form-group"> <label for="adhaarFile">Upload Aadhaar:<span class="required">*</span></label> <input type="file" class="form-control" id="adhaar" name="adhaar" required> </div> <div class="form-group"> <label for="vehicleRcBookFile">Upload Vehicle RC Book:<span class="required">*</span></label> <input type="file" class="form-control" id="vehicleRcBook" name="vehicleRcBook" required> </div> <div class="form-group text-center"> <button type="submit" class="btn btn-primary" id="registerSubmit">Submit</button> <button type="reset" class="btn btn-secondary ml-2" onclick="resetForm()">Reset</button> </div> </form> </div> </div> </div>
<div class="col-md-12"> <div class="card" style="display:none;"> <div class="card-block"> <div class="page-header-title" > <h5 style="margin: 0;font-weight: bold;">Registration Details</h5><hr> </div> <div> <table id="CDWasteDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid"> <thead class="thead-dark"> <tr role="row"> <th class="text-center">S.No</th> <th class="text-center">Name</th> <th class="text-center">Mobile No</th> <th class="text-center">Address</th> <th class="text-center">Adhaar</th> <th class="text-center">Vechicle RC Book</th> <th class="text-center no-sort" width="%2">Action</th> </tr> </thead> <tbody> <tr th:each="campaign, i: ${campaigns}"> <td th:text="${i.count}">0</td> <td th:text="${campaign.campaign_name}"></td> <td th:text="${campaign.event_dates}"></td> <td th:text="${campaign.description}"></td> <td th:text="${campaign.event_dates}"></td> <td th:text="${campaign.description}"></td> <td class="text-center"> <a href="#" th:onclick="return callEdit([[${campaign.campaign_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"> <i class="ik ik-edit f-16 mr-15 text-green"></i> </a> </td> </tr> </tbody> <tfoot class="thead-dark"> <tr> <th class="text-center">S.No</th> <th class="text-center">Name</th> <th class="text-center">Event Date</th> <th class="text-center">Description</th> <th class="text-center">Adhaar</th> <th class="text-center">Vechicle RC Book</th> <th class="text-center no-sort" width="%2">Action</th> </tr> </tfoot> </table> </div> </div> </div> </div>
</div> </div> </div> <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div> <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> <script th:replace="~{fragments/modules/base/script :: script}"></script> <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <script type="text/javascript"> $(document).ready(function() {
var table = $('#CampaignDatatable').DataTable({ dom: 'Bftip', columnDefs: [ { targets: 'no-sort', orderable: false } ], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', 'Show all'] ], scrollY: '50vh', fixedColumns: { left: 1, right: 1 }, buttons: [ { extend: 'pageLength', className: 'btn btn-warning' }, { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary', id: 'copyBtn' }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn' }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn' }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn' } ], fixedHeader: true, autoWidth: true, responsive: true, searching: false, select: false, processing: false }); }); $(document).ready(function () { $('#cdwasteRegistrationForm').on('submit', function (event) { event.preventDefault(); // Prevent default form submission
var name = $('#name').val(); var mobileNo = $('#mobileNo').val(); var address = $('#address').val(); var adhaarFile = $('#adhaar')[0].files[0]; var vehicleRcBookFile = $('#vehicleRcBook')[0].files[0];
if (!name || !mobileNo || !address || !adhaarFile || !vehicleRcBookFile) { Swal.fire({ icon: 'error', title: 'Error', text: 'All fields are required!' }); return; }
var formData = new FormData(this); // 'this' refers to the form element
$.ajax({ url: '/gcc/api/registration/register', type: 'POST', data: formData, processData: false, // Required for FormData contentType: false, // Required for FormData success: function (response) { if (response[0].status === 'success') { Swal.fire({ icon: 'success', title: 'Success', text: response[0].message }).then((result) => { if (result.isConfirmed) { $('#cdwasteRegistrationForm')[0].reset(); location.reload(); } }); } else { Swal.fire({ icon: 'error', title: 'Error', text: response[0].message }); } }, error: function (xhr, status, error) { Swal.fire({ icon: 'error', title: 'Error', text: 'An error occurred: ' + error }); } }); }); });
</script> </body></html>
|
