<?php $__env->startSection('title','Point of Sale'); ?>
<?php $__env->startSection('css'); ?>
<style>
    .pos-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: #fff;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
        border-radius: 10px;
    }
    .pos-title-text {
        font-size: 1.25rem;
        font-weight: 700;
        color: #334155;
    }
    .btn-cart-clear {
        color: #ef4444;
        border: 1px solid #fee2e2;
        background: #fff;
        padding: 5px 15px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.2s;
    }
    .btn-cart-clear:hover {
        background: #ef4444;
        color: #fff;
    }
    .pos-main-container {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 20px;
        padding: 0 10px;
    }
    .pos-sale-card {
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }
    .sale-header-purple {
        background: #6366f1;
        color: #fff;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .shop-info h4 {
        margin: 0;
        font-weight: 700;
        font-size: 1.1rem;
    }
    .shop-info span {
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.75rem;
    }
    .session-info {
        text-align: right;
    }
    .session-info p {
        margin: 0;
        font-size: 0.75rem;
        opacity: 0.8;
    }
    .session-info h5 {
        margin: 0;
        font-weight: 700;
        font-size: 0.9rem;
    }
    .cart-table th {
        background: #f8fafc;
        padding: 12px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        border-bottom: 1px solid #f1f5f9;
    }
    .cart-item td {
        padding: 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
    }
    .cart-product-img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 6px;
    }
    .products-panel-title {
        font-size: 1rem;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .product-search-box {
        position: relative;
        margin-bottom: 20px;
    }
    .product-search-box i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
    }
    .product-search-box input {
        padding-left: 40px !important;
        height: 45px;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
    }
    .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
        max-height: 600px;
        overflow-y: auto;
        padding-right: 5px;
    }
    .product-card {
        background: #f8fafc;
        border: 1px solid #f1f5f9;
        border-radius: 12px;
        padding: 15px;
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
    }
    .product-card:hover {
        background: #fff;
        border-color: #6366f1;
        box-shadow: 0 10px 15px -3px rgb(99 102 241 / 0.1);
        transform: translateY(-2px);
    }
    .product-stock-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
        padding: 2px 8px;
        border-radius: 8px;
        font-size: 0.65rem;
        font-weight: 700;
    }
    .product-card-name {
        font-weight: 600;
        font-size: 0.85rem;
        color: #334155;
        margin-top: 10px;
        margin-bottom: 5px;
        display: block;
        text-align: center;
    }
    .product-card-price {
        font-weight: 800;
        color: #10b981;
        display: block;
        text-align: center;
        font-size: 0.9rem;
    }
    .bottom-controls {
        display: grid;
        grid-template-columns: 1fr 1fr 0.8fr;
        gap: 20px;
        padding: 20px;
        background: #fff;
        border-top: 1px solid #f1f5f9;
    }
    .customer-form label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        margin-bottom: 5px;
    }
    .customer-form input, .customer-form select {
        height: 38px;
        border-radius: 8px !important;
        font-size: 0.9rem;
        border-color: #f1f5f9 !important;
        background: #f8fafc !important;
    }
    .summary-box p {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 0.95rem;
        color: #64748b;
    }
    .summary-box .grand-total {
        border-top: 1px dashed #e2e8f0;
        padding-top: 10px;
        margin-top: 10px;
        color: #334155;
        font-weight: 800;
        font-size: 1.1rem;
    }
    .grand-total span:last-child {
        color: #10b981;
    }
    .btn-complete {
        background: #4f46e5;
        color: #fff;
        width: 100%;
        padding: 15px;
        border-radius: 15px;
        font-weight: 700;
        font-size: 1.1rem;
        box-shadow: 0 4px 14px 0 rgb(79 70 229 / 39%);
        border: none;
        transition: all 0.2s;
    }
    .btn-complete:hover {
        background: #4338ca;
        transform: scale(1.02);
    }
    .qty-input-group {
        display: flex;
        align-items: center;
        background: #f1f5f9;
        border-radius: 8px;
        padding: 2px;
        width: 80px;
    }
    .qty-btn-sm {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: #fff;
        border-radius: 6px;
        color: #6366f1;
        font-weight: 800;
        cursor: pointer;
    }
    .qty-text {
        flex: 1;
        text-align: center;
        font-weight: 700;
        font-size: 0.85rem;
    }

    /* ==========================================================================
       POS PAGE MOBILE RESPONSIVENESS OVERRIDES
       ========================================================================== */
    @media (max-width: 991.98px) {
        .pos-main-container {
            grid-template-columns: 1fr !important;
            gap: 15px !important;
        }
        .bottom-controls {
            grid-template-columns: 1fr !important;
            gap: 15px !important;
            padding: 15px !important;
        }
        .submit-action {
            margin-top: 15px !important;
            display: block !important;
        }
        .btn-complete {
            width: 100% !important;
        }
    }
    @media (max-width: 575.98px) {
        .pos-header {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 10px !important;
            padding: 10px 15px !important;
        }
        .pos-title-text {
            font-size: 1.1rem !important;
        }
        .btn-cart-clear {
            width: 100% !important;
            text-align: center !important;
        }
        .products-grid {
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
            gap: 10px !important;
            max-height: 450px !important;
        }
        .product-card {
            padding: 10px !important;
        }
        .product-card img {
            height: 80px !important;
        }
        .cart-table-container {
            width: 100% !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
        .cart-table {
            min-width: 500px !important;
        }
        .sale-header-purple {
            padding: 10px 15px !important;
        }
        .shop-info h4 {
            font-size: 1.0rem !important;
        }
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid">
    <div class="pos-header">
        <div class="pos-title-text">Point of Sale</div>
        <button type="button" class="btn-cart-clear" onclick="clearCart()">
            <i class="fe-trash-2 me-1"></i>Cart Clear
        </button>
    </div>

    <div class="pos-main-container">
        <!-- Left: Sale Details -->
        <div class="pos-sale-card">
            <div class="sale-header-purple">
                <div class="shop-info">
                    <h4><?php echo e($generalsetting->name); ?></h4>
                    <span>Walk-in Customer POS</span>
                </div>
                <div class="session-info">
                    <p>Session</p>
                    <h5><?php echo e($session_id); ?></h5>
                </div>
            </div>

            <div class="cart-table-container">
                <table class="cart-table w-100">
                    <thead>
                        <tr>
                            <th width="10%">Image</th>
                            <th width="45%">Item</th>
                            <th width="15%">Qty</th>
                            <th width="15%">Price</th>
                            <th width="15%">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody id="cart_body">
                        <!-- Dynamic Content -->
                    </tbody>
                </table>
            </div>

            <form id="pos_submit_form">
                <?php echo csrf_field(); ?>
                <div class="bottom-controls">
                    <div class="customer-form">
                        <label class="d-block mb-3" style="font-size: 0.85rem; color: #64748b;">Customer</label>
                        <div class="mb-2">
                            <input type="text" name="customer_name" class="form-control" placeholder="Customer Name" required>
                        </div>
                        <div class="mb-2">
                            <input type="text" name="customer_phone" class="form-control" placeholder="Mobile Number" required>
                        </div>
                        <div class="mb-2">
                            <input type="text" name="customer_address" class="form-control" placeholder="Address">
                        </div>
                        <div class="mb-0">
                            <select name="area" class="form-control" id="shipping_area">
                                <option value="">Select Delivery Area...</option>
                                <?php $__currentLoopData = $shipping_charges; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $charge): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($charge->name); ?>" data-amount="<?php echo e($charge->amount); ?>"><?php echo e($charge->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                    </div>

                    <div class="summary-box">
                        <label class="d-block mb-3" style="font-size: 0.85rem; color: #64748b;">Summary</label>
                        <p><span>Sub Total</span> <span id="text_subtotal">৳0</span></p>
                        <p><span>Shipping Fee</span> <span id="text_shipping">৳0</span></p>
                        <p><span>Discount</span> <span>৳<input type="number" name="discount" id="input_discount" value="0" style="width: 60px; border: none; background: transparent; text-align: right; font-weight: 700; color: #64748b;"></span></p>
                        <div class="grand-total">
                            <span>Grand Total</span>
                            <span id="text_grandtotal">৳0</span>
                        </div>
                    </div>

                    <div class="submit-action d-flex align-items-end">
                        <button type="submit" class="btn-complete" id="btn_complete">
                            Complete Sale
                        </button>
                    </div>
                </div>

                <!-- Hidden submission data -->
                <input type="hidden" name="payable_amount" id="hidden_payable" value="0">
                <input type="hidden" name="shipping_charge" id="hidden_shipping" value="0">
                <div id="hidden_items_list"></div>
            </form>
        </div>

        <!-- Right: Products List -->
        <div class="products-panel">
            <div class="products-panel-title">Products</div>
            <div class="product-search-box">
                <i class="fe-search"></i>
                <input type="text" id="product_search" class="form-control" placeholder="Search product by name or code...">
            </div>

            <div class="products-grid" id="products_grid">
                <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="product-card" onclick="addToCart(<?php echo e(json_encode([
                    'id' => $product->id,
                    'name' => $product->name,
                    'price' => $product->new_price,
                    'stock' => $product->stock,
                    'image' => asset($product->image ? $product->image->image : 'public/no-image.png')
                ])); ?>)">
                    <div class="product-stock-badge">Stock: <?php echo e($product->stock); ?></div>
                    <img src="<?php echo e(asset($product->image ? $product->image->image : 'public/no-image.png')); ?>" style="width: 100%; height: 100px; object-fit: contain; border-radius: 8px;">
                    <span class="product-card-name"><?php echo e($product->name); ?></span>
                    <span class="product-card-price">TK <?php echo e($product->new_price); ?></span>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal / Print Option -->
