@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Point de vente</h4>
            <h6>Caisse || Vente </h6>
        </div>
    </div>
    
</div>

<div class="page-wrapper pos-pg-wrapper ms-0">
    <div class="content pos-design p-0">
        <div class="btn-row d-sm-flex align-items-center">
            <a href="javascript:void(0);" class="btn btn-secondary mb-xs-3" data-bs-toggle="modal" data-bs-target="#orders"><span class="me-1 d-flex align-items-center"><i data-feather="shopping-cart" class="feather-16"></i></span>Les Achats</a>
            <a href="javascript:void(0);" class="btn btn-info"><span class="me-1 d-flex align-items-center"><i data-feather="rotate-cw" class="feather-16"></i></span>Actualiser</a>
            <a href="javascript:void(0);" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#recents"><span class="me-1 d-flex align-items-center"><i data-feather="refresh-ccw" class="feather-16"></i></span>Transaction</a>
        </div>

        <div class="row align-items-start pos-wrapper">
            <div class="col-md-12 col-lg-8">
                <div class="pos-categories tabs_wrapper">
                    <h5>Catégories</h5>
                    <p>Selectionner par catégories</p>
                    <ul class="tabs owl-carousel pos-category">
                        <li data-category="all" class="active">
                            <a href="javascript:void(0);">
                                <img src="{{ asset('assets/img/categories/category-01.png') }}" alt="Toutes les Catégories">
                            </a>
                            <h6><a href="javascript:void(0);">Toutes les Catégories</a></h6>
                            <span>{{ $categories->sum(fn($category) => $category->products->count()) }}</span>
                        </li>
                        @foreach($categories as $category)
                        <li data-category="{{ $category->slug }}">
                            <a href="javascript:void(0);">
                                <img src="{{ asset($category->image ? 'images/categories/'.$category->image : 'assets/img/default.jpg') }}" alt="{{ $category->name }}">
                            </a>
                            <h6><a href="javascript:void(0);">{{ $category->name }}</a></h6>
                            <span>{{ $category->products->count() }} produits</span>
                        </li>
                        @endforeach
                    </ul>
                
                    <div class="pos-products">
                        <div class="d-flex align-items-center justify-content-between">
                            <h5 class="mb-3">Produits</h5>
                        </div>
                        <div class="tabs_container">
                            @php
                                $allProducts = collect(['all' => $products])->merge($categories->mapWithKeys(fn($category) => [$category->slug => $category->products]));
                            @endphp

                            @foreach($allProducts as $categorySlug => $filteredProducts)
                                <div class="tab_content {{ $categorySlug == 'all' ? 'active' : '' }}" data-tab="{{ $categorySlug }}">
                                    <div class="row">
                                        @forelse($filteredProducts as $product)
                                            <div class="col-sm-2 col-md-6 col-lg-3 col-xl-3 pe-2 product-card" data-category="{{ $product->category->slug }}">
                                                <div class="product-info default-cover card" data-id="{{ $product->id }}" data-name="{{ $product->name }}" data-price="{{ $product->price }}" data-barcode="{{ $product->barcode }}" data-image="{{ $product->image }}">
                                                    <a href="javascript:void(0);" class="img-bg">
                                                        <img src="{{ asset($product->image ? 'images/products/'.$product->image : 'assets/img/default.jpg') }}" alt="{{ $product->name }}">
                                                        <span><i data-feather="check" class="feather-16"></i></span>
                                                    </a>
                                                    <h6 class="cat-name"><a href="javascript:void(0);">{{ $product->category->name }}</a></h6>
                                                    <h6 class="product-name"><a href="javascript:void(0);">{{ $product->name }}</a></h6>
                                                    <div class="d-flex align-items-center justify-content-between price">
                                                        <p>{{ $product->price }} FCFA</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                            <p class="text-center text-danger">Pas de produit(s) disponible</p>
                                        @endforelse
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
           
            <div class="col-md-12 col-lg-4 ps-0">
                <aside class="product-order-list">
                    <div class="head d-flex align-items-center justify-content-between">
                        <h5>Liste des commandes</h5>
                        <a href="javascript:void(0);" class="text-danger clear-cart"><i data-feather="trash-2"></i></a>
                    </div>
        
                    <div class="product-added block-section">
                        <div class="head-text d-flex align-items-center justify-content-between">
                            <h6 class="d-flex align-items-center mb-0">Produit ajouté<span class="count">0</span></h6>
                            <a href="javascript:void(0);" class="d-flex align-items-center text-danger"></a>
                        </div>
                        
                        <div class="product-wrap"></div>
                    </div>
                    
                    <div class="block-section">
                        <div class="order-total">
                            <table class="table table-borderless">
                                <tr>
                                    <td>Total</td>
                                    <td class="text-end total-price">0 FCFA</td>
                                </tr>
                            </table>
                        </div>
                    </div>
        
                    <div class="d-grid btn-block">
                        <a class="btn btn-secondary" href="javascript:void(0);">
                            Grand Total : <span class="total-price">0 FCFA</span>
                        </a>
                    </div>
                    <div class="btn-row d-sm-flex align-items-center justify-content-between">
                        <a href="javascript:void(0);" class="btn btn-info btn-icon flex-fill" data-bs-toggle="modal" data-bs-target="#hold-order"><span class="me-1 d-flex align-items-center"><i data-feather="pause" class="feather-16"></i></span>Garder</a>
                        <a href="javascript:void(0);" class="btn btn-danger btn-icon flex-fill"><span class="me-1 d-flex align-items-center"><i data-feather="trash-2" class="feather-16"></i></span>Vider</a>
                        <a href="javascript:void(0);" class="btn btn-success btn-icon flex-fill btn-payer" data-bs-toggle="modal" data-bs-target="#print-receipt"><span class="me-1 d-flex align-items-center"><i data-feather="credit-card" class="feather-16"></i></span>Payer</a>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</div>
