<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
  .error {
        color: red;
    }
    </style>
</head>

<body>

    <!-- <div class="page-header mt-5"> -->

    <div class="d-flex justify-content-between">
        <div>
            <h3 class=" tx-24 mg-b-5"><strong><?= $page; ?></strong></h4>
        </div>
        <div>

            <!-- <label>Pending</label>
            <input type="radio" name="filter" id="filter" class="filter" value="Pending">
                                <label>Completed</label>
            <input type="radio" name="filter" id="filter" class="filter" value="Completed"> -->
        </div>
    </div>


    <!-- </div>  -->
    <!-- Row -->

    <div class="row sidemenu-height">
        <div class="col-lg-12">


            <?php
            if ($this->session->flashdata('alert_success')) {
            ?>
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <?php echo $this->session->flashdata('alert_success'); ?>
                </div>
            <?php
            }

            if ($this->session->flashdata('alert_danger')) {
            ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <?php echo $this->session->flashdata('alert_danger'); ?>
                </div>
            <?php
            }
            ?>


            <div class="card custom-card">

                <div class="card-header ">
                    <div class="row d-flex justify-content-start">
                        <div class='col-md-2'>
                            <select name="courseId" id="courseId" class="form-control  filtercourse select2 ">
                                <option value="">-- Filter Course --</option>
                                <?php foreach ($courses as $row) { ?>
                                    <option value="<?php echo $row->short_name ?>"> <?php echo $row->short_name ?></option>
                                <?php } ?>
                            </select>
                        </div>

                        <div  class='col-md-4'>
                            <input type="checkbox" id="demandDraft" name="demandDraft" class="ml-2" ><label class="mt-2"> &nbsp; Demand Draft</label>
                            <input type="checkbox" id="scst" name="scst" class="ml-2" ><label class="mt-2"> &nbsp; SC/ST</label>
                        </div>
                    </div>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="dmstable" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th class="wd-20p">S.No</th>
                                    <th class="wd-20p">Ref.No</th>
                                    <th class="wd-25p">Name</th>
                                    <th class="wd-15p">Course Name</th>
                                    <!-- <th class="wd-15p">Fees</th>
                                    <th class="wd-15p">Mobile</th>
                                    <th class="wd-15p">staus</th> -->
                                    <th class="wd-15p">Email</th>

                                    <th class="wd-15p">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                foreach ($records as $i => $row) { ?>
                                    <tr>
                                        <td><?php if ($page != 'Shortlisted') { ?><?php } ?><?= $i + 1 ?></td>
                                        <td><?= $row->reference_no ?></td>
                                        <td><?= $row->first_name ?></td>
                                        <td><?= $row->short_name; ?></td>
                                        <!-- <td><?= $row->application_fees; ?></td>
                                        <td><?= $row->mobile; ?></td>
                                        <td> <form action="<?= base_url('ApplicationController/mailSendOnPendingList/') ?>" method="post"><input type="hidden" value="<?= $row->email ?>" name="email" id="email"><input type="hidden" value="<?= $row->first_name.' '.$row->middle_name.' '.$row->last_name ?>" name="uname" id="uname"><button class="btn " type="submit"><i class="ti-email text-info h4"></i></button></form></td>

                                        <td><?= ($row->apstatus == '1') ? 'Completed' : 'Pending' ?></td> -->
                                        <td><a title="Send Mail" href="<?= base_url('ApplicationController/mailSendOnShortlist/' . $row->appid) ?>"><i class="ti-email text-themecolor h5"></i></a>
                                       
                                        <td style="padding-right: 10px;">
                                            <!-- <?php if ($row->payment_mode == 0 && $row->apstatus == 0) { ?>
                                                <a href="#" onclick="openPayment('<?= $row->appid ?>', <?= $row->user_id ?>, '<?= $row->payment_mode ?>')" id="opentutionModal"><i class="ti-money text-themecolor h5"></i></a>
                                            <?php } ?> -->
                                            <a title="Preview" href="<?= base_url('ApplicationController/viewApplication/' . $row->user_id) ?>"><i class="ti-eye text-themecolor h5"></i></a>
                                            <!-- <a title="Edit" href="<?= base_url('ApplicationController/applicationedit/' . $row->user_id) ?>" class=""><i class="ti-pencil-alt text-themecolor h5"></i></a> -->
                                        </td>
                                    </tr>
                                <?php  }
                                ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>

    <div class="modal fade" id="self_certificationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title text-danger" id="exampleModalLongTitle">Alert</h3>

                </div>
                <div class="modal-body d-flex justify-content-center">
                    <strong>Agree to</strong>
                    "I certify that the particulars given in the application."
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" onclick="closeModal('self_certificationModal')">Close</button>
                </div>
            </div>
        </div>
    </div>



    <div class="modal show" id="tutionModal" style="display: none;" aria-modal="true" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title" id="formTitle">Add payment detail</h6>

                </div>
                <div class="modal-body">
                    <form method="POST" id="tutionForm" action="<?php echo base_url('ApplicationController/paymenthistry'); ?>">
                        <input type="hidden" id='id' name='id'>
                        <input type="hidden" id="appid" name="appid">
                        <input type="hidden" id="userid" name="userid">
                        <input type="hidden" id="paymentmode" name="paymentmode">

                        <input type="hidden" name="">
                        <div class="form-group">
                            <label class="tx-medium">Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="name">
                        </div>
                        <div class="form-group">
                            <label class="tx-medium">Bank Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="bankname" name="bankname" placeholder="Bankname">
                        </div>
                        <div class="form-group">
                            <label class="tx-medium">Transaction No<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="transaction" name="transaction" placeholder="Transaction">
                        </div>
                        <div class="form-group">
                            <label class="tx-medium">Date<span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="date" name="date" placeholder="date">
                        </div>
                        <div class="form-group">
                            <label class="tx-medium">Amount<span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="amount" name="amount" placeholder="Amount">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn ripple btn-primary" id="save">Save</button>
                            <button type="button" class="btn ripple btn-secondary" id="closemodel" data-bs-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>





    <script>
        $(document).ready(function() {
            // When a link with the class "open-in-new-tab" is clicked
            $(".open-in-new-tab").click(function(event) {
                // Prevent the default behavior (opening the link in the current tab)
                event.preventDefault();

                // Get the URL from the href attribute of the clicked link
                var url = $(this).attr("href");

                // Open the URL in a new tab/window
                window.open(url, "_blank");
            });
        });

        function shortlist() {
            var checkedValues = [];
            $('.shortList:checked').each(function() {
                checkedValues.push($(this).val());
            });
            // alert(checkedValues);
            if (checkedValues) {
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url('ApplicationController/shortList'); ?>", // Corrected URL
                    data: {
                        id: checkedValues
                    },
                    success: function(respose) {
                        // alert('fggh');
                        window.location.reload();
                        // loadCourses(); // Reload the course list
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
            }
        }
        $(document).ready(function() {
            $('#dmstable').DataTable();
            // Add checkbox click event
            $('#dmstable tbody').on('click', 'input.checkbox', function() {
                var tr = $(this).closest('tr');
                if ($(this).prop('checked')) {
                    tr.addClass('selected');
                } else {
                    tr.removeClass('selected');
                }
            });

            $(".filtercourse").on("change", function() {
                // alert($(this).val());
                var columnIndex = 3;
                var filterValue = $(this).val();
                $('#dmstable').DataTable().column(columnIndex).search(filterValue).draw();
            });

            $(".filter").on("change", function() {
                // alert($(this).val());
                var columnIndex = 7;
                var filterValue = $(this).val();
                //    console.log("Column Index:", $(this).data("column"));
                // table.column(columnIndex).search(filterValue).draw();
                $('#dmstable').DataTable().column(columnIndex).search(filterValue).draw();

                // table.columns(7).search($(this).val()).draw();
                // dataTable.column($(this).data("column")).search(this.value).draw();
            });
            // table.buttons().container().appendTo("#dmstable .col-md-6:eq(0)");

        });

        function openPayment(appid, userId, paymentMode) {
            // alert(appid+' - '+userId+' - '+paymentMode)
            $("#tutionModal").show();
            $('#appid').val(appid);
            $('#userid').val(userId);
            $('#paymentmode').val(paymentMode);
            //         console.log("App ID:", appid);
            // console.log("User ID:", userId);
            // console.log("Payment Mode:", paymentMode);

        }
        $("#closemodel").click(function() {
            $('#tution_name_err').text(' ')
            $("#tutionModal").hide();
        });
        $(document).ready(function() {
            $('#tutionForm').validate({
                rules: {
                    name: {
                        required: true
                    },
                    bankname: {
                        required: true
                    },
                    transaction: {
                        required: true
                    },
                    date: {
                        required: true
                    },
                    amount: {
                        required: true,
                        number: true
                    }
                },
                messages: {
                    name: {
                        required: "Please enter your name"
                    },
                    bankname: {
                        required: "Please enter bank name"
                    },
                    transaction: {
                        required: "Please enter transaction number"
                    },
                    date: {
                        required: "Please enter date"
                    },
                    amount: {
                        required: "Please enter amount",
                        number: "Please enter a valid number"
                    }
                },
                errorClass: "error", 
                submitHandler: function(form) {
                    form.submit();
                }
            });
        });
    </script>