@extends('layouts.master')
@section('title', 'Edit Fund Transfer')
@section('content')

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Edit Fund Transfer</h5>
            <a href="{{ route('fund-transfer.list') }}" class="btn btn-danger btn-sm">Back to List</a>
        </div>

        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('fund-transfer.update', $fundTransfer->id) }}" method="POST"
                enctype="multipart/form-data" class="needs-validation" novalidate>
                @csrf
                @method('PUT')

                <div class="row g-3">

                    <!-- Agency -->
                    <div class="col-md-6">
                        <label for="agency_id" class="form-label">Select Agency <span class="text-danger">*</span></label>
                        <select name="agency_id" id="agency_id" class="form-select" required>
                            <option value="">-- Select Agency --</option>
                            @foreach ($agencies as $agency)
                                <option value="{{ $agency->id }}"
                                    {{ $fundTransfer->agency_id == $agency->id ? 'selected' : '' }}>
                                    {{ $agency->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- BDT Amount -->
                    <div class="col-md-6">
                        <label for="bdt_amount" class="form-label">BDT Amount <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" name="bdt_amount" id="bdt_amount" class="form-control"
                            value="{{ $fundTransfer->bdt_amount }}" required>
                        <div id="bdt_error" class="text-danger small mt-1" style="display: none;"></div>
                    </div>

                    <!-- Currency Rate -->
                    <div class="col-md-6">
                        <label for="currency_rate" class="form-label">Currency Rate (SAR to BDT) <span
                                class="text-danger">*</span></label>
                        <input type="number" step="0.001" name="currency_rate" id="currency_rate" class="form-control"
                            value="{{ $fundTransfer->currency_rate }}" required>
                    </div>

                    <!-- SAR Amount -->
                    <div class="col-md-6">
                        <label for="sar_amount" class="form-label">SAR Amount <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" name="sar_amount" id="sar_amount" class="form-control"
                            value="{{ $fundTransfer->sar_amount }}" readonly required>
                    </div>

                    <!-- Transaction ID -->
                    <div class="col-md-6">
                        <label for="transaction_id" class="form-label">Transaction ID <span
                                class="text-danger">*</span></label>
                        <input type="text" name="transaction_id" id="transaction_id" class="form-control"
                            value="{{ $fundTransfer->transaction_id }}" required>
                    </div>

                    <!-- Transferred Date -->
                    <div class="col-md-6">
                        <label for="transferred_date" class="form-label">Transferred Date <span
                                class="text-danger">*</span></label>
                        <input type="date" name="transferred_date" id="transferred_date" class="form-control"
                            value="{{ $fundTransfer->transferred_date }}" required>
                    </div>

                    <!-- Proof File -->
                    <div class="col-md-6">
                        <label for="proof" class="form-label">Upload Proof<span class="text-danger">*</span></label>
                        <input type="file" name="proof" id="proof" class="form-control">
                        @if ($fundTransfer->proof)
                            <small class="text-muted">Current: <a href="{{ asset('storage/' . $fundTransfer->proof) }}"
                                    target="_blank">View Proof</a></small>
                        @endif
                    </div>

                    <!-- Additional Note -->
                    <div class="col-md-6">
                        <label for="additional" class="form-label">Additional Note</label>
                        <textarea name="additional" id="additional" class="form-control" rows="2">{{ $fundTransfer->additional }}</textarea>
                    </div>

                    <!-- Status -->
                    <div class="col-md-6">
                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                        <select name="status" id="status" class="form-select" required>
                            <option value="0" {{ $fundTransfer->status == 0 ? 'selected' : '' }}>Pending</option>
                            <option value="1" {{ $fundTransfer->status == 1 ? 'selected' : '' }}>Approved</option>
                            <option value="2" {{ $fundTransfer->status == 2 ? 'selected' : '' }}>Rejected</option>
                        </select>
                    </div>

                </div> <!-- /.row -->

                <button type="submit" class="btn btn-primary mt-4">
                    <i class="fas fa-save"></i> Update
                </button>
            </form>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        let agencyBalance = 0;

        function calculateSARAmount() {
            let bdt = parseFloat(document.getElementById('bdt_amount').value) || 0;
            let rate = parseFloat(document.getElementById('currency_rate').value) || 0;
            let sar = bdt / rate;

            document.getElementById('sar_amount').value = isFinite(sar) ? sar.toFixed(2) : '';
        }

        $(document).ready(function() {
            $('#agency_id').on('change', function() {
                const agencyId = $(this).val();

                if (!agencyId) return;

                $.ajax({
                    url: `/get-agency-balance/${agencyId}`,
                    type: 'GET',
                    success: function(response) {
                        agencyBalance = parseFloat(response.bdt_acct);

                        const currentAmount = parseFloat($('#bdt_amount').val()) || 0;
                        if (currentAmount > agencyBalance) {
                            $('#bdt_amount').val('');
                            $('#sar_amount').val('');
                            $('#bdt_error')
                                .text(`BDT amount cannot exceed ${agencyBalance}`)
                                .show();
                            $('#bdt_amount').addClass('is-invalid');
                        } else {
                            $('#bdt_error').hide();
                            $('#bdt_amount').removeClass('is-invalid');
                        }
                    },
                    error: function() {
                        agencyBalance = 0;
                        $('#bdt_error')
                            .text('Failed to fetch agency balance.')
                            .show();
                        $('#bdt_amount').addClass('is-invalid');
                    }
                });
            });

            $('#bdt_amount').on('input', function() {
                const enteredAmount = parseFloat($(this).val()) || 0;

                if (enteredAmount > agencyBalance) {
                    $('#bdt_error')
                        .text(`BDT amount cannot exceed ${agencyBalance}`)
                        .show();
                    $(this).addClass('is-invalid');
                    $('#sar_amount').val('');
                } else {
                    $('#bdt_error').hide();
                    $(this).removeClass('is-invalid');
                    calculateSARAmount();
                }
            });

            $('#currency_rate').on('input', function() {
                calculateSARAmount();
            });

            // Initial calculation on load
            calculateSARAmount();
        });
    </script>
@endsection