<!-- Print Receipt -->
<div class="modal fade modal-default pos-modal" id="print-receipt" aria-labelledby="print-receipt" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" style="width: 70%">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation de Paiement</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- Section du paiement -->
                    <div class="col-md-6">
                        <div class="card-body">
                            <h5 class="text-center mb-3">Détails du Paiement</h5>
                            <form id="payment-form" data-url="{{ route('sales.payment') }}">
                                <input type="hidden" id="selected-products" name="products">
                                <div class="mb-3">
                                    <label for="amount-received" class="form-label">Montant Reçu</label>
                                    <input type="number" class="form-control" id="amount-received" name="amount_received" required>
                                </div>
                                <div class="mb-3">
                                    <label for="amount-payable" class="form-label">Montant à Payer</label>
                                    <input type="number" class="form-control" id="amount-payable" name="amount_payable" disabled>
                                </div>
                                <div class="mb-3">
                                    <label for="payment-method" class="form-label">Type de Paiement</label>
                                    <select class="form-control" id="payment-method" name="payment_method" required>
                                        <option value="espece">Espèce</option>
                                        <option value="orange_money">Orange Money</option>
                                        <option value="wave">Wave</option>
                                        <option value="mtn_momo">MTN MoMo</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="note" class="form-label">Note</label>
                                    <textarea class="form-control" id="note" name="note" rows="2"></textarea>
                                </div>
                                <div class="full-width">
                                    <div class="text-center">
                                        <button type="submit" class="btn btn-success">Valider le Paiement</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Section du reçu -->
                    <div class="col-md-6">
                        <div class="card-body">
                            <div class="text-center mb-3">
                                <img src="{{ asset('assets/img/logo.png') }}" width="120" height="40" alt="Logo">
                            </div>
                            <div class="text-center">
                                <h6>Badie Services</h6>
                                <p class="mb-0">Téléphone: +225 27 22 22 02 01 01</p>
                                <p class="mb-0">Email: <a href="mailto:infos@badieservices.ci">infos@badieservices.ci</a></p>
                            </div>
                            <div class="tax-invoice mt-3">
                                <h6 class="text-center">Facture</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>Agent:</strong> {{ Auth::user()->name }}</p>
                                        <p><strong>No de reçu:</strong> CS132453</p>
                                    </div>
                                    <div class="col-md-6 text-end">
                                        <p><strong>Date:</strong> {{ Carbon\Carbon::now()->translatedFormat('d M Y') }}</p>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-bordered mt-3">
                                <thead>
                                    <tr>
                                        <th># Item</th>
                                        <th>Prix</th>
                                        <th>Qté</th>
                                        <th class="text-end">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Contenu dynamique des articles -->
                                </tbody>
                            </table>
                            <div class="text-center mt-3">
                                <p class="small">**La TVA sur cet achat est payable via l'enregistrement central. Merci pour votre confiance !</p>
                                <img src="{{ asset('assets/img/barcode/barcode-03.jpg') }}" alt="Barcode" class="img-fluid">
                                <p class="mt-2">Merci d'avoir fait vos achats chez nous. Revenez bientôt !</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const categoryTabs = document.querySelectorAll(".pos-category li");
        const products = document.querySelectorAll(".product-card");

        categoryTabs.forEach(tab => {
            tab.addEventListener("click", function () {
                categoryTabs.forEach(item => item.classList.remove("active"));
                this.classList.add("active");

                const selectedCategory = this.getAttribute("data-category");
                products.forEach(product => {
                    if (selectedCategory === "all" || product.getAttribute("data-category") === selectedCategory) {
                        product.style.display = "block";
                    } else {
                        product.style.display = "none";
                    }
                });
            });
        });
    });
