@extends('dashboard.base')

@section('content')
<div class="container mt-4">
    <h4>List of Malawi Standards</h4>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <form method="GET" action="{{ route('standards.index') }}" class="row g-3 mb-3">
        <div class="col-md-6">
            <select name="category" class="form-control" onchange="this.form.submit()">
                <option value="">-- Filter by Sector --</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>
    </form> 

    {{-- Search input --}}
    <div class="mb-3">
        <input type="text" id="searchInput" class="form-control" placeholder="Search by MS Number or Title">
    </div>

    @if($standards->count() > 0)
        <table class="table table-bordered mt-3" id="standardsTable">
            <thead class="table-light">
                <tr>
                    <th>MS Number</th>
                    <th>Title</th>
                    <th>Sector</th>
                    <th>Date Gazetted</th>
                    <th>No. of Pages</th>
                    <th>Price (MWK)</th>
                    <th>PDF</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($standards as $standard)
                    <tr>
                        <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 }}" 
                            data-price="{{ $standard->price }}">
                            {{ $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 }}" 
                            data-price="{{ $standard->price }}">
                            {{ $standard->title }}
                        </td>
                        <td>{{ $standard->category_name }}</td>
                        <td>{{ $standard->date_gazetted }}</td>
                        <td>{{ $standard->number_of_pages }}</td>
                        <td>{{ number_format($standard->price) }}</td>
                        <td>
                            <button class="btn btn-sm btn-primary" onclick="viewPDF('{{ $standard->code }}')">
                                View PDF
                            </button>
                        </td>
                        <td>
                            <a href="{{ route('standards.edit', $standard->id) }}" class="btn btn-sm btn-warning">Edit</a>
                            <form action="{{ route('standards.destroy', $standard->id) }}" method="POST" style="display:inline-block;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this standard?')">Delete</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        {{-- Pagination Controls --}}
        <div class="d-flex justify-content-between align-items-center mt-3" id="pagination-container">
            <button class="btn btn-outline-primary" id="prevPage">Previous</button>
            <span id="pageInfo"></span>
            <button class="btn btn-outline-primary" id="nextPage">Next</button>
        </div>

        <div class="mt-4" id="pdfViewerContainer" style="display:none;">
            <h4>Standard PDF</h4>
            <iframe id="pdfViewer" src="" width="100%" height="600px" style="border:none;"></iframe>
        </div>
    @else
        <p class="mt-3">No standards found for the selected filters.</p>
    @endif
</div>

{{-- Centered Popup Modal --}}
<div id="hoverPopup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    background:white; border:1px solid #ccc; box-shadow:0 4px 10px rgba(0,0,0,0.3); padding:20px; border-radius:5px;
    z-index:1000; width:60%; max-width:90%;">
    <p id="popup-code" style="font-weight:bold;"></p>
    <p id="popup-title" style="font-weight:500;"></p>
    <p id="popup-description"></p>
    <p><strong>Number of pages:</strong> <span id="popup-pages"></span></p>
    <p id="popup-price" style="font-weight:bold;"></p>
    <div class="text-center mt-3">
        <button id="popup-close" style="background:#FF6600; color:white; border:none; border-radius:5px; padding:6px 16px; cursor:pointer;">Close</button>
    </div>
</div>

{{-- JS --}}
<script>
function viewPDF(standardCode) {
    const viewer = document.getElementById('pdfViewer');
    const container = document.getElementById('pdfViewerContainer');
    const filename = standardCode.replace(/[: ]/g, '_') + '.pdf';
    viewer.src = `http://192.168.0.5:3500/view?file=${encodeURIComponent(filename)}`;
    container.style.display = 'block';
    container.scrollIntoView({ behavior: 'smooth' });
}

// Client-side search
const searchInput = document.getElementById('searchInput');
const tableBody = document.getElementById('standardsTable').getElementsByTagName('tbody')[0];
const rows = Array.from(tableBody.getElementsByTagName('tr'));
const rowsPerPage = 5;
let currentPage = 1;

function renderTable() {
    const filter = searchInput.value.toLowerCase();
    const filteredRows = rows.filter(row => {
        const code = row.querySelectorAll('.open-modal')[0].textContent.toLowerCase();
        const title = row.querySelectorAll('.open-modal')[1].textContent.toLowerCase();
        return code.includes(filter) || title.includes(filter);
    });

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

    tableBody.innerHTML = '';
    pageRows.forEach(r => tableBody.appendChild(r));

    document.getElementById('pageInfo').textContent = `Page ${currentPage} of ${totalPages}`;
    document.getElementById('prevPage').disabled = currentPage === 1;
    document.getElementById('nextPage').disabled = currentPage === totalPages || totalPages === 0;
}

searchInput.addEventListener('input', () => {
    currentPage = 1;
    renderTable();
});

document.getElementById('prevPage').addEventListener('click', () => {
    if (currentPage > 1) { currentPage--; renderTable(); }
});
document.getElementById('nextPage').addEventListener('click', () => {
    const filter = searchInput.value.toLowerCase();
    const filteredRows = rows.filter(row => {
        const code = row.querySelectorAll('.open-modal')[0].textContent.toLowerCase();
        const title = row.querySelectorAll('.open-modal')[1].textContent.toLowerCase();
        return code.includes(filter) || title.includes(filter);
    });
    const totalPages = Math.ceil(filteredRows.length / rowsPerPage);
    if (currentPage < totalPages) { currentPage++; renderTable(); }
});

renderTable();

// Centered popup modal
const popup = document.getElementById('hoverPopup');
const popupCode = document.getElementById('popup-code');
const popupTitle = document.getElementById('popup-title');
const popupDescription = document.getElementById('popup-description');
const popupPages = document.getElementById('popup-pages');
const popupPrice = document.getElementById('popup-price');
const popupClose = document.getElementById('popup-close');

document.querySelectorAll('.open-modal').forEach(cell => {
    cell.addEventListener('click', function() {
        popupCode.textContent = this.dataset.code;
        popupTitle.textContent = this.dataset.title;
        popupDescription.textContent = this.dataset.description;
        popupPages.textContent = this.dataset.pages;
        popupPrice.textContent = "MWK " + Number(this.dataset.price).toLocaleString();
        popup.style.display = 'block';
    });
});

popupClose.addEventListener('click', () => popup.style.display = 'none');
window.addEventListener('click', e => { if(e.target === popup) popup.style.display = 'none'; });
</script>

{{-- CSS --}}
<style>
.open-modal { cursor:pointer; color:#007bff; text-decoration:underline; }
.open-modal:hover { color:#ff6600; }
</style>
@endsection