@extends('layouts.admin')

@section('title', 'Managers List')
@section('heading', 'Managers List')

@section('actions')
    <a class="btn-admin btn-primary" href="{{ route('admin.administrators.create') }}">Add Manager</a>
@endsection

@section('content')
<div class="panel">
    <div class="table-tools">
        <div class="export-btns">
            <button type="button" class="btn-export" data-export="copy">Copy</button>
            <button type="button" class="btn-export" data-export="csv">CSV</button>
            <button type="button" class="btn-export" data-export="print">Print</button>
        </div>
        <label class="table-search">Search: <input type="search" data-table-search placeholder=""></label>
    </div>
    <div class="table-wrap" id="managers-print">
        <table class="data-table" id="managers-table">
            <thead>
                <tr>
                    <th data-sort="0">USER ID</th>
                    <th data-sort="1">FIRSTNAME</th>
                    <th data-sort="2">LASTNAME</th>
                    <th data-sort="3">EMAIL</th>
                    <th data-sort="4">PHONE</th>
                    <th data-sort="5">TYPE</th>
                    <th data-sort="6">STATUS</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody>
                @forelse($admins as $admin)
                    <tr>
                        <td>{{ $admin->id }}</td>
                        <td>{{ $admin->first_name ?: $admin->name }}</td>
                        <td>{{ $admin->last_name }}</td>
                        <td>{{ $admin->email }}</td>
                        <td>{{ $admin->phone ?: '—' }}</td>
                        <td>{{ $admin->typeLabel() }}</td>
                        <td>{{ $admin->status ?: 'active' }}</td>
                        <td class="action-cell">
                            <button type="button" class="action-toggle" data-action-toggle>Action ▾</button>
                            <div class="action-menu">
                                <form method="POST" action="{{ route('admin.administrators.block', $admin) }}">
                                    @csrf
                                    <button class="act act-delete" type="submit">{{ $admin->isBlocked() ? 'Unblock' : 'Block' }}</button>
                                </form>
                                <form method="POST" action="{{ route('admin.administrators.reset', $admin) }}">
                                    @csrf
                                    <button class="act act-edit" type="submit">Reset Password</button>
                                </form>
                                <form method="POST" action="{{ route('admin.administrators.destroy', $admin) }}" onsubmit="return confirm('Delete this manager?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="act act-delete" type="submit">Delete</button>
                                </form>
                                <a class="act act-purple" href="{{ route('admin.administrators.edit', $admin) }}">Edit</a>
                                <a class="act act-update" href="{{ route('admin.email.create', ['email' => $admin->email]) }}">Send Email</a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8">No managers yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="table-foot">
        <span data-table-info>Showing {{ $admins->count() }} {{ $admins->count() === 1 ? 'entry' : 'entries' }}</span>
        <div class="pager">
            <button type="button" disabled>Previous</button>
            <span class="pager-current">1</span>
            <button type="button" disabled>Next</button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
(function () {
    var table = document.getElementById('managers-table');
    if (!table) return;
    var rows = Array.from(table.tBodies[0].rows);
    var search = document.querySelector('[data-table-search]');
    var info = document.querySelector('[data-table-info]');

    function visibleRows() {
        return rows.filter(function (row) { return row.style.display !== 'none' && row.cells.length > 1; });
    }
    function refreshInfo() {
        var shown = visibleRows().length;
        info.textContent = shown ? ('Showing 1 to ' + shown + ' of ' + shown + ' entries') : 'Showing 0 entries';
    }
    function rowText(row) {
        return Array.from(row.cells).slice(0, 7).map(function (cell) { return cell.innerText.trim(); }).join('\t');
    }

    search?.addEventListener('input', function () {
        var q = search.value.toLowerCase();
        rows.forEach(function (row) {
            row.style.display = row.innerText.toLowerCase().includes(q) ? '' : 'none';
        });
        refreshInfo();
    });

    table.querySelectorAll('th[data-sort]').forEach(function (th) {
        th.addEventListener('click', function () {
            var idx = Number(th.dataset.sort);
            var dir = th.dataset.dir === 'asc' ? 'desc' : 'asc';
            th.dataset.dir = dir;
            rows.sort(function (a, b) {
                var av = a.cells[idx].innerText.trim().toLowerCase();
                var bv = b.cells[idx].innerText.trim().toLowerCase();
                if (!isNaN(av) && !isNaN(bv) && av !== '' && bv !== '') return dir === 'asc' ? av - bv : bv - av;
                return dir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
            });
            rows.forEach(function (row) { table.tBodies[0].appendChild(row); });
        });
    });

    document.querySelectorAll('[data-export]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var lines = ['USER ID\tFIRSTNAME\tLASTNAME\tEMAIL\tPHONE\tTYPE\tSTATUS'];
            visibleRows().forEach(function (row) { lines.push(rowText(row)); });
            var text = lines.join('\n');
            if (btn.dataset.export === 'copy') {
                navigator.clipboard.writeText(text);
                btn.textContent = 'Copied';
                setTimeout(function () { btn.textContent = 'Copy'; }, 1200);
            } else if (btn.dataset.export === 'csv') {
                var csv = lines.map(function (line) {
                    return line.split('\t').map(function (v) { return '"' + v.replace(/"/g, '""') + '"'; }).join(',');
                }).join('\n');
                var a = document.createElement('a');
                a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
                a.download = 'managers.csv';
                a.click();
            } else {
                var win = window.open('', '_blank');
                win.document.write('<html><head><title>Managers List</title></head><body>' + document.getElementById('managers-print').innerHTML + '</body></html>');
                win.document.close();
                win.print();
            }
        });
    });

    document.querySelectorAll('[data-action-toggle]').forEach(function (btn) {
        btn.addEventListener('click', function (e) {
            e.stopPropagation();
            document.querySelectorAll('.action-cell.open').forEach(function (cell) {
                if (cell !== btn.parentElement) cell.classList.remove('open');
            });
            btn.parentElement.classList.toggle('open');
        });
    });
    document.addEventListener('click', function () {
        document.querySelectorAll('.action-cell.open').forEach(function (cell) { cell.classList.remove('open'); });
    });
    refreshInfo();
})();
</script>
@endsection