{% extends '@inventory/layouts/commonmaster.html.twig' %}

{% block stylesheets %}
{{ parent() }}

<!-- Selectize  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<style>

.loader {
    height: 12px;
    aspect-ratio: 5;
    --_g:no-repeat radial-gradient(farthest-side,#000 94%,#0000);
    background: var(--_g),var(--_g),var(--_g),var(--_g);
    background-size: 20% 100%;
    animation:
        l40-1 .75s infinite alternate,
        l40-2 1.5s infinite alternate; 
}
@keyframes l40-1 {
0%,
10% {background-position: 0 0,0 0,0 0,0 0}
33% {background-position: 0 0,calc(100%/3) 0,calc(100%/3) 0,calc(100%/3) 0}
66% {background-position: 0 0,calc(100%/3) 0,calc(2*100%/3) 0,calc(2*100%/3) 0}
90%,
100% {background-position: 0 0,calc(100%/3) 0,calc(2*100%/3) 0,100% 0}
}
@keyframes l40-2 {
0%,49.99% {transform: scale( 1)}
50%,100%  {transform: scale(-1)}
}

tr.loading td {
    position: relative;
    overflow: hidden;
    /* color: transparent;*/       /* Hide text while loading */ 
    pointer-events: none;     /* Prevent clicks */
}

/* Shimmer overlay */
tr.loading td::before {
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(240, 240, 240, 0) 0%,
        rgba(200, 200, 200, 0.4) 20%,
        rgba(240, 240, 240, 0) 40%
        );
    animation: shimmer 1.5s infinite;
}

/* Animation keyframes */
@keyframes shimmer {
100% {
    left: 200%;
}
}

/* Optional: dim row background */
tr.loading {
    background-color: #f8f9fa;
}

.status-badge-gradient {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
    color: #fff;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(40,167,69,0.3);
}

