{% extends '@pos/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"/>
<!-- toastr js  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- 3. Custom Styles -->
    <style>
        body {
            background-color: #f4f7f6;
            height: 100vh;
            overflow: hidden; /* Prevent body scroll */
        }
        
        .main-container {
            height: 100vh;
            max-height: 100vh;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .pos-left, .pos-right {
            height: calc(100vh - 2rem); /* Full height minus padding */
            display: flex;
            flex-direction: column;
        }

       
        .patient-section {
            background-color: #fff;
            padding: 0; /* REMOVED padding: 1rem; */
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            overflow: hidden; /* ADDED to contain rounded corners */
        }

        /* ADDED for new patient display */
        .patient-display {
            background-color: #e7f3ff; /* Light blue */
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #cce5ff;
        }
        .patient-display h5 {
            margin: 0;
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        /* ADDED wrapper for search bar */
        .patient-search-bar {
            padding: 1rem;
        }

        /* New styles for the browsable item list tabs */
        .item-list-tabs {
            flex-shrink: 0; /* Prevent tabs from shrinking */
        }
        .item-list-tabs .tab-content {
            max-height: 200px; /* Limit height and make scrollable */
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-top: none;
            padding: 1rem;
            border-radius: 0 0 0.25rem 0.25rem;
            background-color: #fff;
        }
        .item-list-tabs .list-group-item {
            cursor: pointer;
            padding: 0.5rem 1rem;
        }
        .item-list-tabs .list-group-item:hover {
            background-color: #f8f9fa;
        }
        .item-list-tabs .list-group-item span {
            font-size: 0.9rem;
            color: #6c757d;
        }

        .grid-wrapper {
            flex-grow: 1; /* Allows grid to fill available space */
            overflow: hidden; /* Important for datagrid layout */
            border: 1px solid #ddd;
            border-radius: 0.25rem;
            margin-top: 1rem; /* Space between tabs and grid */
        }

        /* Override EasyUI to fit Bootstrap's look */
        .datagrid-header, .datagrid-toolbar, .datagrid-pager {
            background-color: #f8f9fa;
        }
        
        .datagrid-header-row, .datagrid-row {
            height: 45px;
        }
        
        .datagrid-cell {
            font-size: 14px;
        }

        .checkout-panel {
            background-color: #ffffff;
            border-radius: 0.25rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.07);
            /* padding: 1.5rem; */ /* REMOVED PADDING */
            display: flex;
            flex-direction: column;
            height: 100%; /* Make panel fill the right column */
            overflow: hidden; /* Added for border-radius */
        }

        /* ADDED for new header */
        .checkout-header {
            background-color: #e7f3ff; /* Light blue */
            padding: 1rem 1.5rem;
            text-align: right;
            border-bottom: 1px solid #cce5ff;
            flex-shrink: 0;
        }
        .checkout-header h5 {
            margin: 0;
            font-weight: 600;
        }
        .checkout-header a {
            font-size: 0.9rem;
        }
        
        /* ADDED for new body */
        .checkout-body {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            overflow-y: auto; /* Allow body to scroll if needed, not panel */
        }
        
        /* ADDED for new summary footer */
        .checkout-summary-footer {
            background-color: #f8f9fa; /* Light gray */
            padding: 1rem 1.5rem;
            border-top: 1px solid #dee2e6;
            flex-shrink: 0;
        }

        /* ADDED for new footer */
        .checkout-footer {
            background-color: #e6ffed; /* Light green */
            padding: 1rem 1.5rem; /* Match header padding */
            border-top: 1px solid #c0f0d6;
            flex-shrink: 0;
        }

        /* REMOVED .summary-list styles */
        
        /* REMOVED .total-display styles */
        
        /* ADDED styles for the new summary table */
        .sale-summary-wrapper {
            /* flex-grow: 1; */ /* REMOVED - No longer needed */
            /* overflow-y: auto; */ /* Moved to .checkout-body */
        }

        .summary-table td {
            padding: 0.5rem 0.25rem;
            font-size: 1.1rem;
            border-top: 1px solid #eee;
        }
        
        .summary-table .total-row td {
            font-size: 1.5rem;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-top: 2px dashed #aaa;
            border-bottom: 2px dashed #aaa;
            color: #28a745;
        }
        /* END of added styles */
        
        /* REMOVED .payment-buttons styles */
        
        /* ADDED for new payment footer buttons */
        .payment-options .btn {
            font-size: 1rem;
            padding: 0.75rem 0.5rem;
        }
        
        .action-buttons .btn {
            padding: 0.6rem;
        }

    </style>

{% endblock %}

{% block content %}
    <div class="container-fluid main-container">
            <div class="row">

                <!-- ============================================= -->
                <!-- Left Column: Patient, Tabs, & Cart Grid     -->
                <!-- ============================================= -->
                <div class="col-md-7 pos-left">
                    
                    <!-- Patient Selection -->
                    <div class="patient-section mb-3"> <!-- MODIFIED wrapper class -->
                        
                        <!-- NEW: Patient Display Header -->
                        <div class="patient-display">
                            <h5 class="mb-0">Patient: <strong>John Doe</strong></h5>
                        </div>
                        
                        <!-- Patient Search Bar -->
                        <div class="patient-search-bar">
                            <div class="form-group mb-0"> <!-- Changed mb-3 to mb-0 -->
                                <label for="patient-search" class="font-weight-bold sr-only">Search Patient</label> <!-- Hide label, it's redundant now -->
                                <div class="input-group">
                                    <input type="text" id="patient-search" class="form-control form-control-lg" placeholder="Search Patient Name or ID...">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Product/Service Input -->
                    <div class="form-group mb-3">
                        <input type="text" class="form-control form-control-lg" placeholder="Scan or type Service/Product SKU...">
                    </div>

                    <!-- Service/Product Tabs -->
                    <div class="item-list-tabs">
                        <ul class="nav nav-tabs" id="itemTabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="service-tab" data-toggle="tab" href="#services" role="tab" aria-controls="services" aria-selected="true">Service List</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="product-tab" data-toggle="tab" href="#products" role="tab" aria-controls="products" aria-selected="false">Product List</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="itemTabsContent">
                            <div class="tab-pane fade show active" id="services" role="tabpanel" aria-labelledby="service-tab">
                                <div class="list-group list-group-flush">
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Comprehensive Eye Exam" data-price="2500">
                                        Comprehensive Eye Exam
                                        <span class="badge badge-primary badge-pill">KES 2,500</span>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Contact Lens Fitting" data-price="1500">
                                        Contact Lens Fitting
                                        <span class="badge badge-primary badge-pill">KES 1,500</span>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Glaucoma Test" data-price="1000">
                                        Glaucoma Test
                                        <span class="badge badge-primary badge-pill">KES 1,000</span>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Frame Adjustment" data-price="500">
                                        Frame Adjustment
                                        <span class="badge badge-primary badge-pill">KES 500</span>
                                    </a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="products" role="tabpanel" aria-labelledby="product-tab">
                                <div class="list-group list-group-flush">
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Standard Frames" data-price="3000">
                                        Standard Frames
                                        <span class="badge badge-primary badge-pill">KES 3,000</span>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Anti-Glare Lenses (Pair)" data-price="4500">
                                        Anti-Glare Lenses (Pair)
                                        <span class="badge badge-primary badge-pill">KES 4,500</span>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Designer Sunglasses" data-price="8500">
                                        Designer Sunglasses
                                        <span class="badge badge-primary badge-pill">KES 8,500</span>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Contact Lens Solution" data-price="850">
                                        Contact Lens Solution
                                        <span class="badge badge-primary badge-pill">KES 850</span>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="Daily Wear Contacts (30-day)" data-price="3200">
                                        Daily Wear Contacts (30-day)
                                        <span class="badge badge-primary badge-pill">KES 3,200</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- EasyUI DataGrid Wrapper (The Cart) -->
                    <div class="grid-wrapper">
                        <table id="pos-grid" style="width:100%; height:100%;"></table>
                    </div>
                </div>

                <!-- ============================================= -->
                <!-- Right Column: Checkout Summary & Payment      -->
                <!-- ============================================= -->
                <div class="col-md-5 pos-right">
                    <div class="checkout-panel">
                        
                        <!-- Customer Info (Header) -->
                        <div class="checkout-header">
                            <h5 class="mb-1">Guest Customer</h5>
                            <a href="#">+ Add Customer / Patient Details</a>
                        </div>
                        
                        <!-- Checkout Body (contains summary and payment) -->
                        <div class="checkout-body">
                        
                            <!-- This space now intentionally left blank to grow -->
                            <!-- The summary table has been moved to the sub-footer -->
                        
                        </div> <!-- End Checkout Body -->
                        
                        <!-- NEW Checkout Summary Footer -->
                        <div class="checkout-summary-footer">
                            <!-- Sale Order Table Wrapper -->
                            <div class="sale-summary-wrapper">
                                <table class="table table-sm summary-table mb-0"> <!-- Added mb-0 -->
                                    <tbody>
                                        <tr>
                                            <td>Subtotal</td>
                                            <td class="text-right" id="summary-subtotal">KES 0.00</td>
                                        </tr>
                                        <tr>
                                            <td>Tax (16%)</td>
                                            <td class="text-right" id="summary-tax">KES 0.00</td>
                                        </tr>
                                        <tr>
                                            <td>Discount</td>
                                            <td class="text-right text-danger" id="summary-discount">-KES 0.00</td>
                                        </tr>
                                        <tr class="total-row">
                                            <td class="font-weight-bold">Total Due</td>
                                            <td class="text-right font-weight-bold" id="summary-total">KES 0.00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- End Sale Order Table Wrapper -->
                        </div>
                        <!-- END NEW Summary Footer -->
                        
                        <!-- NEW Checkout Footer (Payment) -->
                        <div class="checkout-footer">
                            
                            <!-- Payment Options -->
                            <div class="payment-options mb-3">
                                <div class="row">
                                    <div class="col-4">
                                        <button class="btn btn-outline-primary btn-block">
                                            <i class="fas fa-money-bill-wave"></i>
                                            <span class="d-none d-lg-inline"> Cash</span>
                                        </button>
                                    </div>
                                    <div class="col-4">
                                        <button class="btn btn-outline-primary btn-block">
                                            <i class="fas fa-mobile-alt"></i>
                                            <span class="d-none d-lg-inline"> Mpesa</span>
                                        </button>
                                    </div>
                                    <div class="col-4">
                                        <button class="btn btn-outline-primary btn-block">
                                            <i class="fas fa-shield-alt"></i>
                                            <span class="d-none d-lg-inline"> Insurance</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Action Buttons -->
                            <div class="action-buttons">
                                <div class="row">
                                    <div class="col-6">
                                        <button class="btn btn-warning btn-block">Hold</button>
                                    </div>
                                    <div class="col-6">
                                        <button class="btn btn-danger btn-block">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- END NEW Footer -->
                        
                    </div>
                </div>
            </div>
    </div>

{% endblock %}

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

<!-- Imported jquery for purposes of using the toastr library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- 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 type="text/javascript">
        
        // Helper function to format currency
        function formatCurrency(value) {
            // Format to KES with commas and 2 decimal places
            return 'KES ' + parseFloat(value).toLocaleString('en-US', { 
                minimumFractionDigits: 2, 
                maximumFractionDigits: 2 
            });
        }

        // Function to update the main cart summary
        function updateSummary() {
            var rows = $('#pos-grid').datagrid('getRows');
            var subtotal = 0;
            
            for(var i = 0; i < rows.length; i++) {
                subtotal += parseFloat(rows[i].total);
            }
            
            var tax = subtotal * 0.16; // 16% VAT
            var total = subtotal + tax;
            
            // TODO: Add discount logic
            var discount = 0; 
            
            $('#summary-subtotal').text(formatCurrency(subtotal));
            $('#summary-tax').text(formatCurrency(tax));
            $('#summary-discount').text('-' + formatCurrency(discount));
            $('#summary-total').text(formatCurrency(total));
            // Removed charge button update, as the button is gone
            // $('#charge-button-text').text('Charge ' + formatCurrency(total)); 
        }

        $(document).ready(function() {
            var $grid = $('#pos-grid');
            
            $grid.datagrid({
                // EasyUI properties
                fit: true,          // Fit the grid to its wrapper
                fitColumns: true,   // Make columns fit the width
                singleSelect: true, // Only one row can be selected
                striped: true,      // Zebra-striping
                
                // Define columns
                columns: [[
                    { field: 'name', title: 'Product/Service', width: 200 },
                    { 
                        field: 'qty', 
                        title: 'Qty', 
                        width: 50, 
                        align: 'center',
                        editor: { type: 'numberbox', options: { precision: 0, required: true, min: 1 } }
                    },
                    { 
                        field: 'price', 
                        title: 'Price', 
                        width: 70, 
                        align: 'right',
                        formatter: formatCurrency 
                    },
                    { 
                        field: 'total', 
                        title: 'Total', 
                        width: 80, 
                        align: 'right',
                        formatter: formatCurrency 
                    }
                ]],
                
                // Sample Data (Optical Clinic relevant)
                data: [
                    { name: 'Standard Frames', qty: 1, price: 3000, total: 3000 },
                    { name: 'Anti-Glare Lenses (Pair)', qty: 1, price: 4500, total: 4500 },
                    { name: "Contact Lens Solution", qty: 1, price: 850, total: 850 },
                    { name: 'Designer Sunglasses', qty: 1, price: 8500, total: 8500 },
                    { name: 'Comprehensive Eye Exam', qty: 1, price: 2500, total: 2500 }
                ],
                
                // Enable editing on click
                onClickCell: function(index, field) {
                    // Start editing only the 'qty' field
                    if (field == 'qty') {
                        $(this).datagrid('beginEdit', index);
                        var ed = $(this).datagrid('getEditor', { index: index, field: field });
                        $(ed.target).focus();
                    }
                },
                
                // Save edit when focus is lost
                onEndEdit: function(index, row) {
                    // Recalculate total when quantity changes
                    if (row.qty) {
                        row.total = row.qty * row.price;
                        $(this).datagrid('updateRow', {
                            index: index,
                            row: row
                        });
                    }
                    updateSummary(); // Update totals on right panel
                },
                
                // Update summary after a row is deleted
                onAfterDelete: function() {
                    updateSummary();
                }
            });

            // Add item to cart from tabbed lists
            $('.item-list-tabs .list-group-item').on('click', function(e) {
                e.preventDefault();
                
                var name = $(this).data('name');
                var price = parseFloat($(this).data('price'));
                
                // Check if item already in cart
                var rows = $grid.datagrid('getRows');
                for(var i = 0; i < rows.length; i++) {
                    if (rows[i].name == name) {
                        // Item exists, increment quantity
                        rows[i].qty = parseInt(rows[i].qty) + 1;
                        rows[i].total = rows[i].qty * rows[i].price;
                        $grid.datagrid('updateRow', {
                            index: i,
                            row: rows[i]
                        });
                        $grid.datagrid('selectRow', i);
                        updateSummary();
                        return; // Exit function
                    }
                }
                
                // Item not in cart, add new row
                $grid.datagrid('appendRow', {
                    name: name,
                    qty: 1,
                    price: price,
                    total: price
                });
                
                updateSummary(); // Update totals
            });

            // Initial calculation of summary panel on load
            // Wrapped in a timeout to ensure datagrid is ready
            setTimeout(function() {
                updateSummary();
            }, 100);
        });
    </script>

{% endblock %}