@extends('layouts.master')
@section('title', 'Fund Transfer List')
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Fund Transfer List</h3>
                        <a href="#" id="add_fund" class="btn btn-primary btn-sm" data-toggle="modal"
                            data-target="#fundTransferModal">
                            Add New
                        </a>

                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Agency</th>
                                    <th>BDT</th>
                                    <th>SAR</th>
                                    <th>Date</th>
                                    <th>Proof</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($fundTransfers->isEmpty())
                                    <tr>
                                        <td colspan="8" class="text-center">No fund transfers found.</td>
                                    </tr>
                                @else
                                    @foreach ($fundTransfers as $fundTransfer)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $fundTransfer->agency->name }}</td>
                                            <td>
                                                {{ $fundTransfer->bdt_amount }}
                                            </td>
                                            <td>
                                                {{ $fundTransfer->sar_amount }}
                                                </br>1 SAR rate: {{ $fundTransfer->currency_rate }}
                                            </td>
                                            <td>{{ $fundTransfer->transferred_date }}</td>
                                            <td>
                                                <a href="{{ asset('storage/' . $fundTransfer->proof) }}" target="_blank"
                                                    class="btn btn-success btn-sm">View Proof</a>
                                            </td>
                                            <td>
                                                @if ($fundTransfer->status == 0)
                                                    <span class="btn btn-warning ">Pending</span>
                                                @elseif ($fundTransfer->status == 1)
                                                    <span class="btn btn-success">Approved</span>
                                                @else
                                                    <span class="btn btn-danger">Rejected</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('fund-transfer.show', $fundTransfer->id) }}"
                                                    class="btn btn-primary btn-sm view-fund">
                                                    View
                                                </a>

                                                @php
                                                    $showEdit =
                                                        $fundTransfer->status == 0 ||
                                                        ($fundTransfer->status == 1 &&
                                                            \Carbon\Carbon::parse($fundTransfer->updated_at)
                                                                ->addDays(7)
                                                                ->isFuture());
                                                @endphp

                                                @if ($showEdit)
                                                    <a href="{{ route('fund-transfer.edit', $fundTransfer->id) }}"
                                                        class="btn btn-info btn-sm">Edit</a>
                                                @endif


                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>SL</th>
                                    <th>Agency</th>
                                    <th>BDT</th>
                                    <th>SAR</th>
                                    <th>Date</th>
                                    <th>Proof</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>

    <!-- Add Fund Transfer Modal -->
    <div class="modal fade" id="fundTransferModal" tabindex="-1" aria-labelledby="fundTransferModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <form action="{{ route('fund-transfer.store') }}" method="POST" enctype="multipart/form-data"
                class="needs-validation" novalidate>
                @csrf
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="fundTransferModalLabel">Add Fund Transfer</h5>
                        <button type="button" class="btn-close text-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <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 }}">{{ $agency->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- BDT Amount -->
                            <div class="col-md-6">
                                <label for="bdt_amount" class="form-label">
                                    BDT Amount <span id="bdt_balance_display" class="text-muted">(Balance: --)</span>
                                    <span class="text-danger">*</span>
                                </label>

                                <input type="number" step="0.01" name="bdt_amount" id="bdt_amount" class="form-control"
                                    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" 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"
                                    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"
                                    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"
                                    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" required>
                            </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"
                                    placeholder="Enter any additional information..."></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">Pending</option>
                                    <option value="1">Approved</option>
                                    <option value="2">Rejected</option>
                                </select>
                            </div>

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

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-check-circle"></i> Submit
                        </button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times"></i> Cancel
                        </button>
                    </div>
                </div>
            </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 = sar.toFixed(2);
        }

        $(document).ready(function() {
            // On agency change, fetch the agency balance (bdt_acct)
            $('#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);

                        // ✅ Update balance in label
                        $('#bdt_balance_display').text(
                        `(Balance: ${agencyBalance.toFixed(2)} BDT)`);

                        // Optional: reset BDT input if current value exceeds new agency balance
                        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;

                        // Reset balance display on error
                        $('#bdt_balance_display').text(`(Balance: --)`);

                        $('#bdt_error')
                            .text('Failed to fetch agency balance.')
                            .show();
                        $('#bdt_amount').addClass('is-invalid');
                    }
                });
            });

            // On BDT input change, validate against agency balance
            $('#bdt_amount').on('input', function() {
                const enteredAmount = parseFloat($(this).val()) || 0;
                const errorDiv = $('#bdt_error');

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

            // On rate input, also recalculate SAR
            $('#currency_rate').on('input', function() {
                calculateSARAmount();
            });
        });
    </script>




    <script>
        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 = sar.toFixed(2);
        }

        // Bind events
        document.addEventListener('DOMContentLoaded', function() {
            const bdtInput = document.getElementById('bdt_amount');
            const rateInput = document.getElementById('currency_rate');

            if (bdtInput && rateInput) {
                bdtInput.addEventListener('input', calculateSARAmount);
                rateInput.addEventListener('input', calculateSARAmount);
            }
        });
    </script>



    <script>
        $(function() {
            $("#example1").DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
            $('#example2').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        });
    </script>

@endsection