@extends('layouts.app')

@section('content')
<style>
.or-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #9a9a9a;
    background: #f7f7f7;
    margin-top: 22px;
}

/* Toastr alignment fix */
#toast-container > .toast {
    padding: 15px 15px 15px 50px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

#toast-container > .toast-error {
    background-color: #d9534f !important; /* bootstrap danger */
}

#toast-container .toast-title {
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

#toast-container .toast-message {
    line-height: 1.4;
    white-space: normal;      /* allow wrapping */
    word-break: break-word;   /* prevent ugly breaks */
}

#toast-container .toast-close-button {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 18px;
    color: #fff;
    opacity: 0.8;
}

#toast-container .toast-close-button:hover {
    opacity: 1;
}

.highlight-text {
    background-color: #fff3cd;   /* light yellow */
    color: #856404;
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 3px;
}

/* Table header styling */
.table thead th {
    background-color: #2f4f7f;   /* deep blue */
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
    border: none !important;
    padding: 12px 8px;
    white-space: nowrap;
}

/* Remove default table borders */
.table thead tr {
    border: none;
}

/* Optional: hover effect */
.table thead th:hover {
    background-color: #2a456f;
}

/* Sort icons (if using datatable / arrows) */
.table thead th .sorting,
.table thead th .sorting_asc,
.table thead th .sorting_desc {
    color: #ffffff !important;
}

/* Optional: rounded top corners */
.table thead th:first-child {
    border-top-left-radius: 6px;
}
.table thead th:last-child {
    border-top-right-radius: 6px;
}

/* Make toastr background transparent */
#toast-container > div {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: #ffff !important; /* red text */
    opacity: 1 !important;
    padding: 8px 12px;
}

/* Remove default background images/icons */
#toast-container > .toast-error,
#toast-container > .toast-success,
#toast-container > .toast-warning,
#toast-container > .toast-info {
    background-image: none !important;
}

/* Optional: slightly bolder text */
#toast-container .toast-message {
    font-weight: 500;
}

/* Optional: close button visibility */
#toast-container .toast-close-button {
    color: #000 !important;
    opacity: 0.6;
}

/* Account Code & Account ID badges */
.account-code-badge,
.account-id-badge {
    display: inline-block;
    padding: 6px 12px;          /* ✅ proper spacing */
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1.4;
    min-width: 120px;
    text-align: center;
}

/* Optional color refinement */
.account-code-badge {
    background-color: #e7f1ff;
    color: #084298;
}

.account-id-badge {
    background-color: #fff3cd;
    color: #664d03;
}
/* Lookup button - primary */
.btn-lookup {
    background-color: #34548A;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 22px;
    box-shadow: 0 4px 10px rgba(52, 84, 138, 0.35);
}

.btn-lookup:hover {
    background-color: #2c4672;
    color: #ffffff;
}

/* Reset button - secondary */
.btn-reset {
    background-color: transparent;
    color: #6c757d;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 8px 18px;
}

.btn-reset:hover {
    background-color: #f8f9fa;
    color: #495057;
}

/* Results wrapper */
.lookup-results-wrapper {
    margin-top: 30px;
}

/* Header row */
.lookup-results-header {
    display: flex;
    justify-content: space-between; /* ✅ right-align count */
    align-items: center;
    margin-bottom: 10px;
    padding: 0 4px;
}

/* Title */
.lookup-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Result count (top-right) */
.lookup-count {
    font-size: 13px;
    color: #6c757d;
}

/* Remove card/table outer borders */
.table {
    border: none !important;
}

.table thead th {
    border-top: none !important;
}

/* Empty state spacing */
#lookupResults td {
    padding: 18px !important;
}

#tableSearch {
    padding-right: 30px;
}

</style>
<div class="container-fluid">
    {{-- Search Form --}}
