
    <!--start main wrapper-->
    <main class="main-wrapper">
        <div class="main-content">

            <div class="d-flex gap-2 my-2 flex-wrap">
                <div class="div20">
                    <div class="card un-card  <?php echo $type=='Rule'?'u-active':'' ; ?> ">
                        <div class="card-body">
                            <a href="<?php echo base_url('site/rules'); ?>" class="d-flex gap-2 align-items-center">
                                <img src="<?php echo base_url(); ?>assets/images/rules.png" alt="" width="50px">
                                <p class="ft4 fmon m-0">Rules</p>

                            </a>
                        </div>
                    </div>
                </div>
                <div class="div20">
                    <div class="card un-card <?php echo $type=='Financial Statements'?'u-active':'' ; ?> ">
                        <div class="card-body">
                            <a href="<?php echo base_url('site/financialstatements'); ?>" class="d-flex gap-2 align-items-center">
                                <img src="<?php echo base_url(); ?>assets/images/fstate.png" alt="" width="50px">
                                <p class="ft4 fmon">Financial
                                    Statements</p>

                            </a>
                        </div>
                    </div>
                </div>
                <div class="div20">
                    <div class="card un-card <?php echo $type=='Minutes'?'u-active':'' ; ?> ">
                        <div class="card-body">
                            <a href="<?php echo base_url('site/minutes'); ?>" class="d-flex gap-2 align-items-center">
                                <img src="<?php echo base_url(); ?>assets/images/mint.png" alt="" width="50px">
                                <p class="ft4 fmon">Minutes </p>

                            </a>
                        </div>
                    </div>
                </div>
                <div class="div20">
                    <div class="card un-card ">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/billshistory'; ?>" class="d-flex gap-3 align-items-center">
                                <img src="<?php echo base_url(); ?>assets/images/othrr.png" alt="" width="50px">
                                <p class="ft4 fmon">Others</p>

                            </a>
                        </div>
                    </div>
                </div>
                <div class="div20">
                    <div class="card un-card <?php echo $type=='Contracts'?'u-active':'' ; ?>   ">
                        <div class="card-body">
                            <a href="<?php echo base_url('site/contracts'); ?>" class="d-flex gap-3 align-items-center">
                                <img src="<?php echo base_url(); ?>assets/images/contr.png" alt="" width="50px">
                                <p class="ft4 fmon">Contracts</p>

                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <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-6 my-2 d-flex justify-content-end">
                    <div class="d-flex gap-2 align-items-center">
                        <!-- <a href="./addsecurityofficer.html" class="btn addBtn d-flex gap-2 align-items-center"><img
                        src="<?php echo base_url(); ?>assets/images/megaIcons/aplu.png" alt="">Add Security officers</a> -->
                        <button class="btn addBtn d-flex gap-2 align-items-center" data-bs-toggle="modal"
                            data-bs-target="#exampleModal"><img src="<?php echo base_url(); ?>assets/images/megaIcons/aplu.png" alt="">Add
                            documents </button>
                        <button class="btn bg-white d-flex gap-5 align-items-center px-3 border-15">
                            Filter <img src="<?php echo base_url(); ?>assets/images/e.png " alt="" width="20px">
                        </button>
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog  modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header modalhead">
                                        <h2 class="modal-title" id="exampleModalLabel"></h2>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <form action="<?php echo base_url('site/adddocument'); ?>" method="post" enctype="multipart/form-data">
                                    <div class="modal-body">

                                            <p class="ft1 text-black">Add Documents</p>
                                            <!-- Date Field -->
                                            <div class="mb-3">

                                                <input type="text" name="name" class="form-control FormInput3"
                                                    id="title" placeholder="Title" required>
                                            </div>

                                            <!-- Amount Field -->

                                            <div class="mb-3">
                                                <input type="date" name="date" class="form-control FormInput3" id="date"
                                                     required>
                                            </div>
                                            <div class="mb-3">

                                                <select name="category" id="category" class="form-select FormInput3">
                                                  
                                                <option value="Rule">Rule</option>
                                                <option value="Financial Statements">Financial Statements</option>
                                                <option value="Minutes">Minutes</option>
                                                <option value="Contracts">Contracts</option>
                                                    </option>
                                                </select>
                                            </div>
                                            <!-- Email Field -->
                                            <div class="mb-3">
                                                <textarea class="form-control FormInput3" name="description"
                                                    id="description" placeholder="Description" maxlength="1000"
                                                    oninput="updateCharCount()"></textarea>
                                                <small id="charCount" class="text-muted">0 / 1000 characters</small>
                                            </div>
                                            <div class="row">
                                                <div class="col-m-12 mb-3">
                                                    <div
                                                        class="brower d-flex justify-content-center align-items-center">
                                                        <div class="d-flex flex-column align-items-center">
                                                            <img src="<?php echo base_url(); ?>assets/images/up2.png" alt="" width="20px">
                                                            <small>Drage and Drop here or <label for="file"
                                                                    class="text-primary" style="cursor: pointer;">Browse
                                                                    Files</label></small>
                                                            <input class="d-none" type="file" name="file" id="file" accept="application/pdf">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Submit Button -->
                                            <div class="d-flex justify-content-center">
                                                <button type="submit" class="btn addBtn px-4">Upload Documents</button>
                                            </div>
                               
                                    </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="row ">

                <div class="col-md-12 my-2">

                    <div class="card un-card">
                        <div class="list-group ">
                        <?php foreach($documents as $key=>$document){ 
                            // echo "<pre>";   
                            // print_r($document);
                            // echo "</pre>";
                            
                            ?>
                            <li class="list-group-item list-group-item-action ">
                                <div class="d-flex justify-content-between  align-items-center">
                                    <div class="d-flex gap-2 align-items-center">
                                        <img class="" src="<?php echo base_url(); ?>assets/images/doc.png" alt="" width="30px">
                                        <div>
                                            <p class="ft6 fmon mb-0"><?php echo $document['name']; ?></p>
                                            <p class="ft7 fmon mb-0 "><?php echo date('d M Y',($document['documentDate']/1000)); ?></p>

                                        </div>

                                    </div>
                                    <div class="d-flex align-items-center gap-1">
                                        <a href="<?php echo $document['documentUrl']; ?>" download class="btn"><img src="<?php echo base_url(); ?>assets/images/do.png" alt=""></a>
                                        <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#editDocumentModal<?php echo $key; ?>"><img src="<?php echo base_url(); ?>assets/images/ed.png" alt=""
                                                ></a>
                                        <a href="<?php echo base_url('site/deletedocument/'.$key); ?>" class="btn"><img src="<?php echo base_url(); ?>assets/images/de.png" alt=""></a>
                                    </div>
                                </div>
                                <p class="ft7"><?php echo $document['description']; ?></p>
                            </li>
                            <!-- edit modal -->
                            <div class="modal fade" id="editDocumentModal<?php echo $key; ?>"   tabindex="-1" aria-labelledby="editDocumentModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header modalhead">
                                            <h4 class="modal-title text-white" id="editDocumentModalLabel">Edit Document</h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form id="editDocumentForm" action="<?php echo base_url('site/updatedocument/'.$key); ?>" method="post" enctype="multipart/form-data">
                                                <!-- Title Field -->
                                                <div class="mb-3">
                                                    <input type="text" name="name" class="form-control FormInput3" id="editTitle"
                                                        placeholder="Title" value="<?php echo $document['name']; ?>" required>
                                                </div>

                                                <!-- Date Field (Read-Only) -->
                                                <div class="mb-3">
                                                    <input type="date" name="date" class="form-control FormInput3" id="editDate" value="<?php echo date('Y-m-d',($document['documentDate']/ 1000)); ?>" required>
                                                </div>

                                                <!-- Category Field -->
                                                <div class="mb-3">
                                                    <select name="category" id="editCategory" class="form-select FormInput3">
                                                  
                                                        <option <?php echo $document['category']=='Rule'?'selected':'' ; ?> value="Rule">Rules</option>
                                                        <option <?php echo $document['category']=='Financial Statements'?'selected':'' ; ?> value="Financial Statements">Financial Statements</option>
                                                        <option <?php echo $document['category']=='Minutes'?'selected':'' ; ?> value="Minutes">Minutes</option>
                                                        <option <?php echo $document['category']=='Contracts'?'selected':'' ; ?> value="Contracts">Contracts</option>
                                                       
                                                    </select>
                                                </div>

                                                <!-- Description Field with Character Count -->
                                                <div class="mb-3">
                                                    <textarea class="form-control FormInput3" name="description"
                                                        id="editDescription" placeholder="Description" maxlength="1000"
                                                        oninput="updateEditCharCount()"><?php echo $document['description']; ?></textarea>
                                                    <small id="editCharCount" class="text-muted">71 / 1000 characters</small>
                                                </div>

                                                <!-- File Upload -->
                                                <div class="row">
                                                    <div class="col-m-12 mb-3">
                                                        <div class="brower d-flex justify-content-center align-items-center">
                                                            <div class="d-flex flex-column align-items-center">
                                                                <img src="<?php echo base_url(); ?>assets/images/up2.png" alt="" width="20px">
                                                                <small>Drag and Drop here or
                                                                    <label for="editFile" class="text-primary"
                                                                        style="cursor: pointer;">Browse Files</label>
                                                                </small>
                                                                <input class="d-none" type="file" name="file" id="editFile">
                                                                <p class="mt-2 text-muted">Currently Uploaded:
                                                                    <strong><?php echo $document['documentTitle']; ?></strong>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Submit Button -->
                                                <div class="d-flex justify-content-center">
                                                    <button type="submit" class="btn addBtn px-4">Save Changes</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php } ?>


                        </div>
                    </div>
                </div>


                <script>
                    // Character count function
                    function updateEditCharCount() {
                        let textarea = document.getElementById("editDescription");
                        let charCount = document.getElementById("editCharCount");
                        charCount.textContent = textarea.value.length + " / 1000 characters";
                    }

                    // Set current date to the Date input field
                    document.addEventListener("DOMContentLoaded", function () {
                        document.getElementById("editDate").value = new Date().toISOString().split("T")[0];
                        updateEditCharCount();
                    });
                </script>

            </div>

        </div>


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