</script>
<script>
   document.addEventListener("DOMContentLoaded", function () {
    let cart = [];

    // Ajouter un produit au panier
    document.querySelectorAll(".product-info").forEach(product => {
        product.addEventListener("click", function () {
            let id = this.getAttribute("data-id"),
                name = this.getAttribute("data-name"),
                price = parseFloat(this.getAttribute("data-price")),
                barcode = this.getAttribute("data-barcode"),
                image = this.querySelector("img").getAttribute("src");

            addToCart(id, name, price, barcode, image);
        });
    });

    function addToCart(id, name, price, barcode, image) {
        let product = cart.find(item => item.id === id);
        product ? product.quantity++ : cart.push({ id, name, price, barcode, image, quantity: 1 });
        updateCart();
    }

    function updateCart() {
        let cartList = document.querySelector(".product-wrap"),
            totalPrice = 0,
            totalQuantity = 0;

        cartList.innerHTML = "";

        cart.forEach(product => {
            let productTotal = product.price * product.quantity;
            totalPrice += productTotal;
            totalQuantity += product.quantity;

            let cartItem = document.createElement("div");
            cartItem.classList.add("product-list", "d-flex", "align-items-center", "justify-content-between");
            cartItem.setAttribute("data-id", product.id);
            cartItem.innerHTML = `
                <div class="d-flex align-items-center product-info">
                    <a href="javascript:void(0);" class="img-bg">
                        <img src="${product.image}" alt="${product.name}">
                    </a>
                    <div class="info">
                        <span style="font-size: 8px">${product.barcode}</span>
                        <h6 style="font-size: 10px"><a href="javascript:void(0);">${product.name}</a></h6>
                        <p style="font-size: 10px">${product.price} FCFA</p>
                    </div>
                </div>
                <div class="qty-item text-center">
                    <a href="javascript:void(0);" class="dec d-flex justify-content-center align-items-center">
                        <i data-feather="minus-circle" class="feather-14"></i>
                    </a>
                    <input type="text" class="form-control text-center qty" value="${product.quantity}" readonly>
                    <a href="javascript:void(0);" class="inc d-flex justify-content-center align-items-center">
                        <i data-feather="plus-circle" class="feather-14"></i>
                    </a>
                </div>
                <div class="d-flex align-items-center action">
                    <a class="btn-icon delete-icon confirm-text" href="javascript:void(0);">
                        <i data-feather="trash-2" class="feather-14"></i>
                    </a>
                </div>
            `;

            cartItem.querySelector(".inc").addEventListener("click", () => updateQuantity(product.id, 1));
            cartItem.querySelector(".dec").addEventListener("click", () => updateQuantity(product.id, -1));
            cartItem.querySelector(".delete-icon").addEventListener("click", () => removeFromCart(product.id));

            cartList.appendChild(cartItem);
        });

        document.querySelector(".count").textContent = totalQuantity;
        document.querySelectorAll(".total-price").forEach(el => el.textContent = totalPrice + " FCFA");

        feather.replace();
    }

    function updateQuantity(id, amount) {
        let product = cart.find(item => item.id === id);
        if (product) {
            product.quantity += amount;
            if (product.quantity <= 0) cart = cart.filter(item => item.id !== id);
        }
        updateCart();
    }

    function removeFromCart(id) {
        cart = cart.filter(item => item.id !== id);
        updateCart();
    }

    // Vider le panier
    document.querySelector(".clear-cart").addEventListener("click", () => {
        cart = [];
        updateCart();
    });

    // Mise à jour du résumé de la commande dans le modal après avoir cliqué sur "PAYER"
    document.querySelector(".btn-payer").addEventListener("click", function () {
        let receiptBody = document.querySelector("#print-receipt tbody"),
            subtotal = 0, taxRate = 0.00, discount = 0, shipping = 0;

        receiptBody.innerHTML = "";

        cart.forEach((product, index) => {
            let totalProductPrice = product.price * product.quantity;
            subtotal += totalProductPrice;

            receiptBody.innerHTML += `
                <tr>
                    <td>${index + 1}. ${product.name}</td>
                    <td>${product.price} FCFA</td>
                    <td>${product.quantity}</td>
                    <td class="text-end">${totalProductPrice} FCFA</td>
                </tr>
            `;
        });

        let tax = subtotal * taxRate,
            totalPayable = subtotal + tax - discount + shipping;

        let summary = `
            <tr><td>Sous Total :</td><td class="text-end">${subtotal.toFixed(2)} FCFA</td></tr>
            <tr><td>Réduction :</td><td class="text-end">-${discount.toFixed(2)} FCFA</td></tr>
            <tr><td>Livraison :</td><td class="text-end">${shipping.toFixed(2)} FCFA</td></tr>
            <tr><td>Tax (0%) :</td><td class="text-end">${tax.toFixed(2)} FCFA</td></tr>
            <tr><td><strong>Total Payable :</strong></td><td class="text-end total-payable"><strong>${totalPayable.toFixed(2)} FCFA</strong></td></tr>
        `;

        receiptBody.innerHTML += `<tr><td colspan="4"><table class="table-borderless w-100">${summary}</table></td></tr>`;

        let totalPayableElement = document.querySelector("#print-receipt .total-payable");
        if (totalPayableElement) {
            let totalPayable = totalPayableElement.textContent.trim().replace(" FCFA", "");
            document.querySelector("#amount-payable").value = parseFloat(totalPayable);
        }
    });

    // Gestion de la soumission du formulaire de paiement

    document.getElementById('payment-form').addEventListener('submit', function(event) {
            event.preventDefault();

            let products = [];
            document.querySelectorAll('.product-row').forEach(row => {
                products.push({
                    product_id: row.dataset.id,
                    quantity: parseInt(row.querySelector('.product-quantity').value), // Utiliser .value si c'est un input
                    price: parseFloat(row.querySelector('.product-price').value) // Idem
                });
            });

            let formData = {
                montant_total: parseFloat(document.getElementById('amount-payable').value),
                montant_paiement: parseFloat(document.getElementById('amount-received').value),
                payment_method: document.getElementById('payment-method').value,
                products: products
            };

            let url = document.getElementById('payment-form').getAttribute('data-url');

            fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(formData)
            })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => { throw new Error(text); });
                }
                return response.json();
            })
            .then(data => {
                if (data.errors) {
                    alert("Erreur: " + JSON.stringify(data.errors));
                } else {
                    alert("Paiement enregistré avec succès !");
                    location.reload();
                }
            })
            .catch(error => console.error("Erreur AJAX :", error));
        });

    });

</script>
@endsection