@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/pages/page-profile.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Thrift Fund</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url($alias.'/thrift-funds') }}">Thrift Fund</a></li>
                    <li class="breadcrumb-item active">View</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <a href="{{ url($alias.'/thrift-funds') }}" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i> Back</a>
        </div>
    </div>
@endpush

@section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <div class="col-lg-12 col-md-12 col-12">
            <div class="card invoice-preview-card mb-0">
                <div class="card-body invoice-padding pb-0">
                    <div class="d-flex flex-md-row flex-column invoice-spacing mt-1 mb-1 justify-content-between">
                        <div class="logo-wrapper d-flex align-items-center">
                            <h3 class="text-primary invoice-logo mb-0">Thrift Fund</h3>
                        </div>
                        <span class="fw-bold badge rounded-pill badge-light-{{ $fund->status == 'Active' ? 'success' : 'secondary' }} align-self-center">{{ $fund->status }}</span>
                    </div>
                    <hr class="invoice-spacing" />
                </div>

                <div class="card-body invoice-padding pt-0">
                    <div class="row invoice-spacing mb-3">
                        <div class="col-xl-4 col-lg-4 col-md-4 col-12">
                            <table>
                                <tbody>
                                    <tr><td class="pe-1 pt-2">Employee :</td><td class="pt-2">{{ optional($fund->employee)->name }} {{ optional($fund->employee)->employee_code ? '(' . $fund->employee->employee_code . ')' : '' }}</td></tr>
                                    <tr><td class="pe-1 pt-2">Opening Balance :</td><td class="pt-2">{{ $fund->opening_balance }}</td></tr>
                                    <tr><td class="pe-1 pt-2">Enrolled Date :</td><td class="pt-2">{{ $fund->enrolled_date }}</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-4 col-12">
                            <table>
                                <tbody>
                                    <tr><td class="pe-1 pt-2">Closing Balance :</td><td class="pt-2">{{ $fund->closing_balance }}</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-4 col-12">
                            <table>
                                <tbody>
                                    <tr><td class="pe-1 pt-2">Created Date :</td><td class="pt-2">{{ $fund->created_at }}</td></tr>
                                    <tr><td class="pe-1 pt-2">Closed Date :</td><td class="pt-2">{{ $fund->closed_date ?? '-' }}</td></tr>
                                    <tr><td class="pe-1 pt-2">Closure Reason :</td><td class="pt-2">{{ $fund->closure_reason ?? '-' }}</td></tr>
                                    <tr><td class="pe-1 pt-2">Remarks :</td><td class="pt-2">{{ $fund->remarks ?? '-' }}</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if($fund->status == 'Active')
                    <div class="row invoice-spacing mb-3">
                        <div class="col-12">
                            <a href="{{ url($alias.'/cooperative-thrift-settlements/create') }}?employee_id={{ $fund->employee_id }}&from=thrift" class="btn btn-outline-dark">Loan + Thrift Settlement</a>
                        </div>
                    </div>
                    <div class="row invoice-spacing mb-3">
                        <div class="col-md-10">
                            <form id="manual-txn-form">
                                {{ csrf_field() }}
                                <input type="hidden" name="id" value="{{ $fund->id }}">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label">Current Balance</label>
                                        <input type="text" class="form-control" value="{{ $fund->closing_balance }}" readonly>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Type <span class="text-danger">*</span></label>
                                        <select class="form-control" id="manual-txn-type">
                                            <option value="debit">Debit (Withdraw)</option>
                                            <option value="credit">Credit (Deposit)</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Amount <span class="text-danger">*</span></label>
                                        <input type="number" step="0.01" min="0.01" class="form-control" id="manual-txn-amount" name="amount">
                                        <span class="text-danger" id="err-amount"></span>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Date</label>
                                        <input type="date" class="form-control" id="manual-txn-date">
                                        <span class="text-danger" id="err-withdrawal_date"></span>
                                        <span class="text-danger" id="err-credit_date"></span>
                                    </div>
                                    
                                    <div class="col-md-10">
                                        <label class="form-label">Remarks</label>
                                        <textarea class="form-control" name="remarks"></textarea>
                                        <span class="text-danger" id="err-remarks"></span>
                                    </div>
                                    <div class="col-md-2 mt-1 d-flex align-items-end">
                                        <button type="button" id="manual-txn-btn" class="btn btn-danger w-100">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @endif

                    <h5 class="mb-1">Thrift Fund Transaction Ledger</h5>
                    <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>S.No.</th>
                                <th>Type</th>
                                <th>Month/Year</th>
                                <th>Opening Balance</th>
                                <th>Deposit/Withdraw Amount</th>
                                <th>Interest (this month)</th>
                                <th>Total Deposit</th>
                                <th>Total Interest</th>
                                <th>Principal Balance</th>
                                <th>Closing Balance</th>
                                <th>Status</th>
                                <th>Remarks</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($transactions as $txn)
                            <tr>
                                <td>{{ $transactions->firstItem() + $loop->index }}</td>
                                <td>{{ $txn->transaction_type }}</td>
                                <td>{{ $txn->month ? date('M', mktime(0,0,0,$txn->month,1)) . ' ' . $txn->year : '-' }}</td>
                                <td>{{ $txn->opening_balance }}</td>
                                <td>{{ $txn->deposit_amount }}</td>
                                <td>{{ $txn->interest_amount }}</td>
                                <td>{{ $txn->total_deposit }}</td>
                                <td>{{ $txn->total_interest }}</td>
                                <td>{{ $txn->principal_balance }}</td>
                                <td>{{ $txn->closing_balance }}</td>
                                <td><span class="fw-bold badge rounded-pill badge-light-{{ $txn->status == 'Full' ? 'success' : 'secondary' }}">{{ $txn->status }}</span></td>
                                <td><span class="d-inline-block text-truncate view-remarks-btn" style="max-width: 200px; cursor: pointer;" role="button" data-remarks="{{ $txn->remarks }}">{{ $txn->remarks }}</span></td>
                                <td>{{ $txn->transaction_date }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="13" class="text-center">No transactions yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                    </div>
                    {{ $transactions->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('footer-script')
<script>
var manualTxnUrls = {
    debit: "{!! route('thriftfund.withdraw', ['alias' => $alias]) !!}",
    credit: "{!! route('thriftfund.credit', ['alias' => $alias]) !!}"
};
var manualTxnDateField = {
    debit: 'withdrawal_date',
    credit: 'credit_date'
};

function submitManualTransaction(type, amount) {
    var data = {
        _token: "{{ csrf_token() }}",
        id: {{ $fund->id }},
        amount: amount,
        remarks: $('#manual-txn-form [name=remarks]').val()
    };
    data[manualTxnDateField[type]] = $('#manual-txn-date').val();

    $.ajax({
        url: manualTxnUrls[type],
        type: 'POST',
        data: data,
        success: function (res) {
            if (res.status === 'fail') {
                Swal.fire({ title: 'Error', text: res.message || 'Unable to record transaction', icon: 'error', confirmButtonColor: '#DD6B55' });
                return;
            }

            Swal.fire({ title: 'Success', text: res.message || 'Transaction recorded successfully', icon: 'success', confirmButtonColor: '#00c292' }).then(function () {
                window.location.reload();
            });
        },
        error: function (xhr) {
            if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                $.each(xhr.responseJSON.errors, function (field, messages) {
                    $('#err-' + field).text(messages[0]);
                });
            } else {
                Swal.fire({ title: 'Error', text: (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Unable to record transaction', icon: 'error', confirmButtonColor: '#DD6B55' });
            }
        }
    });
}

$(function () {
    $('.view-remarks-btn').on('click', function () {
        Swal.fire({
            title: 'Remarks',
            text: $(this).data('remarks') || '-',
            confirmButtonColor: '#00c292'
        });
    });

    $('#manual-txn-btn').on('click', function () {
        $('.text-danger').text('');

        var type = $('#manual-txn-type').val();
        var amount = parseFloat($('#manual-txn-amount').val());

        if (!amount || amount <= 0) {
            $('#err-amount').text('Please enter a valid amount.');
            return;
        }

        var actionLabel = type === 'credit' ? 'credit' : 'withdraw';

        Swal.fire({
            title: 'Are you sure?',
            text: (type === 'credit' ? 'Credit' : 'Withdraw') + ' ₹' + amount.toFixed(2) + (type === 'credit' ? ' to' : ' from') + ' this Thrift Fund?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#00c292',
            confirmButtonText: 'Yes, ' + actionLabel + ' it!',
            cancelButtonText: 'Cancel'
        }).then(function (result) {
            if (result.isConfirmed) {
                submitManualTransaction(type, amount);
            }
        });
    });
});
</script>
@endpush