@keyframes flash {
0% { background-color: #ffe48d; } /* start color (e.g., red) */
50% { background-color: #ffffff; } /* end color (e.g., white) */
100% { background-color: #ffe48d; } /* return to start color */
}

.flash-active {
    animation: flash 1s infinite alternate; /* apply animation */
}

.statusCell .status-icon {
    margin: 0 8px;             /* spacing between icons */
    cursor: pointer;           /* show pointer on hover */
    position: relative;        /* for separator */
}

.statusCell .status-icon:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -6px;               /* distance from the icon */
    top: 50%;
    transform: translateY(-50%);
    height: 16px;              /* vertical line height */
    border-right: 1px solid #ddd;
}

.placeholder {
    display: inline-block;
    height: 1em;
    background: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.placeholder::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: loading 1.5s infinite;
}
@keyframes loading {
100% {
    left: 100%;
}
}

/* Variations */
.placeholder.col-6 { width: 50%; }
.placeholder.col-8 { width: 70%; }
.placeholder.col-2 { width: 20%; }
.placeholder-lg { height: 1.5em; }
.placeholder-sm { height: 0.75em; }
</style>

{% endblock %}

{% block content %}

<div class="mt-2" data-controller="inventory--purchaseorder" id="inventoryPurchaseOrderControllerDiv">

    <div class="row text-dark">

        <!-- Total Purchase Orders -->
        <div class="col-md-3 mb-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Total Purchase Orders</h6>
                    <h2 class="mb-1 font-weight-bold">324</h2>
                    <div class="d-flex align-items-center mb-2">
                        <span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 23%</span>
                        <small class="text-muted">last Week</small>
                    </div>
                    <!-- dots / chart -->
                </div>
            </div>
        </div>

        <!-- New Purchase Orders -->
        <div class="col-md-3 mb-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">New Purchase Orders</h6>
                    <h2 class="mb-1 font-weight-bold">213</h2>
                    <div class="d-flex align-items-center mb-2">
                        <span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 12%</span>
                        <small class="text-muted">last Week</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Returns Purchase Orders -->
        <div class="col-md-3 mb-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Returns Purchase Orders</h6>
                    <h2 class="mb-1 font-weight-bold">123</h2>
                    <div class="d-flex align-items-center mb-2">
                        <span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 17%</span>
                        <small class="text-muted">last Week</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Today Purchase Orders -->
        <div class="col-md-3 mb-3">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h6 class="text-muted">Today Purchase Orders</h6>
                    <h2 class="mb-1 font-weight-bold">41</h2>
                    <div class="d-flex align-items-center mb-2">
                        <span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 4%</span>
                        <small class="text-muted">last Week</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 m-auto">
            <div class="card shadow-sm rounded-4 p-4">

                <div class="d-flex justify-content-between align-items-center mb-3" style="margin: 10px 0;">
                    <span><h3><strong>Purchase Orders</strong></h3></span>
                </div>

                <table id="pendingPurchaseOrders"
                    class="table table-responsive"
                    style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
                    toolbar="#tb">

                    <thead>
                        <tr>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="purchaseOrderModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="purchaseOrderLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 90%">
            <div class="modal-content shadow-lg rounded-3">

                <!-- Header -->
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="purchaseOrderLabel">
                        Purchase Order <span class="text-muted">#<span id="purchaseOrderNumber" class="placeholder col-2"></span></span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- Body -->
                <div class="modal-body">

                    <!-- Supplier / Destination -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="p-3 border rounded bg-light">
                                <h6 class="fw-bold mb-1">Supplier</h6>
                                <p id="supplierAddressDetail" class="mb-0">
                                    <span class="placeholder col-6"></span><br>
                                    <small class="text-muted"><span class="placeholder col-8"></span></small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 border rounded bg-light">
                                <h6 class="fw-bold mb-1">Destination</h6>
                                <p class="mb-0" id="supplierContactDetail">
                                    <span  class="placeholder col-6"></span><br>
                                    <small class="text-muted"><span class="placeholder col-8"></span></small>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="mb-4">
                        <div class="progress" style="height: 10px;">
                            <div id="purchaseOrderProgress" class="progress-bar bg-secondary placeholder" style="width: 0%;"></div>
                        </div>
                        <p id="purchaseOrderProgressText" class="mt-2 mb-0 small text-muted"><span class="placeholder col-5"></span></p>
                    </div>

                    <!-- Shipment Details -->
                    <div class="mb-4 p-3 border rounded">
                        <h6 class="fw-bold mb-3">Shipment Details</h6>
                        <div class="row">
                            <div class="col-md-3"><strong>Order Date</strong><br><span id="orderDateSpan" class="placeholder col-6"></span></div>
                            <div class="col-md-3"><strong>Estimated Arrival</strong><br><span id="expectedDateSpan" class="placeholder col-6"></span></div>
                            <div class="col-md-3"><strong>Tracking Number</strong><br><span id="trackingNumberSpan" class="placeholder col-8"></span></div>
                            <div class="col-md-3">
                                <strong>Enter Batch Number</strong>
                                <br><span id="batchNumberSpan" class="placeholder col-6"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Products -->
                    <div class="mb-4 p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold mb-0">Products</h6>
                            <button type="button" class="btn btn-primary btn-sm" data-action="inventory--purchaseorder#batchReceivePoItems">
                                Receive All Items
                            </button>
                        </div>
                        <table class="table table-sm table-bordered align-middle" id="purchaseOrderItemViewReceiveTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Product</th>
                                    <th class="text-center">Unit</th>
                                    <th class="text-center">Requested</th>
                                    <th class="text-center">Received</th>
                                    <th class="text-center">Remaining</th>
                                    <th class="text-end">Cost</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-end">Assign Store</th>
                                    <th class="text-end">Status</th>
                                </tr>
                            </thead>
                            <tbody id="purchaseOrderItemTableBody">
                                <tr>
                                    <td><span class="placeholder col-6"></span></td>
                                    <td class="text-center"><span class="placeholder col-4"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                </tr>
                                <tr>
                                    <td><span class="placeholder col-6"></span></td>
                                    <td class="text-center"><span class="placeholder col-4"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                    <td class="text-center"><span class="placeholder col-2"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                    <td class="text-end"><span class="placeholder col-3"></span></td>
                                </tr>
                                <tr>
                                <td><span class="placeholder col-6"></span></td>
                                <td class="text-center"><span class="placeholder col-4"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-center"><span class="placeholder col-2"></span></td>
                                <td class="text-center"><span class="placeholder col-2"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                                <td class="text-end"><span class="placeholder col-3"></span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Cost Summary -->
                    <div class="p-3 border rounded">
                        <h6 class="fw-bold mb-3">Cost Summary</h6>
                        <table class="table table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Taxes</th>
                                    <th>Item</th>
                                    <th>Subtotal</th>
                                    <th>Shipping</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody id="purchaseOrderSubtotalTableBody">
                                <tr>
                                    <td><span class="placeholder col-2"></span></td>
                                    <td><span class="placeholder col-2"></span></td>
                                    <td><span class="placeholder col-3"></span></td>
                                    <td><span class="placeholder col-3"></span></td>
                                    <td><span class="placeholder col-3"></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>

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

    <div style="display:none;">
        <select id="storeTemplate" class="form-select storeLookup">
            <option value="">Select Store</option>
        </select>
    </div>
</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}

<!-- selectize -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>

function calculateReceivedPoPercentage(tableBody){
    let received = 0
    let total = 0

    $(tableBody).find('tr').each(function(){
        total++;
        const cell = $(this).find('td').eq(3);
        const isEditable = cell.prop('contentEditable') === 'true';

        if (!isEditable) {
            received++;
        }
    })

    let percentage = total > 0 ? (received / total) * 100 : 0;
    $('#purchaseOrderProgress').css('width', `${percentage.toFixed(1)}%`)
    $('#purchaseOrderProgressText').text(`${received} of ${total} received`)

    if(parseInt(percentage) === 100){
        $('#purchaseOrderProgress').removeClass('bg-primary').addClass('bg-success')
    }
}

$(document).on('focus', '.costPrice', function(){
    let textValue = parseFloat($(this).text().split(' ')[1])
    $(this).text(textValue)
})

$(document).on('blur', '.costPrice', function(){
    let textValue = $(this).text()
    $(this).attr('data-price', textValue); 
    $(this).data('price', textValue);   
    $(this).text('Ksh. ' + textValue)

    let $row   = $(this).closest('tr');         
    let received = $row.find('.receivedItemsInput').text()
    let totalCostValue = parseInt(received) * parseInt(textValue)
    $row.find('.totalCostPrice').text('Ksh. ' + totalCostValue.toLocaleString(2) + ".00");
})

$(document).on('input', '.receivedItemsInput', function() {
    let $row   = $(this).closest('tr');         
    let price  = parseFloat($row.find('.costPrice').data('price')); 
    let qty    = parseFloat($(this).text()) || 0;
    let val    = qty * price;

    let requested = parseFloat($row.find('.requestedQuantity').data('requested'));
    let received = parseFloat($(this).text()) || 0;

    $row.find('.remainingQuantity').text(requested - received)

    $row.find('.totalCostPrice').text('Ksh. ' + val.toLocaleString(2) + ".00");

    let total = 0
    $('.totalCostPrice').each(function(){
        let singleTotal = parseFloat($(this).text().split(' ')[1].replace(',', ''))
        total += singleTotal
    })

    $('#subTotal').text('Ksh. ' + total.toLocaleString(2) + ".00")
});

function cacheModal(modal){

    // cache the original modal
    var originalModal = modal.clone()

    // On modal hidden, restore it
    modal.on('hidden.bs.modal', function () {
        modal.remove();
        let newModal = originalModal.clone()
        $('#inventoryPurchaseOrderControllerDiv').append(newModal); 
    });
}

$(document).ready(function() {

    $('#pendingPurchaseOrders').datagrid({
        url: "/inventory/view/processing_purchase_orders",
        method: 'GET',
        singleSelect: true,   // allow multiple rows to be selected
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        idField: 'po_id',   // primary key for the table
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Organizations',
        onLoadSuccess: function(){
            $('#cardBlurred').removeClass('loader-active')
        },
        view: detailview,
        detailFormatter: function(rowIndex, rowData){
            return '<div class="po_metadata" style="padding:5px 0"></div>';
        },
        onExpandRow: function(index, row) {
            var $dg = $('#pendingPurchaseOrders');
            var po_metadata = $(this).datagrid('getRowDetail', index).find('div.po_metadata');

            $.ajax({
                url: '/inventory/view/processing_purchase_order_metadata',
                data: { po_id: row.po_id },
                dataType: 'json',
                success: function(data) {
                    let html = `
<table style="width:100%; border-collapse: collapse;">
<thead>
<tr style="background:#f5f5f5;">
<th style="padding:5px; border:1px solid #ddd;">Item</th>
<th style="padding:5px; border:1px solid #ddd;">Quantity</th>
<th style="padding:5px; border:1px solid #ddd;">Unit</th>
</tr>
</thead>
<tbody>
`;

                    data.forEach(function(item) {
                        html += `
<tr>
<td style="padding:5px; border:1px solid #ddd;">${item.item}</td>
<td style="padding:5px; border:1px solid #ddd; text-align:center;">${item.quantity}</td>
<td style="padding:5px; border:1px solid #ddd;">${item.unit}</td>
</tr>
`;
                    });

                    html += `</tbody></table>`;

                    po_metadata.html(html);

                    $dg.datagrid('fixDetailRowHeight', index);
                }
            });

            $dg.datagrid('fixDetailRowHeight', index);
        },
        columns: [[
            {
                field: 'po_id', title: 'Purchase Order Id', width: 30, editor:'text', 
                formatter: (v, r) => r.po_id
            },
            {
                field: 'order_number', title: 'Order Number', width: 30, editor:'text',
                formatter: (v, r) => r.order_number
            },
            {
                field: 'order_date', title: 'Order Date', width: 30, editor:'text',
                formatter: (v, r) => r.order_date
            },
            {           
                field: 'expected_date', title: 'Expected Date', width: 30, editor:'text',
                formatter: (v, r) => r.expected_date
            },
            {           
                field: 'subtotal', title: 'Subtotal', width: 30, editor:'text',
                formatter: (v, r) => {
                    return 'Ksh. ' + Number(r.subtotal).toLocaleString()
                }
            },
            {
                field:'action',title:'Action',width:20,align:'center',
                formatter:function(value,row,index){
                    var e = '<a href="javascript:void(0)" data-action="inventory--purchaseorder#viewEditPurchaseOrder">View</a> ';
                    return e;
                }
            },
        ]],
    }).datagrid('enableFilter', [ ]);

    $('#pendingPurchaseOrders').datagrid('hideColumn', 'po_id');
})

</script>

{% endblock %}