@extends('admin.layouts.app')

@section('title', 'FILE APP PORTAL - Account Lawyer Mapping')

@section('breadcrumbs')
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Account Lawyer Mapping</span>
@endsection

@push('styles')
<style>
    .page {
        width: 100%; max-width: 100%; background: #ffffff; border-radius: 24px;
        box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16); padding: 28px 32px 32px; border: 1px solid #e2e8f0;
    }
    .page-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
    .page-title { font-size: 18px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #0f172a; }
    .page-subtitle { font-size: 13px; color: #64748b; }
    .layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr); gap: 28px; align-items: flex-start; }
    .search-panel { padding-right: 8px; }
    .field-label { font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
    .field-label span { color: #d63031; }
    .search-row { display: flex; gap: 10px; align-items: center; }
    .input-wrapper { position: relative; flex: 1; }
    .input-text {
        width: 100%; border-radius: 999px; border: 1px solid #cbd5e1; padding: 10px 38px 10px 14px;
        font-size: 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; background: #ffffff;
    }
    .input-text::placeholder { color: #94a3b8; }
    .input-text:focus { border-color: #00ada8; box-shadow: 0 0 0 3px rgba(0, 173, 168, 0.16); background: #f8fafc; }
    .icon-search {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        width: 18px; height: 18px; border-radius: 999px; border: 1px solid #cbd5e1;
        display: flex; align-items: center; justify-content: center; font-size: 11px; color: #64748b; background: #ffffff; pointer-events: none;
    }
    .btn {
        border: none; border-radius: 999px; padding: 10px 30px; font-size: 14px; font-weight: 500;
        cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; white-space: nowrap;
    }
    .btn-primary {
        background: radial-gradient(circle at top left, #00ada8 0%, #007d79 100%);
        color: #ffffff; box-shadow: 0 10px 25px rgba(0, 173, 168, 0.35);
    }
    .btn-primary:hover { background: radial-gradient(circle at top left, #00bfb9 0%, #00726d 100%); transform: translateY(-1px); }
    .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    .helper-text { margin-top: 12px; font-size: 12px; color: #94a3b8; }
    .result-panel {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%); border-radius: 18px;
        border: 1px solid #e2e8f0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        padding: 22px 22px 20px; min-height: 260px; display: flex; flex-direction: column; justify-content: center;
    }
    .result-placeholder { text-align: center; color: #94a3b8; font-size: 14px; line-height: 1.6; }
    .result-card {
        display: none; background: #ecfeff; border-radius: 14px; padding: 18px 18px 16px;
        border: 1px solid #bae6fd; box-shadow: 0 12px 30px rgba(56, 189, 248, 0.25);
    }
    .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .result-title { font-size: 14px; font-weight: 700; color: #0f172a; }
    .result-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
    .status-pill {
        display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px;
        background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 500;
    }
    .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.28); }
    .result-grid { display: grid; grid-template-columns: 1.4fr 1fr; row-gap: 8px; column-gap: 18px; margin-top: 4px; font-size: 13px; }
    .result-label { color: #64748b; }
    .result-value { text-align: right; font-weight: 500; color: #0f172a; }
    .result-footer { display: flex; justify-content: flex-end; margin-top: 16px; }
    .btn-outline {
        background: transparent; color: #00ada8; border-radius: 999px; border: 1px solid rgba(0, 173, 168, 0.6);
        padding: 9px 24px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s ease;
    }
    .btn-outline:hover { background: rgba(0, 173, 168, 0.06); box-shadow: 0 4px 12px rgba(0, 173, 168, 0.25); }
    .note-bar {
        margin-top: 22px; border-radius: 10px; padding: 10px 12px; background: #fef9e7;
        border: 1px dashed #f1c40f; display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #8a6d1f;
    }
    .note-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
    .note-dot { margin-top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #f1c40f; }
    .error-card {
        display: none; background: #fef2f2; border-radius: 14px; padding: 18px; border: 1px solid #fecaca;
        text-align: center; color: #b91c1c; font-size: 13px; font-weight: 500;
    }
    @media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } }
</style>
@endpush

@section('content')
    <div class="page">
        <header class="page-header">
            <div>
                <h1 class="page-title">Create Account – Lawyer Mapping</h1>
                <p class="page-subtitle">Search a loan account, review details, and confirm before mapping to a lawyer.</p>
            </div>
        </header>

        <section class="layout">
            <div class="search-panel">
                <label class="field-label" for="accountNo">Account No <span>*</span></label>
                <div class="search-row">
                    <div class="input-wrapper">
                        <input type="text" id="accountNo" class="input-text" placeholder="Enter loan account number (LOAN_ID)" autocomplete="off" />
                        <span class="icon-search"><i class="fa-solid fa-magnifying-glass" style="font-size:10px;"></i></span>
                    </div>
                    <button id="btnSearch" class="btn btn-primary" type="button">Search</button>
                </div>
                <p class="helper-text">Type a valid loan account number and click <strong>Search</strong> to fetch account information from the core system.</p>
            </div>

            <aside class="result-panel">
                <div id="placeholder" class="result-placeholder">
                    To proceed with mapping, please start by searching with a valid <strong>Account No</strong>.
                </div>

                <div id="errorCard" class="error-card">
                    <i class="fa-solid fa-circle-exclamation mr-2"></i>
                    <span id="errorMsg"></span>
                </div>

                <article id="resultCard" class="result-card" aria-live="polite">
                    <header class="result-header">
                        <div>
                            <div class="result-title">Account No: <span id="displayAccountId"></span></div>
                            <div class="result-meta">Account Name: <span id="displayAccountName"></span></div>
                        </div>
                        <div class="status-pill"><span class="status-dot"></span> Account Details</div>
                    </header>
                    <div class="result-grid">
                        <div class="result-label">Principal OS Amount</div>
                        <div class="result-value" id="displayPrincipal"></div>
                        <div class="result-label">ODI Amount</div>
                        <div class="result-value" id="displayOdi"></div>
                        <div class="result-label">CRC Amount</div>
                        <div class="result-value" id="displayCrc"></div>
                        <div class="result-label">Statement Date</div>
                        <div class="result-value" id="displayStmtDate"></div>
                        <div class="result-label">Statement Amount</div>
                        <div class="result-value" id="displayStmtAmount"></div>
                    </div>
                    <footer class="result-footer">
                        <button id="btnConfirm" class="btn-outline" type="button">Confirm &amp; Proceed Mapping</button>
                    </footer>
                </article>
            </aside>
        </section>

        <section class="note-bar" aria-label="Important note">
            <span class="note-dot" aria-hidden="true"></span>
            <div>
                <div class="note-label">Note</div>
                <div>Actual account values will be loaded from the existing loan database via API call. Once confirmed, you will be guided to the lawyer selection screen.</div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
<script>
    const LOAN_API = '{{ route("admin.oracle.loan-accounts") }}';
    const NEXT_URL = '{{ route("admin.account-lawyer.search-lawyer") }}';

    const accountInput = document.getElementById('accountNo');
    const btnSearch    = document.getElementById('btnSearch');
    const btnConfirm   = document.getElementById('btnConfirm');
    const placeholder  = document.getElementById('placeholder');
    const resultCard   = document.getElementById('resultCard');
    const errorCard    = document.getElementById('errorCard');

    let accountData = null;

    function fmtOMR(val) {
        const n = parseFloat(val) || 0;
        return 'OMR ' + n.toLocaleString('en-US', { minimumFractionDigits: 3, maximumFractionDigits: 3 });
    }

    btnSearch.addEventListener('click', async () => {
        const value = accountInput.value.trim();
        if (!value) { accountInput.focus(); return; }

        btnSearch.disabled = true;
        btnSearch.textContent = 'Searching...';
        placeholder.style.display = 'none';
        resultCard.style.display  = 'none';
        errorCard.style.display   = 'none';

        try {
            const res  = await fetch(LOAN_API + '?q=' + encodeURIComponent(value), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            });
            const json = await res.json();

            if (!json.success) {
                errorCard.style.display = 'block';
                document.getElementById('errorMsg').textContent = json.message || 'Account not found.';
                return;
            }

            accountData = json.data;
            document.getElementById('displayAccountId').textContent   = accountData.loan_id;
            document.getElementById('displayAccountName').textContent = accountData.customer_name;
            document.getElementById('displayPrincipal').textContent   = fmtOMR(accountData.principal_amount);
            document.getElementById('displayOdi').textContent         = fmtOMR(accountData.odi_amount);
            document.getElementById('displayCrc').textContent         = fmtOMR(accountData.crc_amount);
            document.getElementById('displayStmtDate').textContent    = accountData.statement_date || '—';
            document.getElementById('displayStmtAmount').textContent  = fmtOMR(accountData.statement_amount);
            resultCard.style.display = 'block';
        } catch (e) {
            errorCard.style.display = 'block';
            document.getElementById('errorMsg').textContent = 'Connection error. Please try again.';
        } finally {
            btnSearch.disabled = false;
            btnSearch.textContent = 'Search';
        }
    });

    // Allow Enter key to search
    accountInput.addEventListener('keydown', e => { if (e.key === 'Enter') btnSearch.click(); });

    btnConfirm.addEventListener('click', () => {
        if (!accountData) return;
        const url = new URL(NEXT_URL, window.location.href);
        url.searchParams.set('accountNo',    accountData.loan_id);
        url.searchParams.set('customerName', accountData.customer_name);
        url.searchParams.set('principal',    accountData.principal_amount);
        url.searchParams.set('odi',          accountData.odi_amount);
        url.searchParams.set('crc',          accountData.crc_amount);
        url.searchParams.set('stmtDate',     accountData.statement_date);
        url.searchParams.set('stmtAmount',   accountData.statement_amount);
        window.location.href = url.toString();
    });
</script>
@endpush