@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <a href="{{ route('company.index') }}" class="btn btn-sm btn-outline-primary">
                            <i class="fa fa-arrow-left"></i> Back
                        </a>
                        <div class="w-100 mt-4">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                            <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-primary">
                            <h4>SSM ID : {{ $company->ssm_id }}</h4>
                        </div>
                        <div class="card-body">
                            <h6 class="detail-section-title">Company Information</h6>
                            <div class="row">
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">Company Name</div>
                                    <div class="detail-value">{{ $company->ssm_name ?: '-' }}</div>
                                </div>
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">Business ID</div>
                                    <div class="detail-value">{{ $company->business_id ?: '-' }}</div>
                                </div>
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">Organization ID</div>
                                    <div class="detail-value">{{ $company->organization_id ?: '-' }}</div>
                                </div>
                            </div>

                            <hr class="detail-divider">

                            <h6 class="detail-section-title">Address Information</h6>
                            <div class="row">
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">Address</div>
                                    <div class="detail-value">
                                        {{ $company->address1 }}
                                        @if ($company->address2)
                                            , {{ $company->address2 }}
                                        @endif
                                        @if ($company->address3)
                                            , {{ $company->address3 }}
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">Postcode</div>
                                    <div class="detail-value">{{ $company->postcode ?: '-' }}</div>
                                </div>
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">City</div>
                                    <div class="detail-value">{{ $company->city ?: '-' }}</div>
                                </div>
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">State</div>
                                    <div class="detail-value">{{ $company->state ?: '-' }}</div>
                                </div>
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">Country</div>
                                    <div class="detail-value">{{ $company->country ?: '-' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 mt-3">
                    <div class="card">
                        <div class="card-header bg-primary d-flex align-items-center justify-content-between flex-wrap">
                            <h4><i class="fa fa-wallet"></i> Company Wallet</h4>
                            @if ($companywallet)
                                <span class="wallet-id-chip">Wallet ID: {{ $companywallet->id ?: '-' }}</span>
                            @endif
                        </div>
                        <div class="card-body">
                            @if ($companywallet)
                                <div class="row">
                                    <div class="col-md-4 col-sm-12 mb-3">
                                        <div class="wallet-stat">
                                            <div class="detail-label">Gold Balance (999)</div>
                                            <div class="wallet-stat-value">
                                                {{ number_format((float) $companywallet->current_gold_gram_999, 4) }}
                                                <span class="wallet-stat-unit">g</span>
                                            </div>
                                            <div class="wallet-stat-prev">Previous:
                                                {{ number_format((float) $companywallet->prev_gold_gram_999, 4) }} g
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-12 mb-3">
                                        <div class="wallet-stat">
                                            <div class="detail-label">Gold Balance (916)</div>
                                            <div class="wallet-stat-value">
                                                {{ number_format((float) $companywallet->current_gold_gram_916, 4) }}
                                                <span class="wallet-stat-unit">g</span>
                                            </div>
                                            <div class="wallet-stat-prev">Previous:
                                                {{ number_format((float) $companywallet->prev_gold_gram_916, 4) }} g
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-12 mb-3">
                                        <div class="wallet-stat">
                                            <div class="detail-label">Cash Balance</div>
                                            <div class="wallet-stat-value">RM
                                                {{ number_format((float) $companywallet->current_cash_balance, 2) }}
                                            </div>
                                            <div class="wallet-stat-prev">Previous: RM
                                                {{ number_format((float) $companywallet->prev_cash_balance, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <p class="text-light mb-0">No wallet found for this company.</p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 mt-3">
                    <div class="card">
                        <div class="card-header bg-primary">
                            <h4>Company Files</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table mb-0 table-borderless company-files-table">
                                    <thead>
                                        <tr class="userDatatable-header">
                                            <th><span class="userDatatable-title">Document Type</span></th>
                                            <th><span class="userDatatable-title">File</span></th>
                                            <th><span class="userDatatable-title">Last Updated</span></th>
                                            <th><span class="userDatatable-title">Action</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($companyfiles as $files)
                                            <tr>
                                                <td>
                                                    <div class="userDatatable-content">
                                                        {{ $files->desc }}
                                                        <span class="file-code-badge">{{ $files->code }}</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content file-name-cell">
                                                        <i class="fa fa-file-text-o file-icon"></i>
                                                        <span>{{ $files->filename }}</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content">
                                                        {{ $files->updated_at }}
                                                    </div>
                                                </td>
                                                <td class="text-center">
                                                    <a href="{{ route('company.file', ['path' => $files->filepath]) }}"
                                                        target="_blank" class="btn btn-sm btn-outline-primary">
                                                        <i class="fa fa-eye"></i> View
                                                    </a>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center">No files found.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 mt-3">
                    <div class="card">
                        <div class="card-header bg-primary">
                            <h4>Company Rep List</h4>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap"
                                style="gap: 10px;">
                                <div class="d-flex align-items-center flex-wrap" style="gap: 10px;">
                                    <input type="text" id="rep-search" class="form-control w-auto"
                                        placeholder="Search...">
                                </div>
                            </div>
                            <div class="table-responsive company-table-scroll">
                                <table class="table mb-0 table-borderless">
                                    <thead>
                                        <tr class="userDatatable-header">
                                            <th><span class="userDatatable-title">Rep ID</span></th>
                                            <th><span class="userDatatable-title">Rep Name</span></th>
                                            <th><span class="userDatatable-title">Rep Email</span></th>
                                            <th><span class="userDatatable-title">Status</span></th>
                                            <th><span class="userDatatable-title">Status Date</span></th>
                                            <th><span class="userDatatable-title">Action</span></th>
                                        </tr>
                                    </thead>
                                    <tbody id="rep-table-body">
                                        @forelse ($companyReps as $rep)
                                            <tr class="rep-row">
                                                <td>
                                                    <div class="userDatatable-content rep-searchable">{{ $rep->rep_id }}
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content rep-searchable">{{ $rep->rep_name }}
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content rep-searchable"
                                                        style="text-transform: none;">{{ $rep->rep_email }}</div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content">
                                                        {{ $rep->status ? 'Active' : 'Inactive' }}</div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content">{{ $rep->status_datetime }}</div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content">
                                                        @if ($rep->status != 1)
                                                            <div class="rep-action-buttons">
                                                                <button type="button" class="btn btn-success btn-sm"
                                                                    data-toggle="modal" data-target="#repApprovalModal"
                                                                    data-ssm="{{ $rep->ssm_id }}"
                                                                    data-repid="{{ $rep->rep_id }}"
                                                                    data-status="Approved">Approve</button>
                                                                <button type="button" class="btn btn-danger btn-sm"
                                                                    data-toggle="modal" data-target="#repApprovalModal"
                                                                    data-ssm="{{ $rep->ssm_id }}"
                                                                    data-repid="{{ $rep->rep_id }}"
                                                                    data-status="Rejected">Reject</button>
                                                            </div>
                                                        @else
                                                            <span class="text-light">Approved</span>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center">No company reps found.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                                <p id="rep-no-results" class="text-center mt-20 mb-0" style="display:none;">No matching
                                    reps
                                    found.</p>
                            </div>
                            <div
                                class="company-pagination-bar d-flex align-items-center justify-content-between flex-wrap mt-20 pt-20">
                                <p class="company-pagination-info mb-0" id="rep-info"></p>
                                <nav aria-label="rep pagination">
                                    <ul class="company-pagination mb-0" id="rep-pagination"></ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 mt-3">
                    <div class="card">
                        <div class="card-header bg-primary">
                            <h4>Company Transaction History</h4>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap"
                                style="gap: 10px;">
                                <div class="d-flex align-items-center flex-wrap" style="gap: 10px;">
                                    <input type="text" id="trx-search" class="form-control w-auto"
                                        placeholder="Search...">
                                    <label class="mb-0 d-flex align-items-center" style="gap: 6px;">
                                        From
                                        <input type="date" id="trx-date-from" class="form-control w-auto"
                                            value="{{ now()->startOfMonth()->format('Y-m-d') }}">
                                    </label>
                                    <label class="mb-0 d-flex align-items-center" style="gap: 6px;">
                                        to
                                        <input type="date" id="trx-date-to" class="form-control w-auto"
                                            value="{{ now()->format('Y-m-d') }}">
                                    </label>
                                </div>
                            </div>
                            <div class="table-responsive company-table-scroll">
                                <table class="table mb-0 table-borderless">
                                    <thead>
                                        <tr class="userDatatable-header">
                                            <th><span class="userDatatable-title">Trx Ref</span></th>
                                            <th><span class="userDatatable-title">Type</span></th>
                                            <th><span class="userDatatable-title">Amount (RM)</span></th>
                                            <th><span class="userDatatable-title">Weight (g)</span></th>
                                            <th><span class="userDatatable-title">Payment Method</span></th>
                                            <th><span class="userDatatable-title">Status</span></th>
                                            <th><span class="userDatatable-title">Date</span></th>
                                        </tr>
                                    </thead>
                                    <tbody id="trx-table-body">
                                        @forelse ($company_transactions as $trx)
                                            <tr class="trx-row"
                                                data-created-at="{{ $trx->created_at ? \Carbon\Carbon::parse($trx->created_at)->format('Y-m-d') : '' }}">
                                                <td>
                                                    <div class="userDatatable-content trx-searchable">{{ $trx->trx_ref }}
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content trx-searchable">
                                                        {{ $trx->transaction_type ?: '-' }}</div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content">
                                                        {{ number_format((float) $trx->trx_amount, 2) }}</div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content">
                                                        {{ number_format((float) $trx->total_weight_gram, 4) }}</div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content trx-searchable">
                                                        {{ $trx->payment_method ?: '-' }}</div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content">
                                                        @php
                                                            $trxStatusKey = strtolower($trx->transaction_status ?? '');
                                                            $trxStatusVariant = in_array($trxStatusKey, [
                                                                'success',
                                                                'completed',
                                                                'approved',
                                                            ])
                                                                ? 'success'
                                                                : (in_array($trxStatusKey, [
                                                                    'failed',
                                                                    'rejected',
                                                                    'cancelled',
                                                                ])
                                                                    ? 'danger'
                                                                    : (in_array($trxStatusKey, [
                                                                        'pending',
                                                                        'processing',
                                                                    ])
                                                                        ? 'warning'
                                                                        : 'neutral'));
                                                        @endphp
                                                        <span class="status-badge status-badge--{{ $trxStatusVariant }}">
                                                            <span class="status-badge__dot"></span>
                                                            {{ $trx->transaction_status ?? '-' }}
                                                        </span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="userDatatable-content">
                                                        {{ $trx->created_at ? \Carbon\Carbon::parse($trx->created_at)->format('d M Y, h:i A') : '-' }}
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="text-center">No transactions found for this
                                                    company.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                                <p id="trx-no-results" class="text-center mt-20 mb-0" style="display:none;">No matching
                                    transaction found.</p>
                            </div>
                            <div
                                class="company-pagination-bar d-flex align-items-center justify-content-between flex-wrap mt-20 pt-20">
                                <p class="company-pagination-info mb-0" id="trx-info"></p>
                                <nav aria-label="transaction pagination">
                                    <ul class="company-pagination mb-0" id="trx-pagination"></ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="repApprovalModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content" style="background-color: #fff;">
                        <form action="" method="POST" id="repApprovalForm">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="repApprovalModalTitle">Approval Remark</h5>
                                <button type="button" class="close" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                            </div>

                            <div class="modal-body">
                                <input type="hidden" name="status" id="repApprovalStatus">
                                <div class="form-group">
                                    <label>Remark</label>
                                    <textarea class="form-control" name="remark" rows="4" placeholder="Enter a remark..." required></textarea>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                                <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .detail-section-title {
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #7e8299;
            margin-bottom: 15px;
        }

        .detail-label {
            font-size: 12px;
            color: #7e8299;
            margin-bottom: 4px;
        }

        .detail-value {
            font-size: 14px;
            font-weight: 600;
            color: #2c2e3d;
        }

        .detail-divider {
            margin: 10px 0 20px;
            border-top: 1px solid #eef1f5;
        }

        .company-files-table td {
            vertical-align: middle;
        }

        .wallet-id-chip {
            display: inline-flex;
            align-items: center;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.3px;
            color: rgba(255, 255, 255, 0.85);
            background-color: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 5px 12px;
            border-radius: 999px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        }

        .wallet-stat {
            background-color: #f8f9fb;
            border-radius: 12px;
            padding: 16px 18px;
        }

        .wallet-stat-value {
            font-size: 22px;
            font-weight: 700;
            color: #19bdb4;
        }

        .wallet-stat-unit {
            font-size: 13px;
            font-weight: 600;
            color: #7e8299;
        }

        .wallet-stat-prev {
            font-size: 12px;
            color: #7e8299;
            margin-top: 4px;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
            white-space: nowrap;
            text-transform: capitalize;
        }

        .status-badge__dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex: 0 0 auto;
            background-color: currentColor;
        }

        .status-badge--success {
            background-color: #e5f8f3;
            color: #12a678;
        }

        .status-badge--danger {
            background-color: #fdecec;
            color: #e2434f;
        }

        .status-badge--warning {
            background-color: #fff3e0;
            color: #c8790d;
        }

        .status-badge--neutral {
            background-color: #f1f2f6;
            color: #6a6f8a;
        }

        .rep-action-buttons {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 8px;
        }

        .file-code-badge {
            display: inline-block;
            margin-left: 6px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 600;
            color: #7e8299;
            background-color: #f4f5f7;
            border-radius: 10px;
        }

        .file-name-cell {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .file-icon {
            color: #19bdb4;
            font-size: 15px;
        }

        .company-table-scroll {
            max-height: 520px;
            overflow-y: auto;
        }

        .company-table-scroll thead th {
            position: sticky;
            top: 0;
            background-color: #fff;
            z-index: 1;
        }

        .company-pagination-bar {
            border-top: 1px solid #eef1f5;
        }

        .company-pagination-info {
            font-size: 13px;
            color: #7e8299;
        }

        .company-pagination {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 6px;
        }

        .company-pagination__item {
            display: inline-flex;
        }

        .company-pagination__link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 8px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            color: #5a5f7d;
            background-color: #f4f5f7;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
            user-select: none;
        }

        .company-pagination__link:hover:not(.disabled):not(.active) {
            background-color: #e4e7ed;
            color: #2c2e3d;
        }

        .company-pagination__link.active {
            background-color: #19bdb4;
            color: #fff;
            box-shadow: 0 4px 10px rgba(25, 189, 180, 0.35);
        }

        .company-pagination__link.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .company-pagination__ellipsis {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            color: #b4b7c9;
            font-weight: 600;
        }
    </style>
@endsection

@section('scripts')
    <script>
        $(function() {
            var PAGE_SIZE = 10;
            var currentPage = 1;

            var $rows = $('#company-table-body tr.company-row');
            var $search = $('#company-search');
            var $dateFrom = $('#company-date-from');
            var $dateTo = $('#company-date-to');
            var $noResults = $('#company-no-results');
            var $pagination = $('#company-pagination');
            var $info = $('#company-info');

            function getMatchingRows() {
                var value = $search.val().toLowerCase().trim();
                var dateFrom = $dateFrom.val();
                var dateTo = $dateTo.val();

                return $rows.filter(function() {
                    var matchesSearch = $(this).find('.company-searchable').text().toLowerCase().indexOf(
                        value) > -1;
                    var registeredAt = $(this).data('registered-at');
                    var matchesDateFrom = !dateFrom || (registeredAt && registeredAt >= dateFrom);
                    var matchesDateTo = !dateTo || (registeredAt && registeredAt <= dateTo);

                    return matchesSearch && matchesDateFrom && matchesDateTo;
                });
            }

            // Builds a windowed page list, e.g. [1, '...', 4, 5, 6, '...', 11]
            function buildPageList(current, total) {
                var pages = [];
                var windowSize = 1;

                for (var page = 1; page <= total; page++) {
                    var isEdge = page === 1 || page === total;
                    var isNearCurrent = Math.abs(page - current) <= windowSize;

                    if (isEdge || isNearCurrent) {
                        pages.push(page);
                    } else if (pages[pages.length - 1] !== '...') {
                        pages.push('...');
                    }
                }

                return pages;
            }

            function pageItem(label, page, isActive, isDisabled) {
                var classes = 'company-pagination__link' + (isActive ? ' active' : '') + (isDisabled ? ' disabled' :
                    '');
                return $('<li class="company-pagination__item"></li>').append(
                    $('<a href="" class="' + classes + '">' + label + '</a>')
                    .on('click', function(e) {
                        e.preventDefault();
                        if (!isDisabled && page !== currentPage) {
                            currentPage = page;
                            render();
                        }
                    })
                );
            }

            function renderPagination(totalPages) {
                $pagination.empty();

                if (totalPages <= 1) {
                    return;
                }

                $pagination.append(pageItem('&lsaquo;', currentPage - 1, false, currentPage === 1));

                buildPageList(currentPage, totalPages).forEach(function(page) {
                    if (page === '...') {
                        $pagination.append(
                            '<li class="company-pagination__item"><span class="company-pagination__ellipsis">&hellip;</span></li>'
                        );
                    } else {
                        $pagination.append(pageItem(page, page, page === currentPage, false));
                    }
                });

                $pagination.append(pageItem('&rsaquo;', currentPage + 1, false, currentPage === totalPages));
            }

            function render() {
                var $matching = getMatchingRows();
                var total = $matching.length;
                var totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
                currentPage = Math.min(currentPage, totalPages);

                var start = total === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1;
                var end = Math.min(currentPage * PAGE_SIZE, total);

                $rows.hide();
                $matching.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE).show();

                $noResults.toggle(total === 0);
                $info.text(total === 0 ? '' : 'Showing ' + start + ' to ' + end + ' of ' + total + ' entries');
                renderPagination(totalPages);
            }

            $search.on('keyup', function() {
                currentPage = 1;
                render();
            });

            $dateFrom.add($dateTo).on('change', function() {
                currentPage = 1;
                render();
            });

            render();
        });

        $(function() {
            var REP_PAGE_SIZE = 10;
            var repCurrentPage = 1;

            var $repRows = $('#rep-table-body tr.rep-row');
            var $repSearch = $('#rep-search');
            var $repNoResults = $('#rep-no-results');
            var $repPagination = $('#rep-pagination');
            var $repInfo = $('#rep-info');

            function getMatchingRepRows() {
                var value = $repSearch.val().toLowerCase().trim();

                return $repRows.filter(function() {
                    return $(this).find('.rep-searchable').text().toLowerCase().indexOf(value) > -1;
                });
            }

            function buildRepPageList(current, total) {
                var pages = [];
                var windowSize = 1;

                for (var page = 1; page <= total; page++) {
                    var isEdge = page === 1 || page === total;
                    var isNearCurrent = Math.abs(page - current) <= windowSize;

                    if (isEdge || isNearCurrent) {
                        pages.push(page);
                    } else if (pages[pages.length - 1] !== '...') {
                        pages.push('...');
                    }
                }

                return pages;
            }

            function repPageItem(label, page, isActive, isDisabled) {
                var classes = 'company-pagination__link' + (isActive ? ' active' : '') + (isDisabled ? ' disabled' :
                    '');
                return $('<li class="company-pagination__item"></li>').append(
                    $('<a href="" class="' + classes + '">' + label + '</a>')
                    .on('click', function(e) {
                        e.preventDefault();
                        if (!isDisabled && page !== repCurrentPage) {
                            repCurrentPage = page;
                            renderReps();
                        }
                    })
                );
            }

            function renderRepPagination(totalPages) {
                $repPagination.empty();

                if (totalPages <= 1) {
                    return;
                }

                $repPagination.append(repPageItem('&lsaquo;', repCurrentPage - 1, false, repCurrentPage === 1));

                buildRepPageList(repCurrentPage, totalPages).forEach(function(page) {
                    if (page === '...') {
                        $repPagination.append(
                            '<li class="company-pagination__item"><span class="company-pagination__ellipsis">&hellip;</span></li>'
                        );
                    } else {
                        $repPagination.append(repPageItem(page, page, page === repCurrentPage, false));
                    }
                });

                $repPagination.append(repPageItem('&rsaquo;', repCurrentPage + 1, false, repCurrentPage ===
                    totalPages));
            }

            function renderReps() {
                var $matching = getMatchingRepRows();
                var total = $matching.length;
                var totalPages = Math.max(1, Math.ceil(total / REP_PAGE_SIZE));
                repCurrentPage = Math.min(repCurrentPage, totalPages);

                var start = total === 0 ? 0 : (repCurrentPage - 1) * REP_PAGE_SIZE + 1;
                var end = Math.min(repCurrentPage * REP_PAGE_SIZE, total);

                $repRows.hide();
                $matching.slice((repCurrentPage - 1) * REP_PAGE_SIZE, repCurrentPage * REP_PAGE_SIZE).show();

                $repNoResults.toggle(total === 0);
                $repInfo.text(total === 0 ? '' : 'Showing ' + start + ' to ' + end + ' of ' + total + ' entries');
                renderRepPagination(totalPages);
            }

            $repSearch.on('keyup', function() {
                repCurrentPage = 1;
                renderReps();
            });

            renderReps();
        });

        $(function() {
            var TRX_PAGE_SIZE = 10;
            var trxCurrentPage = 1;

            var $trxRows = $('#trx-table-body tr.trx-row');
            var $trxSearch = $('#trx-search');
            var $trxDateFrom = $('#trx-date-from');
            var $trxDateTo = $('#trx-date-to');
            var $trxNoResults = $('#trx-no-results');
            var $trxPagination = $('#trx-pagination');
            var $trxInfo = $('#trx-info');

            function getMatchingTrxRows() {
                var value = $trxSearch.val().toLowerCase().trim();
                var dateFrom = $trxDateFrom.val();
                var dateTo = $trxDateTo.val();

                return $trxRows.filter(function() {
                    var matchesSearch = $(this).find('.trx-searchable').text().toLowerCase().indexOf(value) >
                        -1;
                    var createdAt = $(this).data('created-at');
                    var matchesDateFrom = !dateFrom || (createdAt && createdAt >= dateFrom);
                    var matchesDateTo = !dateTo || (createdAt && createdAt <= dateTo);

                    return matchesSearch && matchesDateFrom && matchesDateTo;
                });
            }

            function buildTrxPageList(current, total) {
                var pages = [];
                var windowSize = 1;

                for (var page = 1; page <= total; page++) {
                    var isEdge = page === 1 || page === total;
                    var isNearCurrent = Math.abs(page - current) <= windowSize;

                    if (isEdge || isNearCurrent) {
                        pages.push(page);
                    } else if (pages[pages.length - 1] !== '...') {
                        pages.push('...');
                    }
                }

                return pages;
            }

            function trxPageItem(label, page, isActive, isDisabled) {
                var classes = 'company-pagination__link' + (isActive ? ' active' : '') + (isDisabled ? ' disabled' :
                    '');
                return $('<li class="company-pagination__item"></li>').append(
                    $('<a href="" class="' + classes + '">' + label + '</a>')
                    .on('click', function(e) {
                        e.preventDefault();
                        if (!isDisabled && page !== trxCurrentPage) {
                            trxCurrentPage = page;
                            renderTrx();
                        }
                    })
                );
            }

            function renderTrxPagination(totalPages) {
                $trxPagination.empty();

                if (totalPages <= 1) {
                    return;
                }

                $trxPagination.append(trxPageItem('&lsaquo;', trxCurrentPage - 1, false, trxCurrentPage === 1));

                buildTrxPageList(trxCurrentPage, totalPages).forEach(function(page) {
                    if (page === '...') {
                        $trxPagination.append(
                            '<li class="company-pagination__item"><span class="company-pagination__ellipsis">&hellip;</span></li>'
                        );
                    } else {
                        $trxPagination.append(trxPageItem(page, page, page === trxCurrentPage, false));
                    }
                });

                $trxPagination.append(trxPageItem('&rsaquo;', trxCurrentPage + 1, false, trxCurrentPage ===
                    totalPages));
            }

            function renderTrx() {
                var $matching = getMatchingTrxRows();
                var total = $matching.length;
                var totalPages = Math.max(1, Math.ceil(total / TRX_PAGE_SIZE));
                trxCurrentPage = Math.min(trxCurrentPage, totalPages);

                var start = total === 0 ? 0 : (trxCurrentPage - 1) * TRX_PAGE_SIZE + 1;
                var end = Math.min(trxCurrentPage * TRX_PAGE_SIZE, total);

                $trxRows.hide();
                $matching.slice((trxCurrentPage - 1) * TRX_PAGE_SIZE, trxCurrentPage * TRX_PAGE_SIZE).show();

                $trxNoResults.toggle(total === 0);
                $trxInfo.text(total === 0 ? '' : 'Showing ' + start + ' to ' + end + ' of ' + total + ' entries');
                renderTrxPagination(totalPages);
            }

            $trxSearch.on('keyup', function() {
                trxCurrentPage = 1;
                renderTrx();
            });

            $trxDateFrom.add($trxDateTo).on('change', function() {
                trxCurrentPage = 1;
                renderTrx();
            });

            renderTrx();
        });

        $(function() {
            $('#repApprovalModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var ssm = button.data('ssm');
                var repId = button.data('repid');
                var status = button.data('status');

                $('#repApprovalStatus').val(status);
                $('#repApprovalForm').attr('action', '{{ url('company/rep/approval') }}/' + ssm + '/' + repId);
                $('#repApprovalModalTitle').text(status + ' Rep ' + repId);
            });
        });
    </script>
@endsection