<div class="card mb-4">
    <div class="card-header text-center">
         <h4>Customer Hierarchy Lookup</h4>
    </div>

    <div class="card-body">
        <form id="lookupForm">

            <div class="row justify-content-center">
                <div class="col-md-10">
                     <div class="text-center mb-3">
                        <small class="text-muted">
                            If you know the <strong>Business Name</strong> or <strong>MemberPress ID</strong>, use those.
                            Otherwise, enter <strong>any known keyword</strong> in <strong>Other Identifier</strong> to search.
                        </small>
                    </div>

                    <div class="row align-items-end text-center">

                        {{-- Business Name --}}
                        <div class="col-md-3">
                            <label class="fw-bold">Business Name</label>
                            <input type="text"
                                name="customer_name"
                                class="form-control form-control-sm"
                                placeholder="Enter business name">
                        </div>

                        {{-- OR --}}
                        <div class="col-md-1 d-flex justify-content-center">
                            <div class="or-circle">OR</div>
                        </div>

                        {{-- MemberPress ID --}}
                        <div class="col-md-3">
                            <label class="fw-bold">MemberPress ID</label>
                            <input type="text"
                                name="user_referance_id"
                                class="form-control form-control-sm"
                                placeholder="Enter MemberPress ID">
                        </div>

                        {{-- OR --}}
                        <div class="col-md-1 d-flex justify-content-center">
                            <div class="or-circle">OR</div>
                        </div>

                        {{-- Other Identifier --}}
                        <div class="col-md-3">
                            <label class="fw-bold">Other Identifier</label>
                           <input type="text"
                                    name="other_identifier"
                                    class="form-control form-control-sm"
                                    placeholder="any keyword, or identifier">
                        </div>

                    </div>

                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-lookup px-4 me-2">
                            🔍 Lookup
                        </button>

                        <button type="button" class="btn btn-reset" onclick="location.reload()">
                            Reset
                        </button>
                    </div>

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


   {{-- Results Table --}}
    <div class="lookup-results-wrapper">
    <div class="lookup-results-header">
        <span class="lookup-title">Lookup Results</span>
    </div>
          
            <table id="resultsTable" class="table table-bordered table-striped mb-0">
                <thead class="table-light">
                    <tr>
                        <th>MemberPress ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Business Name</th>
                        <th>Email</th>
                        <th>Account Code</th>
                        <th>Account ID</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
<div id="loaderModal" class="modal">
    <img class="loader-img" src="../images/ajax-spinner.gif">
    <span class="loader-text">Please wait ...</span>
</div>
<script>
let resultsTable;

$(document).ready(function () {

    /* ===============================
       INIT DATATABLE
    =============================== */
    resultsTable = $('#resultsTable').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        lengthChange: false,
        pageLength: 10,
        language: {
            search: '',
            searchPlaceholder: 'Search results...',
            info: '_TOTAL_ result(s) found',
            infoEmpty: '0 results found',
            emptyTable: 'No records available'
        }
    });

    const form = document.getElementById('lookupForm');

    function showToast(message) {
        toastr.error(message, '', {
            closeButton: false,
            progressBar: true,
            timeOut: 4000,
            positionClass: 'toast-top-right',
            preventDuplicates: true
        });
    }

    function highlightText(text, keyword) {
        if (!keyword || !text) return text;

        const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        return text.toString().replace(
            new RegExp(`(${escaped})`, 'ig'),
            '<span class="highlight-text">$1</span>'
        );
    }

    /* ===============================
       FORM SUBMIT
    =============================== */
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        const businessName    = form.customer_name.value.trim();
        const memberpressId   = form.user_referance_id.value.trim();
        const otherIdentifier = form.other_identifier.value.trim();
        const highlightKeyword = otherIdentifier || businessName || memberpressId;

        // Validation
        if (!businessName && !memberpressId && !otherIdentifier) {
            showToast('Please enter at least one search value.');
            return;
        }

        if (otherIdentifier && otherIdentifier.length < 3) {
            showToast('Enter at least 3 characters.');
            return;
        }

        $("#loaderModal").show();
        resultsTable.clear().draw();

        const params = new URLSearchParams(new FormData(form)).toString();

        fetch("{{ route('customer.hierarchy.lookup.ajax') }}?" + params)
            .then(res => res.json())
            .then(data => {

                $("#loaderModal").hide();

                if (!data || data.length === 0) {
                    document.getElementById('resultCount').textContent = '0 results found';
                    return;
                }

                data.forEach(row => {
                    resultsTable.row.add([
                        highlightText(row.user_referance_id ?? '-', highlightKeyword),
                        highlightText(row.first_name ?? '-', highlightKeyword),
                        highlightText(row.last_name ?? '-', highlightKeyword),
                        highlightText(row.account_name ?? '-', highlightKeyword),
                        highlightText(row.email ?? '-', highlightKeyword),
                        `<span class="account-code-badge">${row.account_code ?? '-'}</span>`,
                        `<span class="account-id-badge">${row.account_id ?? '-'}</span>`
                    ]);
                });

                resultsTable.draw();
            })
            .catch(() => {
                $("#loaderModal").hide();
                showToast('Error loading data.');
            });
    });

});
</script>
@endsection