@extends('Admin.layout')

<style>
    .reg-confirm-modal {
        border-radius: 10px;
        border: 1px solid #660066;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }

    .reg-box {
        border: 2px solid #a24ccf;
        border-radius: 4px;
        padding: 14px 14px 12px 14px;
        position: relative;
    }

    .reg-text {
        font-size: 11px;
        line-height: 1.5;
    }

    .reg-label {
        font-weight: 600;
    }

    .reg-value {
        font-weight: 600;
    }
</style>

@section('content')
    <h5>
        <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('investment_history') }}">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
        </button>  Edit Investment
    </h5>

    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            <h6 class="fw-semibold mb-4">Update Investment Details</h6>
            
            <form id="editInvestmentForm" action="#" method="POST">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">User ID</label>
                        <input type="text" name="user_id" id="user_id" class="form-control" 
                               value="" placeholder="Enter User ID" required>
                    </div>

                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Amount</label>
                        <input type="number" name="amount" id="amount" class="form-control" 
                               value="" placeholder="Enter Amount" required>
                    </div>

                    <div class="col-lg-4 mb-3">
                        <label class="form-label">Profit Percentage (%)</label>
                        <input type="number" step="0.01" name="percentage" id="percentage" class="form-control" 
                               value="" placeholder="e.g. 5">
                    </div>

                    <div class="col-lg-4 mb-3">
                        <label class="form-label">Remaining Days</label>
                        <input type="number" name="remaining_days" id="remaining_days" class="form-control" 
                               value="" placeholder="e.g. 30">
                    </div>

                    <div class="col-lg-4 mb-3">
                        <label class="form-label">Daily Amount (Calculated)</label>
                        <input type="text" id="daily_amount_display" class="form-control bg-light" 
                               value="" readonly>
                    </div>

                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Remark</label>
                        <textarea name="remark" id="remark" class="form-control" rows="3" placeholder="Enter Remark"></textarea>
                    </div>

                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <a href="{{ route('investment_history') }}" class="btn btn-label-secondary">Cancel</a>
                        <button type="button" class="btn btn-primary" onclick="showEditConfirmation()">
                            Update Investment
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="confirmEditModal" tabindex="-1">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content reg-confirm-modal p-4">
                <h6 class="text-center fw-semibold mb-4">Update Confirmation</h6>
                <h6>Verify Changes</h6>
                <div class="reg-box mb-3">
                    <div class="row g-3 reg-text">
                        <div class="col-md-6">
                            <span class="reg-label">User ID</span>: 
                            <span class="reg-value" id="m_user_id"></span>
                        </div>
                        <div class="col-md-6">
                            <span class="reg-label">Amount</span>: 
                            <span class="reg-value" id="m_amount"></span>
                        </div>
                        <div class="col-md-6">
                            <span class="reg-label">Daily Amount</span>: 
                            <span class="reg-value" id="m_daily"></span>
                        </div>
                        <div class="col-md-6">
                            <span class="reg-label">Days Left</span>: 
                            <span class="reg-value" id="m_days"></span>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-center gap-3">
                    <button type="button" class="btn btn-label-secondary px-5" data-bs-dismiss="modal">Back</button>
                    <button type="button" id="confirmUpdateBtn" class="btn btn-primary px-5">Confirm Update</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Function to calculate daily amount
            function calculateDaily() {
                let amt = parseFloat($('#amount').val()) || 0;
                let perc = parseFloat($('#percentage').val()) || 0;
                let daily = (amt * (perc / 100)).toFixed(2);
                $('#daily_amount_display').val(daily);
            }

            // Listen for changes
            $('#amount, #percentage').on('input', calculateDaily);

            // Modal trigger logic
            window.showEditConfirmation = function() {
                $('#m_user_id').text($('#user_id').val());
                $('#m_amount').text($('#amount').val());
                $('#m_daily').text($('#daily_amount_display').val());
                $('#m_days').text($('#remaining_days').val());
                
                let myModal = new bootstrap.Modal(document.getElementById('confirmEditModal'));
                myModal.show();
            };

            // Submit form on confirm
            $('#confirmUpdateBtn').click(function() {
                $('#editInvestmentForm').submit();
            });
        });
    </script>
@endsection