{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}
{% include 'includes/datatable_css.html' %}
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <h4 class="mb-0 me-3">Transfer Outward</h4>
            <a href="/transfer-outward/add"><button type="button" class="btn btn-success btn-sm">Add</button></a> &nbsp
        </div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/store/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i>
                    </a>
                </li>
                <li class="breadcrumb-item">Transfer</li>
                <li class="breadcrumb-item active" aria-current="page">Transfer Outward </li>
            </ol>
        </nav>
    </div>
    <style>
        /* Modern Static Notification Styles (Slide-In) */
        .scrolling-alert-container {
            background: linear-gradient(90deg, #f0f4ff 0%, #ffffff 50%, #f0f4ff 100%);
            border-radius: 12px;
            padding: 8px 18px;
            position: relative;
            display: flex;
            align-items: center;
            border: 1px solid rgba(115, 103, 240, 0.15);
            height: 48px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
            opacity: 0;
            transform: translateY(-15px);
            animation: slideInFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards, pulseHighlight 2.5s ease-out 1s;
        }

        @keyframes slideInFade {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulseHighlight {
            0% {
                box-shadow: 0 0 0 0 rgba(115, 103, 240, 0.2);
            }

            50% {
                box-shadow: 0 0 0 8px rgba(115, 103, 240, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(115, 103, 240, 0);
            }
        }

        .scrolling-alert-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #7367f0;
            border-radius: 4px 0 0 4px;
        }

        .scrolling-alert-container:hover {
            box-shadow: 0 4px 15px rgba(115, 103, 240, 0.08);
            border-color: rgba(115, 103, 240, 0.3);
            background: #ffffff;
        }

        .pulse-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: rgba(115, 103, 240, 0.1);
            border-radius: 50%;
        }

        .alert-content-wrapper {
            flex-grow: 1;
            margin: 0 20px;
            display: flex;
            align-items: center;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE 10+ */
            scroll-behavior: smooth;
        }

        .alert-content-wrapper::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        .alert-item {
            cursor: pointer;
            padding: 4px 12px;
            border-radius: 8px;
            transition: all 0.25s ease;
            display: inline-flex;
            align-items: center;
            border: 1px solid transparent;
            font-weight: 500;
            color: #5d596c;
            font-size: 0.92rem;
        }

        .alert-item:hover {
            background: #f8f9ff;
            border-color: rgba(115, 103, 240, 0.25);
            color: #7367f0;
            transform: translateY(-1px);
        }

        .alert-divider {
            margin: 0 5px;
            color: #cfcde1;
            font-weight: 300;
        }

        .action-link {
            color: #7367f0;
            font-weight: 700;
            margin-left: 10px;
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-color: rgba(115, 103, 240, 0.3);
        }

        .alert-item:hover .action-link {
            text-decoration-color: #7367f0;
        }

        .alert-arrow {
            color: #7367f0;
            opacity: 0.5;
            transition: all 0.2s ease;
        }

        .scrolling-alert-container:hover .alert-arrow {
            opacity: 0.8;
        }

        .alert-arrow:hover {
            opacity: 1 !important;
        }

        .tabler-chevron-right.alert-arrow:hover {
            transform: translateX(3px);
        }

        .tabler-chevron-left.alert-arrow:hover {
            transform: translateX(-3px);
        }
    </style>

    {% if pending_requests %}
    <div class="scrolling-alert-container mb-4">
        <div class="pulse-icon">
            <i class="ti tabler-bell-ringing text-primary fs-4"></i>
        </div>
        <i class="ti tabler-chevron-left alert-arrow fs-4 ms-2" style="cursor: pointer;"
            onclick="scrollAlerts('left')"></i>
        <div class="alert-content-wrapper" id="alert-wrapper">
            {% for req in pending_requests %}
            <div class="alert-item" onclick="handleAlertClick('{{ req.branch_id }}', '{{ req.po_id }}')">
                <span class="fw-bold text-dark">{{ req.branch_name }}</span>
                <span class="badge bg-label-primary mx-2">{{ req.po_no }}</span>
                <span class="ms-1">has raised a transfer request.</span>
                <span class="action-link">Proceed <i class="ti tabler-arrow-narrow-right"></i></span>
            </div>
            {% if not forloop.last %}<span class="alert-divider">|</span>{% endif %}
            {% endfor %}
        </div>
        <i class="ti tabler-chevron-right alert-arrow fs-4" style="cursor: pointer;"
            onclick="scrollAlerts('right')"></i>
    </div>
    <script>
        function handleAlertClick(branchId, poId) {
            window.location.href = '/transfer-outward/add?branch_id=' + branchId + '&po_id=' + poId;
        }

        function scrollAlerts(direction) {
            const wrapper = document.getElementById('alert-wrapper');
            const scrollAmount = 400; // approx width of one alert item

            if (direction === 'right') {
                if (wrapper.scrollLeft + wrapper.clientWidth >= wrapper.scrollWidth - 10) {
                    wrapper.scrollTo({ left: 0, behavior: 'smooth' });
                } else {
                    wrapper.scrollBy({ left: scrollAmount, behavior: 'smooth' });
                }
            } else {
                if (wrapper.scrollLeft <= 0) {
                    wrapper.scrollTo({ left: wrapper.scrollWidth, behavior: 'smooth' });
                } else {
                    wrapper.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
                }
            }
        }
    </script>
    {% endif %}

    <div class="card">
        <div class="card-header border-bottom">
            <div class="row mt-2">
                <div class="col-2">
                    <label class="form-label">Date Filter</label>
                    <input type="checkbox" id="is_date" checked>
                    <input type="text" id="date_filter" class="form-control" style="cursor: pointer;" />
                    <input type="hidden" id="from_date" name="from_date">
                    <input type="hidden" id="to_date" name="to_date">
                </div>
                <div class="col-2 mb-5">
                    <label for="name" class="form-label">Supply Branch</label>
                    <select class="select2 form-control" id="filter_supplier_id" name="supplier_id">
                        <option value="">Select</option>
                        {% for k in branch %}
                        <option value="{{k.id}}">{{k.name}}</option>
                        {% endfor %}
                    </select>
                </div>



                <div class="col-2 mt-6">
                    <button type="button" class="btn btn-primary" onclick="refresh_data()"><i
                            class="fas fa-search"></i>&nbsp; Search</button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table table-bordered" id="datatable">
                    <thead>
                        {% csrf_token %}
                        <tr>
                            <th>Id</th>
                            <th>Action</th>
                            <th>Transfer Request No</th>
                            <th>Transfer Request Date</th>
                            <th>Transfer In No</th>
                            <th>Transfer In Date</th>
                            <th>TO Branch </th>
                            <th>Total Quantity</th>
                            <th>Total Amount (₹)</th>
                            <th>Cash (₹)</th>
                            <th>Bank (₹)</th>
                            <th>Balance (₹)</th>
                            <th>Remarks</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <th colspan="7" class="text-end fw-bold">Total :</th>
                        <th id="footer_qty" class="text-end fw-bold"></th>
                        <th id="footer_amount" class="text-end fw-bold"></th>
                        <th id="footer_cash" class="text-end fw-bold"></th>
                        <th id="footer_bank" class="text-end fw-bold"></th>
                        <th id="footer_balance" class="text-end fw-bold"></th>
                        <th id="footer_remarks" class="text-end fw-bold"></th>
                        <th id="footer_status" class="text-end fw-bold"></th>


                    </tfoot>
                </table>
            </div>
        </div>




        <div class="modal fade" id="barcode_modal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form id="barcodeForm" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="modal-header">
                            <h5 class="modal-title" id="importModalLabel">Barcode</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <label class="form-label" for="count"><span style="color: red;">*</span> Count</label>
                            <input type="number" id="count" name="count" class="form-control" required>
                            <div id="count-error" style="color: red; font-size: 13px; margin-top: 4px;"></div>
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" name="barcode_id" id="barcode_id">
                            <input type="hidden" name="barcode_type" id="barcode_type">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success">Print</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
<script>
    var table;

    $(document).ready(function () {

        const key = "service_nav_item_type";
        const savedType = localStorage.getItem(key);

        if (savedType) {
            $("#filter_inv_type").val(savedType).trigger("change");
            console.log("Restored inward type:", savedType);
            localStorage.removeItem(key);
        }

        refresh_data();
        setupDateRangeWithLocalStorage("profit_loss_nav_date", "{{ decode_date|default:'' }}", true);


        if (sessionStorage.getItem('addSuccessMessage')) {
            showToast('success', "Purchase Inward Saved successfully")

            sessionStorage.removeItem('addSuccessMessage');
        }

        if (sessionStorage.getItem('editSuccessMessage')) {
            showToast('success', "Purchase Order Updated successfully")
            sessionStorage.removeItem('editSuccessMessage');
        }

        if (sessionStorage.getItem('refreshMainTable') === 'true') {
            refresh_data();
            sessionStorage.removeItem('refreshMainTable');
        }
    });

    function initializeDataTable() {
        table = $('#datatable').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "searching": true,
            "dom": getDataTableDom(),
            "buttons": getExportButtons(),
            "columns": [
                { "data": "id", "title": " ID #" },
                { "data": "action", "title": "Action" },
                { "data": "transfer_request_no", "title": "Transfer Request No" },
                { "data": "transfer_request_date", "title": "Transfer Request Date" },
                { "data": "po_no", "title": "Outward NO" },
                { "data": "po_date", "title": "Outward Date" },
                { "data": "to_branch", "title": "TO Branch" },
                { "data": "quantity", "title": "Total Quantity", "className": "text-end" },
                { "data": "amount", "title": "Total Amount (₹)", "className": "text-end" },
                { "data": "cash", "title": "Cash (₹)", "className": "text-end" },
                { "data": "bank", "title": "Bank (₹)", "className": "text-end" },
                { "data": "balance", "title": "Balance (₹)", "className": "text-end" },
                { "data": "remarks", "title": "Remarks" },
                { "data": "status", "title": "Status" }
            ],
            "ajax": {
                "url": '/ajax_material_outward_view/',
                "type": "POST",

                "data": function (data) {
                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    const supplier = $('#filter_supplier_id').val();
                    const supply_branch = $('#filter_branch_id').val();
                    const keyword = $('#keyword_search').val();
                    const InvType = $('#filter_inv_type').val();
                    const isDateChecked = $('#is_date').is(":checked");
                    const fromDate = $('#from_date').val();
                    const toDate = $('#to_date').val();

                    if (supplier) data.supplier = supplier;
                    if (supply_branch) data.branch = supply_branch;
                    if (keyword) data.keyword_search = keyword;
                    if (InvType) data.inv_type = InvType;

                    if (isDateChecked && fromDate && toDate) {
                        data.from_date = fromDate;
                        data.to_date = toDate;
                    }
                },
                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        showSweetAlert('warning', response.error_message || 'You do not have permission to view the user role.');
                        table.clear().draw();
                        return [];
                    }

                    return response.data || [];
                }
            },
            footerCallback: function (row, data, start, end, display) {
                const api = this.api();

                const intVal = function (i) {
                    return typeof i === 'string'
                        ? parseFloat(i.replace(/[^0-9.-]+/g, '')) || 0
                        : typeof i === 'number'
                            ? i
                            : 0;
                };

                const Quantity = data.reduce((sum, row) => sum + intVal(row.quantity), 0);
                const Amount = data.reduce((sum, row) => sum + intVal(row.amount), 0);
                const Cash = data.reduce((sum, row) => sum + intVal(row.cash), 0);
                const Bank = data.reduce((sum, row) => sum + intVal(row.bank), 0);
                const Balance = data.reduce((sum, row) => sum + intVal(row.balance), 0);


                // Upate footer cells
                $('#footer_qty').html(Quantity.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_amount').html(Amount.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_cash').html(Cash.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_bank').html(Bank.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_balance').html(Balance.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_remarks').html('-');
                $('#footer_status').html('-');
            },
        });
    }


    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }


    function edit_data(id) {
        var encodedId = btoa(id);
        window.location.href = '/transfer-outward/edit/?id=' + encodedId;
    }


    function delete_data(id) {
        deleteEntity('/delete_material_outward/', id, '{{ csrf_token }}', 'Transfer Outward');
    }


    function viewRejectionStatus(outwardNo, branchName, userName, dateTime, remarks) {
        Swal.fire({
            title: 'Rejection Details',
            html: `
                <div class="text-start">
                    <p><strong>Outward No:</strong> #${outwardNo}</p>
                    <p><strong>Status:</strong> <span class="badge bg-label-danger">Rejected</span></p>
                    <p><strong>Rejected By:</strong> ${branchName} / ${userName}</p>
                    <p><strong>Rejected On:</strong> ${dateTime}</p>
                    <hr>
                    <p><strong>Rejection Remarks:</strong><br>
                    <div class="p-2 bg-light border rounded mt-2" style="min-height: 50px;">
                        ${remarks}
                    </div>
                </p>
                <div class="alert alert-info d-flex align-items-center mt-4 mb-0" role="alert">
                    

                    This outward request (#${outwardNo}) was rejected by ${branchName} branch on ${dateTime}. No further action is required.
                </div>
            </div>
            `,
            icon: 'info',
            confirmButtonText: 'OK',
            customClass: {
                confirmButton: 'btn btn-primary'
            },
            buttonsStyling: false
        });
    }


</script>