@extends('fixed-deposits.base')

@section('action-content')
<section class="content">

<div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-user"></i> Select Client
            </h3>
        </div>

        <div class="box-body">
            <input type="hidden" id="client_id">

            <input type="text" id="client-search"
                   class="form-control"
                   placeholder="Start typing client name...">

            <ul class="list-group" id="client-results"
                style="position:absolute; z-index:1000; width:95%; display:none;">
            </ul>
        </div>
    </div>

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Fixed Deposit Deposits</h3>
        </div>

        <div class="box-body table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Client</th>
                        <th>Account ID</th>
                        <th>Account Type</th>
                        <th>Amount</th>
                        <th>Deposit Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="deposit-table">
                    <tr>
                        <td colspan="8" class="text-center">
                            Select a client to load deposits
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</section>
@endsection

@section('scripts')
<script>
$(document).ready(function(){

    // 🔍 AUTOCOMPLETE SEARCH
    $('#client-search').on('keyup', function(){
        let query = $(this).val();

        if(query.length < 2){
            $('#client-results').hide();
            return;
        }

        $.get("{{ route('fixed-deposits.search-client') }}", { q: query }, function(data){
            let list = '';
            data.forEach(client => {
                list += `
                    <li class="list-group-item client-item"
                        data-id="${client.id}">
                        ${client.surname} ${client.first_name}
                    </li>
                `;
            });

            $('#client-results').html(list).show();
        });
    });

    // 👤 CLIENT SELECTED
    $(document).on('click', '.client-item', function(){
        let clientId = $(this).data('id');
        let name = $(this).text();

        $('#client_id').val(clientId);
        $('#client-search').val(name);
        $('#client-results').hide();

        loadDeposits(clientId);
    });

    // 💰 LOAD DEPOSITS
    function loadDeposits(clientId){
    $.ajax({
        url: "{{ route('fixed-deposits.create') }}",
        type: "GET",
        data: { client_id: clientId },
        success: function(data){
            let rows = '';

            if(data.length === 0){
                rows = `
                    <tr>
                        <td colspan="8" class="text-center">
                            No fixed deposit deposits found
                        </td>
                    </tr>
                `;
            } else {
                data.forEach((d, i) => {
                    let actionBtn = '';

                    if(d.fixed_deposit){
                        let fd = d.fixed_deposit;

                        if(fd.status === 'matured' && !fd.payout_done){
                            // FD matured but not paid → show Payout button
                            actionBtn = `
                                <form method="POST" action="/fixed-deposits/${fd.id}/payout" style="display:inline;">
                                    @csrf
                                    <button class="btn btn-primary btn-sm" 
                                        onclick="return confirm('Credit matured amount to client savings account?')">
                                        Payout FD
                                    </button>
                                </form>
                            `;
                        } else if(fd.payout_done){
                            // FD already paid out
                            actionBtn = `<span class="badge bg-success">Payout Done</span>`;
                        } else {
                            // FD active → show FD created badge
                            actionBtn = `<span class="badge bg-info">FD Created</span>`;
                        }
                    } else {
                        // No FD yet → show Create FD button
                        actionBtn = `
                            <a href="/fixed-deposits/process/${d.id}" class="btn btn-success btn-sm">
                                Create FD
                            </a>
                        `;
                    }

                    rows += `
                        <tr>
                            <td>${i+1}</td>
                            <td>${d.client.surname} ${d.client.first_name}</td>
                            <td>${d.client.account_number}</td>
                            <td>${d.client_account.account_type}</td>
                            <td>${Number(d.amount).toFixed(2)}</td>
                            <td>${new Date(d.created_at).toLocaleDateString()}</td>
                            <td>${d.status}</td>
                            <td>${actionBtn}</td>
                        </tr>
                    `;
                });
            }

            $('#deposit-table').html(rows);
        }
    });
}
});
</script>
@endsection