ledger

mail@pastecode.io avatar
unknown
plain_text
a year ago
26 kB
2
Indexable
Never
<%- include('../layouts/htmlHeader.ejs') %>
    <%-include('../include/filterCompnent.ejs')%>
        <%-include('../include/downloadComponent.ejs')%>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">




        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> 
        <%- include('../layouts/top.ejs') %>
        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <% let client_code1=client_code %>
        <style>
                        @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300);
                        * {
  margin: 0;
  padding: 0;
  box-sizing:border-box
}

a {
  color: #666;
  text-decoration: none;
}
  a:hover {
    color: #4FDA8C;
}

.section-tabs {
    padding-top: 15px
}
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
    transform: translate3d(0px,0,0);
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

.section-tabs .swiper-tabs-nav .swiper-slide {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #f4f6f5;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    cursor: pointer
}

.section-tabs .swiper-tabs-nav .swiper-slide.swiper-slide-thumb-active {
    font-weight: 700;
    color: #177dff;
    border-color: #177dff
}

.section-tabs .swiper-tabs-content .swiper-slide {
    padding: 25px 15px
}

.section-tabs .swiper-tabs-content .swiper-slide .full-height {
    display: flex;
    flex-direction: column;
    min-height: calc(65vh - 25px)
}

.section-tabs .swiper-tabs-content .swiper-slide .row {
    margin: 0 -5px
}

.section-tabs .swiper-tabs-content .swiper-slide .row .col-6,
.section-tabs .swiper-tabs-content .swiper-slide .row .col {
    padding: 0 5px
}

.section-tabs .swiper-tabs-content .swiper-slide .custom-select {
    border-radius: 0
}

.section-tabs .swiper-tabs-content .swiper-slide textarea.form-control {
    border-radius: 0;
    background-color: #FFF
}

.section-tabs .swiper-tabs-content .swiper-slide .radio-courier .item-radio input~label {
    border-radius: 0;
    text-align: center
}

.section-tabs .swiper-tabs-content .swiper-slide .radio-courier .item-radio input~label h6 {
    color: #177dff
}

.section-tabs .swiper-tabs-content .swiper-slide .radio-courier .item-radio input~label p {
    color: #989898
}

.section-tabs .swiper-tabs-content .swiper-slide .bottom {
    margin-top: auto
}

.section-tabs .swiper-tabs-content .swiper-slide .bottom .btn {
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Cairo', sans-serif !important;
    position: relative
}

.section-tabs .swiper-tabs-content .swiper-slide .bottom .btn .icon {
    position: absolute;
    left: 15px;
    top: 60%;
    transform: translateY(-50%)
}

.section-tabs .swiper-tabs-content .swiper-slide .bottom .btn .icon img {
    height: 20px;
    width: auto;
    filter: invert(1)
}

.input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    padding: .8em 0 10px .8em;
    border: 1px solid #CFCFCF;
    outline: 0;
    display: inline-block;
    margin: 0 0 .8em 0;
    padding-right: 2em;
    width: 100%;
}

