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

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

{% endblock %}

{% block content %}
<div data-controller="inventory--supplier">
    <div class="container-fluid py-4">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="h3">All Suppliers & Recent Activity</h2>
            <div>
                <button type="button" class="btn btn-primary mr-2" data-toggle="modal" data-target="#newSupplierModal"> <i class="ti ti-plus mr-1"></i> Add New Supplier </button>
            </div>
        </div>

        <div class="row">

            <div class="col-lg-8 mb-4">

                <div class="card shadow">
                    <div class="card-body p-0">
                        <table id="supplierTable" 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="col-lg-4 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header py-3 bg-light">
                        <h6 class="m-0 font-weight-bold text-dark"><i class="ti ti-coin mr-2"></i> Recent Transactions</h6>
                        <small class="text-muted">Last 10 payments/invoices</small>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead>
                                    <tr class="border-bottom">
                                        <th class="border-top-0">Type</th>
                                        <th class="border-top-0">Supplier</th>
                                        <th class="border-top-0 text-right">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Transaction 1 (Payment) -->
                                    <tr class="table-success">
                                        <td><small>Payment</small></td>
                                        <td><small>Essilor Labs</small></td>
                                        <td class="text-right"><small>-$5,200</small></td>
                                    </tr>
                                    <!-- Transaction 2 (Invoice) -->
                                    <tr class="table-warning">
                                        <td><small>Invoice</small></td>
                                        <td><small>TechOptics</small></td>
                                        <td class="text-right"><small>+$1,150</small></td>
                                    </tr>
                                    <!-- Transaction 3 (Payment) -->
                                    <tr>
                                        <td><small>Payment</small></td>
                                        <td><small>Bausch & Lomb</small></td>
                                        <td class="text-right"><small>-$3,100</small></td>
                                    </tr>
                                    <!-- Transaction 4 (Invoice) -->
                                    <tr class="table-warning">
                                        <td><small>Invoice</small></td>
                                        <td><small>ACME Frames</small></td>
                                        <td class="text-right"><small>+$850</small></td>
                                    </tr>
                                    <!-- Transaction 5 (Payment) -->
                                    <tr>
                                        <td><small>Payment</small></td>
                                        <td><small>LensCo</small></td>
                                        <td class="text-right"><small>-$1,400</small></td>
                                    </tr>
                                    <!-- ... More rows to fill the space ... -->
                                    <tr>
                                        <td><small>Invoice</small></td>
                                        <td><small>Essilor Labs</small></td>
                                        <td class="text-right"><small>+$6,500</small></td>
                                    </tr>
                                    <tr>
                                        <td><small>Payment</small></td>
                                        <td><small>TechOptics</small></td>
                                        <td class="text-right"><small>-$950</small></td>
                                    </tr>
                                    <tr>
                                        <td><small>Invoice</small></td>
                                        <td><small>VisionTech</small></td>
                                        <td class="text-right"><small>+$3,200</small></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <a href="invoices_payments.html" class="btn btn-link btn-sm">View Full Transaction History <i
                            class="ti ti-arrow-right ml-1"></i></a>
                    </div>
                </div>
            </div> 
        </div> 
    </div>

    <div class="modal fade" id="newSupplierModal" tabindex="-1" role="dialog" aria-labelledby="newSupplierModalTitle" aria-hidden="true" style="margin-top: -250px">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="newSupplierModalTitle">Create New Supplier</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="newSupplierForm">
                        <div class="row">
                            <div class="form-group col">
                                <label for="supplierName">Supplier Name</label>
                                <input type="text" class="form-control supplier_details" id="supplierName" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <label for="">E-Mail</label>
                                <input type="text" class="form-control supplier_details" id="supplierEmail" required>
                            </div>
                            <div class="form-group col">
                                <label for="">Phone Number</label>
                                <input type="text" class="form-control supplier_details" id="supplierPhone" id="" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <label for=""> Town</label>
                                <input type="text" class="form-control supplier_details" id="supplierTown" required>
                            </div>
                            <div class="form-group col">
                                <label for="">Address</label>
                                <input type="text" class="form-control supplier_details" id="supplierAddress" id="" required>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="addNewSupplierBtn" disabled type="button" class="btn btn-primary" data-action="inventory--supplier#createNewSupplier">Create New Supplier </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

<script>

$(document).on('input change', '#newSupplierForm .supplier_details', function () {
    let allFilled = true;

    $('#newSupplierForm .supplier_details').each(function () {
        if (!$(this).val()?.trim()) {
            allFilled = false;
            return false; 
        }
    });

    $('#addNewSupplierBtn').prop('disabled', !allFilled);
});

$(document).ready(function(){

    $('#supplierTable').datagrid({
        url: '/inventory/view/all/active/suppliers',
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Suppliers',
        onLoadSuccess: function(){
        },
        columns: [[
            {
                field: 's_id', title: 'Supplier ID', width: 20, editor:'text',
                formatter: (v, r) => r.s_id
            },
            {
                field: 'name', title: 'Name', width: 30, editor:'text',
                formatter: (v, r) => r.name
            },
            {
                field: 'address', title: 'Address', width: 30, editor:'text',
                formatter: (v, r) => r.address
            },
            {
                field: 'town', title: 'Town', width: 25, editor:'text',
                formatter: (v, r) => r.town
            },
            {
                field: 'email', title: 'Email', width: 30, editor:'text',
                formatter: (v, r) => r.email
            },
            {           
                field: 'action', title: 'Action', width: 15, editor:'text', align: 'center',
                formatter: (v, r) => {
                    return '<span><a href="/inventory/supplier/' + r.s_slug + '/show">View Supplier</a></span>'
                }
            },
        ]],
    }).datagrid('enableFilter', []);

    $('#supplierTable').datagrid('hideColumn', 's_id');
});

</script>

{% endblock %}