@extends('fronted.layout.main')
@section('adcontent')
    <style>
        .main-amount .sale-amount {
            font-size: 1.5rem;
            display: block;

        }

        .sale-text {
            font-size: 0.8rem;
            display: block;

        }

        .total-sale-text {
            color: rgba(241, 153, 85, 255);
        }

        .you-get-text {
            color: #7a8e43;
        }

        .sale-sub-amount {
            font-size: 0.8rem;
            display: block;

        }

        .main-text span {
            display: block;
        }

        .sale_form .input-group-text {
            font-size: 0.8rem;
            color: #000;
            font-weight: 500;
            background: white;
            border: 0;
        }

        .sale_form .form-select,
        .sale_form .form-control {
            font-size: 0.8rem;
            border: 0;
            border-bottom: 1px solid #bababa;
            box-shadow: none;
        }

        .sale_form input[type="date"] {
            font-size: 0.8rem;
        }

        .sale_form .form-label-sm {
            font-size: 0.7rem;
            color: #000;
            margin: 0;
        }

        #sale_form option {
            font-size: 0.8rem;
        }

        .TableRecivedAmount.green {
            color: #00ff00;
        }

        .TableRecivedAmount.Orange {
            color: #ffc107;
        }

        .modal-heading {
            font-size: 0.7rem;
            font-weight: 600;
            color: #000;
            margin: 0;
        }

        .modal-heading i.fa {
            font-size: 0.7rem;
            text-transform: capitalize;
        }

        .saleheading {
            font-size: 0.8rem;
            font-weight: 500;
            color: #000;
        }

        .sale-amount {
            font-size: 0.9rem;
            font-weight: 500;
        }

        .paymentInClass {
            color: green !important;
        }

        #receivedAmountInput,
        #customSaleReceivedAmountInput {
            border: 0;
            border-bottom: 1px solid #bababa;
            width: 60px;
            height: 20px;
            font-size: 0.8rem;
        }

        #receivedAmountInput:focus,
        #customSaleReceivedAmountInput:focus {
            border: 0;
            border-bottom: 1px solid #bababa;
            outline: 0;
        }

        .custom-list {
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            max-height: 150px;
            overflow-y: auto;
            width: 200px;
            z-index: 1000;
        }

        .datalist-hidden {
            display: none;
        }

        .datalist-option {
            padding: 5px;
            font-size: 0.8rem;
            cursor: pointer;
        }

        .datalist-option:hover {
            background-color: #f0f0f0;
        }


        #ViewSaleData .card {
            box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
        }

        #ViewSaleData .card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 0 solid rgba(0, 0, 0, .125);
            border-radius: 1rem;
        }

        #ViewSaleData h2 {
            font-size: 1rem;
        }

        #ViewSaleData h5 {
            font-size: 0.8rem;
        }

        #viewSaleData table tbody td {
            white-space: nowrap;
        }

        #viewSaleData .main-heading {
            font-size: 1.3rem;
            color: #000;
        }

        .header-p {
            font-size: 0.6rem;
        }

        #ShowListItem td {
            text-transform: uppercase;
            font-size: 0.6rem;
            text-align: center;
            overflow: hidden;
        }

        .modal-body .table-responsive thead th {
            text-transform: uppercase;
            font-size: 0.6rem;
            font-weight: 500;
        }

        .condidate-details h5,
        .condidate-details p {
            font-size: 0.6rem;
        }

        .condidate-details h5 {
            font-weight: 550;
            color: #212529;
        }

        .amount-info p {
            font-size: 0.6rem;
            font-weight: 500;
            text-transform: capitalize;
        }

        .is-invalid {
            border-color: red;
        }

        .invalid-date {
            border-color: red;
        }

        .sale_form input[type="date"].invalid {
            border-color: red;
            color: red;
        }

        .TableRecivedAmount.green {
            color: #00ff00;
        }

        .TableRecivedAmount.Orange {
            color: #ffc107;
        }

        #EditTakePaymentView {
            height: 250px;
        }

        canvas {
            height: 250px;
        }

        #CustomSale {
            transition: all 0.3s ease-in-out;
        }

        #RegSale {
            transition: all 0.3s ease-in-out;
        }

        .ChnageCursor {
            cursor: pointer;
        }

        .year-item {
            position: relative;
        }

        .month-list {
            display: none;
            position: absolute;
            left: -100%;
            top: 10%;
            min-width: 100%;
        }

        .year-item:hover .month-list {
            display: block;
        }

        .month-dropdown li:hover {
            background-color: #f0f0f0;
        }
    </style>
    <div class="container-fluid">
        <div class="row g-1">
            <div class="col-lg-8 col-md-6 col-sm-12">
                <div class="top-section">
                    <!-- card sections  -->
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <div class="shadows rounded-1 flex-fill bg-body py-2">
                            <div class="main-amount text-center">
                                <span class="sale-amount text-warning fw-bold">{{ number_format($totalCurrentSale, 2) }} <i
                                        class="fa-solid fa-indian-rupee-sign text-secondary fs-6"></i></span>
                            </div>
                            <div class="main-text">
                                <span class="text-secondary text-center fs-6">Current Sale
                                    ({{ $filterValue != 'all' ? \Carbon\Carbon::parse($filterValue)->format('M') : \Carbon\Carbon::now()->format('M') }})
                                    <i class="fa-solid fa-arrow-up text-warning"></i></span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="flex-fill sub-sale-part">
                                    <span class="d-block text-center sale-text text-secondary">Reg. Sale</span>
                                    <span
                                        class="text-warning sale-sub-amount fw-bold text-center ">{{ number_format($currentRegSale, 2) }}
                                        <i class="fa-solid fa-indian-rupee-sign text-secondary"></i></span>
                                </div>
                                <div class="flex-fill sub-sale-part">
                                    <span class="d-block text-center sale-text text-secondary">Custom Sale</span>
                                    <span
                                        class="text-warning fw-bold sale-sub-amount text-center">{{ number_format($currentCustomeSale, 2) }}
                                        <i class="fa-solid fa-indian-rupee-sign text-secondary"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="shadows rounded-1 flex-fill bg-body py-2">
                            <div class="main-amount text-center">
                                <span class="total-sale-text sale-amount fw-bold">{{ number_format($totalSale, 2) }}
                                    <i class="fa-solid fa-indian-rupee-sign text-secondary fs-6"></i>
                                </span>
                            </div>
                            <div class="main-text">
                                <span class="text-secondary  text-center fs-6">Total Sale <i
                                        class="fa-solid fa-arrow-up total-sale-text"></i></span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center main-text">
                                <div class="flex-fill sub-sale-part">
                                    <span class="d-block text-center sale-text text-secondary">Reg. Sale</span>
                                    <span
                                        class="total-sale-text sale-sub-amount fw-bold text-center ">{{ number_format($totalRegSale, 2) }}
                                        <i class="fa-solid fa-indian-rupee-sign text-secondary"></i></span>
                                </div>
                                <div class="flex-fill sub-sale-part ">
                                    <span class="d-block text-center sale-text text-secondary">Custom Sale</span>
                                    <span
                                        class="total-sale-text sale-sub-amount fw-bold text-center ">{{ number_format($totalCustomeSale, 2) }}
                                        <i class="fa-solid fa-indian-rupee-sign text-secondary"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="shadows rounded-1 flex-fill bg-body py-2">
                            <div class="main-amount text-center">
                                <span class="sale-amount you-get-text  fw-bold">{{ number_format($totalDue, 2) }} <i
                                        class="fa-solid fa-indian-rupee-sign text-secondary fs-6"></i></span>
                            </div>
                            <div class="main-text">
                                <span class="text-secondary text-center fs-6 ">You'll Get(dues) <i
                                        class="fa-solid fa-arrow-down you-get-text"></i></span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="flex-fill sub-sale-part">
                                    <span class="d-block text-center sale-text text-secondary">Total Dues</span>
                                    <span
                                        class="you-get-text text-center sale-sub-amount fw-bold">{{ number_format($totalDue, 2) }}
                                        <i class="fa-solid fa-indian-rupee-sign text-secondary"></i></span>
                                </div>
                                <div class="flex-fill sub-sale-part">
                                    <span class="d-block text-center sale-text text-secondary">Current Dues</span>
                                    <span
                                        class="you-get-text text-center sale-sub-amount fw-bold ">{{ number_format($totalCurrentDue, 2) }}
                                        <i class="fa-solid fa-indian-rupee-sign text-secondary"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- card section end -->

                    <!-- action button -->
                    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mt-3">
                        <div class="flex-fill">
                            <div class="btn-group clearfix" role="group" aria-label="Switch buttons group">
                                <button type="button" class="btn btn-warning btn-sm" id="regSaleButton">
                                    Reg. Sale
                                </button>
                                <button type="button" class="btn btn-secondary btn-sm" id="customSaleButton">
                                    Custom Sale
                                </button>
                            </div>
                        </div>
                        <div class="flex-fill">
                            <button class="text-warning btn bg-body btn-sm" id="addSaleButton" data-saletype="regSale"><i
                                    class="fa-solid fa-plus"></i> New Sale <i
                                    class="fa-solid fa-arrow-right-long"></i></button>
                        </div>
                        <div class="flex-fill">
                            <button class=" text-secondary btn bg-body btn-sm" id="addEstimationButton"
                                data-estimation="regSale"><i class="fa-solid fa-plus"></i> Estimation <i
                                    class="fa-solid fa-arrow-right-long"></i>
                            </button>
                        </div>
                        <div class="flex-fill">
                            <a href="{{ url('SalesReports') }}"
                                class="btn btn-sm sale-text text-danger bg-body fw-medium">Download Report <i
                                    class="fa-solid fa-arrow-right-long"></i></a>
                        </div>
                        <div class="flex-fill">
                            <div class="d-flex justify-content-between align-items-center gap-2">
                                <div class="flex-fill">
                                    <input class="form-control" type="text" id="customSerachBox" placeholder="Search..."
                                        style="display:none;">
                                </div>
                                <div class="">
                                    <form id="saleDataFilterForm" action="{{ route('sale.view') }}" method="GET">
                                        <div class="dropdown flex-fill">
                                            <button class="btn btn-sm btn-secondary d-block dropdown-toggle" type="button"
                                                id="yearDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                                @if ($filterValue !== 'all')
                                                    {{ \Carbon\Carbon::parse($filterValue)->format('F Y') }}
                                                @else
                                                    <i class="fa-solid fa-filter me-2"></i> {{ strtoupper($filterValue) }}
                                                @endif
                                            </button>

                                            <ul class="dropdown-menu" aria-labelledby="yearDropdown">
                                                <li class="dropdown-item" data-year="all">
                                                    <button class="dropdown-item filterBtn " type="button"
                                                        name="selected_month" value="all">
                                                        All
                                                    </button>
                                                </li>
                                                <li class="dropdown-item" data-year="custom">
                                                    <button class="dropdown-item filterBtn " type="button"
                                                        name="selected_month" value="custom">
                                                        Custom
                                                    </button>
                                                </li>
                                                @foreach ($salesYears as $year => $months)
                                                    <li class="year-item" data-year="{{ $year }}">
                                                        <a class="dropdown-item" id="year{{ $year }}"
                                                            href="#"><i
                                                                class="fa-solid fa-caret-left me-3"></i>{{ $year }}</a>
                                                        <ul class="dropdown-menu month-list"
                                                            aria-labelledby="year{{ $year }}">
                                                            @foreach ($months as $monthName => $monthValue)
                                                                <li>
                                                                    <button class="dropdown-item filterBtn" type="button"
                                                                        name="selected_month"
                                                                        value="{{ $year }}-{{ str_pad($monthValue, 2, '0', STR_PAD_LEFT) }}-01">
                                                                        {{ $monthName }}
                                                                    </button>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- action button end -->

                    <!-- reg sale form -->
                    <div class="reg-sale-form my-2 py-2" style="display:none;background-color:#595959;">
                        <form class="shadow-sm sale_form" id="regSaleform" action="">
                            <div class="container">
                                <div class="card border-0">
                                    <div class="card-body m-0 py-0">
                                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                                            <div class="">
                                                <p class="saleheading m-0 p-1"> Invoice No: <span id="invoiceNo"
                                                        class="text-dark ms-1"> {{ $latestInvoiceNo }} <span></p>
                                            </div>
                                            <div class="">
                                                <div class="input-group">
                                                    <label class="input-group-text" for="date">Date</label>
                                                    <input class="form-control" type="date"
                                                        value="2025-06-08" id="invoiceDate" required
                                                        placeholder="Select date" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="candidate-info-section my-2">
                                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                        <div class="flex-fill">
                                            <select class="form-select" name="roomno" id="roomNoSelect" required>
                                                <option value="" disabled selected>Select Room No</option>
                                                @if (!empty($roomNumber))
                                                    @foreach ($roomNumber as $room)
                                                        <option value="{{ $room->roomno }}">{{ $room->roomno }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="flex-fill">
                                            <select class="form-select" name="candidate_name" id="candidateNameSelect"
                                                required>
                                                <option selected disabled value="">Select Name</option>
                                            </select>
                                        </div>
                                        <div class="flex-fill">
                                            <input class="form-control" type="number" placeholder="Mobile Number"
                                                name="mobile" id="mobile"
                                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength)"
                                                maxlength="10" readonly required>
                                        </div>
                                        <div class="flex-fill w-100">
                                            <input class="form-control" type="text" placeholder="Address"
                                                name="Address" id="address" required readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="container-fluid p-1  mt-2 bg-body">
                                    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="itemName">Item
                                                    Name</label>
                                                <select class="form-select" name="Additems" id="itemName">
                                                    <option selected disabled value="">Select</option>
                                                    <option value='0'>Room Rent</option>
                                                    <option value="e01">Electricity Bill</option>
                                                    @foreach ($itemDetails as $item)
                                                        <option value="{{ $item->id }}">{{ $item->itemname }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div id="ElecticityMonthSelectDiv" style="display:none;">
                                                <div class="input-group flex-nowrap">
                                                    <label class="input-group-text" for="electricityMonth">Month</label>
                                                    <select name="electricity-month" id="electricityMonth"
                                                        class="form-select">
                                                        <option selected value="">Select Month</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="itemQuantity">Quantity</label>
                                                <input class="form-control" id="itemQuantity" type="number"
                                                    min="0" name="quantity" placeholder="Quantity">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="rate">Rate(<i
                                                        class="fa-solid fa-indian-rupee-sign mx-1"></i>)</label>
                                                <input class="form-control " type="number" id="rate"
                                                    step="0.01" min="0" max="9999.99" name="rate"
                                                    placeholder="Rate" readonly>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="tax">Tax(<i
                                                        class="fa-solid fa-percent mx-1"></i>)</label>
                                                <input class="form-control" type="number" id="tax" step="0.01"
                                                    min="0" max="9999.99" placeholder="Tax" value=""
                                                    name="tax" readonly>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="itemDiscount">Discount(<i
                                                        class="fa-solid fa-percent mx-1"></i>)</label>
                                                <input class="form-control" id="itemDiscount" type="number"
                                                    step="0.01" min="0" max="9999.99" name="discount"
                                                    placeholder="Discount In Percentage">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="itemAmount">Amount(<i
                                                        class="fa-solid fa-indian-rupee-sign mx-1"></i>)</label>
                                                <input class="form-control" id="itemAmount" type="number"
                                                    step="0.01" min="0" max="9999.99" name="amount"
                                                    placeholder="Amount" readonly>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <button class="btn btn-sm text-white" style="background-color:#212529"
                                                type="button" id="addItem">Add
                                                Item</button>
                                        </div>
                                    </div>
                                    <p class="text-danger" id="itemNotFoundError" style="font-size:0.8rem"></p>
                                </div>

                                <div class="item-list mt-2">
                                    <div class="table-responsive bg-body">
                                        <table class="table text-secondary" style="font-size:0.8rem">
                                            <thead class="align-middle text-capitalize fw-normal">
                                                <tr class="shadow-sm">
                                                    <th>Item Name</th>
                                                    <th>Quantity</th>
                                                    <th>Rate</th>
                                                    <th>Tax</th>
                                                    <th>Discount</th>
                                                    <th>Amount</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="listItems" class="align-middle text-capitalize"
                                                style="font-size:0.7rem">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="container bg-body  mt-2">
                                    <div class="d-flex justify-content-between align-items-center p-1">
                                        <p class="modal-heading">Total Amount</p>
                                        <p class="m-0"><i class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                id="totalAmount">0</span></p>
                                    </div>
                                    <div class="d-flex justify-content-between align-item-center p-1">
                                        <div class="form-check" style="font-size:0.8rem;">
                                            <input class="form-check-input" type="checkbox" value="0"
                                                name="receivedAmount" id="receivedAmounCheckBox">
                                            <label class="form-check-label" for="received">Received Amount</label>
                                        </div>
                                        <div>
                                            <span class="receivedAmountSection" style="display:none"> <i
                                                    class="fa-solid fa-indian-rupee-sign me-1"></i> <input class="pb-0"
                                                    type="number" placeholder="" value=""
                                                    id="receivedAmountInput"></span>
                                        </div>
                                    </div>
                                    <div class="receivedAmountSection" style="display:none;">
                                        <div class="d-flex justify-content-between align-items-center g-1">
                                            <div class="">
                                                <label class="input-group-text" for="patmentMode">Payment Mode</label>
                                            </div>
                                            <div class="">
                                                <select class="form-select" name="paymentMode" id="paymentMode">
                                                    <option selected value="cash">Cash</option>
                                                    <option value="online">Online</option>
                                                    <option value="cheque">Cheque</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between gap-2 mt-1">
                                    <button class="btn btn-danger btn-sm" type="button"
                                        id="regSaleFormCloseBtn">Close</button>
                                    <button class="btn btn-warning btn-sm" id="regSaleFromBtn" data-bs-toggle="tooltip"
                                        data-bs-placement="top" title="Add Sales Items First"
                                        type="submit">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- reg sale form end -->
                    <!-- custome Sale form start -->
                    <div class="custome-sale-form my-2 py-2" style="display:none;background-color:#595959;">
                        <form class="shadow-sm sale_form" id="customSaleform" action="">
                            <div class="container">
                                <div class="card border-0">
                                    <div class="card-body m-0 py-0">
                                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                                            <div class="">
                                                <p class="saleheading m-0 p-1"> Invoice No: <span id="customSaleInvoiceNo"
                                                        class="text-dark ms-1"> {{ $latestInvoiceNo }} <span></p>
                                            </div>
                                            <div class="">
                                                <div class="input-group">
                                                    <label class="input-group-text" for="date">Date</label>
                                                    <input class="form-control" type="date"
                                                        value="2025-06-08" id="customSaleInvoiceDate" required
                                                        placeholder="Select date" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="candidate-info-section my-2">
                                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
                                        <div class="flex-fill">
                                            <input type="text" id="customSaleRoomNoSelect" list="customRoomNoList"
                                                class="form-control" placeholder="Sale Type" required>
                                            <datalist id="customRoomNoList">
                                                @if (!empty($roomNumber))
                                                    @foreach ($roomNumber as $room)
                                                        <option value="{{ $room->roomno }}" />
                                                    @endforeach
                                                @endif
                                            </datalist>
                                        </div>
                                        <div class="flex-fill position-relative">
                                            <input class="form-control" name="candidateName" placeholder="Candidate Name"
                                                id="customCandidateName" type="text">
                                            <div id="custom-datalist" class="datalist-hidden custom-list text-capitalize">
                                                @foreach ($customeSalePartDetails as $client)
                                                    <div class="datalist-option border border-1 border-top-0 border-start-0 border-end-0"
                                                        data-party="{{ $client->party_name }}"
                                                        data-mobile="{{ $client->mobile }}"
                                                        data-partyid="{{ $client->id }}"
                                                        data-address="{{ $client->address }}">{{ $client->party_name }}
                                                    </div>
                                                @endforeach
                                                <div class="datalist-option bg-warning text-black"
                                                    data-party="addNewPart">
                                                    <i class="fa-solid fa-plus"></i> New Party <i
                                                        class="fa-solid fa-arrow-right-long"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <input class="form-control" type="tel" placeholder="Mobile Number"
                                                name="mobile"
                                                oninput="javascript: if (/[^0-9]/g.test(this.value)) this.value = this.value.replace(/[^0-9]/g, '')"
                                                id="customSaleCandidateMobileNumber" maxlength="10" inputmode="numeric"
                                                pattern="[0-9]*" required>

                                            <div id="custom-datalist-mobile"
                                                class="datalist-hidden custom-list text-capitalize">
                                                @foreach ($customeSalePartDetails as $client)
                                                    <div class="datalist-option border border-1 border-top-0 border-start-0 border-end-0"
                                                        data-party="{{ $client->party_name }}"
                                                        data-mobile="{{ $client->mobile }}"
                                                        data-address="{{ $client->address }}">{{ $client->mobile }}</div>
                                                @endforeach
                                                <div class="datalist-option bg-warning text-black"
                                                    data-party="addNewPart">
                                                    <i class="fa-solid fa-plus"></i> New Party <i
                                                        class="fa-solid fa-arrow-right-long"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-fill w-100">
                                            <input class="form-control" type="text" placeholder="Address"
                                                name="Address" id="customSaleCandidateAddress" readonly required>
                                        </div>
                                    </div>
                                </div>

                                <div class="container-fluid p-1  mt-2 bg-body">
                                    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="customSaleItemName">Item
                                                    Name</label>
                                                <select class="form-select" name="Additems" id="customSaleItemName">
                                                    <option selected value="">select</option>
                                                    <option value='0'>Room Rent</option>
                                                    @foreach ($itemDetails as $item)
                                                        <option value="{{ $item->id }}">{{ $item->itemname }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text"
                                                    for="customSaleItemQuantity">Quantity</label>
                                                <input class="form-control" id="customSaleItemQuantity" type="number"
                                                    min="0" name="quantity" placeholder="Quantity">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="customSaleRate">Rate(<i
                                                        class="fa-solid fa-indian-rupee-sign mx-1"></i>)</label>
                                                <input class="form-control " type="number" id="customSaleRate"
                                                    step="0.01" min="0" max="9999.99" name="rate"
                                                    placeholder="Rate" readonly>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="customSaleTax">Tax(<i
                                                        class="fa-solid fa-percent mx-1"></i>)</label>
                                                <input class="form-control" type="number" id="customSaleTax"
                                                    step="0.01" min="0" max="9999.99" placeholder="Tax"
                                                    value="" name="tax" readonly>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="customSaleItemDiscount">Discount(<i
                                                        class="fa-solid fa-percent mx-1"></i>)</label>
                                                <input class="form-control" id="customSaleItemDiscount" type="number"
                                                    step="0.01" min="0" max="9999.99" name="discount"
                                                    placeholder="Discount In Percentage">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="customSaleItemAmount">Amount(<i
                                                        class="fa-solid fa-indian-rupee-sign mx-1"></i>)</label>
                                                <input class="form-control" id="customSaleItemAmount" type="number"
                                                    step="0.01" min="0" max="9999.99" name="amount"
                                                    placeholder="Amount" readonly>
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <button class="btn btn-sm text-white" style="background-color:#212529"
                                                type="button" id="customSaleAddItemBtn">Add
                                                Item</button>
                                        </div>
                                    </div>
                                    <p class="text-danger" id="customItemNotFoundError" style="font-size:0.8rem"></p>
                                </div>

                                <div class="item-list mt-2">
                                    <div class="table-responsive bg-body">
                                        <table class="table text-secondary" style="font-size:0.8rem">
                                            <thead class="align-middle text-capitalize fw-normal">
                                                <tr class="shadow-sm">
                                                    <th>Item Name</th>
                                                    <th>Quantity</th>
                                                    <th>Rate</th>
                                                    <th>Tax</th>
                                                    <th>Discount</th>
                                                    <th>Amount</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="customSaleListItems" class="align-middle text-capitalize"
                                                style="font-size:0.7rem">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="container bg-body  mt-2">
                                    <div class="d-flex justify-content-between align-items-center p-1">
                                        <p class="modal-heading">Total Amount</p>
                                        <p class="m-0"><i class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                id="customSaleTotalAmount">0</span></p>
                                    </div>
                                    <div class="d-flex justify-content-between align-item-center p-1">
                                        <div class="form-check" style="font-size:0.8rem;">
                                            <input class="form-check-input" type="checkbox" value="0"
                                                name="receivedAmount" id="customSaleReceivedAmounCheckBox">
                                            <label class="form-check-label" for="received">Received Amount</label>
                                        </div>
                                        <div>
                                            <span class="receivedAmountSection" style="display:none"> <i
                                                    class="fa-solid fa-indian-rupee-sign me-1"></i> <input class="pb-0"
                                                    type="number" placeholder="" value=""
                                                    id="customSaleReceivedAmountInput"></span>
                                        </div>
                                    </div>
                                    <div class="receivedAmountSection" style="display:none;">
                                        <div class="d-flex justify-content-between align-items-center g-1">
                                            <div class="">
                                                <label class="input-group-text" for="patmentMode">Payment Mode</label>
                                            </div>
                                            <div class="">
                                                <select class="form-select" name="paymentMode"
                                                    id="customSalePaymentMode">
                                                    <option selected value="cash">Cash</option>
                                                    <option value="online">Online</option>
                                                    <option value="cheque">Cheque</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between gap-2 mt-1">
                                    <button class="btn btn-danger btn-sm" type="button"
                                        id="customSaleFromCloseBtn">Close</button>

                                    <button class="btn btn-warning btn-sm" id="customSaleFromBtn"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="Add Sales Items First"
                                        type="submit">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- custome sale form end -->

                    <!-- estimation form section -->
                    <div class="estimation-form-section my-2 py-2" style="display:none;background-color:#808080;">
                        <form class="shadow-sm sale_form" id="estimationForm" action="">
                            <div class="container">
                                <div class="card border-0">
                                    <div class="card-body m-0 py-0">
                                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                                            <div class="">
                                                <p class="saleheading m-0 p-1"> Estimation No: <span
                                                        id="estimationInvoiceNo" class="text-dark ms-1">
                                                        {{ $latestEstimationNo + 1 ?? 1 }} <span></p>
                                            </div>
                                            <div class="">
                                                <div class="input-group">
                                                    <label class="input-group-text" for="date">Date</label>
                                                    <input class="form-control validationRequired" type="date"
                                                        value="2025-06-08" id="estimationDate"
                                                        placeholder="Select date">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="candidate-info-section my-2">
                                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                        <div class="flex-fill">
                                            <input list="estimationRoomNoList" type="text"
                                                class="form-control validationRequired" id="estimationsRoomNoSelect"
                                                placeholder="Select">
                                            <datalist id="estimationRoomNoList">
                                                @if (!empty($roomNumber))
                                                    @foreach ($roomNumber as $room)
                                                        <option value="{{ $room->roomno }}" />
                                                    @endforeach
                                                @endif
                                            </datalist>
                                        </div>
                                        <div class="flex-fill">
                                            <input type="text" class="form-control validationRequired"
                                                id="estimationCondidateName" placeholder="Candidate Name">
                                        </div>
                                        <div class="flex-fill">
                                            <input class="form-control validationRequired" type="number"
                                                placeholder="Mobile Number" name="mobile"
                                                id="estimationCandidateMobileNo"
                                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength)"
                                                maxlength="10">
                                        </div>
                                        <div class="flex-fill w-100">
                                            <input class="form-control validationRequired" type="text"
                                                placeholder="Address" name="Address" id="estimationCandidateAddress">
                                        </div>
                                    </div>
                                </div>

                                <div class="container-fluid p-1  mt-2 bg-body">
                                    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="itemName">Item
                                                    Name</label>
                                                <select class="form-select" name="Additems" id="estimationItemName">
                                                    <option selected disabled value="">select</option>
                                                    <option value='0'>Room Rent</option>
                                                    @foreach ($itemDetails as $item)
                                                        <option value="{{ $item->id }}">{{ $item->itemname }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="itemQuantity">Quantity</label>
                                                <input class="form-control" id="estimationItemQuantity" type="number"
                                                    min="0" name="quantity" placeholder="Quantity">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="rate">Rate(<i
                                                        class="fa-solid fa-indian-rupee-sign mx-1"></i>)</label>
                                                <input class="form-control " type="number" id="estimationItemRate"
                                                    step="0.01" min="0" max="9999.99" name="rate"
                                                    placeholder="Rate">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="tax">Tax(<i
                                                        class="fa-solid fa-percent mx-1"></i>)</label>
                                                <input class="form-control" type="number" id="estimationItemTax"
                                                    step="0.01" min="0" max="9999.99" placeholder="Tax"
                                                    value="" name="tax">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="itemDiscount">Discount(<i
                                                        class="fa-solid fa-percent mx-1"></i>)</label>
                                                <input class="form-control" id="estimationItemDiscount" type="number"
                                                    step="0.01" min="0" max="9999.99" name="discount"
                                                    placeholder="Discount In Percentage">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="itemAmount">Amount(<i
                                                        class="fa-solid fa-indian-rupee-sign mx-1"></i>)</label>
                                                <input class="form-control" id="estimationItemAmount" type="number"
                                                    step="0.01" min="0" max="9999.99" name="amount"
                                                    placeholder="Amount">
                                            </div>
                                        </div>
                                        <div class="flex-fill">
                                            <button class="btn btn-sm text-white" style="background-color:#212529"
                                                type="button" id="estimationItemAddItemBtn">Add
                                                Item</button>
                                        </div>
                                    </div>
                                    <p class="text-danger" id="estimationItemNotFoundError" style="font-size:0.8rem"></p>
                                </div>

                                <div class="item-list mt-2">
                                    <div class="table-responsive bg-body">
                                        <table class="table text-secondary" style="font-size:0.8rem">
                                            <thead class="align-middle text-capitalize fw-normal">
                                                <tr class="shadow-sm">
                                                    <th>Item Name</th>
                                                    <th>Quantity</th>
                                                    <th>Rate</th>
                                                    <th>Tax</th>
                                                    <th>Discount</th>
                                                    <th>Amount</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="estimationItemListTable" class="align-middle text-capitalize"
                                                style="font-size:0.7rem">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="container bg-body  mt-2">
                                    <div class="d-flex justify-content-between align-items-center p-1">
                                        <p class="modal-heading">Total Amount</p>
                                        <p class="m-0"><i class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                id="estimationTotalAmountInput">0</span></p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between gap-2 mt-1">
                                    <button class="btn btn-danger btn-sm" type="button"
                                        id="estimationRegFormCloseBtn">Close</button>
                                    <button class="btn btn-warning btn-sm" id="estimationRegFormBtn"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="Add Sales Items First"
                                        type="button">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- end estimation form section -->
                    <!-- form close button -->
                </div>

                <!-- sales table -->
                <div id="regSaleTable" class="table-responsive mt-2 bg-body">
                    <table class="table text-secondary datatable">
                        <thead class="border border-warning border-start-0 border-end-0 " style="font-size:0.9rem;">
                            <tr class="align-middle">
                                <th class="text-center">S. No</th>
                                <th>Invoice To</th>
                                <th class="text-center">Room No</th>
                                <th class="text-center">Date</th>
                                <th>Amount</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="SaleData" class="align-middle" style="font-size:0.8rem;">
                            @forelse($salesTableData as $index => $sale)
                                @php
                                    $colorChangeClass = '';
                                    $TotalSalesData = $sale->totalAmount;
                                    $unusedAmountData = $sale->unusedAmount;
                                    if ($TotalSalesData >= $unusedAmountData) {
                                        $TotalAmountShow = $TotalSalesData - $unusedAmountData;
                                    } else {
                                        $TotalAmountShow = $unusedAmountData - $TotalSalesData;
                                    }

                                    if (round($TotalSalesData, 2) == round($unusedAmountData, 2)) {
                                        $colorChangeClass = 'text-bold';
                                    } elseif (round($TotalSalesData, 2) >= round($unusedAmountData, 2)) {
                                        $colorChangeClass = 'green';
                                    } else {
                                        $colorChangeClass = 'Orange';
                                    }

                                @endphp
                                <tr class="shadow-sm">
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <td>{{ $sale->candidatename }}</td>
                                    <td class="text-center">{{ $sale->roomno }}</td>
                                    <td class="text-center">
                                        {{ \Carbon\Carbon::parse($sale->invoicedate)->format('d-M-Y') }}
                                    </td>
                                    <td class="TableRecivedAmount {{ $colorChangeClass }}">
                                        <i class="fa-solid fa-indian-rupee-sign text-bold"></i>
                                        {{ number_format($TotalAmountShow, 2) }}
                                    </td>
                                    <td>
                                        <button class="btn btn-sm my-0 me-2 p-0 action-button" type="button"
                                            data-studentid="{{ $sale->studentid }}" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="View More"><i class="fa-regular fa-eye"></i>
                                        </button>

                                        <button class="btn btn-sm my-0 p-0 sendStatementBtnFormTable" type="button"
                                            data-candidateId="{{ $sale->studentid }}"
                                            data-remaningAmount="{{ $TotalAmountShow }}"
                                            data-mobile="{{ $sale->phone }}" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="Send Reminder"><i
                                                class="fa-solid fa-share"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <!-- <tr>
                                    <td colspan="6">Data Not Found</td>
                                </tr> -->
                            @endforelse
                        </tbody>
                    </table>

                </div>
                <div id="customSaleTable" class="table-responsive mt-2 bg-body" style="display:none">
                    <table class="table text-secondary align-middle datatable">
                        <thead class="border border-warning border-start-0 border-end-0" style="font-size:0.9rem;">
                            <tr>
                                <th class="text-center">S. No</th>
                                <th>Invoice To</th>
                                <th>Mobile Number</th>
                                <th class="text-center">Date</th>
                                <th>Amount</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="customSaleData" class="align-middle" style="font-size:0.8rem;">
                            @forelse($customSaleData as $index => $customSale)
                                <tr class="shadow-sm">
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <td>{{ $customSale->partyDetail->party_name }}</td>
                                    <td>{{ $customSale->partyDetail->mobile }}</td>
                                    <td class="text-center">
                                        {{ \Carbon\Carbon::parse($customSale->invoicedate)->format('d-M-Y') }}
                                    <td>Rs. {{ number_format($customSale->total_remaning_amount, 2) }}</td>

                                    <td>
                                        <button class="btn btn-sm m-0 p-0 my-0 me-2 action-button" type="button"
                                            data-partyid="{{ $customSale->party_id }}" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="View More"><i
                                                class="fa-regular fa-eye"></i></button>
                                        <button class="btn btn-sm p-0 m-0 sendStatementBtnFormTable"
                                            data-candidateId="{{ $customSale->party_id }}"
                                            data-remaningAmount="{{ $customSale->total_remaning_amount }}"
                                            data-mobile="{{ $customSale->partyDetail->mobile }}" type="button"
                                            data-id="" data-bs-toggle="tooltip" data-bs-placement="top"
                                            title="Send Reminder"><i class="fa-solid fa-share"></i></button>
                                    </td>
                                </tr>
                            @empty
                                <!-- <tr>
                                    <td class="text-center" colspan="6">Data Not Found</td>
                                </tr> -->
                            @endforelse

                        </tbody>
                    </table>

                </div>
                <div id="estimationDataTable" class="table-responsive mt-2 bg-body" style="display:none">
                    <table class="table text-secondary align-middle datatable">
                        <thead class="border border-warning border-start-0 border-end-0" style="font-size:0.9rem;">
                            <tr>
                                <th class="text-center">S. No</th>
                                <th>Estimation To</th>
                                <th class="text-center">Room No</th>
                                <th class="text-center">Date</th>
                                <th class="text-center">Mobile No</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="estimationData" class="align-middle" style="font-size:0.8rem;">
                            @forelse($estimationTableData as $index => $estimation)
                                <tr class="shadow-sm">
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <td>{{ $estimation->clientName }}</td>
                                    <td class="text-center">{{ $estimation->roomNo }}</td>
                                    <td class="text-center">
                                        {{ \Carbon\Carbon::parse($estimation->estDate)->format('d-M-Y') }}
                                    </td>
                                    <td class="text-center">{{ $estimation->contact }}</td>
                                    <td>
                                        <button class="btn btn-sm m-0 p-0 my-0  me-2 action-button" type="button"
                                            data-id="{{ $estimation->id }}" data-bs-toggle="tooltip"
                                            data-bs-placement="top" title="View More"><i class="fa-regular fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <!-- <tr>
                                    <td colspan="6" class="text-center">Data Not Found</td>
                                </tr> -->
                            @endforelse

                        </tbody>
                    </table>
                </div>
                <!-- sales table close -->
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="container">
                    <div class="position-fixed postion-static" style="width:100%;top:4.5%" ;>
                        <div style="width:27%;">
                            <div class="bg-body shadow rounded mb-2" style="position: relative; height:30vh; width:100%">
                                <canvas id="salesChart"></canvas>
                            </div>
                            <div class="salesDetails bg-body overflow-y-auto" style="height:500px;">
                                <div class="d-flex justify-content-center align-items-center">
                                    <div class="spinner-border sale-details-loader" role="status" style="display:none">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>

                                <div class="card border-0 shadow rounded-2 mt-1 mb-4 pb-5 sale_details_view"
                                    style="display:none;">
                                    <div id="SaleInfoBody" class="card-body p-1">
                                        <div class="d-flex justify-content-between">
                                            <div class="">
                                                <h5 class="modal-heading mb-1" id="candidateName1"></h5>
                                                <h5 class="modal-heading mb-1" id="candidateMobile1"><i
                                                        class="fas fa-phone me-2"></i><span id=""></span></h5>
                                            </div>
                                            <div>
                                                <h5 class="modal-heading mb-1 "
                                                    style="color:green;text-transform:capitalize;" id="mainSalesText"><i
                                                        id="iconChange" class="fa-solid fa-arrow-down-long me-2"></i>
                                                    <span id="salesTextShow"></span><i
                                                        class="fa-solid fa-indian-rupee-sign ms-1 me-1"></i> <span
                                                        id="CandidateTotalRemaningAmount"></span>
                                                </h5>
                                                <h5 class="modal-heading mb-1">No credit limit set</h5>
                                            </div>
                                        </div>
                                        <div
                                            class="card-send-reminder-statement-section d-flex justify-content-between align-items-center gap-1 mt-4">
                                            <div class="ChnageCursor flex-fill" id="RemindertextArea">
                                                <button class="btn m-0 p-0 modal-heading text-center" id="sendReminderBtn"
                                                    style="color:#65e1e1"><i class="fa-solid fa-bell me-2"></i>Send
                                                    Reminder</button>
                                            </div>
                                            <div class="ChnageCursor flex-fill">
                                                <button class="btn m-0 p-0 modal-heading text-center"
                                                    id="sendStatementBtn" style="color:#65e1e1"><i
                                                        class="fa-regular fa-calendar-days me-2"></i>SendStatement</button>
                                            </div>
                                            <div class="ChangeCursor flex-fill">
                                                <button id="fillTheSaleFormBtn"
                                                    class='modal-heading btn btn-sm btn-warning text-white AddNewSaleBtn text-center'
                                                    data-bs-toggle='tooltip' data-bs-placement='top' title='Add Sale'><i
                                                        class='fa-solid fa-money-bill me-2'></i>
                                                    Add Sale
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- modales -->
    <!-- modal for add new part in custom sale -->
    <div class="modal fade" id="addNewCustomSalePartyModal" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="addNewCustomSalePartyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title flex-fill bg-black text-white text-center"
                        id="addNewCustomSalePartyModalLabel">Add New Party</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="createNewPartForm" class="needs-validation" action="{{ route('create.party') }}"
                        method="post">
                        @csrf
                        <div class="input-group mb-2">
                            <label for="partyName" class="input-group-text">Party Name</label>
                            <input type="text" class="form-control" name="party_name" id="newPartName"
                                oninput="javascript:if (/[^a-zA-Z\s]/g.test(this.value)) this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"
                                required>
                        </div>
                        <div class="input-group mb-2">
                            <label for="partyMobile" class="input-group-text">Party Mobile</label>
                            <input class="form-control" type="tel" name="party_mobile" id="newPartMobile"
                                maxlength="10" inputmode="numeric" pattern="[0-9]*"
                                oninput="if (/[^0-9]/g.test(this.value)) this.value = this.value.replace(/[^0-9]/g, '')"
                                required>
                        </div>
                        <div class="input-group mb-2">
                            <label for="partyEmail" class="input-group-text">Party Email</label>
                            <input type="email" name="party_email" id="partyEmail" class="form-control" required>
                        </div>
                        <div class="input-group mb-2">
                            <label for="partyAddress" class="input-group-text">Party Address</label>
                            <input type="text" name="party_address" class="form-control" id="partyAddress" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="createNewPartBtn" class="btn btn-warning">Create Party</button>
                </div>
            </div>
        </div>
    </div>
    <!-- show bill after create a sale -->
    <div class="modal fade" id="ViewSaleData" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="ViewSaleDataLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" id="viewSaleDataCloseBtn" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <!-- Display the captured data here -->
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <div class="invoice-title">
                                                <div class="mb-1">
                                                    <h2 class="text-muted main-heading" id="companyName"></h2>
                                                </div>
                                                <div class="mb-1">
                                                    <p class="mb-1 header-p" id="companyAdd"></p>
                                                    <p class="mb-1 header-p">Email: <span id="companyEmail"></span></p>
                                                    <p class="header-p">Phone no.: <span id="companyMobile"></span></p>
                                                </div>
                                            </div>
                                            <div class="img-box" style="width:150px;height:50px">
                                                <img id="businessImg" class="object-fit-contain" src=""
                                                    alt="businessImg" style="width:100%;height: 100%;">
                                            </div>
                                        </div>
                                        <hr class="my-2">
                                        <div class="container">
                                            <h5 class="text-center">Tax Invoice</h5>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div class="condidate-details">
                                                <h5 class="mb-1 text-dark">Bill To:</h5>
                                                <h5 class="mb-2 text-dark" id="candidateName"></h5>
                                                <p class="mb-1 text-muted" id="candidateAdd"></p>
                                                <p class="text-muted" id="candidateMobile"></p>
                                            </div>
                                            <!-- end col -->
                                            <div class=" condidate-details">
                                                <div class="d-flex flex-column" style="width:117px">
                                                    <h5 class="align-self-start">Invoice No: #<span
                                                            id="InvoiceNos"></span>
                                                    </h5>
                                                    <h5 class="align-self-start">Date: <span id="invoiceData"></span>
                                                    </h5>
                                                    <h5 class="align-self-start"><span id="roomNoInModalText">Room
                                                            No:</span> <span id="candidateRoom"></span></h5>
                                                </div>
                                            </div>
                                            <!-- end col -->
                                        </div>
                                        <!-- end row -->
                                        <div class="p-0">
                                            <div class="table-responsive">
                                                <table class="table align-middle table-nowrap  mb-0">
                                                    <thead class="text-nowrap align-middle text-white"
                                                        style="background-color:#212529">
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Item Name</th>
                                                            <th>Quantity</th>
                                                            <th>Rate</th>
                                                            <th>Tax</th>
                                                            <th>Discount</th>
                                                            <th>Amount</th>
                                                        </tr>
                                                    </thead><!-- end thead -->
                                                    <tbody class="align-middle" id="ShowListItem">
                                                    </tbody><!-- end tbody -->
                                                </table>
                                                <div class="row">
                                                    <div class="col-6">
                                                        <h6 class="my-1 text-dark main-heading" style="font-size:0.8rem">
                                                            Amount in Words</h6>
                                                        <p style="background-color:#e6e6fa;margin:0;padding:12px 15px;font-size:0.8rem"
                                                            id="SalesAmountInWords"></p>
                                                        <h5 class="mb-1 text-dark main-heading" style="font-size:0.8rem">
                                                            Terms and Condition</h5>
                                                        <ul id="termsAnsCondition" class="header-p">
                                                        </ul>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="d-flex justify-content-between align-item-center amount-info mt-1 p-1"
                                                            style="background-color:#212529">
                                                            <p class="mt-0 mb-0 text-white">Total</p>
                                                            <p class="text-dark mt-0 mb-0 text-white"><i
                                                                    class="fa-solid fa-indian-rupee-sign me-1 "></i><span
                                                                    class="text-white" id="ShowTotalAmount"></span></p>
                                                        </div>
                                                        <div
                                                            class="d-flex justify-content-between align-item-center amount-info p-1 hideInEstimationSale">
                                                            <p class="mt-0 mb-0">Received <span class="text-capitalize"
                                                                    id="paymentModeInPrintText"></span>
                                                            </p>
                                                            <p class="text-dark mt-0 mb-0"><i
                                                                    class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                                    class="text-dark" id="ShowReceivedAmount"></span>
                                                            </p>
                                                        </div>
                                                        <div
                                                            class="d-flex justify-content-between align-item-center amount-info p-1 hideInEstimationSale">
                                                            <p class="mt-0 mb-0">Remaining</p>
                                                            <p class="text-dark mt-0 mb-0"><i
                                                                    class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                                    class="text-dark" id="ShowRemaingAmount"></span></p>
                                                        </div>
                                                        <div
                                                            class="d-flex justify-content-between align-item-center amount-info p-1 hideInEstimationSale">
                                                            <p class="mt-0 mb-0">Previous Balance</p>
                                                            <p class="text-dark mt-0 mb-0"><i
                                                                    class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                                    class="text-dark" id="ShowPreviousBalance"></span>
                                                            </p>
                                                        </div>
                                                        <div
                                                            class="d-flex justify-content-between align-item-center amount-info p-1 hideInEstimationSale">
                                                            <p class="mt-0 mb-0">current Balance</p>
                                                            <p class="text-dark mt-0 mb-0"><i
                                                                    class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                                    class="text-dark" id="ShowCurrentBalance"></span>
                                                            </p>
                                                        </div>
                                                        <div
                                                            class="d-flex flex-column align-item-center justify-content-center mt-2">
                                                            <h5 class="text-center">For,<span class="ms-1"
                                                                    id="signatureTopName"></span></h5>
                                                            <div class="imgContainerSignature">
                                                                <img id="signatureImg" class="mx-auto d-block"
                                                                    src="" alt=""
                                                                    style="width:60px;height:50px;">
                                                            </div>
                                                            <h5 class="imgContainerSignature mt-1 text-center">
                                                                Authorized Signatory</h5>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- end table -->
                                            </div><!-- end table responsive -->
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end col -->
                        </div>
                    </div>
                    <hr class="mt-1 mb-0">
                    <div class="float-end">
                        <small class="header-p">Visit Us</small>
                        <img class="footerImg mt-1" src="{{ asset('assets/images/new_hostal_logo.png') }}"
                            alt="" style="width:50px;height:15px;object-fit:contain">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="printModalLink" class="btn me-1" style="color:#212529"><i
                            class="fa fa-print"></i></button>
                    <button id="shareRegSaleInvoice" class="btn btn-sm text-white w-md shareInvoiceBtn"
                        style="background-color:#212529;">Share</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end bill show modal -->
    <!-- print modal for paymentIn sale -->
    <div class="modal fade" id="paymentInPrintModel" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-hidden="true" aria-labelledby="paymentInPrintModel">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <!-- Display the captured data here -->
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <div class="invoice-title">
                                                <div class="mb-1">
                                                    <h2 class="text-muted main-heading" id="companyBussinessName"></h2>
                                                </div>
                                                <div class="mb-1">
                                                    <p class="mb-1 header-p" id="companyAddress"></p>
                                                    <p class="mb-1 header-p">Email: <span id="companyEmail"></span></p>
                                                    <p class="header-p">Phone no.: <span id="companyMobilNumber"></span>
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="img-box" style="width:150px;height:50px">
                                                <img id="companyBussinessImg" class="object-fit-contain"
                                                    src="" alt="businessImg" style="width:100%;height: 100%;">
                                            </div>
                                        </div>
                                        <hr class="my-2">
                                        <div class="container">
                                            <h5 class="text-center">Payment-In</h5>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div class="condidate-details">
                                                <h5 class="mb-1 text-dark">Received From:</h5>
                                                <h5 class="mb-2 text-dark" id="studentName"></h5>
                                                <p class="mb-1 text-muted" id="studentAddress"></p>
                                                <p class="text-muted" id="studentMobilNumber"></p>
                                            </div>
                                            <!-- end col -->
                                            <div class=" condidate-details">
                                                <div class="d-flex flex-column" style="width:117px">
                                                    <h5 class="align-self-start">Invoice No: #<span
                                                            id="paymentInInvoiceNo"></span></h5>
                                                    <h5 class="align-self-start">Date: <span id="paymentInDate"></span>
                                                    </h5>
                                                    <h5 class="align-self-start">Room No: <span
                                                            id="studentRoomNo"></span>
                                                    </h5>
                                                </div>
                                            </div>
                                            <!-- end col -->
                                        </div>
                                        <!-- end row -->
                                        <div class="p-0">
                                            <div class="float-start">
                                                <h6>Amount in Words</h6>
                                                <p style="background-color:#e6e6fa;margin:0;padding:12px 15px;font-size:1rem"
                                                    id="showAmountInWords"></p>
                                            </div>
                                            <div class="float-end">
                                                <div
                                                    class="d-flex justify-content-between align-item-center amount-info p-1">
                                                    <p class="mt-0 mb-0">Received</p>
                                                    <p class="text-dark mt-0 mb-0"><i
                                                            class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                            class="text-dark" id="paymentInAmount"></span>
                                                    </p>
                                                </div>
                                                <div
                                                    class="d-flex justify-content-between align-item-center amount-info p-1">
                                                    <p class="mt-0 mb-0">Payment Mode</p>
                                                    <p class="text-dark mt-0 mb-0"><i
                                                            class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                            class="text-dark" id="paymentInPaymentMode"></span></p>
                                                </div>
                                                <div
                                                    class="d-flex justify-content-between align-item-center amount-info p-1">
                                                    <p class="mt-0 mb-0">Previous Balance</p>
                                                    <p class="text-dark mt-0 mb-0"><i
                                                            class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                            class="text-dark" id="SalestotalAmount"></span>
                                                    </p>
                                                </div>
                                                <div
                                                    class="d-flex justify-content-between align-item-center amount-info p-1">
                                                    <p class="mt-0 mb-0">current Balance</p>
                                                    <p class="text-dark mt-0 mb-0"><i
                                                            class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                                            class="text-dark" id="RemaningAmountOfSales"></span>
                                                    </p>
                                                </div>
                                                <div
                                                    class="d-flex flex-column align-item-center justify-content-center mt-2">
                                                    <h5 class="text-center">For,<span class="ms-1"
                                                            id="CompanyNameAtBottom"></span></h5>
                                                    <div class="imgContainerSignature">
                                                        <img id="companySignatureImg" class="mx-auto d-block"
                                                            src="" alt=""
                                                            style="width:60px;height:50px;">
                                                    </div>
                                                    <h5 class="imgContainerSignature mt-1 text-center">
                                                        Authorized Signatory</h5>
                                                </div>
                                            </div><!-- end table responsive -->
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end col -->
                        </div>
                    </div>
                    <hr class="mt-1 mb-0">
                    <div class="float-end">
                        <small class="header-p">Visit Us</small>
                        <img class="footerImg mt-1" src="{{ asset('assets/images/new_hostal_logo.png') }}"
                            alt="" style="width:50px;height:15px;object-fit:contain">
                    </div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    <!-- end print modal -->
    <!-- edit reg sale  modal-->
    <div class="modal fade" id="regSaleEditModal" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="regSaleEditModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" id="regSaleEditModalCloseBtn" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="" style="background-color:#595959;">
                    <form class="shadow-sm" id="regSaleEditForm" action="">
                        <div class="modal-body sale_form">
                            <div class="card border-0">
                                <div class="card-body">
                                    <div class="d-flex flex-wrap align-items-center justify-content-between">
                                        <div class="">
                                            <p class="saleheading m-0 p-1"> <span id="invoiceTypeText"> Invoice No
                                                </span> <span id="EditinvoiceNo" class="text-dark"> <span></p>
                                        </div>
                                        <div class="">
                                            <div class="input-group">
                                                <label class="input-group-text" for="date">Date</label>
                                                <input class="form-control m-0" type="date" value=""
                                                    id="Editdate" required placeholder="Select date" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="candidate-info-section my-2">
                                <div class="d-flex justify-content-between align-items-center gap-2">
                                    <div class="flex-grow-1">
                                        <div class="input-group">
                                            <label id="EditFormRoomNoOption" class="input-group-text"
                                                for="EditroomNoSelect">Room No</label>
                                            <input class="form-control readonly" type="text" id="EditroomNoSelect"
                                                name="RoomNo" placeholder="Room No" readonly required>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="input-group">
                                            <label class="input-group-text" for="EditcandidateNameSelect">Name</label>
                                            <input class="form-control readonly" type="text"
                                                id="EditcandidateNameSelect" placeholder="Name" readonly required>
                                        </div>
                                        <input type="hidden" id="EditCandidateId">
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="input-group">
                                            <label class="input-group-text" for="Editmobile">Mobile</label>
                                            <input class="form-control readonly" type="number"
                                                placeholder="Mobile Number" name="mobile" id="Editmobile"
                                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength)"
                                                maxlength="10" readonly required>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-100 mt-2">
                                    <div class="input-group">
                                        <label class="input-group-text" for="Editaddress">Address</label>
                                        <input class="form-control readonly" type="text" placeholder="Address"
                                            name="Address" id="Editaddress" readonly required>
                                    </div>
                                </div>
                            </div>

                            <div class="container-fluid p-1  mt-2 bg-body">
                                <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                                    <div class="flex-fill">
                                        <div class="input-group flex-nowrap">
                                            <label class="input-group-text" for="EdititemName">Item
                                                Name</label>
                                            <select class="form-select" name="Additems" id="EdititemName">
                                                <option selected disabled value="">select</option>
                                                <option value='0'>Room Rent</option>
                                                <option id="electricityBillOption" value="e01">Electricity Bill
                                                </option>
                                                @foreach ($itemDetails as $item)
                                                    <option value="{{ $item->id }}">{{ $item->itemname }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="flex-fill">
                                        <div id="EditElecticityMonthSelectDiv" style="display:none;">
                                            <div class="input-group flex-nowrap">
                                                <label class="input-group-text" for="EditelectricityMonth">Month</label>
                                                <select name="electricity-month" id="EditelectricityMonth"
                                                    class="form-select">
                                                    <option selected value="">Select Month</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-fill">
                                        <div class="input-group flex-nowrap">
                                            <label class="input-group-text" for="EdititemQuantity">Quantity</label>
                                            <input class="form-control" id="EdititemQuantity" type="number"
                                                min="0" name="quantity" placeholder="Quantity">
                                        </div>
                                    </div>
                                    <div class="flex-fill">
                                        <div class="input-group flex-nowrap">
                                            <label class="input-group-text" for="Editrate">Rate(<i
                                                    class="fa-solid fa-indian-rupee-sign mx-1"></i>)</label>
                                            <input class="form-control readonly" type="number" id="Editrate"
                                                step="0.01" min="0" max="9999.99" name="rate"
                                                placeholder="Rate" readonly>
                                        </div>
                                    </div>
                                    <div class="flex-fill">
                                        <div class="input-group flex-nowrap">
                                            <label class="input-group-text" for="Edittax">Tax(<i
                                                    class="fa-solid fa-percent mx-1"></i>)</label>
                                            <input class="form-control readonly" type="number" id="Edittax"
                                                step="0.01" min="0" max="9999.99" placeholder="Tax"
                                                value="" name="tax" readonly>
                                        </div>
                                    </div>
                                    <div class="flex-fill">
                                        <div class="input-group flex-nowrap">
                                            <label class="input-group-text" for="EdititemDiscount">Discount(<i
                                                    class="fa-solid fa-percent mx-1"></i>)</label>
                                            <input class="form-control" id="EdititemDiscount" type="number"
                                                step="0.01" min="0" max="9999.99" name="discount"
                                                placeholder="Discount In Percentage">
                                        </div>
                                    </div>
                                    <div class="flex-fill">
                                        <div class="input-group flex-nowrap">
                                            <label class="input-group-text" for="EdititemAmount">Amount(<i
                                                    class="fa-solid fa-indian-rupee-sign mx-1"></i>)</label>
                                            <input class="form-control readonly" id="EdititemAmount" type="number"
                                                step="0.01" min="0" max="9999.99" name="amount"
                                                placeholder="Amount" readonly>
                                        </div>
                                    </div>
                                    <div class="flex-fill">
                                        <button class="btn btn-sm text-white" style="background-color:#212529"
                                            type="button" id="EditaddItem">Add
                                            Item</button>
                                    </div>
                                </div>
                                <p class="text-danger" id="EdititemNotFoundError" style="font-size:0.8rem"></p>
                            </div>

                            <div class="Edititem-list bg-body my-2">
                                <div class="table-responsive saleFormTable">
                                    <table id="" class="table text-secondary" style="font-size:0.8rem">
                                        <thead class="align-middle text-capitalize fw-normal">
                                            <tr>
                                                <th>Item Name</th>
                                                <th>Quantity</th>
                                                <th>Rate</th>
                                                <th>Tax</th>
                                                <th>Discount</th>
                                                <th>Amount</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="EditlistItems" class="align-middle text-capitalize"
                                            style="font-size:0.7rem">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="mt-2 px-1 bg-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <p class="modal-heading">Total Amount</p>
                                    <p class="m-0"><i class="fa-solid fa-indian-rupee-sign me-1"></i><span
                                            id="EdittotalAmount">0</span></p>
                                </div>

                                <div id="receivedAmountDivSection"
                                    class="d-flex justify-content-between align-item-center">
                                    <div class="form-check p-0" style="font-size:0.8rem;">
                                        <label class="form-check-label" for="received">Previous Received</label>
                                    </div>
                                    <div>
                                        <span id="EditreceiveAmount-input" class="input-group-text p-0"> <i
                                                class="fa-solid fa-indian-rupee-sign me-1"></i> <input
                                                class="form-control" type="number" step="0.01" min="0"
                                                max="9999.99" placeholder="" value=""
                                                id="EditreceivedAmountInput" readonly></span>
                                    </div>
                                </div>
                                <div id="EditPaymentMode" class="row">
                                    <div class="col-sm-9">
                                        <label class="input-group-text p-0" for="EditpatmentMode">Payment Mode</label>
                                    </div>
                                    <div class="col-sm-3">
                                        <select class="form-select" name="paymentMode" disabled id="EditpaymentMode">
                                            <option selected value="cash">Cash</option>
                                            <option value="online">Online</option>
                                            <option value="cheque">Cheque</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="editFormActive" type="button" class="btn btn-warning btn-sm">Edit</button>
                    <button id="DeleteSale" type="button" class="btn btn-success btn-sm" disabled>Delete</button>
                    <button class="btn btn-warning btn-sm" id="EditsaleSubmit" data-bs-toggle="tooltip"
                        data-bs-placement="top" title="Add Sales Items First" type="submit" disabled>Submit</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end edit reg sale modal -->

    <!-- take payment modal -->
    <div class="modal fade" id="regTakePaymentModal" tabindex="-1" data-bs-backdrop="static"
        data-bs-keyboard="false" tabindex="-1" aria-labelledby="regTakePaymentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="regTakePaymentModalLabel">Payment-In</h5>
                    <button type="button" id="PaymentInModalCloseBtn" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="paymentInForm" class="sale_form">
                        <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
                            <div class="">
                                <div class="input-group">
                                    <label class="input-group-text" for="PaymentInInvoiceNo">Invoice Number</label>
                                    <input class="form-control" type="number" name="invoiceNo"
                                        id="PaymentInInvoiceNo" readonly required>
                                </div>
                            </div>
                            <div class="">
                                <div class="input-group">
                                    <label class="input-group-text" for="PaymentInDate">Date</label>
                                    <input class="form-control" type="date" name="date"
                                        value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" id="PaymentInDate"
                                        required>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div class="">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="">
                                        <div class="input-group">
                                            <label class="input-group-text" id="paymentInRoomNoLabel"
                                                for="paymentInRoomNo">Room Number</label>
                                            <input class="form-control w-25" type="text" name="roomNumber"
                                                id="paymentInRoomNo" required readonly>
                                        </div>
                                    </div>
                                    <div class="">
                                        <div class="input-group">
                                            <label class="input-group-text" for="paymentInCandidateName">Candidate
                                                Name</label>
                                            <input class="form-control" type="text" name="candidateName"
                                                id="paymentInCandidateName" readonly required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="">
                                        <div class="input-group">
                                            <label class="input-group-text" for="paymentInPandingAmount">Pending
                                                Amount</label>
                                            <input class="form-control" type="number" min="0"
                                                name="pendingAmount" placeholder="Panding Amount"
                                                id="paymentInPandingAmount" readonly required>
                                        </div>
                                    </div>
                                    <div class="">
                                        <div class="input-group">
                                            <label class="input-group-text" for="paymentInReceiveAmount">Recive
                                                Amount</label>
                                            <input class="form-control" type="number" min="0"
                                                name="receivedAmount" placeholder="Receive Amount"
                                                id="paymentInReceiveAmount" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="flex-fill">
                                <div class="input-group">
                                    <label class="input-group-text" for="PaymentInPaymentMode">Payment Mode</label>
                                    <select class="form-select" name="PaymentInPaymentMode" id="PaymentInPaymentMode">
                                        <option selected value="cash">Cash</option>
                                        <option value="online">Online</option>
                                        <option value="cheque">Cheque</option>
                                        <option value="waved" class="text-warning">Wave off</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-danger" type="button" id="deletePaymentInBtn"
                        style="display:none;">Delete</button>
                    <button class="btn btn-sm btn-warning" id="PaymentInFromSubmitBtn" type="button">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end take payment modal -->

    <!-- end reg sale modal -->
    <script>
        $(document).ready(function() {
            // Function to fetch data
            async function fetchData() {

                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "GET",
                        url: "{{ route('current.session.sale.data') }}",
                        data: {
                            'filterData': '{{ $filterValue }}'
                        },
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(xhr, status, error) {
                            reject(error);
                        }
                    })
                });
            }

            // Function to update the chart
            function updateChart(responseData) {
                if (responseData) {
                    const data = {
                        labels: responseData.labels,
                        datasets: [{
                            label: `Sale ${responseData.year}`,
                            backgroundColor: "#ffc107",
                            borderColor: "#ffc107",
                            borderWidth: 1,
                            data: responseData.totalAmount
                        }]
                    };

                    const options = {
                        maintainAspectRatio: false,
                    };

                    var ctx = document.getElementById("salesChart").getContext("2d");
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: data,
                        options: options,
                    });
                }
            }

            // Main function to fetch data and update the chart
            async function main() {
                const responseData = await fetchData();
                updateChart(responseData);
            }

            function removeFilterAttributeForUrl() {
                const url = new URL(window.location.href);
                url.searchParams.delete('filter');
                window.history.replaceState({}, '', url);
            }

            // Call the main function to fetch data and update the chart
            main();
            removeFilterAttributeForUrl();

            var table = new DataTable('.datatable', {
                info: false,
                ordering: false,
                paging: false,
                searching: true,
                bAutoWidth: false,
                dom: 't',
                stripeClasses: [],
                className: '',
                drawCallback: function() {
                    $('.datatable').removeClass('dataTable no-footer');
                    $('.dataTables_empty').css({
                        'text-align': 'center',
                        'vertical-align': 'middle',
                    });
                }
            });

            function checkEmptyData(table) {
                // Use DataTables API to get the number of rows
                var dataCount = table.data().count();

                // If no data, display the "Data not found" message
                if (dataCount === 0) {
                    // Clear existing rows
                    table.clear().draw();

                    // Get number of columns 
                    var numCols = table.columns().header().length;

                    // Create and add a new row with colspan
                    var messageRow = $('<tr><td colspan="' + numCols +
                        '" class="text-center">Data not found</td></tr>');

                    // Append the new row to the table body
                    $(table.table().body()).append(messageRow);
                } else {
                    // If there is data, make sure the message row is removed
                    $('.datatable').find('tr:has(td[colspan])').remove();
                }
            }

            // Custom search box functionality
            $('#customSerachBox').on('keyup', function() {
                table.search($(this).val()).draw();
            });

            $(".filterBtn").on('click', function() {
                const filterValue = $(this).val();
                if (filterValue === 'custom') {
                    $("#customSerachBox").fadeIn();
                } else {
                    $("#customSerachBox").fadeOut();
                    $("#saleDataFilterForm").append(
                        `<input type="hidden" name="filter" value="${filterValue}">`);
                    $("#saleDataFilterForm").submit();
                }
            });
            // toggle functionality

            const regSaleSectionButton = $("#regSaleButton");
            const customSaleSectionButton = $("#customSaleButton");
            const addSaleButton = $("#addSaleButton");
            const addEstimationButton = $('#addEstimationButton');
            const regSaleTable = $("#regSaleTable");
            const customSaleTable = $("#customSaleTable");
            const estimationTable = $("#estimationDataTable");
            const regSaleFormSection = $(".reg-sale-form");
            const regSaleFormCloseBtn = $("#regSaleFormCloseBtn");
            const customSaleFormSection = $(".custome-sale-form");
            const customSaleFromCloseBtn = $("#customSaleFromCloseBtn");
            const estimationFormSection = $(".estimation-form-section");
            const estimationForm = $("#estimationForm");
            const estimationRegFormCloseBtn = $("#estimationRegFormCloseBtn");
            const roomNoSelect = $("#roomNoSelect");
            const candidateNameSelect = $("#candidateNameSelect");
            const itemNameDetails = $("#itemName");
            const ElecticityMonthSelectDiv = $("#ElecticityMonthSelectDiv");
            const electricityMonthInput = $("#electricityMonth");
            const addItemToListButton = $('#addItem');
            const itemQuantityInput = $("#itemQuantity");
            const itemRateInput = $("#rate");
            const ItemTaxInput = $("#tax");
            const ItemtemAmountInput = $('#itemAmount');
            const ItemDiscountInput = $('#itemDiscount');
            const itemTableInForm = $("#listItems");
            const totalItemAmountSaleForm = $("#totalAmount");
            const receivedAmounCheckBoxInSaleForm = $("#receivedAmounCheckBox");
            const receivedAmountSectionInSaleForm = $(".receivedAmountSection");
            const receivedAmountInputInSaleForm = $("#receivedAmountInput");
            const regSaleFromBtn = $("#regSaleFromBtn");
            const regSaleform = $("#regSaleform");
            let addItemList = [];
            let alreadyStroreItemId = [];

            // custome sale 
            const customSaleRoomNoSelect = $("#customSaleRoomNoSelect");
            const customCandidateName = $("#customCandidateName");
            const customCandidateNameList = $("#custom-datalist");
            const customSaleCandidateMobileNumber = $("#customSaleCandidateMobileNumber");
            const customCandidateMobilerNoList = $("#custom-datalist-mobile")
            const customSaleCandidateAddress = $("#customSaleCandidateAddress");
            const customSaleItemName = $("#customSaleItemName");
            const customSaleItemQuantity = $("#customSaleItemQuantity");
            const customSaleRate = $("#customSaleRate");
            const customSaleTax = $("#customSaleTax");
            const customSaleItemDiscount = $("#customSaleItemDiscount");
            const customSaleItemAmount = $("#customSaleItemAmount");
            const customSaleAddItemBtn = $("#customSaleAddItemBtn");
            const customSaleListItems = $("#customSaleListItems");
            const customSaleTotalAmount = $("#customSaleTotalAmount");
            const customSaleform = $("#customSaleform");
            const customSaleReceivedAmounCheckBox = $("#customSaleReceivedAmounCheckBox");
            const customSaleReceivedAmountInput = $("#customSaleReceivedAmountInput");
            const customSaleFromBtn = $("#customSaleFromBtn");
            let customAddItemList = [];

            // estimation sale
            const estimationInvoiceNo = $("#estimationInvoiceNo");
            const estimationDate = $("#estimationDate");
            const estimationsRoomNoSelect = $("#estimationsRoomNoSelect");
            const estimationCondidateName = $("#estimationCondidateName");
            const estimationCandidateMobileNo = $("#estimationCandidateMobileNo");
            const estimationCandidateAddress = $("#estimationCandidateAddress");
            const estimationItemName = $("#estimationItemName");
            const estimationItemQuantity = $("#estimationItemQuantity");
            const estimationItemRate = $("#estimationItemRate");
            const estimationItemTax = $("#estimationItemTax");
            const estimationItemDiscount = $("#estimationItemDiscount");
            const estimationItemAmount = $("#estimationItemAmount");
            const estimationItemAddItemBtn = $("#estimationItemAddItemBtn");
            const estimationItemNotFoundError = $("#estimationItemNotFoundError");
            const estimationItemListTable = $("#estimationItemListTable");
            const estimationTotalAmountInput = $("#estimationTotalAmountInput");
            const estimationRegFormBtn = $("#estimationRegFormBtn");
            let estimationItemList = [];

            // edit reg sale details
            const regSaleEditForm = $("#regSaleEditForm");
            const EditInvoiceNo = $("#EditinvoiceNo");
            const EditRegSaleDate = $("#Editdate");
            const EditRoomNoSelect = $("#EditroomNoSelect");
            const EditCandidateNameSelect = $("#EditcandidateNameSelect");
            const EditMobile = $("#Editmobile");
            const EditAddress = $("#Editaddress");
            const EditItemName = $("#EdititemName");
            const EditElectricityMonth = $("#EditelectricityMonth");
            const EditElecticityMonthSelectDiv = $("#EditElecticityMonthSelectDiv");
            const EditItemQuantity = $("#EdititemQuantity");
            const EditItemRate = $("#Editrate");
            const EditItemTax = $("#Edittax");
            const EditItemDiscount = $("#EdititemDiscount");
            const EditItemAmount = $("#EdititemAmount");
            const EditAddItemInTableBtn = $("#EditaddItem");
            const EditlistItemsTable = $("#EditlistItems");
            const EditTotalAmount = $("#EdittotalAmount");
            const EditreceivedAmountInput = $("#EditreceivedAmountInput");
            const EditOldReceivedAmount = $("#oldReceivedAmount");
            const EditpaymentMode = $("#EditpaymentMode");
            const editRegFormActiveBtn = $("#editFormActive");
            const DeleteRegSaleBtn = $("#DeleteSale");
            const EditSaleFormSubmitBtn = $("#EditsaleSubmit");

            // payment in
            const regTakePaymentModal = $("#regTakePaymentModal");
            const paymentInForm = $("#paymentInForm");
            const PaymentInDate = $("#PaymentInDate");
            const paymentInRoomNo = $("#paymentInRoomNo");
            const paymentInCandidateName = $("#paymentInCandidateName");
            const PaymentInInvoiceNo = $("#PaymentInInvoiceNo");
            const paymentInPandingAmount = $("#paymentInPandingAmount");
            const paymentInReceiveAmount = $("#paymentInReceiveAmount");
            const PaymentInPaymentMode = $("#PaymentInPaymentMode");
            const PaymentInFromSubmitBtn = $("#PaymentInFromSubmitBtn");
            const deletePaymentInBtn = $("#deletePaymentInBtn");

            const sendReminderBtn = $("#sendReminderBtn");
            const sendStetementBtn = $("#sendStatementBtn");
            const fillTheSaleFormBtn = $("#fillTheSaleFormBtn");

            function alertMessage(error) {
                Swal.fire({
                    icon: 'error',
                    text: error,
                    timer: 3000,
                    timerProgressBar: true
                });
            }

            function successMessage(successMessage) {
                Swal.fire({
                    icon: 'success',
                    text: successMessage,
                    timer: 3000,
                    timerProgressBar: true
                });
            }

            function reloadPage() {
                location.reload();
            }

            function WhatsAppNotInstalled() {
                $("#loader-overlay").hide();
                Swal.fire({
                    icon: 'warning',
                    title: 'WhatsApp Permission',
                    html: 'Our system is support whatsapp desktop please install by give download link here 👇 <br>' +
                        '<a class="btn btn-success btn-sm" href="https://www.whatsapp.com/download" target="_blank">Download Link</a>.' +
                        '<br>if you already install go to setting inside permission and give desktop whatspp permission.',
                    showCloseButton: true,
                });
            }

            function initializeCustomDatalist(inputSelector, datalistSelector) {
                const $input = $(inputSelector);
                const $datalist = $(datalistSelector);
                const $options = $datalist.find('.datalist-option');
                const $newPartyOption = $options.last(); // Assuming the last option is the "New Party" option

                $input.on('focus', function() {
                    $datalist.removeClass('datalist-hidden');
                });

                $input.on('input', function() {
                    const filter = $input.val().toLowerCase();

                    $options.each(function() {
                        const text = $(this).text().toLowerCase();
                        $(this).toggle(text.includes(filter));
                    });

                    // Ensure the "New Party" option is always shown
                    $newPartyOption.show();
                });

                $options.on('click', function() {
                    const $this = $(this);
                    $input.val($this.text().trim());
                    $input.data({
                        'partyid': $this.data('partyid'),
                        'mobile': $this.data('mobile'),
                        'address': $this.data('address'),
                        'party': $this.data('party')
                    });
                    $datalist.addClass('datalist-hidden');
                    $input.trigger('input'); // Manually trigger the input event
                });

                $(document).on('click', function(event) {
                    if (!$datalist.is(event.target) && !$datalist.has(event.target).length && event
                        .target !== $input[0]) {
                        $datalist.addClass('datalist-hidden');
                    }
                });
            }


            function regSectionAction() {
                regSaleSectionButton.addClass('btn-warning').removeClass('btn-secondary')
                customSaleSectionButton.removeClass('btn-warning').addClass('btn-secondary');
                regSaleTable.show();
                customSaleTable.hide();
                addSaleButton.attr('data-saletype', 'regSale');
                regSaleFormSection.hide();
                customSaleFormSection.hide();
                estimationFormSection.hide();
                estimationTable.hide();
                addItemList = [];
                alreadyStroreItemId = [];
                regSaleform.trigger('reset');
                updateListInTable(addItemList, itemTableInForm);
                totalItemAmountSaleForm.text(0);
                receivedAmounCheckBoxInSaleForm.prop('checked', true);
                receivedAmounCheckBoxInSaleForm.trigger('click');
                $('#SaleData').find('.action-button').first().trigger('click');
                localStorage.setItem('activeSection', 'regSale');
            }

            function customSaleSectionAction() {
                customSaleSectionButton.addClass('btn-warning').removeClass('btn-secondary');
                regSaleSectionButton.addClass('btn-secondary').removeClass('btn-warning');
                customSaleTable.show();
                regSaleTable.hide();
                addSaleButton.attr('data-saletype', 'customSale');
                regSaleFormSection.hide();
                customSaleFormSection.hide();
                estimationFormSection.hide();
                estimationTable.hide();
                customAddItemList = [];
                customSaleform.trigger('reset');
                updateListInTable(customAddItemList, customSaleListItems);
                customSaleTotalAmount.text(0);
                customSaleReceivedAmounCheckBox.prop('checked', true);
                customSaleReceivedAmounCheckBox.trigger('click');
                $('#customSaleData').find('.action-button').first().trigger('click');
                localStorage.setItem('activeSection', 'customSale');
            }

            function updateInputs(response, type) {
                if (type === "sale") {
                    $('#itemAmount').val(response.amount);
                    $('#tax').val(response.tax);
                    $('#rate').val(response.rate);
                    $('#itemQuantity').val(1);
                    $('#itemDiscount').val(0);
                } else if (type === "custom_sale") {
                    customSaleItemAmount.val(response.amount);
                    customSaleTax.val(response.tax);
                    customSaleRate.val(response.rate);
                    customSaleItemQuantity.val(1);
                    customSaleItemDiscount.val(0);
                } else if (type === 'estimation_sale') {
                    estimationItemAmount.val(response.amount);
                    estimationItemTax.val(response.tax);
                    estimationItemRate.val(response.rate);
                    estimationItemQuantity.val(1);
                    estimationItemDiscount.val(0);
                } else {
                    EditItemAmount.val(response.amount);
                    EditItemTax.val(response.tax);
                    EditItemRate.val(response.rate);
                    EditItemQuantity.val(1);
                    EditItemDiscount.val(0);
                }
            }

            function handleErrorInputs(type) {
                if (type === "sale") {
                    ElecticityMonthSelectDiv.hide();
                    $('#itemAmount').val("");
                    $('#tax').val("");
                    $('#rate').val("");
                    $('#itemQuantity').val("");
                    $('#itemDiscount').val("");
                } else if (type === "custom_sale") {
                    customSaleItemAmount.val('');
                    customSaleTax.val('');
                    customSaleRate.val('');
                    customSaleItemQuantity.val('');
                    customSaleItemDiscount.val('');
                } else if (type === 'estimation_sale') {
                    estimationItemAmount.val('');
                    estimationItemTax.val('');
                    estimationItemRate.val('');
                    estimationItemQuantity.val('');
                    estimationItemDiscount.val('');
                } else {
                    EditItemQuantity.val('');
                    EditItemAmount.val('');
                    EditItemRate.val('');
                    EditItemTax.val('');
                    EditItemDiscount.val('');
                    EditElecticityMonthSelectDiv.hide();
                }
            }

            function getRoomRent(roomNo) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: 'getRoomRent',
                        type: "GET",
                        data: {
                            roomNo: roomNo
                        },
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(error) {
                            reject(error);
                        }
                    });
                });
            }

            function getElectricityRecordsMonth(candidateId) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "get",
                        url: '{{ route('user.electricity.month', ['id' => ':id']) }}'.replace(
                            ":id", candidateId),
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(response) {
                            reject(response);
                        }
                    });
                });
            }

            function getElectricityRecords(roomNo, candidateId, month) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "get",
                        url: "{{ route('get.electricity.record') }}",
                        data: {
                            roomNo: roomNo,
                            candidateId: candidateId,
                            ElectricityMonth: month
                        },
                        'dataType': 'json',
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(error) {
                            reject(error);
                        }
                    });
                })
            }

            function getItemDetails(itemId) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "get",
                        url: "getItemDetails",
                        data: {
                            itemID: itemId
                        },
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(error) {
                            reject(error);
                        }
                    });
                });
            }

            function submitRegSaleData(saleData, url) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "post",
                        url: url,
                        data: {
                            '_token': "{{ csrf_token() }}",
                            'data': saleData
                        },
                        dataType: "json",
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(error) {
                            reject(error);
                        }
                    });
                });
            }

            function deleteRegSale(data, url) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "delete",
                        url: url,
                        data: {
                            _token: "{{ csrf_token() }}",
                            invoiceNo: data
                        },
                        dataType: "json",
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(error) {
                            reject(error);
                        }
                    });
                });
            }

            function getBillDetails(invoiceNo, url) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "get",
                        url: url,
                        data: {
                            invoiceNo: invoiceNo
                        },
                        dataType: "json",
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(error) {
                            reject(error);
                        }
                    });
                });
            }

            function viewInvoiceInModal(invoiceDetails, print, saleType) {
                const businessDetails = invoiceDetails.businessDetails;
                const salesDetails = invoiceDetails.saleData;
                const itemDetails = salesDetails.items;
                const termsAndCondtition = businessDetails.terms;
                let modalConfig = 'show';

                if (print) {
                    modalConfig = {
                        backdrop: 'static',
                        keyboard: false,
                        show: false
                    };
                }

                if (saleType === 'customSale') {
                    $("#roomNoInModalText").text('Invoice Type');
                }

                $("#companyName").text(businessDetails.bussinessName);
                $("#companyAdd").text(businessDetails.address);
                $("#companyEmail").text(businessDetails.bussinessemail);
                $("#companyMobile").text(`${businessDetails.mobile1}, ${businessDetails.mobile2 ?? ''}`);
                $("#businessImg").attr('src', businessDetails.imgPath);
                $("#signatureTopName").text(businessDetails.bussinessName);
                $("#signatureImg").attr('src', businessDetails.signaturePath);
                $("#candidateRoomModal").val(salesDetails.RoomNo);
                $("#InvoiceModal").val(salesDetails.invoiceno);
                $("#SalesAmountInWords").text(salesDetails.amountInWords + " Rupees Only");
                $("#InvoiceNos").text(salesDetails.invoiceno);
                $("#candidateName").text(salesDetails.candidateName);
                $("#candidateAdd").text(salesDetails.candidateAdd);
                $("#candidateMobile").text(salesDetails.candidatMobile);
                $("#invoiceData").text(salesDetails.invoicedate);
                $("#candidateRoom").text(salesDetails.RoomNo);
                $("#ShowTotalAmount").text(salesDetails.totalAmount);

                if (saleType !== 'estimationSale') {
                    $(".hideInEstimationSale").removeClass('d-none');

                    $("#ShowReceivedAmount").text((parseFloat(salesDetails.receivedAmount)).toFixed(2));
                    $("#ShowRemaingAmount").text(salesDetails.remainingAmount);
                    $("#paymentModeInPrintText").text(salesDetails.paymentMode === "waved" ? '(Waved off)' :
                        `(${salesDetails.paymentMode})`);
                    $("#ShowPreviousBalance").text((parseFloat(salesDetails.TotalRemainingAmount) - parseFloat(
                        salesDetails
                        .remainingAmount)).toFixed(2));
                    $("#ShowCurrentBalance").text(((parseFloat(salesDetails.TotalRemainingAmount) - parseFloat(
                        salesDetails
                        .remainingAmount)) + parseFloat(salesDetails.remainingAmount)).toFixed(2));
                } else {
                    $(".hideInEstimationSale").addClass('d-none');
                }
                $("#shareRegSaleInvoice").data({
                    'roomno': salesDetails.RoomNo,
                    'invoiceno': salesDetails.invoiceno,
                    'sale': saleType,
                });
                var tableBody = $('#ShowListItem');
                var count = 1;
                tableBody.empty();
                for (var key in itemDetails) {
                    if (itemDetails.hasOwnProperty(key)) {
                        var item = itemDetails[key];
                        var tableRow = $('<tr>').append(
                            $("<td>").append(count),
                            $("<td>").addClass("text-nowrap").append(item.itemName),
                            $("<td>").addClass("text-nowrap").append(item.quantity),
                            $("<td>").addClass("text-nowrap").append(
                                $("<span>").append($("<i>").addClass(
                                    "fa-solid fa-indian-rupee-sign me-1")),
                                $("<span>").append(item.rate)
                            ),
                            $("<td>").addClass("text-nowrap").append(
                                $("<span>").append(item.tax),
                                $("<span>").append($("<i>").addClass(
                                    "fa-solid fa-percent ms-1"))
                            ),
                            $("<td>").addClass("text-nowrap").append(
                                $("<span>").append(item.discount),
                                $("<span>").append($("<i>").addClass(
                                    "fa-solid fa-percent ms-1"))
                            ),
                            $("<td>").addClass("text-nowrap TotalAmount").append(
                                $("<span>").append($("<i>").addClass(
                                    "fa-solid fa-indian-rupee-sign me-1")),
                                $("<span>").append(item.amount)
                            )
                        );
                        tableBody.append(tableRow);
                        count += 1;
                    }
                }
                var termsCondition = $("#termsAnsCondition");
                termsCondition.empty();
                for (const value of termsAndCondtition) {
                    var li = $("<li>").text(value);
                    termsCondition.append(li);
                }
                $('#ViewSaleData').modal(modalConfig);
            }

            function openPaymentInViewModel() {
                var modalContent = $('#paymentInPrintModel').html();
                var printWindow = window.open('', '', 'width=800,height=600');
                printWindow.document.open();
                printWindow.document.write('<html><head><title>Sale Details</title>');
                printWindow.document.write('<meta charset="utf-8">');
                printWindow.document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
                printWindow.document.write(
                    '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">'
                );
                printWindow.document.write(
                    '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />'
                )
                printWindow.document.write('<style>');
                printWindow.document.write('@media print {');
                printWindow.document.write('  @page {');
                printWindow.document.write('    size: A4;');
                // printWindow.document.write('  );
                printWindow.document.write('  }');
                printWindow.document.write('  body {');
                printWindow.document.write('    -webkit-print-color-adjust: exact;');
                printWindow.document.write('    color-adjust: exact;');
                printWindow.document.write('  }');
                printWindow.document.write('  .modal-content {');
                printWindow.document.write('    box-shadow: none;');
                printWindow.document.write('    transform: scale(0.9);');
                printWindow.document.write('    transform-origin: top left;');
                printWindow.document.write('  }');
                printWindow.document.write('.footerImg {')
                printWindow.document.write('float:right;')
                printWindow.document.write('  }')
                printWindow.document.write('');
                printWindow.document.write('#signatureTopName{text-align:center;}');
                printWindow.document.write('#row-left{}');
                printWindow.document.write('#row-right{width:300px;border:1px solid red}');
                printWindow.document.write('.imgContainerSignature{text-align:center;panding:0 30px}')
                printWindow.document.write('.col-lg-6{width:340px;margin-top:10px;} ');
                printWindow.document.write('.table-responsive{ overflow-x: hidden; }');
                printWindow.document.write('#ShowListItem{ overflow:hidden }');
                printWindow.document.write('.ps-5{  padding-left: 307px !important;}');
                printWindow.document.write('.card{ border:none }')
                printWindow.document.write('.card-body{ border:none }')
                printWindow.document.write('#printModalLink {');
                printWindow.document.write('display:none }');
                printWindow.document.write('#shareModal {');
                printWindow.document.write('display:none }');
                printWindow.document.write('.btn-close {');
                printWindow.document.write('display:none }');
                printWindow.document.write('}');
                printWindow.document.write('.main-heading {');
                printWindow.document.write('  font-size: 1rem;');
                printWindow.document.write('  color: #000;');
                printWindow.document.write('}');
                printWindow.document.write('.header-p {');
                printWindow.document.write('  font-size: 0.8rem;');
                printWindow.document.write('  color: #555;');
                printWindow.document.write('}');
                printWindow.document.write('.condidate-details h5, .condidate-details p {');
                printWindow.document.write('  font-size: 0.8rem;');
                printWindow.document.write('  color: #000;');
                printWindow.document.write('}');
                printWindow.document.write('.invoice-title hr {');
                printWindow.document.write('  margin: 1rem 0;');
                printWindow.document.write('  border-color: #000;');
                printWindow.document.write('}');
                printWindow.document.write('.table-nowrap th {');
                printWindow.document.write('  font-size: 0.8rem;');
                printWindow.document.write('  color: #fff;');
                printWindow.document.write('  background-color: #212529;');
                printWindow.document.write('}');
                printWindow.document.write('.amount-info p {');
                printWindow.document.write('  font-size: 0.8rem;');
                printWindow.document.write('  color: #000;');
                printWindow.document.write('}');
                printWindow.document.write('  @page :first {');
                printWindow.document.write('    margin-top: 20px;');
                printWindow.document.write('  }');

                // Add more styles here if needed
                printWindow.document.write('</style>');
                printWindow.document.write('</head><body>');
                printWindow.document.write(modalContent);
                printWindow.document.write(
                    '<script type="text/javascript">window.onafterprint = function() { setTimeout(function() { window.close(); }, 1000); };' +
                    '</' + 'script>');
                printWindow.document.write('</body></html>');
                printWindow.document.close();
                printWindow.onload = function() {
                    printWindow.print();
                    printWindow.onafterprint = function() {
                        printWindow.close();
                    };
                };
            }

            function printModalContent() {
                var modalContent = $('#ViewSaleData').html();
                var printWindow = window.open('', '', 'width=800,height=600');
                printWindow.document.open();
                printWindow.document.write('<html><head><title>Sale Details</title>');
                printWindow.document.write('<meta charset="utf-8">');
                printWindow.document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
                printWindow.document.write(
                    '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">'
                );
                printWindow.document.write(
                    '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />'
                )
                printWindow.document.write('<style>');
                printWindow.document.write('@media print {');
                printWindow.document.write('  @page {');
                printWindow.document.write('    size: A4;');
                printWindow.document.write('    margin: 0;');
                printWindow.document.write('  }');
                printWindow.document.write('  body {');
                printWindow.document.write('    -webkit-print-color-adjust: exact;');
                printWindow.document.write('    color-adjust: exact;');
                printWindow.document.write('  }');
                printWindow.document.write('  .modal-content {');
                printWindow.document.write('    box-shadow: none;');
                printWindow.document.write('    transform: scale(0.9);');
                printWindow.document.write('    transform-origin: top left;');
                printWindow.document.write('  }');
                printWindow.document.write('.footerImg {')
                printWindow.document.write('   float:right;')
                printWindow.document.write('  }')
                printWindow.document.write('');
                printWindow.document.write('#signatureTopName{text-align:center;}');
                printWindow.document.write('#row-left{}');
                printWindow.document.write('#row-right{width:300px;border:1px solid red}');
                printWindow.document.write('.imgContainerSignature{text-align:center;panding:0 30px}')
                printWindow.document.write('.col-lg-6{width:340px;margin-top:10px;} ');
                printWindow.document.write('.table-responsive{ overflow-x: hidden; }');
                printWindow.document.write('#ShowListItem{ overflow:hidden }');
                printWindow.document.write('.ps-5{  padding-left: 307px !important;}');
                printWindow.document.write('.card{ border:none }')
                printWindow.document.write('.card-body{ border:none }')
                printWindow.document.write('#printModalLink {');
                printWindow.document.write('display:none }');
                printWindow.document.write('#shareRegSaleInvoice {');
                printWindow.document.write('display:none }');
                printWindow.document.write('.btn-close {');
                printWindow.document.write('display:none }');
                printWindow.document.write('}');
                printWindow.document.write('.main-heading {');
                printWindow.document.write('  font-size: 1.5rem;');
                printWindow.document.write('  color: #000;');
                printWindow.document.write('}');
                printWindow.document.write('.header-p {');
                printWindow.document.write('  font-size: 0.8rem;');
                printWindow.document.write('  color: #555;');
                printWindow.document.write('}');
                printWindow.document.write('.condidate-details h5, .condidate-details p {');
                printWindow.document.write('  font-size: 0.8rem;');
                printWindow.document.write('  color: #000;');
                printWindow.document.write('}');
                printWindow.document.write('.invoice-title hr {');
                printWindow.document.write('  margin: 1rem 0;');
                printWindow.document.write('  border-color: #000;');
                printWindow.document.write('}');
                printWindow.document.write('.table-nowrap th {');
                printWindow.document.write('  font-size: 0.8rem;');
                printWindow.document.write('  color: #fff;');
                printWindow.document.write('  background-color: #212529;');
                printWindow.document.write('}');
                printWindow.document.write('.amount-info p {');
                printWindow.document.write('  font-size: 0.8rem;');
                printWindow.document.write('  color: #000;');
                printWindow.document.write('}');
                printWindow.document.write('  @page :first {');
                printWindow.document.write('    margin-top: 20px;'); // Set margin-top to 0 to remove default header
                printWindow.document.write('  }');
                // Add more styles here if needed
                printWindow.document.write('</style>');
                printWindow.document.write('</head><body>');
                printWindow.document.write(modalContent);
                printWindow.document.write(
                    '<script type="text/javascript">window.onafterprint = function() { setTimeout(function() { window.close(); }, 1000); };' +
                    '</' + 'script>');
                printWindow.document.write('</body></html>');
                printWindow.document.close();
                printWindow.onload = function() {
                    printWindow.print();
                    printWindow.onafterprint = function() {
                        printWindow.close();
                    };
                };
            }

            function createViewForPaymentInSale(response) {
                $("#companyBussinessName").text(response.businessDetails['bussinessName']);
                $("#companyAddress").text(response.businessDetails['address']);
                $("#companyEmail").text(response.businessDetails['bussinessemail']);
                $("#companyMobilNumber").text(response.businessDetails['mobile1'] + " , " + response
                    .businessDetails[
                        'mobile2']);
                $("#companyBussinessImg").attr("src", response.businessDetails['imgPath']);
                $("#studentName").text(response.studentDetails['name']);
                $("#studentAddress").text(response.studentDetails['address']);
                $("#studentMobilNumber").text(response.studentDetails['MobileNo']);
                $("#paymentInInvoiceNo").text(response.paymenyInDetails['invoiceNo']);
                $("#paymentInDate").text(response.paymenyInDetails['invoicedate']);
                $("#studentRoomNo").text(response.slaeDetails['RoomNo']);
                $("#paymentInAmount").text(response.paymenyInDetails['receiveAmount']);
                $("#paymentInAmount").text(response.paymenyInDetails['receiveAmount']);
                $("#paymentInPaymentMode").text(response.paymenyInDetails['paymentMode']);
                $("#SalestotalAmount").text(response.slaeDetails['totalAmount']);
                $("#RemaningAmountOfSales").text(response.slaeDetails['totalAmount'] - response.paymenyInDetails[
                    'receiveAmount']);
                $("#CompanyNameAtBottom").text(response.businessDetails['bussinessName']);
                $("#companySignatureImg").attr('src', response.businessDetails['signaturePath']);
                $("#showAmountInWords").text(response.paymenyInDetails['AmountInWords'] + " Rupees only");
                $("#paymentInPrintModel").modal({
                    backdrop: 'static',
                    keyboard: false,
                    show: false
                });
                setTimeout(function() {
                    openPaymentInViewModel();
                }, 500);

            }

            async function showSalesBill(invoiceNo, type, print = false) {
                try {
                    let url;
                    if (type === "regSale") {
                        url = "{{ route('get.reg.bill.details') }}";
                    } else if (type === "regSalePaymentIn") {
                        url = "{{ route('get.paymentInInvoice.details') }}";
                    } else if (type === "customSale") {
                        url = "{{ route('custome.sale.invoice.view') }}";
                    } else if (type === 'estimationSale') {
                        url = "{{ route('show.estimation.detail') }}";
                    }
                    const invoiceDetails = await getBillDetails(invoiceNo, url);
                    if (type === "regSalePaymentIn") {
                        createViewForPaymentInSale(invoiceDetails);
                        return true;
                    }
                    viewInvoiceInModal(invoiceDetails, print, type);
                    return true;
                } catch (error) {
                    alertMessage('Error when showing bill details');
                    return false;
                }
            }

            function formatDate(date) {
                if (!date) return '';
                const parsedDate = new Date(date);
                if (isNaN(parsedDate)) return '';

                const day = parsedDate.getDate();
                const month = parsedDate.toLocaleString('default', {
                    month: 'short'
                });
                const year = parsedDate.getFullYear();

                return `(${day}-${month}-${year})`;
            }

            function updateListInTable(itemList, tableId) {
                let totalItemAmount = 0;
                // Ensure the table body is cleared before appending new rows
                $(tableId).empty();
                // Loop through each item in the itemList array
                itemList.forEach(function(item, index) {
                    totalItemAmount += parseFloat(item.amount);
                    var tr = $('<tr>').append(
                        $("<td>").append(
                            `${item.name} ${formatDate(item?.electricityBillDate) ?? ''}`
                        ),
                        $("<td>").append(
                            item.quantity
                        ),
                        $("<td>").append(
                            $("<span>").append($("<i>").addClass("fa-solid fa-indian-rupee-sign me-1")),
                            $("<span>").append(item.rate)
                        ),
                        $("<td>").append(
                            $("<span>").append(item.tax),
                            $("<span>").append($("<i>").addClass("fa-solid fa-percent ms-1"))
                        ),
                        $("<td>").append(
                            $("<span>").append(item.discount),
                            $("<span>").append($("<i>").addClass("fa-solid fa-percent ms-1"))
                        ),
                        $("<td>").addClass("TotalAmount").append(
                            $("<span>").append($("<i>").addClass("fa-solid fa-indian-rupee-sign me-1")),
                            $("<span>").append(item.amount)
                        ),
                        $("<td>").append(
                            $(`<button data-itemid="${index}" type="button"> `).addClass(
                                'btn btn-sm m-0 p-0 listItemDeleteBtn').append(
                                '<i class="fa-solid fa-trash-can" style="color:red;">'
                            )
                        )
                    ).addClass('shadow-sm');
                    // Append the created row to the specified table's tbody
                    $(tableId).append(tr);
                });

                return totalItemAmount.toFixed(2);
            }

            function estimationSectionActive() {
                regSaleTable.hide();
                regSaleFormSection.hide();
                customSaleFormSection.hide();
                customSaleTable.hide();
                estimationTable.show();
                estimationFormSection.fadeIn(500);
                $('#estimationData').find('.action-button').first().trigger('click');
                localStorage.setItem('activeSection', 'estimationSale');
            }

            function removeItemFormTheList(list, changeAmountInput, input, tableId) {
                const itemListIndexId = $(input).data('itemid');
                // now delete the item from the list
                list.splice(itemListIndexId, 1);
                // update the table
                const totalITemAmount = updateListInTable(list, tableId);
                // update the total item amount of the sale 
                $(changeAmountInput).text(totalITemAmount);
            }

            function calculateTotal(quantity, itemPrice, tax, discount) {
                var totalAmount = itemPrice * quantity;
                var taxAmount = (itemPrice * quantity * tax) / 100;
                var discountAmount = (itemPrice * quantity * discount) / 100;
                var total = totalAmount + taxAmount - discountAmount;
                return total.toFixed(2);
            }

            function getCandidateInvoicesDetails(url) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "GET",
                        url: url,
                        dataType: 'json',
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(error) {
                            reject(error);
                        }
                    });
                });
            }

            function addSaleCard(saleData, saleType, candidateDetail) {
                let unuseAmount = saleData.unused;
                var minimalSaleData = {
                    invoiceNo: saleData.invoiceNo,
                    pendingAmount: saleData.pendingAmount,
                };
                if (!candidateDetail.currentRoomNo && saleType === 'customSale') {
                    candidateDetail.currentRoomNo = saleData.salesRoomNo
                }
                var card = $(
                    '<div class="card border-0 shadow rounded-2 my-2 sellCard">'
                );
                var cardBody = $('<div class="card-body p-1">');
                var dFlexContainer = $(
                    '<div class="d-flex justify-content-between">'
                );
                var saleDiv = $('<div class="">');
                var saleHeading = $(
                    `<h5 class="modal-heading text-warning">${saleType === "estimationSale" ? 'Estimation' : "Sale"}</h5>`
                );
                var saleInfoDiv = $('<div>');
                var saleNumber = $(
                    `<h5 class="saleheading text-warning">#${saleData.invoiceNo}</h5>`);
                var saleDate = $(
                    '<h5 class="saleheading text-warning">' +
                    saleData.saleDateView + '</h5>');
                var amountBalanceIconsDiv = $(
                    '<div class="d-flex justify-content-between flex-wrap align-items-center gap-2">'
                );
                var amountDiv = $('<div class="flex-fill">');
                var totalLabel = $(
                    '<small class="saleheading text-warning">Total</small>'
                );
                var totalAmount = $(
                    '<h5 class="sale-amount text-warning"><i class="fa-solid fa-indian-rupee-sign me-1 text-warning"></i>' +
                    (saleData.total).toFixed(2) + '</h5>');
                var balanceDiv = $('<div class="flex-fill">');
                var balanceLabel = $(
                    '<small class="saleheading text-warning">Received</small>'
                );
                var balanceAmount = $(
                    `<h5 class="sale-amount text-warning"><i class="fa-solid fa-indian-rupee-sign me-1 text-warning"></i>${(saleData.receiveAmount || 0).toFixed(2)}</h5>`
                );
                var modalIconsDiv = $('<div class="modal-icons flex-fill">');
                var pandingDiv = $('<div class="flex-fill">');
                var pandingLabel = $(
                    `<small class="saleheading AmountCell text-warning">${unuseAmount === 0 ? 'Pending' : 'Unused'}</small>`
                );
                var pandingBalance = $(
                    `<h5 class="sale-amount AmountCellShow text-warning"><i class="fa-solid fa-indian-rupee-sign me-1 text-warning"></i>
                ${unuseAmount === 0 ? (saleData.pendingAmount).toFixed(2) : (saleData.unused).toFixed(2)} </h5>`);
                var iconsContainer = $('<div class="d-flex justify-content-between flex-wrap align-items-center">');
                var printIcon = $(
                    `<button type="button" class="btn btn-sm printInvoice text-warning" data-sale="${saleType}" data-roomno="${saleData.salesRoomNo}" data-invoiceno="${saleData.invoiceNo}" ><i class="fa-solid fa-print text-warning"></i></button>`
                );
                var shareIcon = $(
                    `<button type="button" data-roomno="${saleData.salesRoomNo}" data-invoiceno="${saleData.invoiceNo}" data-sale="${saleType}" class="btn btn-sm text-warning shareInvoiceBtn"><i class="fas fa-share-square text-warning"></i></button>`
                );
                var addButton = $(
                    `<button type="button" class="btn btn-sm editRegSaleBtn text-warning" data-sale="${saleType}" data-invoice="${saleData.invoiceNo}"><i class="fa-solid fa-file-pen text-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit Sale"></i></button>`
                );
                var viewPaymentIn = $(
                    `<button type="button" class="btn btn-sm regSaleTakePaymentBtn text-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Take Payment" 
             data-sale="${saleType}" data-saldata='${JSON.stringify(minimalSaleData)}' data-candidateDetails='${JSON.stringify(candidateDetail)}'><i class="fa-solid fa-plus text-warning" ></i></button>`
                )
                saleInfoDiv.append(saleNumber);
                saleDiv.append(saleHeading);
                saleInfoDiv.append(saleDate);
                amountDiv.append(totalLabel);
                amountDiv.append(totalAmount);
                if (saleType !== 'estimationSale') {
                    pandingDiv.append(pandingLabel);
                    pandingDiv.append(pandingBalance);
                    balanceDiv.append(balanceLabel);
                    balanceDiv.append(balanceAmount);
                }
                iconsContainer.append(printIcon);
                iconsContainer.append(shareIcon);
                iconsContainer.append(addButton);
                if (saleType !== 'estimationSale') {
                    iconsContainer.append(viewPaymentIn);
                }

                modalIconsDiv.append(iconsContainer);
                amountBalanceIconsDiv.append(amountDiv);
                amountBalanceIconsDiv.append(balanceDiv);
                amountBalanceIconsDiv.append(pandingDiv);
                amountBalanceIconsDiv.append(modalIconsDiv);
                dFlexContainer.append(saleDiv);
                dFlexContainer.append(saleInfoDiv);
                cardBody.append(dFlexContainer);
                cardBody.append(amountBalanceIconsDiv);
                card.append(cardBody);
                // Append the card to the modal body
                $('#SaleInfoBody').append(card);
            }

            function addReceivedAmountCard(paymentInData, saleType, candidateDetail, pendingAmount) {

                $.each(paymentInData, function(index, sale) {
                    sale.pendingAmount = pendingAmount;
                    var card = $(
                        '<div class="card border-0 shadow rounded-2 my-2 paymentInCard">'
                    );
                    var cardBody = $('<div class="card-body p-1">');
                    var dFlexContainer = $(
                        '<div class="d-flex justify-content-between">'
                    );
                    var saleDiv = $('<div class="">');
                    var saleHeading = $(
                        '<h5 class="modal-heading paymentInClass text-success">Payment In</h5>'
                    );
                    var saleInfoDiv = $('<div>');
                    var saleNumber = $(
                        `<h5 class="saleheading paymentInClass ">#${sale.invoiceNo}</h5>`);
                    var saleDate = $(
                        `<h5 class="saleheading paymentInClass">${sale.receiveDateView}</h5>`);
                    var amountBalanceIconsDiv = $(
                        '<div class="d-flex justify-content-between align-items-center">'
                    );
                    var amountDiv = $('<div class="me-3">');
                    var totalLabel = $(
                        '<small class="saleheading paymentInClass">Received</small>'
                    );
                    var totalAmount = $(
                        `<h5 class="sale-amount paymentInClass"><i class="fa-solid fa-indian-rupee-sign me-1 paymentInClass"></i>${(sale.receiveAmount || 0).toFixed(2)}</h5>`
                    );
                    var balanceDiv = $('<div class="me-3">');
                    var balanceLabel = $(
                        '<small class="saleheading paymentInClass">Payment Mode</small>'
                    );
                    var balanceAmount = $(
                        `<h5 class="sale-amount ChangeColor paymentInClass">${sale.paymentMode === 'waved'? 'wave off': sale.paymentMode}</h5>`
                    );
                    var modalIconsDiv = $(
                        '<div class="modal-icons">');
                    var iconsContainer = $('<div>');
                    var printIcon = $(
                        `<button type="button" data-sale="${saleType}" data-id="${sale.id}" data-invoiceno="${sale.invoiceNo}" data-invoicedate = "${sale.receiveAmountDate}" class="btn btn-sm paymentInPrintModal"><i class="fa-solid fa-print paymentInClass"></i></button>`
                    );
                    var shareIcon = $(
                        `<button type="button" data-id="${sale.id}" data-sale="${saleType}" data-invoiceno="${sale.invoiceNo}" data-invoicedate = "${sale.receiveAmountDate}"  class="btn btn-sm paymentInModelShareBtn"><i class="fa-regular fa-share-from-square paymentInClass"></i></button>`
                    );
                    var addButton = $(
                        `<button type="button" data-sale="${saleType}" class="btn btn-sm regSaleTakePaymentEdit" data-type="edit" data-saldata='${JSON.stringify(sale)}' data-candidateDetails='${JSON.stringify(candidateDetail)}'><i class="fa-solid fa-file-pen paymentInClass" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit Payment"></i></button>`
                    );
                    saleInfoDiv.append(saleNumber);
                    saleDiv.append(saleHeading);
                    saleInfoDiv.append(saleDate);
                    amountDiv.append(totalLabel);
                    amountDiv.append(totalAmount);
                    balanceDiv.append(balanceLabel);
                    balanceDiv.append(balanceAmount);
                    iconsContainer.append(printIcon);
                    iconsContainer.append(shareIcon);
                    iconsContainer.append(addButton);
                    modalIconsDiv.append(iconsContainer);
                    amountBalanceIconsDiv.append(amountDiv);
                    amountBalanceIconsDiv.append(balanceDiv);
                    amountBalanceIconsDiv.append(modalIconsDiv);
                    dFlexContainer.append(saleDiv);
                    dFlexContainer.append(saleInfoDiv);
                    cardBody.append(dFlexContainer);
                    cardBody.append(amountBalanceIconsDiv);
                    card.append(cardBody);
                    $('#SaleInfoBody').append(card);
                });
            }

            // share invoice

            function getShareInvoiceData(requestData, url) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "GET",
                        url: url,
                        data: requestData,
                        dataType: 'json',
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(error) {
                            reject(error);
                        }
                    });
                });
            }

            function shareInvoice(response) {
                var fileurl = response.link;
                var mobileNumber = response.mobile;
                var bussinessName = response.businessName;
                var candidatename = response.candidateName;
                var fullMonthName = response.month;
                var whatsppPermissionCheck = response.whatsAppPermission;
                var message;
                if (fileurl != '') {
                    message = "👋 Hi " + candidatename + ",\r\n\r\nYour *" + fullMonthName +
                        "* Invoice is here! 📑💸 Please click on the link below to download:\r\n" +
                        fileurl + "\r\n\r\nThank you! 🙏\r\n\r\nBest Regards,\r\n" + bussinessName;
                }
                var encodedMessage = encodeURIComponent(message);
                var whatsappURL = 'whatsapp://send?phone=+91' + encodeURIComponent(mobileNumber) + '&text=' +
                    encodedMessage;

                whatsppPermissionCheck ? setTimeout(function() {
                    window.location.href = whatsappURL;
                    $("#loader-overlay").hide();
                }, 2000) : WhatsAppNotInstalled();
            }

            async function shareInvoiceData(parm, paymentIn = false) {
                try {
                    let url;
                    if (paymentIn) {
                        let paymentInId = parm.id;
                        if (parm.sale === "regSale") {
                            url = "{{ route('share.paymentIn.invoice', ['id' => ':id']) }}".replace(':id',
                                paymentInId);
                        } else if (parm.sale === "customSale") {
                            url = "{{ route('share.custom.paymentIn.invoice', ['id' => ':id']) }}".replace(
                                ':id', paymentInId);
                        }
                    } else {
                        if (parm.sale === 'regSale') {
                            url = "{{ route('reg.sale.invoice.share') }}";
                        } else if (parm.sale === 'customSale') {
                            url = "{{ route('custom.sale.invoice.share') }}";
                        } else if (parm.sale === 'estimationSale') {
                            url = "{{ route('estimation.sale.invoice.share') }}"
                        }
                    }
                    const requestData = {
                        roomNo: parm.roomno,
                        invoiceNo: parm.invoiceno
                    }
                    const data = await getShareInvoiceData(requestData, url);
                    shareInvoice(data);
                } catch (error) {
                    $("#loader-overlay").hide();
                    alertMessage('Somthing Went Wronge, try again');
                }
            }

            // get reg sale data
            function getSaleData(url) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: 'GET',
                        url: url,
                        dataType: 'json',
                        success: function(response) {
                            resolve(response);
                        },
                        error: function(xhr, status, error) {
                            reject(error);
                        }
                    });
                })
            }

            function getBusinessDetailsAndMessageTemplate(data) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        type: 'GET',
                        url: "{{ route('get.business.message.template') }}",
                        data: data,
                        dataType: 'json',
                        success: function(response) {
                            resolve(response)
                        },
                        error: function(error) {
                            reject(error);
                        }
                    })
                })
            }

            initializeCustomDatalist(customCandidateName, customCandidateNameList);
            initializeCustomDatalist(customSaleCandidateMobileNumber, customCandidateMobilerNoList);

            regSaleSectionButton.on('click', regSectionAction);
            regSaleFormCloseBtn.on('click', function() {
                regSaleFormSection.fadeOut(500);
            });
            customSaleSectionButton.on('click', customSaleSectionAction);
            customSaleFromCloseBtn.on('click', function() {
                customSaleFormSection.fadeOut(500);
            });
            addEstimationButton.on('click', estimationSectionActive);
            estimationRegFormCloseBtn.on('click', function() {
                estimationFormSection.fadeOut(500);
            });


            addSaleButton.on('click', function() {
                var saleType = $(this).attr('data-saletype');
                estimationFormSection.hide();
                if (saleType == 'regSale') {
                    regSaleFormSection.fadeIn(500);
                    customSaleFormSection.fadeOut();
                    localStorage.setItem('activeSection', 'regSale.regForm');
                } else {
                    regSaleFormSection.fadeOut();
                    customSaleFormSection.fadeIn(500);
                    localStorage.setItem('activeSection', 'customSale.regForm');

                }
                // scroll to the form

            });

            // reg sale form candidate names on change the room no
            roomNoSelect.on('change', function() {
                const roomNo = $(this).val();
                $.ajax({
                    url: 'getRoomDetails',
                    type: 'GET',
                    data: {
                        roomNo: roomNo
                    },
                    success: function(response) {
                        var candidateSelect = $('#candidateNameSelect');
                        candidateSelect.empty();
                        candidateSelect.append($('<option></option>').text('Select Name').attr(
                            'disabled',
                            'disabled').attr('selected', 'selected'));
                        $.each(response, function(key, value) {
                            candidateSelect.append($('<option></option>').attr('value',
                                value.id).text(value
                                .candidatename));
                        });
                        $('#mobile').val('');
                        $('#address').val('');
                        itemNameDetails.val('');
                        handleErrorInputs('sale');
                    },
                    error: function() {
                        alertMessage(
                            `Error occurred while fetching candidate name for this room ${roomNo}.`
                        );
                    }
                });
            });

            // now get the candidate details
            candidateNameSelect.on('change', function() {
                const candidateId = $(this).val();
                $.ajax({
                    url: 'getCandidateDetails',
                    type: 'GET',
                    data: {
                        candidateName: candidateId
                    },
                    success: function(response) {
                        $('#mobile').val(response.mobile);
                        $('#address').val(response.address);
                        $("#invoiceDate").val(response.regDate);
                    },
                    error: function() {
                        alertMessage(`Error occurred while fetching candidate detaile.`);
                    }
                });
            });

            // get Item Details
            itemNameDetails.on('change', async function() {
                const itemId = $(this).val();
                handleErrorInputs('sale');
                if (itemId == 0) {
                    let roomno = roomNoSelect.val();
                    try {
                        const roomDetailsData = await getRoomRent(roomno);
                        updateInputs(roomDetailsData, "sale");
                    } catch (error) {
                        handleErrorInputs("sale");
                    }
                } else if (itemId == 'e01') {
                    if (!checkPermission('sale/invoice.reg sale.electricity sale')) {
                        alertMessage('You do not have permission to add electricity bill.');
                        return false;
                    }
                    try {
                        const electricityRecords = await getElectricityRecordsMonth(candidateNameSelect
                            .val());
                        ElecticityMonthSelectDiv.show();
                        electricityMonthInput.empty();
                        electricityMonthInput.append($('<option></option>').text('Select Month').attr(
                                'disabled', 'disabled')
                            .attr('selected', 'selected'));
                        $.each(electricityRecords, function(parentKey, parentValue) {
                            var childObject = parentValue;
                            $.each(childObject, function(key, value) {
                                electricityMonthInput.append($('<option></option>')
                                    .attr(
                                        'value', key).text(value));
                            });
                        });
                    } catch (error) {
                        alertMessage(
                            'Error Occer: Somthing Went Wronge when feathing the candidate electricity records'
                        );
                    }

                } else {
                    // now get the actual item values
                    try {
                        const itemDetails = await getItemDetails(itemId);
                        updateInputs(itemDetails, "sale");
                    } catch (error) {
                        alertMessage(
                            'Error Occer: Somthing Went Wronge when feathing the candidate item details'
                        );
                    }
                }
            });

            // get the item details of the electricity records 

            electricityMonthInput.on('change', async function() {
                const electricityMonth = $(this).val();
                const roomNo = roomNoSelect.val();
                try {
                    const electricityRecords = await getElectricityRecords(roomNo, candidateNameSelect
                        .val(), electricityMonth);
                    updateInputs(electricityRecords, 'sale');
                } catch (error) {
                    alertMessage(
                        'Error Occer: Somthing Went Wronge when feathing the candidate electricity records'
                    );
                }
            });

            itemQuantityInput.on('input', function() {
                var total = calculateTotal($(this).val(), itemRateInput.val(), ItemTaxInput.val(),
                    ItemDiscountInput.val());
                ItemtemAmountInput.val(total);
            });

            ItemDiscountInput.on('input', function() {
                var total = calculateTotal(itemQuantityInput.val(), itemRateInput.val(), ItemTaxInput.val(),
                    $(
                        this).val());
                ItemtemAmountInput.val(total);
            });

            addItemToListButton.on('click', function() {
                // disable the button 
                var itemListData;
                // first check filled is filled or not 
                if (!itemNameDetails.val() || !itemQuantityInput.val() || !itemRateInput.val() || !
                    ItemTaxInput
                    .val() || !ItemtemAmountInput.val() || !ItemDiscountInput.val()) {
                    alertMessage('Please fill all the items create fields');
                    return;
                }

                if (addItemList.length === 0) {
                    alreadyStroreItemId = [];
                }

                // check electricity records is already have in the list or not have item
                let itemId = itemNameDetails.val();
                let itemName = itemNameDetails.children('option:selected').text();
                if (itemId === 'e01' && addItemList.length === 0) {
                    if (!alreadyStroreItemId.includes(itemId)) {
                        itemListData = {
                            id: itemId,
                            name: `${itemName}`,
                            rate: itemRateInput.val(),
                            quantity: parseFloat(itemQuantityInput.val()),
                            tax: parseFloat(ItemTaxInput.val()),
                            amount: parseFloat(ItemtemAmountInput.val()),
                            discount: parseFloat(ItemDiscountInput.val()),
                            electricityBillDate: electricityMonthInput.val()
                        };
                    } else {
                        alertMessage('Electricity Bill only have one\'s per bill.');
                        return;
                    }
                } else if (!alreadyStroreItemId.includes('e01') && itemId !== 'e01') {
                    itemListData = {
                        id: itemId,
                        name: itemName,
                        rate: itemRateInput.val(),
                        quantity: parseFloat(itemQuantityInput.val()),
                        tax: parseFloat(ItemTaxInput.val()),
                        amount: parseFloat(ItemtemAmountInput.val()),
                        discount: parseFloat(ItemDiscountInput.val())
                    }
                } else {
                    alertMessage("Electricity Bill only create without any item in the list");
                    return;
                }
                // now push the item into the list
                addItemList.push(itemListData);
                alreadyStroreItemId.push(itemId) //update the item
                // now update the list in the table
                const totalITemAmount = updateListInTable(addItemList, itemTableInForm);
                // now update the amount of totalITem Amount of the sale
                totalItemAmountSaleForm.text(totalITemAmount);
                itemNameDetails.val('');
                handleErrorInputs('sale');
            });


            $(document).on('click', '#listItems .listItemDeleteBtn', function() {
                const itemListIndexId = $(this).data('itemid');
                // now delete the item from the list
                addItemList.splice(itemListIndexId, 1);
                // update the item list
                const totalITemAmount = updateListInTable(addItemList, itemTableInForm);
                // update the total item amount of the sale 
                totalItemAmountSaleForm.text(totalITemAmount);
                removeItemFormTheList(customAddItemList, customSaleTotalAmount, $(this),
                    customSaleListItems);

            });

            receivedAmounCheckBoxInSaleForm.on('click', function() {
                if ($(this).is(':checked')) {
                    receivedAmountSectionInSaleForm.show();
                    receivedAmountInputInSaleForm.val(totalItemAmountSaleForm.text());
                } else {
                    receivedAmountSectionInSaleForm.hide();
                }
            });

            $(document).on('click', '#printModalLink', function() {
                printModalContent();
            });

            $(document).on('click', '.printInvoice', async function() {
                // first get the bill details and then trigger the printModalLink button
                const invoiceNo = $(this).data('invoiceno');
                const invoiceType = $(this).data('sale');
                if (!invoiceNo) {
                    alertMessage('somthing Went wronge, try again...');
                }
                try {
                    const modalReponse = await showSalesBill(invoiceNo, invoiceType, true);
                    if (modalReponse) {
                        setTimeout(function() {
                            $("#printModalLink").trigger('click');
                        }, 2000);
                    }
                } catch (error) {
                    console.log(error);
                }
            });

            $(document).on('click', '.paymentInPrintModal', async function() {
                const invoiceNo = $(this).data('id');
                try {
                    const modalReponse = showSalesBill(invoiceNo, 'regSalePaymentIn');
                    if (modalReponse) {
                        setTimeout(function() {
                            $("#printModalLink").trigger('click');
                        }, 2000);
                    }
                } catch (error) {
                    console.log(error);
                }
            });

            $("#viewSaleDataCloseBtn").on('click', function() {
                reloadPage();
            });

            regSaleFromBtn.on('click', async function(event) {
                event.preventDefault();
                let isValidated = true;
                $("#itemNotFoundError").text('');
                regSaleform.find('input,select').each(function() {
                    if ($(this).is(':required')) {
                        if ($(this).val() === '' || $(this).val() === null) {
                            $(this).addClass('is-invalid border border-danger');
                            isValidated = false;
                        } else {
                            $(this).removeClass('is-invalid border border-danger');
                        }
                    }
                });
                // now check the item list
                if (addItemList.length === 0) {
                    $("#itemNotFoundError").text('Please add items befor create the sale!');
                }
                let receivedAmount = 0;
                let paymentMode = null;
                let receivedAmountStatus = false;

                if (receivedAmounCheckBoxInSaleForm.is(":checked")) {
                    receivedAmount = receivedAmountInputInSaleForm.val();
                    paymentMode = $("#paymentMode").val();
                    receivedAmountStatus = true;
                }

                // now prepare the data for submit
                const saleData = {
                    candidateId: candidateNameSelect.val(),
                    invoiceNo: ($("#invoiceNo").text()).trim(),
                    date: $("#invoiceDate").val(),
                    roomNo: roomNoSelect.val(),
                    totalSaleAmount: totalItemAmountSaleForm.text().trim(),
                    receivedAmount: receivedAmount || 0,
                    paymentMode: paymentMode,
                    salesItemsList: addItemList,
                    isReceivedAmount: Boolean(receivedAmountStatus)
                }
                if (isValidated) {
                    $(this).attr('disabled', true);
                    try {
                        const url = "{{ route('reg.new.sale') }}";
                        const saleResponse = await submitRegSaleData(saleData, url);
                        $(this).attr('disabled', false);
                        showSalesBill(saleResponse.invoiceNo, "regSale");
                    } catch (error) {
                        $(this).attr('disabled', false);
                        alertMessage('somthing Went Wronge, please try again!');
                    }
                }

            });

            // custome sale form handle 

            customSaleRoomNoSelect.on('input', function() {
                customAddItemList.length = 0;
                const totalITemAmount = updateListInTable(customAddItemList, customSaleListItems);
                // now update the amount of totalITem Amount of the sale
                customSaleTotalAmount.text(totalITemAmount);
                handleErrorInputs("custom_sale");

            });

            customCandidateName.on('input', function() {
                var input = $(this).val();
                var mobile = $(this).data('mobile');
                var address = $(this).data('address');
                var value = $(this).data('party');

                var filteredInput = input.replace(/[^a-zA-Z ]/g, '');

                $(this).val(filteredInput);

                if (value === 'addNewPart') {
                    $(this).data('party', '');
                    $('#addNewCustomSalePartyModal').modal('show');
                    $(this).val(null);
                    $(this).trigger('input');
                    return;
                }

                if (mobile && address && input === value) {
                    customSaleCandidateMobileNumber.val(mobile);
                    customSaleCandidateAddress.val(address);
                } else {
                    customSaleCandidateMobileNumber.val('');
                    customSaleCandidateAddress.val('');
                }
            });

            customSaleCandidateMobileNumber.on('input', function() {
                var input = $(this).val();
                var partyName = $(this).data('party');
                var address = $(this).data('address');
                var value = $(this).data('mobile');
                if (partyName === 'addNewPart') {
                    // clear the data attibute value of the input
                    $(this).data('party', '');
                    // show a modal which is used to add new party
                    $('#addNewCustomSalePartyModal').modal('show');
                    $(this).val(null);
                    $(this).trigger('input');
                    return;
                }

                if (partyName && address && input == value) {
                    customSaleCandidateAddress.val(address);
                    customCandidateName.val(partyName);
                } else {
                    customSaleCandidateAddress.val('');
                    customCandidateName.val('');
                }
            });

            customSaleItemName.on('change', async function() {
                const itemId = $(this).val();
                handleErrorInputs('custom_sale');
                let roomno = customSaleRoomNoSelect.val();
                if (itemId === 0 || itemId === "0") {
                    try {
                        const roomDetailsData = await getRoomRent(roomno);
                        updateInputs(roomDetailsData, "custom_sale");
                    } catch (error) {
                        handleErrorInputs("custom_sale");
                    }
                } else {
                    try {
                        const itemDetails = await getItemDetails(itemId);
                        updateInputs(itemDetails, "custom_sale");
                    } catch (error) {
                        alertMessage(
                            'Error Occer: Somthing Went Wronge when feathing the candidate item details'
                        );
                    }
                }
            });

            customSaleItemQuantity.on('input', function() {
                var total = calculateTotal($(this).val(), customSaleRate.val(), customSaleTax.val(),
                    customSaleItemDiscount.val());
                customSaleItemAmount.val(total);
            });

            customSaleItemDiscount.on('input', function() {
                var total = calculateTotal(customSaleItemQuantity.val(), customSaleRate.val(), customSaleTax
                    .val(), $(this).val());
                customSaleItemAmount.val(total);
            });

            customSaleAddItemBtn.on('click', function() {
                // disable the button 
                var itemListData;
                // first check filled is filled or not 
                if (!customSaleItemName.val() || !customSaleItemQuantity.val() || !customSaleItemDiscount
                    .val() || !customSaleRate.val() || !customSaleTax.val() || !customSaleItemAmount.val()
                ) {
                    alertMessage('Please fill all the items create fields');
                    return;
                }

                // check electricity records is already have in the list or not have item
                let itemId = customSaleItemName.val();
                let itemName = customSaleItemName.children('option:selected').text();

                // now add item 
                itemListData = {
                    id: itemId,
                    name: itemName,
                    rate: customSaleRate.val(),
                    quantity: parseFloat(customSaleItemQuantity.val()),
                    tax: parseFloat(customSaleTax.val()),
                    amount: parseFloat(customSaleItemAmount.val()),
                    discount: parseFloat(customSaleItemDiscount.val())
                }

                // now push the item into the list
                customAddItemList.push(itemListData);

                const totalITemAmount = updateListInTable(customAddItemList, customSaleListItems);
                // now update the amount of totalITem Amount of the sale
                customSaleTotalAmount.text(totalITemAmount);
                handleErrorInputs('custom_sale');
                customSaleItemName.val('');
            });

            // create new party
            $("#createNewPartBtn").on('click', async function() {
                // Disable the button
                $(this).attr('disabled', true);

                const partyCreateForm = $("#createNewPartForm");
                let isValid = true;

                // Validate each input field
                partyCreateForm.find('input').each(function() {
                    const input = $(this);
                    const inputType = input.attr('type');
                    const value = input.val();

                    // Check for empty fields
                    if (!value) {
                        input.addClass('is-invalid');
                        // Add the invalid feedback message if not already present
                        if (input.next('.invalid-feedback').length === 0) {
                            input.after(
                                '<div class="invalid-feedback">This field is required.</div>'
                            );
                        }
                        isValid = false;
                    } else {
                        // Remove invalid feedback and class if field is valid
                        input.removeClass('is-invalid');
                        input.next('.invalid-feedback').remove();

                        // Additional validation for tel input
                        if (inputType === 'tel') {
                            // Check if the number has exactly 10 digits
                            const telPattern = /^\d{10}$/;
                            if (!telPattern.test(value)) {
                                input.addClass('is-invalid');
                                // Add specific invalid feedback for tel input
                                if (input.next('.invalid-feedback').length === 0) {
                                    input.after(
                                        '<div class="invalid-feedback">The phone number must be exactly 10 digits.</div>'
                                    );
                                }
                                isValid = false;
                            }
                        }
                    }
                });

                // If the form is valid, submit it
                if (isValid) {
                    // partyCreateForm.submit();
                    try {
                        const formData = {
                            'party_name': $("#newPartName").val(),
                            'party_mobile': $("#newPartMobile").val(),
                            'party_address': $("#partyAddress").val(),
                            'party_email': $("#partyEmail").val(),
                        };
                        const url = partyCreateForm.attr('action');
                        const responseData = await submitRegSaleData(formData, url);
                        successMessage('part created successfully');
                        reloadPage();
                    } catch (xhr) {
                        $(this).attr('disabled', false);
                        if (xhr.responseJSON.statusCode === 422) {
                            // Validation errors from the server
                            const errors = xhr.responseJSON.error;
                            $.each(errors, function(field, messages) {
                                const input = partyCreateForm.find(`[name=${field}]`);
                                input.addClass('is-invalid');
                                // Show the first error message
                                if (input.next('.invalid-feedback').length === 0) {
                                    input.after(
                                        `<div class="invalid-feedback">${messages[0]}</div>`
                                    );
                                }
                            });
                        } else {
                            errorMessage('An error occurred. Please try again.');
                        }
                    }

                } else {
                    // Re-enable the button if the form is not valid
                    $(this).attr('disabled', false);
                }
            });

            $(document).on('click', '#customSaleListItems .listItemDeleteBtn', function() {
                removeItemFormTheList(customAddItemList, customSaleTotalAmount, $(this),
                    customSaleListItems);
            });

            customSaleReceivedAmounCheckBox.on('click', function() {
                if ($(this).is(':checked')) {
                    receivedAmountSectionInSaleForm.show();
                    customSaleReceivedAmountInput.val(customSaleTotalAmount.text());
                } else {
                    receivedAmountSectionInSaleForm.hide();
                }
            });

            customSaleFromBtn.on('click', async function(event) {
                event.preventDefault();
                let isValidated = true;
                $("#customItemNotFoundError").text('');
                customSaleform.find('input,select').each(function() {
                    if ($(this).is(':required')) {
                        if ($(this).val() === '' || $(this).val() === null) {
                            $(this).addClass('is-invalid border border-danger');
                            isValidated = false;
                        } else {
                            $(this).removeClass('is-invalid border border-danger');
                        }
                    }
                });

                // now check the item list
                if (customAddItemList.length === 0) {
                    $("#customItemNotFoundError").text('Please add items befor create the sale!');
                }
                let receivedAmount = 0;
                let paymentMode = null;
                let receivedAmountStatus = false;

                if (customSaleReceivedAmounCheckBox.is(":checked")) {
                    receivedAmount = customSaleReceivedAmountInput.val() || 0;
                    paymentMode = $("#customSalePaymentMode").val();
                    receivedAmountStatus = receivedAmount > 0 ? true : false;
                }

                // now prepare the data for submit
                const saleData = {
                    saleType: customSaleRoomNoSelect.val(),
                    candidateName: customCandidateName.val(),
                    candidateId: customCandidateName.data('partyid'),
                    invoiceNo: ($("#customSaleInvoiceNo").text()).trim(),
                    date: $("#customSaleInvoiceDate").val(),
                    totalSaleAmount: customSaleTotalAmount.text().trim(),
                    receivedAmount: receivedAmount || 0,
                    paymentMode: paymentMode,
                    salesItemsList: customAddItemList,
                    isReceivedAmount: receivedAmountStatus
                }
                if (isValidated) {
                    $(this).attr('disabled', true);
                    try {
                        const url = "{{ route('custom.new.sale') }}";
                        const responseData = await submitRegSaleData(saleData, url);
                        showSalesBill(responseData.invoiceNo, "customSale");
                    } catch (error) {
                        alertMessage('somthing went wronge, try again!');
                    }
                }
            });

            // Estimation Sale section
            estimationsRoomNoSelect.on('input', function() {
                estimationItemList.length = 0;
                const totalITemAmount = updateListInTable(estimationItemList, estimationItemListTable);
                // now update the amount of totalITem Amount of the sale
                estimationTotalAmountInput.text(totalITemAmount);
                handleErrorInputs("estimation_sale");

            });
            estimationCondidateName.on('input', function() {
                let value = $(this).val();
                var filteredInput = value.replace(/[^a-zA-Z ]/g, '');
                $(this).val(filteredInput);
            });


            estimationItemName.on('change', async function() {
                const itemId = $(this).val();
                handleErrorInputs('estimation_sale');
                let roomno = estimationsRoomNoSelect.val();
                if (itemId === 0 || itemId === "0") {
                    try {
                        const roomDetailsData = await getRoomRent(roomno);
                        updateInputs(roomDetailsData, "estimation_sale");
                    } catch (error) {
                        handleErrorInputs("estimation_sale");
                    }
                } else {
                    try {
                        const itemDetails = await getItemDetails(itemId);
                        updateInputs(itemDetails, "estimation_sale");
                    } catch (error) {
                        alertMessage(
                            'Error Occer: Somthing Went Wronge when feathing the candidate item details'
                        );
                    }
                }
            });


            estimationItemQuantity.on('input', function() {
                var total = calculateTotal($(this).val(), estimationItemRate.val(), estimationItemTax.val(),
                    estimationItemDiscount.val());
                estimationItemAmount.val(total);
            });

            estimationItemDiscount.on('input', function() {
                var total = calculateTotal(estimationItemQuantity.val(), estimationItemRate.val(),
                    estimationItemTax
                    .val(), $(this).val());
                estimationItemAmount.val(total);
            });


            estimationItemTax.on('input', function() {
                var total = calculateTotal(estimationItemQuantity.val(), estimationItemRate.val(),
                    $(this).val(), estimationItemDiscount.val());
                estimationItemAmount.val(total);
            });


            estimationItemAddItemBtn.on('click', function() {
                // disable the button 
                var itemListData;
                // first check filled is filled or not 
                if (!estimationItemName.val() || !estimationItemQuantity.val() || !estimationItemDiscount
                    .val() || !estimationItemTax.val() || !estimationItemRate.val() || !estimationItemAmount
                    .val()
                ) {
                    alertMessage('Please fill all the items create fields');
                    return;
                }

                // check electricity records is already have in the list or not have item
                let itemId = estimationItemName.val();
                let itemName = estimationItemName.children('option:selected').text();
                let discountedAmount = parseFloat(estimationItemRate.val()) - (parseFloat(estimationItemRate
                        .val()) *
                    parseFloat(estimationItemDiscount.val()) / 100);
                // now add item 
                itemListData = {
                    id: itemId,
                    name: itemName,
                    rate: estimationItemRate.val(),
                    quantity: parseFloat(estimationItemQuantity.val()),
                    tax: parseFloat(estimationItemTax.val()),
                    amount: parseFloat(estimationItemAmount.val()),
                    discount: parseFloat(estimationItemDiscount.val()),
                    discountedAmount: parseFloat(discountedAmount)
                }

                // now push the item into the list
                estimationItemList.push(itemListData);

                const totalITemAmount = updateListInTable(estimationItemList, estimationItemListTable);
                // now update the amount of totalITem Amount of the sale
                estimationTotalAmountInput.text(totalITemAmount);
                handleErrorInputs('estimation_sale');
                estimationItemName.val('');
            });

            $(document).on('click', '#estimationItemListTable .listItemDeleteBtn', function() {
                removeItemFormTheList(estimationItemList, estimationTotalAmountInput, $(this),
                    estimationItemListTable);
            });

            estimationRegFormBtn.on('click', async function(event) {
                event.preventDefault();
                estimationItemNotFoundError.text('');
                let isValidated = true;

                estimationForm.find('input').each(function() {
                    const $input = $(this);
                    if ($input.hasClass('validationRequired') && !$input.val()) {
                        $input.addClass('is-invalid border border-danger');
                        isValidated = false;
                    } else {
                        $input.removeClass('is-invalid border border-danger');
                    }
                });

                if (estimationItemList.length === 0) {
                    estimationItemNotFoundError.text('Please add items befor create the sale!');
                }

                const saleData = {
                    roomNo: estimationsRoomNoSelect.val(),
                    clientName: estimationCondidateName.val(),
                    contact: estimationCandidateMobileNo.val(),
                    address: estimationCandidateAddress.val(),
                    estNo: (estimationInvoiceNo.text()).trim(),
                    estDate: estimationDate.val(),
                    totalSaleAmount: estimationTotalAmountInput.text().trim(),
                    salesItemsList: estimationItemList,
                }

                if (isValidated) {
                    // $(this).attr('disabled', true);
                    try {
                        const url = "{{ route('create.new.estimation') }}";
                        const responseData = await submitRegSaleData(saleData, url);
                        showSalesBill(responseData.invoiceNo, "estimationSale");
                    } catch (error) {
                        alertMessage('somthing went wronge, try again!');
                    }
                }
            });

            // share 
            $(document).on('click', '.shareInvoiceBtn', function() {
                $(this).attr('disabled', true);
                const saleType = $(this).data('sale');
                $("#loader-overlay").show();
                if (saleType === 'regSale' && !checkPermission('sale/invoice.reg sale.invoice share')) {
                    $("#loader-overlay").hide();
                    alertMessage('You have not permission to share invoice');
                    return;
                } else if (saleType === 'customSale' && !checkPermission(
                        'sale/invoice.custom sale.invoice share')) {
                    $("#loader-overlay").hide();
                    alertMessage('You have not permission to share invoice');
                }
                setTimeout(shareInvoiceData($(this).data()), 1000);
                $(this).attr('disabled', false);
            });

            // payment In share
            $(document).on('click', '.paymentInModelShareBtn', function() {
                $(this).attr('disabled', true);
                const $btnData = $(this).data();
                $("#loader-overlay").show();
                if ($btnData.saleType === 'regSale' && !checkPermission(
                        'sale/invoice.reg sale.invoice share')) {
                    $("#loader-overlay").hide();
                    alertMessage('You have not permission to share invoice');
                    return;
                } else if ($btnData.saleType === 'customSale' && !checkPermission(
                        'sale/invoice.custom sale.invoice share')) {
                    $("#loader-overlay").hide();
                    alertMessage('You have not permission to share invoice');
                }
                setTimeout(shareInvoiceData($(this).data(), true), 1000);
                $(this).attr('disabled', false);

            })

            async function sendReminder(candidateMobile, remaningAmount, ReminderAmtType) {
                if (!checkPermission('sale/invoice.setup.reminder')) {
                    $("#loader-overlay").hide();
                    alertMessage('You have not permission for this resourse');
                    return;
                };

                if (ReminderAmtType !== 'Receivable:') {
                    return
                }

                const data = {
                    'messageType': 'payment_pre_reminder'
                }

                // get the business Details and message template data
                try {
                    $("#loader-overlay").show();
                    const businessDetails = await getBusinessDetailsAndMessageTemplate(data);
                    const businessData = businessDetails.businessDetails
                    const messageTemplate = businessDetails.messageTemplate;
                    const whatAppPermision = businessDetails.whatsAppPermission
                    if (!messageTemplate) {
                        $("#loader-overlay").hide();
                        alertMessage('please add a message for this in permission setting -> message manager.');
                        return;
                    }
                    const messageTemplateJson = JSON.parse(messageTemplate);
                    var message;
                    message =
                        `${messageTemplateJson.title} ${messageTemplateJson.tagline},%0A%0A It's a friendly ⏰ reminder for you to pay *Rs.${remaningAmount}/-* to me. 💸%0A%0A💖 Your prompt payment is appreciated!%0A%0A✨ Thank you,%0A%0A🌟 Best Regards,%0A ${messageTemplateJson.regards ?? ""} %0A ${businessData.bussinessName}`
                    var whatsappLink = 'whatsapp://send?phone=+91' + encodeURIComponent(candidateMobile) +
                        '&text=' + message;
                    whatAppPermision ? setTimeout(function() {
                        isFunctionCalled = false;
                        window.location.href = whatsappLink;
                        $("#loader-overlay").hide();

                    }, 1000) : WhatsAppNotInstalled();
                } catch (error) {
                    console.error(error);
                    alertMessage('somthing went wronge try again');
                }
            }

            sendReminderBtn.on('click', async function() {
                const $btnData = $(this).data();
                sendReminder($btnData.candidateMobile, $btnData.remaningAmount, $btnData
                    .ReminderAmtType);
            });

            $(document).on('click', '.sendStatementBtnFormTable', function() {
                const candidateMobile = $(this).data('mobile');
                const remaningAmount = $(this).data('remaningamount');
                const ReminderAmtType = remaningAmount !== 0 ? 'Receivable:' : null;
                sendReminder(candidateMobile, remaningAmount, ReminderAmtType);
            });

            sendStetementBtn.on('click', async function() {

                // check permission
                if (!checkPermission('sale/invoice.setup.send statement')) {
                    alertMessage('You have not permission for this resourse');
                    return;
                };



                $("#loader-overlay").show();
                const $btnData = $(this).data();
                const sendStatementId = $btnData.candidateId;
                const candidatename = $btnData.candidateName;
                const sendUserMobile = $btnData.candidateMobile;
                let url;

                $.ajax({
                    type: "get",
                    url: "{{ route('sale.sendStatement', ['studentId' => ':id']) }}".replace(
                        ':id', sendStatementId),
                    data: $btnData,
                    success: function(response) {
                        let data = response.data;
                        let statementLink = data.download_link;
                        let WhatsAppCheckInstalled = data.whatsppPermissionCheck;
                        let businessName = data.businessName;
                        let message;
                        message = "👋 Hi " + candidatename +
                            ",\r\n\r\nYour sale statement is here! 📑💸 Please click on the link below to download:\r\n" +
                            statementLink +
                            "\r\n\r\nThank you! 🙏\r\n\r\nBest Regards,\r\n" + businessName;

                        var encodedMessage = encodeURIComponent(message);
                        var whatsappURL = 'whatsapp://send?phone=+91' + encodeURIComponent(
                            sendUserMobile) + '&text=' + encodedMessage;

                        WhatsAppCheckInstalled ? setTimeout(function() {
                            $(this).addClass('disabled');
                            window.location.href = whatsappURL;
                            // hide loader 
                            $("#loader-overlay").hide();
                        }, 2000) : WhatsAppNotInstalled();
                    }
                });


            });

            fillTheSaleFormBtn.on('click', function() {
                const $btnData = $(this).data();
                if ($btnData.saleType === "regSale") {
                    regSaleFormSection.fadeIn(500);
                    roomNoSelect.val($btnData.roomNo);
                    roomNoSelect.trigger('change');
                    setTimeout(function() {
                        candidateNameSelect.val($btnData.candidateId);
                        candidateNameSelect.trigger('change');
                    }, 1000)
                } else if ($btnData.saleType === 'customSale') {
                    customSaleFormSection.fadeIn(500);
                    customSaleRoomNoSelect.val($btnData.roomNo);
                    customCandidateName.val($btnData.candidateName);
                    customCandidateName.data({
                        'partyid': $btnData.candidateId,
                        'mobile': $btnData.mobile,
                        'address': $btnData.address,
                        'party': $btnData.candidateName
                    });
                    setTimeout(function() {
                        customCandidateName.trigger('input');
                    }, 500);
                }
                $('html, body').animate({
                    scrollTop: $('.top-section').offset().top
                }, 1000);
            });


            function salePaymentsCardShow(invoiceDetails, saleType) {
                // Extract details
                const candidateDetails = invoiceDetails.candidateDetails;
                const TotalReceived = parseFloat(invoiceDetails.totalRemainingAmount);
                const TotalUnused = parseFloat(invoiceDetails.totalUnusedAmount);
                const saleDetails = invoiceDetails.salesDetails;
                let totalRemainingAmount = 0;

                // Update candidate details in the UI
                $("#candidateName1").text(candidateDetails.candidateName);
                $("#candidateMobile1").text(candidateDetails.candidateMobile);
                if (saleType === 'estimationSale') {
                    $(".card-send-reminder-statement-section").addClass('d-none');
                    sendReminderBtn.hide();
                    sendStetementBtn.hide();
                } else {
                    $(".card-send-reminder-statement-section").removeClass('d-none');
                    sendReminderBtn.show();
                    sendStetementBtn.show();
                }

                // Calculate and update amounts
                if (TotalReceived >= TotalUnused) {
                    const checkTotal = TotalReceived - TotalUnused;
                    totalRemainingAmount = checkTotal;

                    $("#mainSalesText").css("color", 'green');
                    $("#iconChange").removeClass("fa-arrow-up-long").addClass("fa-arrow-down-long");
                    $("#salesTextShow").text("Receivable:");
                } else {
                    totalRemainingAmount = TotalUnused - TotalReceived;
                    $("#mainSalesText").css("color", '#ffc107');
                    $("#iconChange").removeClass("fa-arrow-down-long").addClass("fa-arrow-up-long");
                    $("#salesTextShow").text("Payable:");
                }
                // Display the remaining amount
                $("#CandidateTotalRemaningAmount").text(totalRemainingAmount.toFixed(2));

                $(".sellCard").remove();
                $(".paymentInCard").remove();
                // now create the sales and payment in card and show
                $.each(saleDetails, function(index, saleDetail) {
                    addSaleCard(saleDetail, saleType, candidateDetails);
                    if ((saleDetail.receiveAmounts).length > 0) {
                        addReceivedAmountCard(saleDetail.receiveAmounts, saleType, candidateDetails,
                            saleDetail.pendingAmount)
                    }
                });
                $(".sale-details-loader").hide();

                sendReminderBtn.data({
                    'saleType': saleType,
                    'candidateName': candidateDetails.candidateName,
                    'candidateMobile': candidateDetails.candidateMobile,
                    'remaningAmount': totalRemainingAmount,
                    'ReminderAmtType': $("#salesTextShow").text().trim()
                });

                sendStetementBtn.data({
                    'saleType': saleType,
                    'candidateId': candidateDetails.candidateId,
                    'candidateName': candidateDetails.candidateName,
                    'candidateMobile': candidateDetails.candidateMobile,
                })
                fillTheSaleFormBtn.data({
                    roomNo: candidateDetails.currentRoomNo,
                    candidateId: candidateDetails.candidateId,
                    candidateName: candidateDetails.candidateName,
                    address: candidateDetails.candidateAddress,
                    mobile: candidateDetails.candidateMobile,
                    saleType: saleType
                });
            }

            $('#SaleData').on('click', '.action-button', async function() {
                var studentId = $(this).data('studentid');
                $(".sale_details_view").hide();
                try {
                    // Show the sales details view
                    $(".sale-details-loader").show();
                    setTimeout(function() {
                        $(".sale_details_view").show();
                    }, 2000);
                    // Fetch invoice details
                    const url = "{{ route('get.candidate.invoice', ['id' => ':id']) }}".replace(':id',
                        studentId);
                    const invoiceDetails = await getCandidateInvoicesDetails(url);
                    salePaymentsCardShow(invoiceDetails, 'regSale');
                } catch (error) {
                    alertMessage('Error: Could not retrieve invoice details');
                }
            });

            $("#customSaleData").on('click', '.action-button', async function() {
                const partId = $(this).data('partyid');
                $(".sale_details_view").hide();
                try {
                    // Show the sales details view
                    $(".sale-details-loader").show();
                    setTimeout(function() {
                        $(".sale_details_view").show();
                    }, 2000);
                    // Fetch invoice details
                    const url = "{{ route('get.custom.candidate.invoice', ['id' => ':id']) }}".replace(
                        ':id', partId);
                    const invoiceDetails = await getCandidateInvoicesDetails(url);
                    salePaymentsCardShow(invoiceDetails, 'customSale');
                } catch (error) {
                    alertMessage('Error: Could not retrieve invoice details');
                }
            })

            $("#estimationData").on('click', '.action-button', async function() {
                const estimationId = $(this).data('id');
                $(".sale_details_view").hide();
                try {
                    // Show the sales details view
                    $(".sale-details-loader").show();
                    setTimeout(function() {
                        $(".sale_details_view").show();
                    }, 2000);
                    // Fetch invoice details
                    const url = "{{ route('get.estimation.view.data', ['id' => ':id']) }}".replace(
                        ':id', estimationId);
                    const invoiceDetails = await getCandidateInvoicesDetails(url);
                    salePaymentsCardShow(invoiceDetails, 'estimationSale');
                } catch (error) {
                    alertMessage('Error: Could not retrieve invoice details');
                }
            })


            // show latest data data of the saledata table
            $('#SaleData').find('.action-button').first().trigger('click');
            // reg sale edit modal
            function fillSalesRegEditForm(data, saleType) {
                $("#invoiceTypeText").text('Invoice No');
                if (saleType === 'customSale') {
                    $("#electricityBillOption").hide();
                    $("#EditFormRoomNoOption").text('Invoice Type');
                }
                if (saleType === 'estimationSale') {
                    $("#invoiceTypeText").text('Estimation No');
                    $("#electricityBillOption").hide();
                    $("#receivedAmountDivSection").addClass('d-none');
                    $("#EditPaymentMode").hide();
                }

                EditInvoiceNo.text(data.invoiceno);
                EditRegSaleDate.val(data.invoicedate);
                EditRoomNoSelect.val(data.RoomNo)
                EditCandidateNameSelect.val(data.candidatName);
                EditCandidateNameSelect.data({
                    'id': data.customerId
                });
                DeleteRegSaleBtn.data({
                    'invoiceNo': data.invoiceno,
                    'saleType': saleType
                });
                EditSaleFormSubmitBtn.data({
                    'saleType': saleType
                });
                editRegFormActiveBtn.data({
                    'saleType': saleType
                });
                EditAddItemInTableBtn.data({
                    'saleType': saleType
                });
                EditMobile.val(data.candidatMobile);
                EditAddress.val(data.candidatAdd);
                EditTotalAmount.text((data.totalAmount).toFixed(2));
                EditreceivedAmountInput.val((data.receivedAmount || 0).toFixed(2));
                EditOldReceivedAmount.text(data.receivedAmount || 0);
                data.paymentMode ? EditpaymentMode.val(data.paymentMode) : EditpaymentMode.hide();
                // update list item
                addItemList = [];
                alreadyStroreItemId = [];
                $.each(data.items, function(index, item) {
                    addItemList.push(item);
                    alreadyStroreItemId.push(item.id);
                });
                const totalITemAmount = updateListInTable(addItemList, EditlistItemsTable);
            }

            $(document).on('click', '.editRegSaleBtn', async function() {
                try {
                    const invoiceNo = $(this).data('invoice');
                    const saleType = $(this).data('sale');
                    let url;
                    if (saleType === "regSale") {
                        url = "{{ route('get.sale.info.for.edit', ['invoiceNo' => ':id']) }}".replace(
                            ':id',
                            invoiceNo);
                    } else if (saleType === 'customSale') {
                        url = "{{ route('custom.sale.invoide.detail', ['invoiceNo' => ':id']) }}"
                            .replace(
                                ':id',
                                invoiceNo);
                    } else if (saleType === "estimationSale") {
                        url = "{{ route('estimation.sale.invoide.detail', ['invoiceNo' => ':id']) }}"
                            .replace(':id', invoiceNo);
                    }
                    const responseData = await getSaleData(url);
                    fillSalesRegEditForm(responseData.data, saleType);

                    regSaleEditForm.find('input, select, button').each(function() {
                        var element = $(this);

                        if (element.is('input')) {
                            element.attr('readonly', true);
                        }

                        if (element.is('select') || element.is('button')) {
                            element.attr('disabled', true);
                        }
                    });

                    $('#regSaleEditModal').modal('show');
                } catch (error) {
                    alertMessage('somthing went wronge , try again....')
                }
            });

            editRegFormActiveBtn.on('click', function() {
                const saleType = $(this).data('saleType');
                regSaleEditForm.find('input, select, button').each(function() {
                    var element = $(this);
                    if (saleType === 'estimationSale') {
                        element.attr('readonly', false);
                    } else if (element.is('input') && !element.hasClass('readonly')) {
                        element.attr('readonly', false);
                    }

                    if (element.is('select') || element.is('button')) {
                        element.attr('disabled', false);
                    }
                });
                EditpaymentMode.show();
                DeleteRegSaleBtn.attr('disabled', false);
                EditSaleFormSubmitBtn.attr('disabled', false);
            });

            EditCandidateNameSelect.on('input', function() {
                let value = $(this).val();
                var filteredInput = value.replace(/[^a-zA-Z ]/g, '');
                $(this).val(filteredInput);
            });

            EditItemName.on('change', async function() {
                const itemId = $(this).val();
                handleErrorInputs();
                if (itemId == 0) {
                    let roomno = EditRoomNoSelect.val();
                    try {
                        const roomDetailsData = await getRoomRent(roomno);
                        updateInputs(roomDetailsData);
                    } catch (error) {
                        handleErrorInputs();
                    }
                } else if (itemId == 'e01') {
                    if (!checkPermission('sale/invoice.reg sale.electricity sale')) {
                        alertMessage('You do not have permission to add electricity bill.');
                        return false;
                    }
                    try {
                        const electricityRecords = await getElectricityRecordsMonth(
                            EditCandidateNameSelect
                            .data('id'));
                        EditElecticityMonthSelectDiv.show();
                        EditElectricityMonth.empty();
                        EditElectricityMonth.append($('<option></option>').text('Select Month').attr(
                                'disabled', 'disabled')
                            .attr('selected', 'selected'));
                        $.each(electricityRecords, function(parentKey, parentValue) {
                            var childObject = parentValue;
                            $.each(childObject, function(key, value) {
                                EditElectricityMonth.append($('<option></option>').attr(
                                    'value', key).text(value));
                            });
                        });
                    } catch (error) {
                        alertMessage(
                            'Error Occer: Somthing Went Wronge when feathing the candidate electricity records'
                        );
                    }

                } else {
                    // now get the actual item values
                    try {
                        const itemDetails = await getItemDetails(itemId);
                        updateInputs(itemDetails);
                    } catch (error) {
                        alertMessage(
                            'Error Occer: Somthing Went Wronge when feathing the candidate item details'
                        );
                    }
                }
            });

            EditElectricityMonth.on('change', async function() {
                const electricityMonth = $(this).val();
                const roomNo = EditRoomNoSelect.val();
                try {
                    const electricityRecords = await getElectricityRecords(roomNo,
                        EditCandidateNameSelect
                        .data('id'), electricityMonth);
                    updateInputs(electricityRecords);
                } catch (error) {
                    alertMessage(
                        'Error Occer: Somthing Went Wronge when feathing the candidate electricity records'
                    );
                }
            });

            EditAddItemInTableBtn.on('click', function() {
                // disable the button 
                const saleType = $(this).data('saleType');
                var itemListData;
                // first check filled is filled or not 
                if (!EditItemName.val() || !EditItemQuantity.val() || !EditItemRate.val() || !EditItemTax
                    .val() || !EditItemAmount.val() || !EditItemDiscount.val()) {
                    alertMessage('Please fill all the items create fields');
                    return;
                }

                if (addItemList.length === 0) {
                    alreadyStroreItemId = [];
                }

                if (saleType === "estimationSale") {
                    let discountedAmount = parseFloat(EditItemRate.val()) - (parseFloat(EditItemRate
                            .val()) *
                        parseFloat(EditItemDiscount.val()) / 100);
                }

                // check electricity records is already have in the list or not have item
                let itemId = EditItemName.val();
                let itemName = EditItemName.children('option:selected').text();
                if (itemId === 'e01' && addItemList.length === 0) {
                    if (!alreadyStroreItemId.includes(itemId)) {
                        itemListData = {
                            id: itemId,
                            name: itemName,
                            rate: EditItemRate.val(),
                            quantity: parseFloat(EditItemQuantity.val()),
                            tax: parseFloat(EditItemTax.val()),
                            amount: parseFloat(EditItemAmount.val()),
                            discount: parseFloat(EditItemDiscount.val()),
                            electricityBillDate: EditElectricityMonth.val()
                        };
                    } else {
                        alertMessage('Electricity Bill only have one\'s per bill.');
                        return;
                    }
                } else if (!alreadyStroreItemId.includes('e01') && itemId !== 'e01') {
                    itemListData = {
                        id: itemId,
                        name: itemName,
                        rate: EditItemRate.val(),
                        quantity: parseFloat(EditItemQuantity.val()),
                        tax: parseFloat(EditItemTax.val()),
                        amount: parseFloat(EditItemAmount.val()),
                        discount: parseFloat(EditItemDiscount.val())
                    }
                } else {
                    alertMessage("Electricity Bill only create without any item in the list");
                    return;
                }
                if (saleType === "estimationSale") {
                    let discountedAmount = parseFloat(EditItemRate.val()) - (parseFloat(EditItemRate
                            .val()) *
                        parseFloat(EditItemDiscount.val()) / 100);
                    itemListData.discountedAmount = discountedAmount;
                }
                // now push the item into the list
                addItemList.push(itemListData);
                alreadyStroreItemId.push(itemId) //update the item
                // now update the list in the table
                const totalITemAmount = updateListInTable(addItemList, EditlistItemsTable);
                // now update the amount of totalITem Amount of the sale
                EditTotalAmount.text(totalITemAmount);
                EditItemName.val('');
                handleErrorInputs();
            });

            EditItemQuantity.on('input', function() {
                var total = calculateTotal($(this).val(), EditItemRate.val(), EditItemTax.val(),
                    EditItemDiscount.val());
                EditItemAmount.val(total);
            });

            EditItemDiscount.on('input', function() {
                var total = calculateTotal(EditItemQuantity.val(), EditItemRate.val(), EditItemTax.val(), $(
                    this).val());
                EditItemAmount.val(total);
            });


            EditItemTax.on('input', function() {
                var total = calculateTotal(EditItemQuantity.val(), EditItemRate.val(),
                    $(this).val(), EditItemDiscount.val());
                EditItemAmount.val(total);
            });

            $(document).on('click', '#EditlistItems .listItemDeleteBtn', function() {
                const itemListIndexId = $(this).data('itemid');
                // now delete the item from the list
                addItemList.splice(itemListIndexId, 1);
                // update the item list
                const totalITemAmount = updateListInTable(addItemList, EditlistItemsTable);
                // update the total item amount of the sale 
                EditTotalAmount.text(totalITemAmount);
                removeItemFormTheList(customAddItemList, customSaleTotalAmount, $(this),
                    customSaleListItems);

            });

            EditSaleFormSubmitBtn.on('click', function() {
                regSaleEditForm.trigger('submit');
            });

            regSaleEditForm.on('submit', async function(event) {
                event.preventDefault();
                let isValidated = true;
                $("#EdititemNotFoundError").text('');
                $(this).find('input,select').each(function() {
                    if ($(this).is(':required')) {
                        if ($(this).val() === '' || $(this).val() === null) {
                            $(this).addClass('is-invalid border border-danger');
                            isValidated = false;
                        } else {
                            $(this).removeClass('is-invalid border border-danger');
                        }
                    }
                });
                // now check the item list
                if (addItemList.length === 0) {
                    $("#EdititemNotFoundError").text('Please add items befor create the sale!');
                }
                let receivedAmount = 0;
                let paymentMode = null;
                let receivedAmountStatus = true;

                receivedAmount = EditreceivedAmountInput.val() || 0;
                paymentMode = $("#EditpaymentMode").val();

                receivedAmountStatus = receivedAmount > 0 ? true : false;

                // now prepare the data for submit
                const saleData = {
                    candidateId: EditCandidateNameSelect.data('id'),
                    invoiceNo: (EditInvoiceNo.text()).trim(),
                    date: EditRegSaleDate.val(),
                    roomNo: EditRoomNoSelect.val(),
                    totalSaleAmount: EditTotalAmount.text().trim(),
                    receivedAmount: receivedAmount || 0,
                    paymentMode: paymentMode,
                    salesItemsList: addItemList,
                    isReceivedAmount: Boolean(receivedAmountStatus)
                }
                if (isValidated) {
                    EditSaleFormSubmitBtn.attr('disabled', true);
                    const saleType = EditSaleFormSubmitBtn.data('saleType');
                    let url;
                    try {
                        if (saleType === 'regSale') {
                            url = "{{ route('update.reg.sale') }}";
                        } else if (saleType === 'customSale') {
                            url = "{{ route('update.custom.sale') }}";
                        } else if (saleType === "estimationSale") {
                            url = "{{ route('update.estimation.sale') }}";
                            saleData.clientName = EditCandidateNameSelect.val();
                            saleData.contact = EditMobile.val();
                            saleData.address = EditAddress.val();

                        }
                        const saleResponse = await submitRegSaleData(saleData, url);
                        $("#regSaleEditModal").modal('hide');
                        EditSaleFormSubmitBtn.attr('disabled', false);
                        showSalesBill(saleResponse.invoiceNo, saleType);
                    } catch (error) {
                        EditSaleFormSubmitBtn.attr('disabled', false);
                        alertMessage('somthing Went Wronge, please try again!');
                    }
                }

            });

            // delete sale
            DeleteRegSaleBtn.on('click', async function() {
                const saleInvoiceNo = $(this).data('invoiceNo');
                const $btnData = $(this).data();
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this sale!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ffc107',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then(async (result) => {
                    if (result.isConfirmed) {
                        try {
                            let url
                            if ($btnData.saleType === 'regSale') {
                                url = "{{ route('delete.reg.sale') }}";
                            } else if ($btnData.saleType === "customSale") {
                                url = "{{ route('delete.custom.sale') }}";
                            } else if ($btnData.saleType === 'estimationSale') {
                                url = "{{ route('delete.estimation.sale') }}";
                            }
                            const saleResponse = await deleteRegSale(saleInvoiceNo, url);
                            successMessage(saleResponse.message);
                            reloadPage();
                        } catch (error) {
                            alertMessage('Something went wrong, please try again.');
                        }
                    }
                });
            });
            // received amount section

            $(document).on('click', '.regSaleTakePaymentBtn', function() {
                const candidateDetails = $(this).data('candidatedetails');
                const saleDetails = $(this).data('saldata');
                const saleType = $(this).data('sale');
                if (saleType === 'customSale') {
                    $("#paymentInRoomNoLabel").text('Invoice Type');
                }
                regTakePaymentModal.on('show.bs.modal', function() {
                    deletePaymentInBtn.hide();
                    paymentInCandidateName.val(candidateDetails.candidateName);
                    paymentInCandidateName.data({
                        id: candidateDetails.candidateId
                    });
                    paymentInRoomNo.val(candidateDetails.currentRoomNo);
                    PaymentInInvoiceNo.val(saleDetails.invoiceNo);
                    paymentInPandingAmount.val(saleDetails.pendingAmount);
                    paymentInReceiveAmount.val(saleDetails.pendingAmount);
                    PaymentInFromSubmitBtn.data({
                        'saleType': saleType,
                        'edit': false,
                    });
                }).modal('show');
            });

            $(document).on('click', '.regSaleTakePaymentEdit', function() {
                const candidateDetails = $(this).data('candidatedetails');
                const saleDetails = $(this).data('saldata');
                const saleType = $(this).data('sale');
                if (saleType === 'customSale') {
                    $("#paymentInRoomNoLabel").text('Invoice Type');
                }
                regTakePaymentModal.on('show.bs.modal', function() {
                    deletePaymentInBtn.show();
                    deletePaymentInBtn.data({
                        'paymentInId': saleDetails.id,
                        'saleType': saleType
                    });
                    paymentInCandidateName.val(candidateDetails.candidateName);
                    paymentInCandidateName.data({
                        id: candidateDetails.candidateId
                    });
                    paymentInRoomNo.val(candidateDetails.currentRoomNo);
                    PaymentInInvoiceNo.val(saleDetails.invoiceNo);
                    paymentInPandingAmount.val(saleDetails.pendingAmount);
                    paymentInReceiveAmount.val(saleDetails.receiveAmount);
                    PaymentInDate.val(saleDetails.receiveAmountDate);
                    PaymentInPaymentMode.val(saleDetails.paymentMode);
                    PaymentInFromSubmitBtn.data({
                        'saleType': saleType,
                        'paymentInId': saleDetails.id,
                        'edit': true
                    });
                }).modal('show');
            });

            PaymentInFromSubmitBtn.on('click', async function() {

                const buttonData = $(this).data();
                let formValidation = true;
                let formData = {};
                let url;

                paymentInForm.find('input, select').each(function() {
                    if (!$(this).val()) {
                        $(this).addClass('is-invalid');
                        formValidation = false;
                    } else {
                        $(this).removeClass('is-invalid');

                        // Collect form data
                        const name = $(this).attr('name');
                        formData[name] = $(this).val();
                    }
                });

                if (formValidation) {
                    $(this).attr('disabled', true);
                    const candidateId = paymentInCandidateName.data('id');
                    const paymentInId = buttonData?.paymentInId;
                    if (buttonData.edit) {
                        if (buttonData.saleType === "regSale") {
                            url = "{{ route('reg.sale.update.paymnetIn', ['id' => ':id']) }}".replace(
                                ':id', paymentInId);
                        } else if (buttonData.saleType === "customSale") {
                            url = "{{ route('update.custom.received.payment', ['id' => ':id']) }}"
                                .replace(':id', paymentInId);
                        }
                    } else {
                        if (buttonData.saleType === "regSale") {
                            url = "{{ route('reg.sale.take.payment') }}";
                        } else if (buttonData.saleType === "customSale") {
                            url = "{{ route('custom.sale.take.payment') }}";
                        }
                    }
                    // Optional: Add candidateId to formData if needed
                    formData['candidateId'] = candidateId;
                    try {
                        const responseData = await submitRegSaleData(formData, url);
                        successMessage(responseData.message);
                        reloadPage();
                    } catch (error) {
                        if (error.responseJSON) {
                            const errorMessage = error.responseJSON.message || 'An error occurred';
                            alertMessage(errorMessage);
                        } else if (error.statusText) {
                            alertMessage('No response received from the server. Please try again.');
                        } else {
                            // Something happened in setting up the request that triggered an Error
                            alertMessage('Something went wrong. Please try again.');
                        }
                    }
                }
            });

            deletePaymentInBtn.on('click', async function() {
                const $btnData = $(this).data();
                const paymentInId = $btnData.paymentInId;
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this sale!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ffc107',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then(async (result) => {
                    if (result.isConfirmed) {
                        try {
                            let url
                            if ($btnData.saleType === 'regSale') {
                                url = "{{ route('delete.reg.payment.Records') }}";
                            } else if ($btnData.saleType === "customSale") {
                                url = "{{ route('delete.custom.payment.Recrods') }}";
                            }
                            const saleResponse = await deleteRegSale(paymentInId, url);
                            successMessage(saleResponse.message);
                            reloadPage();
                        } catch (error) {
                            alertMessage('Something went wrong, please try again.');
                        }
                    }
                });

            })

            $("#PaymentInModalCloseBtn").on('click', function() {
                reloadPage();
            });
            $("#regSaleEditModalCloseBtn").on('click', function() {
                reloadPage();
            });


            let currentSection = localStorage.getItem('activeSection');
            var urlHash = window.location.hash;

            if (currentSection === "regSale") {
                regSaleSectionButton.trigger('click');
            } else if (currentSection === "customSale") {
                customSaleSectionButton.trigger('click');
            } else if (currentSection === 'regSale.regForm' || urlHash === "#saleForm") {
                regSaleSectionButton.trigger('click');
                addSaleButton.trigger('click');
            } else if (currentSection === 'customSale.regForm') {
                customSaleSectionButton.trigger('click');
                addSaleButton.trigger('click');
            } else if (currentSection === 'estimationSale') {
                addEstimationButton.trigger('click');
            }

        });
    </script>
@endsection