@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h1>Merchants</h1>
            <div class="d-flex gap-2">
                <input id="searchBox" type="text" class="form-control" placeholder="Search business or owner..." style="max-width:260px;">
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">

            <table class="table mb-0" id="merchantsTable">
                <thead>
                    <tr>
                        <th style="width:70px;">ID</th>
                        <th>Business</th>
                        <th>Type</th>
                        <th>Address</th>
                        <th style="width:120px;">Actions</th>
                    </tr>
                </thead>
                <tbody id="merchantsBody">
                    <!-- Filled by JS -->
                </tbody>
            </table>

            <div class="d-flex justify-content-between align-items-center mt-3">
                <small class="text-muted" id="resultCount"></small>
                <nav>
                    <ul class="pagination pagination-sm mb-0" id="pager"></ul>
                </nav>
            </div>

        </div>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="merchantModal" tabindex="-1" aria-labelledby="merchantModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="merchantModalLabel">Merchant Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3">
            <div class="col-md-6"><strong>Owner Name:</strong> <span data-field="owner_name"></span></div>
            <div class="col-md-6"><strong>Landline:</strong> <span data-field="landline"></span></div>
            <div class="col-md-6"><strong>Mobile Phone:</strong> <span data-field="mobile_phone"></span></div>
            <div class="col-md-6"><strong>Business Email:</strong> <span data-field="business_email"></span></div>
            <div class="col-md-6"><strong>Business Type:</strong> <span data-field="business_type"></span></div>
            <div class="col-md-6"><strong>Business Phone:</strong> <span data-field="business_phone"></span></div>
            <div class="col-12"><strong>Description:</strong> <div data-field="description" class="mt-1"></div></div>
            <div class="col-12"><strong>Address:</strong> <div data-field="address" class="mt-1"></div></div>
            <div class="col-12" id="logoWrap" style="display:none;">
                <strong>Logo:</strong>
                <div class="mt-2"><img id="logoImg" src="" alt="Logo" style="max-height:100px;"></div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function(){
    const API_URL = '{{ url('/api/merchants/') }}'; // keep trailing slash to avoid redirects
    const tbody = document.getElementById('merchantsBody');
    const searchBox = document.getElementById('searchBox');
    const resultCount = document.getElementById('resultCount');
    const pager = document.getElementById('pager');
    const pageSize = 10;
    let data = [];
    let filtered = [];
    let page = 1;

    function paginate(arr, pageSize, page) {
        const start = (page - 1) * pageSize;
        return arr.slice(start, start + pageSize);
    }

    function renderTable() {
        tbody.innerHTML = '';
        const rows = paginate(filtered, pageSize, page);
        rows.forEach(m => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${m.id}</td>
                <td>${escapeHtml(m.business_name)}</td>
                <td>${escapeHtml(m.business_type || '')}</td>
                <td>${escapeHtml(m.address || '')}</td>
                <td>
                    <button class="btn btn-sm btn-info" data-id="${m.id}" data-action="view">View</button>
                </td>
            `;
            tbody.appendChild(tr);
        });
        resultCount.textContent = `${filtered.length} result${filtered.length !== 1 ? 's' : ''}`;
        renderPager();
    }

    function renderPager() {
        pager.innerHTML = '';
        const pages = Math.max(1, Math.ceil(filtered.length / pageSize));
        function li(label, p, disabled=false, active=false) {
            const li = document.createElement('li');
            li.className = 'page-item' + (disabled ? ' disabled' : '') + (active ? ' active' : '');
            const a = document.createElement('a');
            a.className = 'page-link';
            a.href = '#';
            a.textContent = label;
            a.addEventListener('click', (e) => {
                e.preventDefault();
                if (!disabled && page !== p) { page = p; renderTable(); }
            });
            li.appendChild(a);
            pager.appendChild(li);
        }
        li('Previous', Math.max(1, page-1), page === 1);
        for (let i=1;i<=pages;i++) li(i, i, false, i===page);
        li('Next', Math.min(pages, page+1), page === pages);
    }

    function applySearch() {
        const q = (searchBox.value || '').toLowerCase();
        filtered = !q ? data : data.filter(m => 
            (m.business_name || '').toLowerCase().includes(q) ||
            (m.owner_name || '').toLowerCase().includes(q) ||
            (m.address || '').toLowerCase().includes(q) ||
            (m.business_type || '').toLowerCase().includes(q)
        );
        page = 1;
        renderTable();
    }

    function showModal(merchant) {
        const modal = document.getElementById('merchantModal');
        const set = (key, val) => {
            const el = modal.querySelector('[data-field="'+key+'"]');
            if (el) el.textContent = val ?? '';
        };
        set('owner_name', merchant.owner_name);
        set('landline', merchant.landline);
        set('mobile_phone', merchant.mobile_phone);
        set('business_email', merchant.business_email);
        set('business_type', merchant.business_type);
        set('business_phone', merchant.business_phone);
        set('description', merchant.description);
        set('address', merchant.address);

        const logoWrap = document.getElementById('logoWrap');
        const img = document.getElementById('logoImg');
        if (merchant.logo_path) {
            img.src = merchant.logo_path;
            logoWrap.style.display = '';
        } else {
            logoWrap.style.display = 'none';
        }

        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
    }

    function escapeHtml(str) {
        if (str == null) return '';
        return str.replace(/[&<>"']/g, function(m) {
            return ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;'
            })[m];
        });
    }

    tbody.addEventListener('click', (e) => {
        const btn = e.target.closest('button[data-action="view"]');
        if (!btn) return;
        const id = Number(btn.getAttribute('data-id'));
        const merchant = data.find(m => m.id === id);
        if (merchant) showModal(merchant);
    });

    searchBox.addEventListener('input', () => applySearch());

    // Fetch data
    fetch(API_URL, { headers: { 'Accept': 'application/json' } })
      .then(r => r.json())
      .then(json => {
        // Expecting array with fields from your API: id, business_name, business_type, address, owner_name, etc.
        data = Array.isArray(json) ? json : [];
        filtered = data.slice();
        renderTable();
      })
      .catch(err => {
        console.error('Failed to load merchants', err);
        tbody.innerHTML = '<tr><td colspan="5" class="text-danger">Failed to load merchants.</td></tr>';
      });
})();
</script>
@endpush