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

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

<style>
body {

    background-color: #f8fafc;

}


.page-content {
    padding-top: 20px;
}

.supplier-banner {
    height: 180px;
    background: url('{{ asset('images/circle-scatter-haikei.svg') }}') no-repeat center center;
background-size: cover;
border-radius: 0.75rem 0.75rem 0 0;
/* Rounded top corners */
}


.identity-block {
position: relative;
margin-top: -60px;
z-index: 10;
padding: 20px;
background-color: white;
border-radius: 0.75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.supplier-logo {
width: 80px;
height: 80px;
border-radius: 0.5rem;
border: 2px solid white;
background-color: #e0e0e0;
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #495057;
}

/* Nav Tabs Customization */
.nav-tabs .nav-link {
border: none;
border-bottom: 3px solid transparent;
padding: .75rem 1.5rem;
color: #6c757d;
font-weight: 500;
}

.nav-tabs .nav-link.active {
color: #007bff;
background-color: transparent;
border-color: #007bff;
}
</style>

{% endblock %}

{% block content %}

<div id="app" class="container-fluid page-content" data-controller="inventory--supplier">

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent px-0 pb-0 pt-0">
            <li class="breadcrumb-item"><a href="{{ path('app_inventory_supplier_index') }}" class="text-secondary">Suppliers</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ supplier.getName() }}</li>
        </ol>
    </nav>

    <div class="card shadow-lg mb-4">
        <div class="supplier-banner">
            <button class="btn btn-light rounded-circle m-3" onclick="history.back()"><i class="ti ti-arrow-left"></i></button>
        </div>

        <div class="identity-block mx-4">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start">

                <div class="d-flex align-items-center mb-3 mb-md-0">
                    <div class="supplier-logo mr-4">
                        <i class="ti ti-flask-2"></i> <!-- Placeholder Icon -->
                    </div>
                    <div>
                        <h1 id="supplier_name" data-supplier_id="{{ supplier.getId() }}" class="h3 font-weight-bold text-dark mb-0">{{ supplier.getName() }}</h1>
                        <p class="text-secondary mb-1">{{ supplier.getAddress() }}</p>
                        {% if supplier.isActive() %}
                        <span class="badge badge-pill badge-success mr-2"> Active </span>
                        {% else %}
                        <span class="badge badge-pill badge-danger mr-2"> Inctive </span>
                        {% endif %}
                    </div>
                </div>

                <div class="d-flex align-items-center space-x-2">
                    <button class="btn btn-primary" data-action="inventory--supplier#startPurchaseOrder">
                        <i class="ti ti-file-text mr-1"></i> Start an Order
                    </button>
                </div>

                <div id="viewPendingItemsForPurchaseInHqWindow" class="easyui-window" title="REQUISITIONS" data-options="iconCls:'icon-save'" style="width:75%;max-height:80%;height:65%;overflow:hidden;padding:10px" closed="true">
                    <div id="startPoRequisitionWindowStatus"></div>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs px-4 border-0 mt-4" id="supplierTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active tab-button" id="details-tab" data-toggle="tab" href="#details" role="tab"
                onclick="openTab('details')">
                <i class="ti ti-info-circle mr-1"></i> Details
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link tab-button" id="orders-tab" data-toggle="tab" href="#orders" role="tab"
                onclick="openTab('orders')">
                <i class="ti ti-receipt-2 mr-1"></i> Orders
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link tab-button" id="products-tab" data-toggle="tab" href="#products" role="tab"
                onclick="openTab('products')">
                <i class="ti ti-packages mr-1"></i> Inventory items
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link tab-button" id="documents-tab" data-toggle="tab" href="#documents" role="tab"
                onclick="openTab('documents')">
                <i class="ti ti-file-text mr-1"></i> Documents, Tax & Financials
            </a>
        </li>
    </ul>

    <div class="row">

        <div class="col-lg-9">
            <div class="tab-content" id="supplierTabContent">

                <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">

                    <div class="row mb-4">
                        <div class="col-md-4 mb-4">
                            <div class="card shadow-sm border-left-primary h-100 py-2">
                                <div class="card-body">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total
                                        Spend MTD</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="total-spend">KSH 0.00
                                    </div>
                                    <p class="text-muted small mt-1">12% increase from last year</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-4">
                            <div class="card shadow-sm border-left-warning h-100 py-2">
                                <div class="card-body">
                                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1"><!--Avg.--> Lead
                                        Time</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="avg-lead-time">0 Days
                                    </div>
                                    <p class="text-muted small mt-1">Target is 5 days</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-4">
                            <div class="card shadow-sm border-left-info h-100 py-2">
                                <div class="card-body">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Last PO Date
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="last-order-date">Sep 20,
                                        2024</div>
                                    <a href="/purchase-orders/PO-2024-501"
                                        class="badge badge-success badge-pill mt-2 text-decoration-none"
                                        style="padding: 0.5em 0.8em;"
                                        aria-label="View Purchase Order PO-2024-501">
                                        PO-2024-501
                                    </a>

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

                    <div class="card shadow mb-4">
                        <div class="card-header bg-white py-3">
                            <h6 class="m-0 font-weight-bold text-dark">General Contact Information</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <p class="text-muted small mb-0">Main Contact:</p>
                                    <h5 class="font-weight-bold" id="main-contact">{{ supplier.getName() }}</h5>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <p class="text-muted small mb-0">Payment Terms:</p>
                                    <h5 class="font-weight-bold" id="payment-terms">Bank > Equity</h5>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <p class="text-muted small mb-0">Phone:</p>
                                    <h5 class="font-weight-bold" id="phone-number">{{ supplier.getPhoneNumber() }}</h5>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <p class="text-muted small mb-0">Email:</p>
                                    <h5 class="font-weight-bold text-truncate" id="email-address">{{ supplier.getEmail() }}</h5>
                                </div>
                                <div class="col-12">
                                    <p class="text-muted small mb-0">Address:</p>
                                    <h5 class="font-weight-bold" id="address">{{ supplier.getAddress() }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="orders" role="tabpanel" aria-labelledby="orders-tab">
                    <div class="card shadow mb-4">
                        <div class="card-header bg-white py-3">
                            <h6 class="m-0 font-weight-bold text-dark">Full Purchase Order History</h6>
                        </div>
                        <div class="card-body">
                            <p class="text-secondary">A detailed table of all transactions, including delivery
                                status, invoicing, and payment dates would be displayed here.</p>
                            <div class="alert alert-danger" role="alert">
                                <i class="ti ti-alert-triangle mr-2"></i>Two invoices (PO-2024-350, PO-2024-355) are
                                overdue by more than 45 days.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="products" role="tabpanel" aria-labelledby="products-tab">
                    <div class="card shadow mb-4">
                        <div class="card-header bg-white py-3">
                            <h6 class="m-0 font-weight-bold text-dark">Products Supplied by Essilor Labs (Frames &
                                Lenses)</h6>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                {% for supplier_item in supplier_inventory_items %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <p class="font-weight-bold mb-0">{{ supplier_item['item_unit'] }}</p>
                                    <span class="text-muted small">{{ supplier_item['item_code'] }} | Last Price: {{ supplier_item['cost_price'] }}</span>
                                </li>
                                {% endfor %}
                            </ul>
                            <p class="text-center text-muted small mt-3 mb-0">Showing {{ supplier_inventory_items_count }} of {{ supplier_inventory_items_count }} active products.</p>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="documents" role="tabpanel" aria-labelledby="documents-tab">
                    <div class="card shadow mb-4">
                        <div class="card-header bg-white py-3">
                            <h6 class="m-0 font-weight-bold text-dark">Supplier Documents & Contracts</h6>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between align-items-center small">
                                    <span><i class="ti ti-file-text mr-2 text-primary"></i>Master Supply Agreement
                                        (2024-2025)</span>
                                    <span class="text-muted">3.5 MB | <a href="#"
                                        class="text-primary">Download</a></span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center small">
                                    <span><i class="ti ti-file-text mr-2 text-primary"></i>W-9 Form (2023)</span>
                                    <span class="text-muted">1.2 MB | <a href="#"
                                        class="text-primary">Download</a></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="col-lg-3">

            <div class="card shadow mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="m-0 font-weight-bold text-dark">Summary</h6>
                </div>
                <div class="card-body small">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Active Orders:</span>
                        <span class="font-weight-bold">{{ supplier_active_po_count }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Total Inventory Items:</span>
                        <span class="font-weight-bold">{{ supplier_inventory_items_count }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Avg. Order Value:</span>
                        <span class="font-weight-bold">KSH 0.00</span>
                    </div>
                    <hr class="my-3">
                    <p class="font-weight-bold mb-2">Tags</p>
                    {% for supplier_inventory_item in supplier_inventory_items %}
                    <span class="badge badge-info mr-1">{{ supplier_inventory_item['item_unit'] }}</span>
                    {% endfor %}
                    <span class="badge badge-secondary mr-1">PO-2025-C137</span>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="m-0 font-weight-bold text-dark">Extra Info Tab</h6>
                </div>
                <div class="card-body small">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item py-2 d-flex align-items-center px-0">
                            <img src="https://placehold.co/30x30/216597/fff?text=L" class="rounded mr-2" alt="Logo">
                            LensCrafters
                        </li>
                        <li class="list-group-item py-2 d-flex align-items-center px-0">
                            <img src="https://placehold.co/30x30/000/fff?text=V" class="rounded mr-2" alt="Logo">
                            Visionworks
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="m-0 font-weight-bold text-dark">Active Orders</h6>
                </div>
                <div class="card-body small">
                    {% for active_po in supplier_active_po %}
                    <p class="mb-2"><i class="ti ti-certificate text-success mr-2"></i>{{ active_po.getOrderNumber() }}</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

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

<script>
function openTab(tabName) {
    $('#' + tabName + '-tab').tab('show');
}

$('body').on('click', '#createPurchaseOrderFromSupplier', function(){
    event.preventDefault()
    let targetElement = event.currentTarget
    let purchaseOrderItems = []

    $(targetElement).attr({"disabled": true})
    $('#createPoBtnSpinner').removeClass('d-none')

    let rows = $('#supplierRequistionPurchasableItems').datagrid('getChecked');

    for (var i = 0; i < rows.length; i++) {
        var purchaseOrderItem = {
            req_item_ids: rows[i].req_item_ids,
            quantity: rows[i].quantity_ordered,
            iiu_id: rows[i].iiu_id,
            purchase_price: rows[i].cost_price,
        }

        purchaseOrderItems.push(purchaseOrderItem)
    }

    let formData = {
        supplierId: $('#supplier_name').data('supplier_id'),
        orderDate: $('#order_date').val(),
        expectedDate: $('#expected_date').val(),
    }

    $.ajax({
        method: 'POST',
        url: '/inventory/purchase_order/store',
        data: {
            purchaseOrderItems: purchaseOrderItems,
            formData: formData,
        },
        success: function(response){

            $('#createPoBtnSpinner').addClass('d-none')

            if(response.success){
                $('#supplierRequistionPurchasableItems').datagrid('reload');

                notify('success', 'Purchase Order Created', 'Purchase Order has been created successfully')

            }else{
                console.log(response)
                notify('error', 'Purchase Order Creation Failure', 'An Error Occurred. Please try again')
            }
        },
        error: function(error){
            console.log(error)
        },
    })
})

function notify(status, title, text){
    new Notify ({
        status: status,
        title: title,
        text: text,
        effect: 'fade',
        speed: 300,
        customClass: '',
        customIcon: '',
        showIcon: true,
        showCloseButton: true,
        autoclose: true,
        autotimeout: 2000,
        notificationsGap: null,
        notificationsPadding: null,
        type: 'filled',
        position: 'x-center',
        customWrapper: '',
    })
}
</script>

{% endblock %}