<div id="success_modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 20px; border: none;">
            <div class="modal-body text-center p-5">
                <div class="mb-4" style="font-size: 4rem; color: #10b981;">
                    <i class="fe-check-circle"></i>
                </div>
                <h3 class="mb-3" style="font-weight: 800;">Sale Successful!</h3>
                <p class="text-muted mb-4">The order has been recorded in the system.</p>
                <div class="d-grid gap-2">
                    <a href="" id="print_link" target="_blank" class="btn btn-primary btn-lg" style="border-radius: 12px; font-weight: 700;">
                        <i class="fe-printer me-2"></i>Print Invoice
                    </a>
                    <button type="button" class="btn btn-soft-secondary btn-lg" data-bs-dismiss="modal" style="border-radius: 12px; font-weight: 700;">
                        Continue New Sale
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>
<script>
    let cart = [];

    function addToCart(product) {
        let existing = cart.find(item => item.id === product.id);
        if (existing) {
            if (existing.qty < product.stock) {
                existing.qty++;
            } else {
                toastr.warning('Stock limit reached');
            }
        } else {
            if (product.stock > 0) {
                cart.push({...product, qty: 1});
            } else {
                toastr.error('Out of stock');
            }
        }
        renderCart();
    }

    function updateQty(index, delta) {
        let item = cart[index];
        let newQty = item.qty + delta;
        if (newQty > 0 && newQty <= item.stock) {
            item.qty = newQty;
            renderCart();
        } else if (newQty > item.stock) {
            toastr.warning('Stock limit reached');
        }
    }

    function clearCart() {
        cart = [];
        renderCart();
    }

    function renderCart() {
        let html = '';
        let subtotal = 0;
        let hiddenHtml = '';

        cart.forEach((item, index) => {
            let itemTotal = item.price * item.qty;
            subtotal += itemTotal;
            html += `
                <tr class="cart-item">
                    <td><img src="${item.image}" class="cart-product-img"></td>
                    <td><div style="font-weight: 600; font-size: 0.9rem;">${item.name}</div></td>
                    <td>
                        <div class="qty-input-group">
                            <button type="button" class="qty-btn-sm" onclick="updateQty(${index}, -1)">-</button>
                            <span class="qty-text">${item.qty}</span>
                            <button type="button" class="qty-btn-sm" onclick="updateQty(${index}, 1)">+</button>
                        </div>
                    </td>
                    <td>৳${item.price}</td>
                    <td style="font-weight: 700;">৳${itemTotal}</td>
                </tr>
            `;
            hiddenHtml += `
                <input type="hidden" name="product_id[]" value="${item.id}">
                <input type="hidden" name="qty[]" value="${item.qty}">
                <input type="hidden" name="price[]" value="${item.price}">
            `;
        });

        if (cart.length === 0) {
            html = '<tr><td colspan="5" class="text-center py-5 text-muted">No items in cart</td></tr>';
        }

        $('#cart_body').html(html);
        $('#hidden_items_list').html(hiddenHtml);
        calculateTotals(subtotal);
    }

    function calculateTotals(subtotal) {
        let shipping = parseFloat($('#shipping_area option:selected').data('amount')) || 0;
        let discount = parseFloat($('#input_discount').val()) || 0;
        let grandTotal = (subtotal + shipping) - discount;

        $('#text_subtotal').text('৳' + subtotal);
        $('#text_shipping').text('৳' + shipping);
        $('#text_grandtotal').text('৳' + grandTotal);
        $('#hidden_payable').val(grandTotal);
        $('#hidden_shipping').val(shipping);
    }

    $(document).on('change', '#shipping_area, #input_discount', function() {
        let subtotal = cart.reduce((acc, item) => acc + (item.price * item.qty), 0);
        calculateTotals(subtotal);
    });

    // Product Search
    $('#product_search').on('keyup', function() {
        let val = $(this).val().toLowerCase();
        $('.product-card').each(function() {
            let name = $(this).find('.product-card-name').text().toLowerCase();
            if (name.includes(val)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });

    // AJAX Submit
    $('#pos_submit_form').on('submit', function(e) {
        e.preventDefault();
        if (cart.length === 0) {
            toastr.error('Cart is empty');
            return;
        }

        let formData = $(this).serialize();
        $('#btn_complete').prop('disabled', true).text('Processing...');

        $.ajax({
            type: "POST",
            url: "<?php echo e(route('admin.pos.store')); ?>",
            data: formData,
            success: function(res) {
                $('#btn_complete').prop('disabled', false).text('Complete Sale');
                if (res.success) {
                    // Open print invoice in new tab
                    window.open(res.print_url, '_blank');
                    
                    // Show success modal as well
                    $('#print_link').attr('href', res.print_url);
                    $('#success_modal').modal('show');
                    
                    // Reset
                    clearCart();
                    $('#pos_submit_form')[0].reset();
                    toastr.success('Sale processed successfully');
                }
            },
            error: function(err) {
                $('#btn_complete').prop('disabled', false).text('Complete Sale');
                toastr.error(err.responseJSON.message || 'Something went wrong');
            }
        });
    });
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('backEnd.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\XAMPP\htdocs\ecom1\resources\views/backEnd/pos/index.blade.php ENDPATH**/ ?>