@extends('dashboard.base')

@section('content')
<div class="container mt-4">
    <h3>Purchase Malawi Standards</h3>

    {{-- Search --}}
    <label for="searchInput" class="form-label me-2">Search:</label>
    <input type="text" id="searchInput" class="form-control" placeholder="Search by MS Number or Title">
    <br><br>

    {{-- Filters --}}
    <div class="filters mb-3 d-flex align-items-center justify-content-between">
    <div class="d-flex align-items-center flex-grow-1">
        <label for="categoryDropdown" class="form-label me-2">Filter by Sector:</label>
        <select id="categoryDropdown" class="form-control me-4" style="flex-grow:1; min-width:250px; max-width:60%;">
            <option value="">-- Select Sector --</option>
            <option value="All">All Sectors</option>
            @foreach($categories as $id => $name)
                <option value="{{ $name }}">{{ $name }}</option>
            @endforeach
        </select>
    </div>

    {{-- Cart Button to the Right --}}
    <button class="cart-icon ms-3" id="cart-button">
        🛒 <span id="cart-count">0</span>
    </button>
</div>


    {{-- Cart Dropdown --}}
    <div class="cart-dropdown w3-animate-right" id="cart-dropdown" style="display: none;">
        <button id="close-cart" style="float: right; background: transparent; border: none; font-size: 18px;">&times;</button>
        <h4>Items in Cart</h4>
        <ul id="cart-items" class="list-unstyled"></ul>
        <div class="cart-total">Total: MWK <span id="cart-total">0</span></div>
        <button class="checkout-btn" id="checkout-btn" style="background: #FF6600;">Check Out</button>
    </div>

    {{-- Standards Table --}}
    <div class="mt-3">
        <table class="table table-striped table-hover" style="width: 100%;">
            <thead style="background-color: #f8f9fa;">
                <tr>
                    <th style="font-weight:bold;">MS NUMBER</th>
                    <th style="font-weight:bold;">TITLE</th>
                    <th style="font-weight:bold;">DATE GAZETTED</th>
                    <th style="font-weight:bold;">SECTOR</th>
                    <th style="font-weight:bold;">PRICE (MWK)</th>
                    <th style="font-weight:bold;">ACTIONS</th>
                </tr>
            </thead>
            <tbody id="standards-tbody">
                @foreach($standards->sortBy(function($standard) {
                    return intval(preg_replace('/[^0-9]/', '', $standard->code));
                }) as $standard)
                    <tr class="standard-row" data-category="{{ $standard->category }}">
                        <td class="open-modal" 
                            data-code="{{ $standard->code }}" 
                            data-title="{{ $standard->title }}" 
                            data-description="{{ $standard->description ?? 'No description available.' }}" 
                            data-pages="{{ $standard->number_of_pages ?? 'N/A' }}"
                            data-price="{{ $standard->price ?? 0 }}">
                            {{ $standard->code }}
                        </td>
                        <td class="open-modal"
                            data-code="{{ $standard->code }}" 
                            data-title="{{ $standard->title }}" 
                            data-description="{{ $standard->description ?? 'No description available.' }}" 
                            data-pages="{{ $standard->number_of_pages ?? 'N/A' }}"
                            data-price="{{ $standard->price ?? 0 }}">
                            {{ $standard->title }}
                        </td>
                        <td>{{ $standard->date_gazetted }}</td>
                        <td>{{ $standard->category }}</td>
                        <td>{{ number_format($standard->price) }}</td> {{-- Whole numbers --}}
                        <td>
                            <button class="add-to-cart"
                                data-code="{{ $standard->code }}"
                                data-title="{{ $standard->title }}"
                                data-price="{{ $standard->price ?? 0 }}"
                                style="background:#FF6600; color:white; border:none; padding:6px 12px; border-radius:5px; cursor:pointer;">
                                Add to Cart
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Description Modal --}}
    <div class="modal-overlay" id="descriptionModal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000;">
        <div class="modal-content bg-white p-4 rounded" style="width:60%; max-width:90%; box-shadow:0 4px 10px rgba(0,0,0,0.3);">
            <p id="modal-code" style="font-weight:bold;"></p>
            <p id="modal-title" style="font-weight:500;"></p>
            <p id="modal-description"></p>
            <p><strong>Number of pages:</strong> <span id="modal-pages"></span></p>
            <p id="modal-price" style="font-weight:bold;"></p>
            <div class="text-center mt-4">
                <button id="modal-close" style="background-color:#ff6600; color:white; border:none; border-radius:5px; padding:6px 16px; font-weight:bold; cursor:pointer;">Close</button>
            </div>
        </div>
    </div>

    {{-- Checkout Modal --}}
    <div class="modal w3-animate-zoom" id="checkoutModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body text-center">
                    <h3>Once payment is successful, purchased standards will be available as e-copy (view only) documents in your account.</h3>
                    <hr />
                    <h4>Total: MWK <span id="modal-cart-total">0</span></h4>
                    <button id="confirm-payment-btn" class="btn" style="background:#FF6600;color:white;">Proceed to Payment Page</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- JS --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const categoryDropdown = document.getElementById('categoryDropdown');
    const searchInput = document.getElementById('searchInput');
    const rows = Array.from(document.querySelectorAll('.standard-row')); // convert NodeList to Array

    const cartButton = document.getElementById("cart-button");
    const cartDropdown = document.getElementById("cart-dropdown");
    const cartItemsList = document.getElementById("cart-items");
    const cartTotalElement = document.getElementById("cart-total");
    const cartCount = document.getElementById("cart-count");
    const checkoutBtn = document.getElementById("checkout-btn");
    const closeCartButton = document.getElementById("close-cart");
    const cartTotalModal = document.getElementById("modal-cart-total");

    const modal = document.getElementById('descriptionModal');
    const modalCode = document.getElementById('modal-code');
    const modalTitle = document.getElementById('modal-title');
    const modalDescription = document.getElementById('modal-description');
    const modalPages = document.getElementById('modal-pages');
    const modalPrice = document.getElementById('modal-price');
    const modalClose = document.getElementById('modal-close');

    modal.style.display = "none"; // Ensure modal is hidden on page load

    let cart = [];

    // Pagination state
    let currentPage = 1;
    const itemsPerPage = 5;
    let filteredRows = rows;

    // Filtering
    function filterRows() {
        const selectedCategory = categoryDropdown.value.toLowerCase();
        const searchText = searchInput.value.toLowerCase();

        filteredRows = rows.filter(row => {
            const category = row.getAttribute('data-category').toLowerCase();
            const code = row.cells[0].textContent.toLowerCase();
            const title = row.cells[1].textContent.toLowerCase();
            const showCategory = selectedCategory === '' || selectedCategory === 'all' || category === selectedCategory;
            const showSearch = code.includes(searchText) || title.includes(searchText);
            return showCategory && showSearch;
        });

        currentPage = 1; // reset page
        renderTable();
    }

    categoryDropdown.addEventListener('change', filterRows);
    searchInput.addEventListener('input', filterRows);

    // Render table with pagination
    function renderTable() {
        const tbody = document.getElementById('standards-tbody');
        tbody.innerHTML = '';

        const totalPages = Math.ceil(filteredRows.length / itemsPerPage);
        const startIndex = (currentPage - 1) * itemsPerPage;
        const pageRows = filteredRows.slice(startIndex, startIndex + itemsPerPage);

        pageRows.forEach(row => tbody.appendChild(row));

        renderPagination(totalPages);
    }

    // Render pagination buttons
    function renderPagination(totalPages) {
        let paginationContainer = document.getElementById('pagination-container');
        if (!paginationContainer) {
            paginationContainer = document.createElement('div');
            paginationContainer.id = 'pagination-container';
            paginationContainer.className = 'd-flex justify-content-between align-items-center mt-3';
            document.querySelector('.mt-3').appendChild(paginationContainer);
        }

        paginationContainer.innerHTML = `
            <button class="btn btn-outline-primary" id="prevPage" ${currentPage === 1 ? 'disabled' : ''}>Previous</button>
            <span>Page ${currentPage} of ${totalPages}</span>
            <button class="btn btn-outline-primary" id="nextPage" ${currentPage === totalPages ? 'disabled' : ''}>Next</button>
        `;

        document.getElementById('prevPage').addEventListener('click', () => {
            if (currentPage > 1) currentPage--;
            renderTable();
        });
        document.getElementById('nextPage').addEventListener('click', () => {
            if (currentPage < totalPages) currentPage++;
            renderTable();
        });
    }

    // Initial render
    filterRows();

    // Modal opens on MS Number or Title click
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('open-modal')) {
            modalCode.textContent = e.target.dataset.code;
            modalTitle.textContent = e.target.dataset.title;
            modalDescription.textContent = e.target.dataset.description;
            modalPages.textContent = e.target.dataset.pages;
            modalPrice.textContent = "MWK " + Number(e.target.dataset.price).toLocaleString();
            modal.style.display = 'flex';
        }
    });

    modalClose.addEventListener('click', () => modal.style.display = 'none');
    modal.addEventListener('click', e => { if(e.target === modal) modal.style.display = 'none'; });

    // Add to Cart
    document.querySelectorAll('.add-to-cart').forEach(button => {
        button.addEventListener('click', function() {
            const code = this.dataset.code;
            const title = this.dataset.title;
            const price = parseFloat(this.dataset.price) || 0;

            cart.push({ code, title, price });
            updateCartDisplay();
        });
    });

    function updateCartDisplay() {
        cartItemsList.innerHTML = '';
        let total = 0;

        cart.forEach((item, index) => {
            total += item.price;
            const li = document.createElement('li');
            li.innerHTML = `
                <div style="display:flex; justify-content:space-between; align-items:center;">
                    <div>
                        <strong>${item.code}</strong><br>
                        <span style="color:#333;">MWK ${item.price.toLocaleString()}</span>
                    </div>
                    <button class="remove-item" title="Remove" data-index="${index}" style="margin-left:10px;color:red;cursor:pointer;border:none;background:none;font-size:16px;">✖</button>
                </div>`;
            cartItemsList.appendChild(li);
        });

        cartTotalElement.textContent = total.toLocaleString();
        cartTotalModal.textContent = total.toLocaleString();
        cartCount.textContent = cart.length;

        document.querySelectorAll('.remove-item').forEach(btn => {
            btn.addEventListener('click', function() {
                cart.splice(this.dataset.index, 1);
                updateCartDisplay();
            });
        });
    }

    cartButton.addEventListener('click', () => {
        cartDropdown.style.display = cartDropdown.style.display === 'none' ? 'block' : 'none';
    });

    closeCartButton.addEventListener('click', () => cartDropdown.style.display = 'none');

    checkoutBtn.addEventListener('click', () => {
        const checkoutModal = new coreui.Modal(document.getElementById('checkoutModal'));
        checkoutModal.show();
    });

    // Confirm Payment
    document.getElementById("confirm-payment-btn").addEventListener("click", function () {
        if (cart.length === 0) {
            alert("Your cart is empty.");
            return;
        }

        const totalAmount = cart.reduce((sum, item) => sum + item.price, 0);

        fetch("/api/payment/initiate", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify({
                amount: totalAmount,
                standards: cart.map(item => ({ code: item.code, title: item.title }))
            })
        })
        .then(async response => {
            const data = await response.json();
            if (!response.ok) throw new Error(data.message || "Payment failed.");
            if (data.data && data.data.formUrl) {
                window.location.href = data.data.formUrl;
            } else {
                alert("Payment initiated, but no form URL returned.");
            }
        })
        .catch(error => {
            console.error("Payment failed:", error);
            alert("Payment failed: " + error.message);
        });
    });
});
</script>

{{-- CSS --}}
<style>
@keyframes shake {0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-5px);}40%,80%{transform:translateX(5px);} }
.cart-icon {background:black;color:white;padding:10px;border-radius:50%;border:none;cursor:pointer;font-size:16px;position:relative;}
#cart-count {background:#FF6600;color:white;border-radius:50%;padding:2px 6px;font-size:14px;position:absolute;top:-5px;right:-5px;}
.cart-dropdown {background:white;border:1px solid #ddd;box-shadow:2px 2px 10px rgba(0,0,0,0.2);padding:10px;position:absolute;right:0;width:280px;z-index:1000;}
.cart-total {font-weight:bold;margin-top:10px;}
.checkout-btn {background:black;color:white;width:100%;padding:10px;border:none;cursor:pointer;border-radius:5px;}
.cart-dropdown ul li {padding:8px 0;border-bottom:1px solid #ddd;}
.remove-item:hover {transform:scale(1.2);}
.open-modal {cursor:pointer; color:#007bff; text-decoration:underline;}
.open-modal:hover {color:#ff6600;}
</style>
@endsection