{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/wholesale_sidebar.html' %}
{% include 'includes/navbar.html' %}
{% include 'includes/datatable_css.html' %}
<style>
    /* Fixed Width Offcanvas for 2-column comfort */
    @media (min-width: 992px) {
        #offcanvasApproval {
            width: 400px !important;
        }
    }

    #offcanvasApproval {
        background-color: #f7f7f9;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    }

    /* Card Grid - Left Aligned */
    .approval-grid-row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-left: -10px;
        justify-content: flex-start !important;
    }

    .approval-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid #e6e6e8 !important;
        background-color: #ffffff;
    }

    .approval-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    }

    /* Hierarchy & Spacing */
    .detail-item {
        padding: 5px 0;
    }

    .detail-label {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.8px;
        color: #8897ad;
    }

    .detail-value {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .header-action-btn {
        height: 32px;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        line-height: 1;
    }
</style>
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row g-2 align-items-center mb-4">
        <div class="col-12 col-md-auto">
            <div class="d-flex align-items-center gap-2">
                <h4 class="mb-0 me-1">Purchase Inward</h4>
            </div>
        </div>

        <div class="col-12 col-md-auto">
            <button
                class="btn btn-outline-primary btn-sm d-inline-flex align-items-center header-action-btn waves-effect"
                type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasApproval"
                aria-controls="offcanvasApproval" onclick="loadApprovalCards()">
                <i class="ti tabler-bell-ringing me-2"></i>Pending Inwards <span
                    class="badge bg-danger rounded-pill ms-1" id="approval_count" style="display:none">0</span>
            </button>
        </div>

        <div class="col-12 col-md-auto ms-md-auto">
            <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 active">Purchase Inward</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- View Modal for Approvals -->
    <div class="modal fade" id="approval_view_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Sales Request Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm" id="approval_details_table">
                            <thead>
                                <tr class="table-light">
                                    <th>Subcategory</th>
                                    <th>Brand</th>
                                    <th>Model</th>
                                    <th>Variant</th>
                                    <th>Color</th>
                                    <th>IMEI</th>
                                    <th class="text-end">Rate</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <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>Outward No</th>
                            <th>Outward Date</th>
                            <th>Inward NO</th>
                            <th>Inward Date</th>
                            <th>Supply Branch </th>
                            <th>Total Quantity</th>
                            <th>Total Amount</th>
                            <th>Remarks</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <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_remarks" class="text-end fw-bold"></th>
                            <th id="footer_status" class="text-end fw-bold"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="open_modal" tabindex="-1" aria-labelledby="openModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <form id="openForm" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="openModalLabel">Inward Items</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="datatables-ajax table table-bordered" id="open_table">
                            {% csrf_token %}
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Subcategory</th>
                                    <th>Brand</th>
                                    <th>Model</th>
                                    <th>Variant</th>
                                    <th>Color</th>
                                    <th>IMEI</th>
                                    <th class="text-end">Rate</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="tm_po_id" name="tm_po_id">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasApproval" aria-labelledby="offcanvasApprovalLabel">
    <div class="offcanvas-header">
        <h5 id="offcanvasApprovalLabel" class="offcanvas-title">Pending Inwards</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-4" id="approval_card_container_parent">
        <div class="row g-4 approval-grid-row" id="approval_card_container">
            <div class="text-center text-muted mt-5">
                <div class="spinner-border text-primary mb-2" role="status"></div>
                <br>Fetching requests...
            </div>
        </div>
    </div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
<script>
    var table;
    const CSRF_TOKEN = `{{csrf_token}}`.trim();

    $(document).ready(function () {
        loadApprovalCards();
        refresh_data();
        setupDateRangeWithLocalStorage("wholesale_inward_date", `{{decode_date|default:''}}`.trim(), true);

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

    function loadApprovalCards() {
        $.ajax({
            url: '/wholesale_ajax_pending_inward/',
            type: 'GET',
            success: function (res) {
                let html = '';
                let data = res.data || [];
                let pendingCount = 0;

                if (data.length === 0) {
                    html = '<div class="text-center text-muted mt-5"><i class="ti tabler-clipboard-check fs-1 mb-2"></i><br>No pending inwards.</div>';
                    $('#approval_count').hide();
                } else {
                    data.forEach(item => {
                        pendingCount++;

                        html += `
                            <div class="col-12 mb-2">
                                <div class="card border-0 shadow-sm rounded-3 approval-card" id="card_${item.id}">
                                    <div class="card-header border-bottom p-4 d-flex justify-content-between align-items-center bg-light bg-opacity-50">
                                        <div>
                                            <h6 class="mb-0 text-primary fw-bolder text-uppercase" style="letter-spacing: 0.5px;">${item.branch_name}</h6>
                                            <small class="text-muted fw-bold text-uppercase" style="font-size: 0.65rem; opacity: 0.8;">Internal Wholesale Request</small>
                                        </div>
                                        <div class="text-end text-muted">
                                            <i class="ti tabler-calendar fs-5 me-1 align-middle"></i><small class="fw-bold">${item.outward_date}</small>
                                        </div>
                                    </div>
                                    
                                    <div class="card-body p-4 flex-grow-1">
                                        <div class="row g-3 mb-4 pb-3 border-bottom border-light">
                                            <div class="col-6">
                                                <small class="text-muted d-block text-uppercase detail-label mb-1">Sale No</small>
                                                <span class="text-dark detail-value">#${item.outward_no}</span>
                                            </div>
                                            <div class="col-6 text-end">
                                                <small class="text-muted d-block text-uppercase detail-label mb-1">Status</small>
                                                <span class="badge bg-label-warning py-1 px-3 fw-bold rounded-pill" id="status_badge_${item.id}" style="font-size: 0.7rem;">${item.status}</span>
                                            </div>
                                        </div>
                                        <div class="row g-3">
                                            <div class="col-6">
                                                <small class="text-muted d-block text-uppercase detail-label mb-1">Total Quantity</small>
                                                <span class="fw-bolder fs-5 text-dark">${item.total_qty}</span>
                                            </div>
                                            <div class="col-6 text-end">
                                                <small class="text-muted d-block text-uppercase detail-label mb-1">Total Amount</small>
                                                <span class="fw-bolder fs-5 text-primary">₹${item.total_amount}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-footer border-top p-3 bg-white rounded-bottom-3 d-flex justify-content-end gap-3" id="actions_${item.id}">
                                        <button class="btn btn-sm btn-label-secondary px-4 fw-bold" onclick="viewOutwardDetails(${item.id}, '${item.branch_name}', '${item.outward_no}')">
                                            <i class="ti tabler-eye me-1"></i> View
                                        </button>
                                        <button class="btn btn-sm btn-success px-4 fw-bold" onclick="approveOutward(${item.id})">
                                            <i class="ti tabler-check me-1"></i> Accept
                                        </button>
                                        <button class="btn btn-sm btn-danger px-4 fw-bold" onclick="rejectOutward(${item.id})">
                                            <i class="ti tabler-x me-1"></i> Reject
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                    });

                    $('#approval_count').text(pendingCount).toggle(pendingCount > 0);
                }
                $('#approval_card_container').html(html);
            },
            error: function () {
                $('#approval_card_container').html('<div class="text-center text-danger mt-5">Failed to load data.</div>');
            }
        });
    }

    function viewOutwardDetails(poId, branchName, outwardNo) {
        if (branchName && outwardNo) {
            $('#approval_view_modal .modal-title').html(`Inward Request Details <span class="text-primary mx-2">|</span> ${branchName} <span class="badge bg-label-info ms-2">${outwardNo}</span>`);
        } else {
            $('#approval_view_modal .modal-title').text('Inward Request Details');
        }
        $.ajax({
            url: '/wholesale_get_items_inward/',
            type: 'POST',
            data: {
                po_id: poId,
                csrfmiddlewaretoken: CSRF_TOKEN
            },
            success: function (res) {
                let rows = '';
                if (res.data && res.data.length > 0) {
                    res.data.forEach(item => {
                        rows += `
                            <tr>
                                <td>${item.subcategory}</td>
                                <td>${item.brand}</td>
                                <td>${item.model}</td>
                                <td>${item.variant}</td>
                                <td>${item.color}</td>
                                <td><span class="fw-bold">${item.imei}</span></td>
                                <td class="text-end">${parseFloat(item.rate).toFixed(2)}</td>
                                <td class="text-end">${item.quantity}</td>
                                <td class="text-end">${parseFloat(item.amount).toFixed(2)}</td>
                            </tr>
                        `;
                    });
                } else {
                    rows = '<tr><td colspan="9" class="text-center">No items found.</td></tr>';
                }
                $('#approval_details_table tbody').html(rows);
                $('#approval_view_modal').modal('show');
            }
        });
    }

    function approveOutward(id) {
        Swal.fire({
            title: 'Accept Inward?',
            text: "This will automatically create inward entries for all items.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Accept',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/wholesale_approve_inward/',
                    type: 'POST',
                    data: {
                        id: id,
                        csrfmiddlewaretoken: CSRF_TOKEN
                    },
                    success: function (res) {
                        if (res.status === 'success') {
                            showToast('success', res.message);
                            $(`#card_${id}`).fadeOut(300, function () {
                                $(this).remove();
                                let currentCount = parseInt($('#approval_count').text()) || 0;
                                if (currentCount > 1) {
                                    $('#approval_count').text(currentCount - 1);
                                } else {
                                    $('#approval_count').hide();
                                    $('#approval_card_container').html('<div class="text-center text-muted mt-5"><i class="ti tabler-clipboard-check fs-1 mb-2"></i><br>No pending inwards.</div>');
                                }
                            });
                            refresh_data();
                        } else {
                            showToast('error', res.message);
                        }
                    },
                    error: function () {
                        showToast('error', 'Failed to accept request.');
                    }
                });
            }
        });
    }

    function rejectOutward(id) {
        const approvalCanvasEl = document.getElementById('offcanvasApproval');
        if (approvalCanvasEl) {
            const approvalCanvas = bootstrap.Offcanvas.getOrCreateInstance(approvalCanvasEl);
            approvalCanvas.hide();
        }

        Swal.fire({
            title: 'Reject Request?',
            text: "Please provide a reason for rejection.",
            input: 'textarea',
            inputPlaceholder: 'Reason for rejection...',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Yes, Reject',
            preConfirm: (remarks) => {
                if (!remarks) {
                    Swal.showValidationMessage('Please enter a reason for rejection');
                }
                return remarks;
            }
        }).then((result) => {
            if (approvalCanvasEl && !result.isConfirmed) {
                const approvalCanvas = bootstrap.Offcanvas.getOrCreateInstance(approvalCanvasEl);
                approvalCanvas.show();
            }
            if (result.isConfirmed) {
                $.ajax({
                    url: '/wholesale_reject_inward/',
                    type: 'POST',
                    data: {
                        id: id,
                        remarks: result.value,
                        csrfmiddlewaretoken: CSRF_TOKEN
                    },
                    success: function (res) {
                        if (res.status === 'success') {
                            showToast('success', res.message);
                            $(`#card_${id}`).fadeOut(300, function () {
                                $(this).remove();
                                let currentCount = parseInt($('#approval_count').text()) || 0;
                                if (currentCount > 1) {
                                    $('#approval_count').text(currentCount - 1);
                                } else {
                                    $('#approval_count').hide();
                                    $('#approval_card_container').html('<div class="text-center text-muted mt-5"><i class="ti tabler-clipboard-check fs-1 mb-2"></i><br>No pending inwards.</div>');
                                }
                            });
                        } else {
                            showToast('error', res.message);
                        }
                    },
                    error: function () {
                        showToast('error', 'Failed to reject request.');
                    }
                });
            }
        });
    }

    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": "outward_no", "title": "Invoice NO" },
                { "data": "outward_date", "title": "Invoice Date" },
                { "data": "inward_no", "title": "Inward NO" },
                { "data": "inward_date", "title": "Inward Date" },
                { "data": "supply_branch", "title": "Supply Branch Name" },
                { "data": "quantity", "title": "Total Quantity", "className": "text-end" },
                { "data": "amount", "title": "Total Amount", "className": "text-end" },
                { "data": "remarks", "title": "Remarks" },
                { "data": "status", "title": "Status" }
            ],
            "ajax": {
                "url": '/wholesale_ajax_list_inward/',
                "type": "POST",
                "data": function (data) {
                    data.csrfmiddlewaretoken = CSRF_TOKEN;
                    const supplier = $('#filter_supplier_id').val();
                    const keyword = $('#keyword_search').val();
                    const isDateChecked = $('#is_date').is(":checked");
                    const fromDate = $('#from_date').val();
                    const toDate = $('#to_date').val();

                    if (supplier) data.supply_branch = supplier;
                    if (keyword) data.keyword_search = keyword;

                    if (isDateChecked && fromDate && toDate) {
                        data.from_date = fromDate;
                        data.to_date = toDate;
                    }
                },
                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        showSweetAlert('warning', response.error_message || 'Permission denied.');
                        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);
                $('#footer_qty').html(Quantity.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_amount').html(Amount.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_remarks').html('-');
                $('#footer_status').html('-');
            },
        });
    }

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

    function view_data(id, branchName, outwardNo, outwardDate) {
        $('#openModalLabel').text(`Inward Items | ${branchName} | ${outwardNo} | ${outwardDate}`);
        $('#tm_po_id').val(id);
        loadOpenTable();
        $('#open_modal').modal('show');
    }

    function loadOpenTable() {
        var table = $('#open_table').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "dom": 't',
            "columns": [
                { "data": "id", "title": "Id" },
                { "data": "subcategory_name", "title": "Subcategory" },
                { "data": "brand_name", "title": "Brand" },
                { "data": "model_name", "title": "Model" },
                { "data": "variant_name", "title": "Variant" },
                { "data": "color_name", "title": "Color" },
                { "data": "imei_no", "title": "IMEI" },
                { "data": "rate", "title": "Rate", "className": "text-end" },
                { "data": "qty", "title": "Qty", "className": "text-end" },
                { "data": "amount", "title": "Amount", "className": "text-end" }
            ],
            "ajax": {
                "url": '/wholesale_ajax_view_tx_inward/',
                "type": "POST",
                "data": function (data) {
                    data.csrfmiddlewaretoken = CSRF_TOKEN;
                    data.po_id = $('#tm_po_id').val();
                },
                dataSrc: function (response) {
                    return response.items || [];
                }
            }
        });
    }
</script>