  <!--start main wrapper-->
    <main class="main-wrapper">
        <div class="main-content">
            <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img
                    src="<?php echo base_url(); ?>assets/images/arowleft.svg" alt="" width="15px"> Back</button>
            <h3 class=" fmon fw-bolder  mt-2   "> <i class="fa-solid fa-file-import"></i> Sent</h3>

            <div class="row">
                <div class="col-md-7">

                    <!-- <div class="input-group border-15">
                        <span class="input-group-text  border-15"><img src="<?php echo base_url(); ?>assets/images/serIcon.png" alt=""
                                width="25px"></span>
                        <input type="text" name="" id="" class="form-control form-Search  border-15  py-2"
                            placeholder="search">
                    </div> -->

                </div>
                <div class="col-md-5 d-flex justify-content-end gap-2">



                    <div class="btn bg-white d-flex gap-5 align-items-center px-3 border-15" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                        Filter <img src="<?php echo base_url(); ?>assets/images/e.png " alt="" width="20px">
                    </div>
                    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
                        aria-labelledby="offcanvasRightLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasRightLabel">Filters</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">

                            <form>
                                <!-- Subject -->
                                <div class="mb-3">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" class="form-control" id="subject" name="subject"
                                        placeholder="Enter Subject">
                                </div>

                                <!-- Body Content -->
                                <div class="mb-3">
                                    <label for="bodyContent" class="form-label">Body Content</label>
                                    <textarea class="form-control" id="bodyContent" name="bodyContent" rows="4"
                                        placeholder="Enter Body Content"></textarea>
                                </div>

                                <!-- Date Sent -->
                                <div class="mb-3">
                                    <label for="dateSent" class="form-label">Date Sent</label>
                                    <input type="date" class="form-control" id="dateSent" name="dateSent">
                                </div>

                                <!-- Sent By -->
                                <div class="mb-3">
                                    <label for="sentBy" class="form-label">Sent By</label>
                                    <input type="text" class="form-control" id="sentBy" name="sentBy"
                                        placeholder="Enter Sender's Name">
                                </div>

                                <button class="btn addBtn w-100" onclick="applyFilters()">Apply Filters</button>

                            </form>
                        </div>

                    </div>

                </div>
                <div>
                    <div class="table-responsive mt-3 ">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Creator</th>
                                    <th scope="col">Title</th>

                                    <th scope="col">Date Generated</th>
                                    <th scope="col">Statistics</th>

                                    <th scope="col">Actions</th>

                                </tr>
                            </thead>
                            <div class="">
                                <tbody class="">
                                    <?php foreach($messages as $key => $message){
                                 //       echo "<pre>";
                                  //      print_r($message);
                                  //      echo "</pre>";
                                        
                                        ?>
                                    <tr>
                                        <td>
                                            <div class="d-flex gap-2 align-items-start">
                                                <!--
                                                <img class="usrImage" src="<?php echo base_url(); ?>assets/images/avatars/avd.png" alt="">
                                    -->
                                                <p class="ft6 fmon m-0">Mr.Admin</p>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0"><?php echo $message['subject']; ?></p>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0"><?php echo date('d-m-Y H:i:s',$message['sentAt']); ?></p>

                                        </td>
                                        <td>
                                            <?php
                                            $total_recipients=count($message['recipientuserlistid']??[]);
                                            $read=0;    
                                            $unread=0;
                                            foreach($message['recipientuserlistid'] as $recipient =>$value){
                                                if($value==true){
                                                    $read++;
                                                }else{
                                                    $unread++;
                                                }
                                            }

                                          
                                            $progress_percentage=($read/$total_recipients)*100;
                                           
                                            ?>
                                            <div class="">
                                                <div class="progress table-proggress" role="progressbar"
                                                    aria-label="Basic example" aria-valuenow="<?php echo $progress_percentage; ?>" aria-valuemin="0"
                                                    aria-valuemax="100">
                                                    <div class="progress-bar" style="width: <?php echo $progress_percentage; ?>%">
                                                        <span class="text-center w-100 d-block text-white"><?php echo $progress_percentage; ?>%</span>
                                                    </div>
                                                </div>
                                            </div>

                                        </td>





                                        <td>
                                            <a href="<?php echo base_url().'site/viewmessage/'.$key ; ?>" class="text-decoration-none"  >
                                                <img src="<?php echo base_url(); ?>assets/images/eye2.png" alt="" width="20px">
                                            </a>
                                            <a href="<?php echo base_url().'site/copytemplate/'.$key ; ?>" class="text-decoration-none" >
                                                <img src="<?php echo base_url(); ?>assets/images/copy.png" alt="" width="20px">
                                            </a>
                                        </td>
                                    </tr>
                                    <?php } ?>
                                    <!-- Add more rows as needed -->
                                </tbody>
                            </div>
                        </table>
                      
                    </div>
                </div>
            </div>
        </div>
        </div>

    </main>
    <!--end main wrapper-->