.button {
    width: 100%;
    padding: .8em .8em 10px .8em;
    background-color: #28A55F;
    border: none;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

.button:hover {
  background-color: #4FDA8C;
}

 .checkbox {
  visibility: hidden;
  padding: 20px;
  margin: .5em 0 1.5em;
}

form label[for] {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}

form label[for]::before {
  content: '';
  position: absolute;
  border: 1px solid #CFCFCF;
  width: 17px;
  height: 17px;
  top: 0px;
  left: -14px;
}

form label[for]::after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 9px;
  height: 5px;
  background-color: transparent;
  top: 4px;
  left: -10px;
  border: 3px solid #28A55F;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

form .checkbox:checked + label:after {
 opacity: 1;
}

.help-text {
  margin-top: .6em;
}

.help-text p {
  text-align: center;
  font-size: 14px;
}

                    #button{
                    display:block;
                    margin:20px auto;
                    padding:10px 30px;
                    background-color:#eee;
                    border:solid #ccc 1px;
                    cursor: pointer;
                    }
                    #overlay{	
                        position: absolute;
                        z-index: 100;
                        width: 100%;
                        height: 100%;
                    display: none;
                    background: white;
                    }
                    .cv-spinner {
                    display: flex;
                    justify-content: center;
                    align-items: center;  
                    padding-top: 30%;
                    }
                    .spinner {
                    width: 40px;
                    height: 40px;
                    border: 4px #ddd solid;
                    border-top: 4px #2e93e6 solid;
                    border-radius: 50%;
                    animation: sp-anime 0.8s infinite linear;
                    }
                    @keyframes sp-anime {
                    100% { 
                        transform: rotate(360deg); 
                    }
                    }
                    .is-hide{
                    display:none;
                    }
                    </style>
                    <div class="main-content">
                        <div class="page-content">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-12">
                                        <div
                                            class="page-title-box d-sm-flex align-items-center justify-content-between">
                                            <div class="page-title-right">
                                                <ol class="breadcrumb m-0">
                                                    <li class="breadcrumb-item"><i
                                                            class=" fas fa-arrow-left"></i>&nbsp;&nbsp;<a
                                                            href="/getreports">Reports</a></li>
                                                    <li class="breadcrumb-item active">Ledger</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="">
                                        <div class="card ledgerCard">
                                            <div class="cardTitle"
                                                style="display: flex;justify-content: space-between;">
                                                <p style="color:white" class="card-heading">Ledger</p>
                                                <div class="cardRightElement">
                                                    <a class="btn" style="background-color: #177DFF; color: white;"
                                                        data-bs-toggle="modal"
                                                        data-bs-target=".bs-example-modal-center" onclick="handlesegmentType(`mail`)">
                                                        <i class="bx bxs-envelope"></i>
                                                    </a>
                                                   
                                                </div>
                                            </div>
                                            <div class="cardBody" style="display: flex; flex-direction: column;gap: 1rem;">
                                                <div class="cardSecondSection">
                                                    <div>
                                                        <p class="text-small">Opening Balance</p>
                                                        <div class="LedgerBalanceBox">
                                                            ₹<span id="opening_balance">0</span>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <p class="text-small">Closing Balance</p>
                                                        <div class="LedgerBalanceBox">
                                                            ₹<span id="closing_balance">0</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-12 col-md-12">
                                                    <div class="form-group">

                                                        <select required="" class="form-control form-select" style="border-radius: 20px;" onchange="getYearWiseLedger()" id="year_filer">

                                                            <!-- <option value="22-23">FY - 2022 to 2023</option>
                                                            <option value="21-22">FY - 2021 to 2022</option>
                                                            <option value="20-21">FY - 2020 to 2021</option> -->
                                                        </select>
                                                        <input type="hidden" id="client_code" value='<%= client_code %>'>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end card body -->
                                        </div>
                                        <!-- end card -->
                                    </div>
                                    <div class="col-12">
                                    <div class="ledgerTotalAmountCardDiv" style="gap: 5%;">
                                        <div class="col">
                                            <p class="text-mid"><i class="fas fa-rupee-sign"></i>&nbsp; <span id="total_credit">0</span>
                                            </p>
                                            <p class="text-small">Total Credit</p>
                                        </div>
                                        <div class="col">
                                            <p class="text-mid">-<i class="fas fa-rupee-sign"></i>&nbsp; <span id="total_debit">0</span>
                                            </p>
                                            <p class="text-small">Total Debit</p>

                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div class="d-lg-flex">
                                    <div class="chat-leftsidebar card section-tabs" style="border: none;
                                           margin-top: 12px;">
                                        <div class="chat-leftsidebar-nav">
                                            <ul class="nav nav-tabs nav-tabs-custom nav-justified" role="tablist">
                                                <li class="nav-item">
                                                    <a onclick="get_credit_debit('all')" data-bs-toggle="tab"
                                                        aria-expanded="true" class="nav-link active">
                                                        <p class="custom-text-m-15"> All </p>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a onclick="get_credit_debit('credit')" data-bs-toggle="tab"
                                                        aria-expanded="false" class="nav-link">

                                                        <span class="d-lg-block">
                                                            <p class="custom-text-m-15"> Credit Only </p>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a onclick="get_credit_debit('debit')" data-bs-toggle="tab"
                                                        aria-expanded="false" class="nav-link">
                                                        <span class="d-lg-block">
                                                            <p class="custom-text-m-15">Debit Only</p>
                                                        </span>
                                                    </a>
                                                </li>

                                            </ul>
                                            
                                            <div id="overlay">
                                                <div class="cv-spinner">
                                                  <!-- <span class="spinner"></span> -->
                                                  <lottie-player src="https://lottie.host/26a6468c-0598-4d71-b7a6-076ad3e36b6c/jBeEsTL7MM.json" background="transparent" speed="1" style="width: 50px; height: 50px; margin: 0;" loop autoplay></lottie-player>
                                                </div>
                   
                                              </div>
                                            <div class="tab-content swiper-container swiper-tabs-content">
                                                <div class="swiper-wrapper">

                                                    <div class="  swiper-slide" id="all">
    
                                                    </div>
                                                    <div class="   swiper-slide" id="debit">
    
                                                    </div>
                                                    <div class="   swiper-slide" id="credit">
    
                                                    </div>
                                                </div>
                                                

                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <!-- Tabs navs -->
                            </div>
                            <!-- End Page-content -->
                        </div>
                        <!-- end main content-->
                    </div>
                    <%- include('../layouts/htmlFooter.ejs') %>
                        <script>
                            function yyyymmdd(dateIn) {
                                    var yyyy = dateIn.getFullYear();
                                    var mm = dateIn.getMonth() + 1; // getMonth() is zero-based
                                    var dd = dateIn.getDate();
                                    return String(10000 * yyyy + dd + 100 * mm); // Leading zeros for mm and dd
                                }
                            $(function () {
                                let container=$("#year_filer");
                                let  currentYear = new Date().getFullYear();
                                for(let i=0;i<2;i++){
                                    let option=document.createElement("option");
                                    option.value=currentYear-i;
                                    option.innerText=`FY-`+`${currentYear-(i+1)}`+ ` to ` + `${currentYear-i}`;
                                    container.append(option)
                                }  
                                
                                var today = new Date();
                                var priorDate = new Date(new Date().setDate(today.getDate() - 365));
                                var client_code = '<%= client_code1 %>';
                                var formData = {
                                    'client_code': client_code,
                                    'from_date': yyyymmdd(priorDate),
                                    'to_date': yyyymmdd(today),
                                    'report_name': "LedgerDetail",
                                };
                                $.ajax({
                                    type: "POST",
                                    url: "/get-typewise-ledger-detail",
                                    data: JSON.stringify(formData),
                                    contentType: "application/json",
                                    Accept: "application/text",
                                    dataType: "text",
                                    beforeSend: function () {
                                        $("#overlay").fadeIn(300); 
                                    },
                                    success: function (data) {
                                        $("#all").html(data); 
                                    },
                                    error: function (err) {
                                        console.log("Error  ");
                                        console.log(err);
                                    },
                                    complete: function () {
                                        $("#overlay").fadeOut(300);
                                    },
                                });
                            })
                             


                            function get_credit_debit(type) {
                                    let from_date = ""
                                    let to_date = ""
                                    let from_date1 = $("#start-date").val()
                                    let to_date1 = $("#end-date").val()

                                    if(from_date1 !="" && to_date1 !=""){
                                        from_date = from_date1.replaceAll("-","")
                                        to_date = to_date1.replaceAll("-","")
                                    }else{
                                        let date=new Date();
                                        let finyear=$(`#year_filer`).val();
                                        let start_date=(Number(finyear)-1).toString();
                                        from_date=start_date+String(date.getMonth() + 1).padStart(2, '0')+String(date.getDate()).padStart(2, '0');         
                                        to_date=finyear+String(date.getMonth() + 1).padStart(2, '0')+String(date.getDate()).padStart(2, '0');
                                    }
                                
                                    let client_code = $("#ClientCode").val()
                                    let type_filter = $("#type_filter").val()
                                    
                                    var filter = $('input[name="filter[]"]:checked')
                                        .map(function () {
                                            return this.value;
                                        })
                                        .get();

                                   

                                    var formData = {
                                        client_code: client_code,
                                        from_date: from_date,
                                        to_date: to_date,
                                        filter: filter,
                                        type_filter: type_filter,
                                        type: type
                                    };

                                    $.ajax({
                                        type: "POST",
                                        url: "/get-typewise-ledger-detail",
                                        data: JSON.stringify(formData),
                                        contentType: "application/json",
                                        Accept: "application/text",
                                        dataType: "text",
                                        beforeSend: function () {
                                            $("#overlay").fadeIn(300); 
                                        },
                                        success: function (data) {
                                         
                                            $("#all").html(data);
                                        },
                                        error: function (err) {
                                            console.log("Error  ");
                                            console.log(err);
                                        },
                                        complete: function () {
                                            $("#overlay").fadeOut(300); 
                                        },
                                    });
                            }

                            function getYearWiseLedger(){
                                // let year_filer = $("#year_filer").val()

                                let date=new Date();
                                let finyear=$(`#year_filer`).val();
                                let start_date=(Number(finyear)-1).toString();
                                let from_date=start_date+String(date.getMonth() + 1).padStart(2, '0')+String(date.getDate()).padStart(2, '0');         
                                let to_date=finyear+String(date.getMonth() + 1).padStart(2, '0')+String(date.getDate()).padStart(2, '0');
                                var client_code = '<%= client_code1%>';

                                var formData = {
                                    'client_code': client_code,
                                    'from_date': from_date,
                                    'to_date': to_date,
                                    'report_name': "LedgerDetail",
                                };
                                $.ajax({
                                    type: "POST",
                                    url: "/get-typewise-ledger-detail",
                                    data: JSON.stringify(formData),
                                    contentType: "application/json",
                                    Accept: "application/text",
                                    dataType: "text",
                                    beforeSend: function () {
                                        $("#overlay").fadeIn(300); 
                                    },
                                    success: function (data) {
                    
                                        $("#all").html(data);
                                    },
                                    error: function (err) {
                                        console.log("Error  ");
                                        console.log(err);
                                    },
                                    complete: function () {
                                        $("#overlay").fadeOut(300);
                                    },
                                });
                                 
                            }
                        </script>
                        <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js'></script>


                        <script>
                            swiperTabsNav = new Swiper('.swiper-tabs-nav', {
                                spaceBetween: 0,
                                slidesPerView: 3
                            });

                            // Swiper Content   
                            swiperTabsContent = new Swiper('.swiper-tabs-content', {
                                spaceBetween: 0,
                                thumbs: {
                                    swiper: swiperTabsNav,
                                }
                            });
                        </script>