{% load static %}
<div id="add_b2b_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLiveLabel">Add B2B Customer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="b2b_form">
                <div class="modal-body">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-4 mb-5">
                            <label for="name" class="form-label"><span style="color: red;">*</span> Company Name</label>
                            <input class="form-control" type="text" minlength="3" id="name" name="name" required>
                            <small id="email-error" class="text-danger d-none"></small>
                        </div>


                        <div class="col-4 mb-5">
                            <label for="name" class="form-label"><span style="color: red;">*</span> Contact
                                Person</label>
                            <input class="form-control" type="text" minlength="3" id="contact_person"
                                name="contact_person" required>
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Customer Type</label>
                            <select class="select2  form-control" id="customer_type" name="customer_type">
                                <option value="">Select</option>
                                <option value="wholesale">Wholesale</option>
                                <option value="retail" selected>Retail</option>
                            </select>
                        </div>
                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Email</label>
                            <input class="form-control" type="email" id="email" name="email">
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label"><span style="color: red;">*</span> Phone</label>
                            <input class="form-control" type="text" id="b2b_phone" name="phone" maxlength="10"
                                pattern="[0-9]{10}" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                                title="Enter a 10-digit mobile number" required>
                            <small id="b2b-phone-error" class="text-danger d-none">Customer with this phone already
                                exists</small>
                        </div>


                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Mobile</label>
                            <input class="form-control" type="tel" id="mobile" name="mobile" maxlength="10"
                                pattern="[0-9]{10}" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                                title="Enter a 10-digit mobile number">
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label"><span style="color: red;">*</span> GST</label>
                            <input class="form-control" type="text" id="gst" name="gst" required>
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label"><span style="color: red;">*</span> Credit Days</label>
                            <input class="form-control" type="number" id="credit_days" name="credit_days" required>
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label"><span style="color: red;">*</span> Credit Limit</label>
                            <input class="form-control" type="number" id="credit_limit" name="credit_limit" required>
                        </div>


                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">City</label>
                            <input class="form-control" type="text" id="city" name="city" value="Tirupur">
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">State</label>
                            <input class="form-control" type="text" id="state" name="state" value="TamilNadu">
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Pincode</label>
                            <input class="form-control" type="text" id="pincode" name="pincode" maxlength="6">
                        </div>

                        <div class="col-6 mb-5">
                            <label for="address" class="form-label">Address</label>
                            <textarea class="form-control" id="address" rows="3" name="address"></textarea>
                        </div>
                        <div class="col-6 mb-5">
                            <label for="remarks" class="form-label">Remarks</label>
                            <textarea class="form-control" id="remarks" rows="3" name="remarks"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    <input type="hidden" id="c_type" name="c_type" value="b2b">
                    <button type="submit" class="btn btn-success" id="add_b2b_button">Add</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- B2C Customer  -->
<div id="add_b2c_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLiveLabel">Add B2C Customer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="b2c_form">
                <div class="modal-body">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-4 mb-5">
                            <label for="name" class="form-label"><span style="color: red;">*</span> Name</label>
                            <input class="form-control" type="text" minlength="3" id="name" name="name" required>
                            <small id="email-error" class="text-danger d-none"></small>
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Customer Type</label>
                            <select class="select2  form-control" id="customer_type" name="customer_type">
                                <option value="">Select</option>
                                <option value="wholesale">Wholesale</option>
                                <option value="retail" selected>Retail</option>
                            </select>
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Email</label>
                            <input class="form-control" type="email" id="email" name="email">
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label"><span style="color: red;">*</span> Phone</label>
                            <input class="form-control" type="text" id="b2c_phone" name="phone" maxlength="10"
                                pattern="[0-9]{10}" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                                title="Enter a 10-digit mobile number" required>
                            <small id="b2c-phone-error" class="text-danger d-none">Customer with this phone already
                                exists</small>
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Credit Days</label>
                            <input class="form-control" type="number" id="credit_days" name="credit_days">
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Credit Limit</label>
                            <input class="form-control" type="number" id="credit_limit" name="credit_limit">
                        </div>


                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">City</label>
                            <input class="form-control" type="text" id="city" name="city" value="Tirupur">
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">State</label>
                            <input class="form-control" type="text" id="state" name="state" value="TamilNadu">
                        </div>

                        <div class="col-4 mb-5">
                            <label for="name" class="form-label">Pincode</label>
                            <input class="form-control" type="number" id="pincode" name="pincode" maxlength="6">
                        </div>

                        <div class="col-6 mb-5">
                            <label for="address" class="form-label">Address</label>
                            <textarea class="form-control" id="address" rows="3" name="address"></textarea>
                        </div>
                        <div class="col-6 mb-5">
                            <label for="remarks" class="form-label">Remarks</label>
                            <textarea class="form-control" id="remarks" rows="3" name="remarks"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    <input type="hidden" id="c_type" name="c_type" value="b2c">
                    <button type="submit" class="btn btn-success">Add</button>
                </div>
            </form>
        </div>
    </div>
