@extends('quick-search.base')

@section('action-content')
<section class="content">
  <div class="box">
    <div class="box-header">
      <h3>Quick Account Search</h3>
      <hr>

      <div class="form-inline mb-3">
        <input type="text"
               id="accountNumber"
               class="form-control mr-2"
               placeholder="Enter account number (e.g. OBGCCU00123)"
               style="min-width:300px">

        <button class="btn btn-success" id="searchBtn">
          <i class="fa fa-search"></i> Search
        </button>
      </div>

      <div id="searchResult"></div>
    </div>
  </div>
</section>
@endsection

@section('scripts')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(function () {

    /* ================= SEARCH ================= */
function runSearch() {
    let acc = $("#accountNumber").val().trim();
    if (!acc) {
        Swal.fire("Error", "Enter an account number", "error");
        return;
    }

    $("#searchResult").html('<p class="text-muted">Searching...</p>');

    $.get("{{ route('quickSearch.search') }}", { account_number: acc })
        .done(function (res) {

            if (!res.success) {
                $("#searchResult").html(
                    `<div class="alert alert-danger">${res.message}</div>`
                );
                return;
            }

            let client = res.client;
            let accounts = res.accounts ?? [];
            let name = `${client.surname} ${client.first_name} ${client.other_names ?? ''}`;

            let accountsHtml = accounts.map(a => {
                // ✅ Use controller-provided status
                return `
                    <tr>
                        <td>${a.account_type.replaceAll('_',' ')}</td>
                        <td>₵${parseFloat(a.balance).toFixed(2)}</td>
                        <td>${a.account_status}</td>
                    </tr>
                `;
            }).join('');

            let html = `
            <div class="card shadow-sm mt-3 p-3">
                <h4>${name}</h4>
                <p><b>Client Account No:</b> ${client.account_number}</p>
                <hr>
                <h5 class="mt-3">Client Accounts</h5>

                <table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th>Account Type</th>
                            <th>Balance</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${accountsHtml || '<tr><td colspan="3">No accounts</td></tr>'}
                    </tbody>
                </table>

                <div class="btn-group mt-2">
                    <button class="btn btn-success" onclick="loadDeposits(${client.id})">Deposits</button>
                    <button class="btn btn-danger" onclick="loadWithdrawals(${client.id})">Withdrawals</button>
                    <button class="btn btn-primary" onclick="loadLoans(${client.id})">Loans</button>
                </div>

                <div id="depositArea" class="mt-3"></div>
                <div id="withdrawalArea" class="mt-3"></div>
                <div id="loanArea" class="mt-3"></div>
                <div id="loanScheduleArea" class="mt-3"></div>
            </div>
            `;

            $("#searchResult").html(html);
        })
        .fail(() => {
            Swal.fire("Error", "Server error occurred", "error");
        });
}

$("#searchBtn").on("click", runSearch);
$("#accountNumber").on("keypress", e => {
    if (e.which === 13) runSearch();
});

   /* ================= DEPOSITS ================= */
    /*window.loadDeposits = function(clientId) {
        $("#depositArea").html("Loading deposits...");
        $("#withdrawalArea, #loanArea, #loanScheduleArea").html("");

        $.get(`/quick-search/deposits/${clientId}`, function(res){
            if(!res.success || res.deposits.length === 0){
                $("#depositArea").html(`<div class="alert alert-warning">No deposits found</div>`);
                return;
            }

            let rows = res.deposits.map(d => {

    let badgeColor = 'secondary';

    if (d.display_status === 'Active') badgeColor = 'success';
    if (d.display_status === 'Matured') badgeColor = 'warning';
    if (d.display_status === 'Payout') badgeColor = 'primary';

    let principal = parseFloat(d.principal ?? 0);
    let interest  = parseFloat(d.interest_amount ?? 0);
    let maturity  = parseFloat(d.maturity_amount ?? 0);

    return `
        <tr class="${d.display_status === 'Payout' ? 'bg-light' : ''}">
            <td>${d.client_account?.account_type.replaceAll('_',' ') ?? ''}</td>
            <td>₵${principal.toFixed(2)}</td>
            <td>₵${interest.toFixed(2)}</td>
            <td>₵${maturity.toFixed(2)}</td>
            <td>${new Date(d.maturity_date).toLocaleDateString()}</td>
            <td>
                <span class="badge badge-${badgeColor}">
                    ${d.display_status}
                </span>
            </td>
            <td>${d.fd_number ?? '-'}</td>
        </tr>
    `;
}).join('');

            $("#depositArea").html(`
                <h5>Deposit History</h5>
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr>
    <th>Account</th>
        <th>Principal</th>
        <th>Interest</th>
        <th>Maturity Amount</th>
        <th>Maturity Date</th>
        <th>Status</th>
        <th>Payout Ref</th>
</tr>
                    </thead>
                    <tbody>${rows}</tbody>
                </table>
            `);
        });
    }*/


    /* ================= DEPOSITS ================= */
    window.loadDeposits = function(clientId) {
        $("#depositArea").html("Loading deposits...");
        $("#withdrawalArea, #loanArea, #loanScheduleArea").html("");

        $.get(`/quick-search/deposits/${clientId}`, function(res){
            if(!res.success || res.deposits.length === 0){
                $("#depositArea").html(`<div class="alert alert-warning">No deposits found</div>`);
                return;
            }

            let rows = res.deposits.map(d => `
                <tr>
                    <td>${d.client_account?.account_type.replaceAll('_',' ') ?? ''}</td>
                    <td>₵${parseFloat(d.amount).toFixed(2)}</td>
                    <td>${new Date(d.created_at).toLocaleDateString()}</td>
                    <td>${d.recorded_by ?? 'N/A'}</td>
                </tr>
            `).join('');

            $("#depositArea").html(`
                <h5>Deposit History</h5>
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr><th>Account</th><th>Amount</th><th>Date</th><th>By</th></tr>
                    </thead>
                    <tbody>${rows}</tbody>
                </table>
            `);
        });
    }

    /* ================= WITHDRAWALS ================= */
    window.loadWithdrawals = function(clientId) {
        $("#withdrawalArea").html("Loading withdrawals...");
        $("#depositArea, #loanArea, #loanScheduleArea").html("");

        $.get(`/quick-search/withdrawals/${clientId}`, function(res){
            if(!res.success || res.withdrawals.length === 0){
                $("#withdrawalArea").html(`<div class="alert alert-warning">No withdrawals found</div>`);
                return;
            }

            let rows = res.withdrawals.map(w => `
                <tr>
                    <td>₵${parseFloat(w.amount).toFixed(2)}</td>
                    <td>${w.reference ?? ''}</td>
                    <td>${new Date(w.created_at).toLocaleDateString()}</td>
                    <td>${w.recorded_by ?? 'N/A'}</td>
                </tr>
            `).join('');

            $("#withdrawalArea").html(`
                <h5>Withdrawal History</h5>
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr><th>Amount</th><th>Ref</th><th>Date</th><th>By</th></tr>
                    </thead>
                    <tbody>${rows}</tbody>
                </table>
            `);
        });
    }

    /* ================= LOANS ================= */
    window.loadLoans = function(clientId){
        $("#loanArea").html("Loading loans...");
        $("#depositArea, #withdrawalArea, #loanScheduleArea").html("");

        $.get(`/quick-search/loans/${clientId}`, function(res){
            if(!res.success || res.loans.length === 0){
                $("#loanArea").html(`<div class="alert alert-warning">No loans found</div>`);
                return;
            }

            let rows = res.loans.map(l => `
                <tr>
                    <td>₵${parseFloat(l.amount).toFixed(2)}</td>
                    <td>₵${parseFloat(l.balance).toFixed(2)}</td>
                    <td>${l.status}</td>
                    <td>
                        <button class="btn btn-xs btn-info"
                                onclick="loadLoanSchedule(${l.id})">
                            Schedule
                        </button>
                    </td>
                </tr>
            `).join('');

            $("#loanArea").html(`
                <h5>Loans</h5>
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr><th>Amount</th><th>Balance</th><th>Status</th><th></th></tr>
                    </thead>
                    <tbody>${rows}</tbody>
                </table>
            `);
        });
    }

    window.loadLoanSchedule = function(loanId){
        $("#loanScheduleArea").html("Loading schedule...");

        $.get(`/quick-search/loans/${loanId}/schedule`, function(res){
            let rows = res.schedule.map(r => `
                <tr>
                    <td>${r.installment_number}</td>
                    <td>₵${parseFloat(r.total_payment).toFixed(2)}</td>
                    <td>${r.repayment_date ?? ''}</td>
                    <td>${r.status}</td>
                </tr>
            `).join('');

            $("#loanScheduleArea").html(`
                <h5>Loan Repayment Schedule</h5>
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr><th>#</th><th>Amount</th><th>Date</th><th>Status</th></tr>
                    </thead>
                    <tbody>${rows}</tbody>
                </table>
            `);
        });
    }

});
</script>
@endsection