</div>

<footer class="content-footer footer bg-footer-theme">
    <div class="container-xxl">
        <div class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
            <div class="text-body">
                ©
                <script>
                    document.write(new Date().getFullYear());
                </script>
                , made with ❤️ by <a href="" class="footer-link">Boys Mobiles</a>
            </div>
        </div>
    </div>
</footer>

<div class="content-backdrop fade"></div>
</div>
</div>
</div>

<div class="layout-overlay layout-menu-toggle"></div>
<div class="drag-target"></div>
</div>
{% if request.session.branch_id %}
<div class="buy-now" style="position: fixed; top: 0px; right: 200px; z-index: 1050;">
    <button title="Quick Menu" data-bs-toggle="offcanvas" data-bs-target="#floatingSidebar"
        class="btn btn-danger btn-buy-now">
        <i class="fa-solid fa-building-columns"></i>
    </button>
</div>
{% endif %}


<div class="offcanvas offcanvas-end" tabindex="-1" id="floatingSidebar">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title fw-bold">
            <i class="fa-solid fa-wallet me-2 text-primary text-uppercase text-center"></i> Summary
        </h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body mt-0">

        <!-- Current Balance Block -->
        <div class="col-12">
            <div class="text-center fw-bold text-uppercase mb-3" style="
                    font-size: 1rem;
                    background: linear-gradient(to right, #e3f2fd, #bbdefb);
                    color: #0d47a1;
                    padding: 8px;
                    border-radius: 8px;
                    border-left: 5px solid #2196f3;">
                <i class="fa-solid fa-door-open me-1"></i> Current Balances :
                <span style="color: red; font-weight: bold;">₹</span>
                <span id="current-open" style="color: red; font-weight: bold;"></span>
            </div>
        </div>



        <div class="d-flex justify-content-center" id="icons-container">

            <!-- Company -->
            <div class="card icon-card cursor-pointer text-center card-border-shadow-primary me-3"
                style="width: 150px;">
                <a href="/daily-entry">
                    <div class="card-body bg-label-primary py-2 px-2" data-bs-toggle="tooltip" data-bs-placement="top"
                        data-bs-custom-class="tooltip-primary" title="Cash Balance">
                        <img src="{% static 'assets/image/icon/cashsalesboys.svg' %}" class="mb-1" width="25px">
                        <p class="icon-name text-capitalize text-truncate mb-0 text-primary">cash</p>
                        <p class="icon-name text-truncate mb-0 text-primary">₹ <span id="cash-open">0.00</span></p>

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

            <!-- Employee -->
            <div class="card icon-card cursor-pointer text-center card-border-shadow-primary me-3"
                style="width: 150px;">
                <a href="/daily-entry">
                    <div class="card-body bg-label-primary py-2 px-2" data-bs-toggle="tooltip" data-bs-placement="top"
                        data-bs-custom-class="tooltip-primary" title="Bank Balance">
                        <img src="{% static 'assets/image/icon/moneyboys.svg' %}" class="mb-1" width="25px">
                        <p class="icon-name text-capitalize text-truncate mb-0 text-primary">Bank</p>
                        <p class="icon-name text-truncate mb-0 text-primary">₹ <span id="bank-open">0.00</span></p>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 mt-3">
            <div class="text-center fw-bold text-uppercase mb-2" style="
                    font-size: 1rem;
                    background: linear-gradient(to right, #f3e5f5, #e1bee7);
                    color: #6a1b9a;
                    padding: 8px;
                    border-radius: 8px;
                    border-left: 5px solid #9c27b0;">
                <i class="fa-solid fa-building-columns me-1"></i> Bank-wise Balance
            </div>
            <div id="bank-wise-container" class="container-fluid px-2"></div>
        </div>

        <!-- Bank-wise Breakdown -->


    </div>
</div>














<script src="{% static 'assets/vendor/libs/jquery/jquery.js' %}"></script>

<script src="{% static 'assets/vendor/libs/popper/popper.js' %}"></script>

<script src="{% static 'assets/vendor/js/bootstrap.js' %}"></script>

<script src="{% static 'assets/vendor/libs/node-waves/node-waves.js' %}"></script>

<script src="{% static 'assets/vendor/libs/@algolia/autocomplete-js.js' %}"></script>

<script src="{% static 'assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js' %}"></script>

<script src="{% static 'assets/vendor/libs/hammer/hammer.js' %}"></script>

<script src="{% static 'assets/vendor/libs/i18n/i18n.js' %}"></script>

<script src="{% static 'assets/vendor/libs/select2/select2.js' %}"></script>

<script src="{% static 'assets/vendor/libs/tagify/tagify.js' %}"></script>

<script src="{% static 'assets/vendor/libs/typeahead-js/typeahead.js' %}"></script>

<script src="{% static 'assets/vendor/libs/typeahead-js/typeahead.bundle.min.js' %}"></script>

<script src="{% static 'assets/vendor/libs/bootstrap-select/bootstrap-select.js' %}"></script>

<script src="{% static 'assets/vendor/js/menu.js' %}"></script>

<script src="{% static 'assets/vendor/libs/apex-charts/apexcharts.js' %}"></script>

<script src="{% static 'assets/vendor/libs/swiper/swiper.js' %}"></script>

<script src="{% static 'assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>

<script src="{% static 'assets/vendor/libs/notyf/notyf.js' %}"></script>

<script src="{% static 'assets/vendor/libs/moment/moment.js' %}"></script>

<script src="{% static 'assets/vendor/libs/flatpickr/flatpickr.js' %}"></script>

<script src="{% static 'assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js' %}"></script>

<script src="{% static 'assets/vendor/libs/jquery-timepicker/jquery-timepicker.js' %}"></script>

<script src="{% static 'assets/vendor/libs/pickr/pickr.js' %}"></script>

<script src="{% static 'assets/js/ui-toasts.js' %}"></script>

<script src="{% static 'assets/vendor/js/menu.js' %}"></script>

<script src="{% static 'assets/js/main.js' %}"></script>

<script src="{% static 'assets/js/dashboards-analytics.js' %}"></script>

<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.0/dist/sweetalert2.all.min.js"></script>
<script>
    const USER_TYPE = "{{ request.session.user_type|default:'' }}";  
</script>

<script>

    $(function () {
        const selectPicker = $('.selectpicker'),
            select2 = $('.select2');
        if (select2.length) {
            select2.each(function () {
                var $this = $(this);
                $this.wrap('<div class="position-relative"></div>').select2({
                    dropdownParent: $this.parent()
                });
            });
        }
    });

    $(document).ready(function () {
        enableAutoSelectInputs();
    });




    // Sidemenu 
    $(document).ready(function () {
        var currentPath = window.location.pathname;

        currentPath = currentPath.replace(/\/$/, '');

        $('.menu-item a').each(function () {
            var href = $(this).attr('href');

            if (!href || href === 'javascript:void(0);') return;

            var normalizedHref = href.replace(/\/$/, '');

            // Compare current path with href
            if (normalizedHref === currentPath) {
                // Add active to this menu-item
                var menuItem = $(this).closest('.menu-item');
                menuItem.addClass('active');

                // If inside submenu, open parent menu
                var parentMenu = menuItem.closest('ul.menu-sub');
                if (parentMenu.length) {
                    parentMenu.show(); // make sure submenu is visible
                    parentMenu.closest('.menu-item').addClass('open active');
                }
            }
        });

    });





    function enableAutoSelectInputs() {
        $(document).on('focusin', 'input[type="number"]', function () {
            $(this).select();
        });

        $('#CloseInputsContainer').on('focus click', '.closing', function () {
            $(this).select();
        });

        $('#itemInputsContainer').on('focus click', '.amount', function () {
            $(this).select();
        });

        // Cash & Bank inputs (both opening and closing)
        $('#cashOpening, #bankOpening, #cashClosing, #bankClosing').on('focus click', function () {
            $(this).select();
        });

        // Make Enter key behave like Tab (for all text/number inputs inside forms)
        $(document).on('keydown', 'input', function (e) {
            if (e.key === "Enter") {
                e.preventDefault(); // stop form submit

                const inputs = $('input:visible:not([readonly]):not([disabled])');
                const idx = inputs.index(this);

                if (idx >= 0 && idx + 1 < inputs.length) {
                    const next = inputs[idx + 1];
                    next.focus();
                    $(next).select();
                }
            }
        });
    }


    $(window).on('pageshow', function (event) {
        if (event.originalEvent.persisted || window.performance.navigation.type === 2) {
            location.reload();
        }
    });






    document.addEventListener("DOMContentLoaded", function () {

        // Select ALL number inputs on the page (including ones loaded later)
        document.querySelectorAll('input[type="number"]').forEach(function (el) {

            // Block typing "-" key
            el.addEventListener("keydown", function (e) {
                if (e.key === "-" || e.keyCode === 189) {
                    e.preventDefault();
                }
            });

            // Block pasting negative values
            el.addEventListener("input", function () {
                if (this.value < 0) {
                    this.value = this.value.replace("-", "");
                }
            });

            // Block spinner from going negative
            el.addEventListener("change", function () {
                if (this.value < 0) {
                    this.value = 0;
                }
            });

        });
    });

    $(document).ready(function () {
        // Target all number inputs
        $('input[type=number]').on('wheel', function (e) {
            // Check if the input is currently focused
            if ($(this).is(':focus')) {
                e.preventDefault();
            }
        });
    });

    function resetModalState(modalSelector) {
        const modal = $(modalSelector);

        // Clear all text inputs
        modal.find('input[type="text"]').val('');

        // Hide & clear field error messages
        modal.find('.text-danger')
            .addClass('d-none')
            .text('');

        // Enable submit buttons
        modal.find('button[type="submit"]').prop('disabled', false);
    }

    $(document).ready(function () {
        if (USER_TYPE === "stores" || USER_TYPE === "wholesale" || USER_TYPE === "wholesale_customer") {
            loadTodayBalance();

            $('#floatingSidebar').on('show.bs.offcanvas', function () {
                loadTodayBalance();
            });

            setInterval(function () {
                loadTodayBalance();
            }, 60000); // every 1 min
        }
    });

    // Showing current balance in sidenavbar
    function loadTodayBalance() {
        $.ajax({
            url: '/get_today_balance/',
            method: 'GET',
            success: function (data) {
                lastBalanceUpdate = new Date();

                const day = String(lastBalanceUpdate.getDate()).padStart(2, '0');
                const month = String(lastBalanceUpdate.getMonth() + 1).padStart(2, '0');
                const year = lastBalanceUpdate.getFullYear();

                let hours = lastBalanceUpdate.getHours();
                const minutes = String(lastBalanceUpdate.getMinutes()).padStart(2, '0');
                const ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12 || 12;

                $('#last-update').text(
                    `${day}-${month}-${year}  ${hours}:${minutes} ${ampm}`
                );

                if (!data.current_balance) return;

                const cashBalance = parseFloat(data.current_balance.cash_balance || 0);
                const bankBalance = parseFloat(data.current_balance.bank_balance || 0);
                const totalBalance = cashBalance + bankBalance;

                // 🔥 MAIN NUMBERS
                $('#current-open').text(totalBalance.toFixed(2));
                $('#cash-open').text(cashBalance.toFixed(2));
                $('#bank-open').text(bankBalance.toFixed(2));

                // 🔽 BANK-WISE BREAKDOWN
                let bankHtml = '';

                if (data.current_balance.bank_wise && data.current_balance.bank_wise.length) {
                    data.current_balance.bank_wise.forEach((bank, index) => {
                        bankHtml += `
                                    <div class="list-group-item d-flex justify-content-between align-items-center
                                                py-2 px-3 shadow-sm mb-2 rounded"
                                        style="
                                            background-color:#fefefe;
                                            min-height:56px;
                                            max-height:56px;
                                        ">

                                        <div class="d-flex align-items-center" style="min-width:0;">
                                            <i class="fa-solid fa-university me-2 text-secondary"
                                            style="font-size:18px;"></i>

                                            <div class="fw-semibold text-dark text-truncate"
                                                style="
                                                    font-size:0.95rem;
                                                    max-width:160px;
                                                    white-space:nowrap;
                                                    overflow:hidden;
                                                    text-overflow:ellipsis;
                                                "
                                                title="${bank.bank_name}">
                                                ${bank.bank_name || 'Bank ' + (index + 1)}
                                            </div>
                                        </div>

                                        <div class="fw-bold text-danger text-nowrap"
                                            style="font-size:0.9rem;">
                                            ₹ ${parseFloat(bank.balance).toFixed(2)}
                                        </div>
                                    </div>
                                `;




                    });
                } else {
                    bankHtml = `<p class="text-muted text-center mb-0">No bank data</p>`;
                }

                $('#bank-wise-container').html(bankHtml);
            },
            error: function (xhr, status, error) {
                console.error('Balance Load Error:', error);
            }
        });
    }

</script>

<style>
    .custom-swal-close {
        font-size: 24px !important;
        top: 10px !important;
        right: 10px !important;
        background-color: #fff !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 30px !important;
        font-weight: bold !important;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .custom-swal-close:hover {
        color: #cccccc !important;
        cursor: pointer;
    }
</style>


</body>

</html>