@section('title', 'UPI ID Management')
@section('upi-management', 'active')
@include('adminDashboard.layout.header')

<div class="main-content">
    <section class="section">
        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Bank Management</h4>
                        </div>
                        <form action="{{ url('/admin/upis/add') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Select Type</label>
                                            <select class="form-control" name="type" id="type" required>
                                                <option value="">Select</option>
                                                <option value="upi">UPI</option>
                                                <option value="qr">QR</option>
                                                <option value="bank">Bank</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- UPI ID Field -->
                                <div class="row" id="upi-section" style="display: none;">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Insert UPI ID</label>
                                            <input type="text" class="form-control" name="upi_id" id="upi_id">
                                        </div>
                                    </div>
                                </div>

                                <!-- QR Field -->
                                <div class="row" id="qr-section" style="display: none;">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Insert QR Code</label>
                                            <input type="file" class="form-control" name="qr" id="qr">
                                        </div>
                                    </div>
                                </div>

                                <!-- Bank Details Fields -->
                                <div class="row" id="bank-section" style="display: none;">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Bank Name</label>
                                            <input type="text" class="form-control" name="bank" id="bank">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Banking Name</label>
                                            <input type="text" class="form-control" name="banking_name"
                                                id="banking_name">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Account Number</label>
                                            <input type="number" class="form-control" name="account_number"
                                                id="account_number">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>IFSC Code</label>
                                            <input type="text" class="form-control" name="ifsc" id="ifsc">
                                        </div>
                                    </div>
                                </div>

                                <div class="card-footer p-0">
                                    <input type="submit" class="btn btn-primary mr-1" value="Add Now" />
                                </div>
                            </div>
                        </form>

                        <script>
                            document.getElementById('type').addEventListener('change', function() {
                                var type = this.value;
                                document.getElementById('upi-section').style.display = type === 'upi' ? 'block' : 'none';
                                document.getElementById('qr-section').style.display = type === 'qr' ? 'block' : 'none';
                                document.getElementById('bank-section').style.display = type === 'bank' ? 'block' : 'none';
                            });
                        </script>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-striped table-md">
                                    <tr>
                                        <th>ID</th>
                                        <th>Type</th>
                                        <th>UPI ID</th>
                                        <th>QR</th>
                                        <th>BANK</th>
                                        <th>Created At</th>
                                    </tr>
                                    <tbody id="recharge_table">
                                        @if (count($upis) > 0)
                                            @foreach ($upis as $upi)
                                                <tr>
                                                    <td>{{ $upi->id }}</td>

                                                    <!-- Display based on type -->
                                                    <td>{{ $upi->type }}</td>

                                                    <!-- Conditionally display UPI ID if type is 'upi' -->
                                                    <td>
                                                        @if ($upi->type === 'upi')
                                                            {{ $upi->upi_id }}
                                                        @else
                                                            N/A
                                                        @endif
                                                    </td>

                                                    <!-- Conditionally display QR as image if type is 'qr' -->
                                                    <td>
                                                        @if ($upi->type === 'qr')
                                                            <img src="{{ asset('assets/img/' . $upi->qr) }}"
                                                                alt="QR Code" width="50">
                                                        @else
                                                            N/A
                                                        @endif
                                                    </td>

                                                    <!-- Conditionally display Bank Details if type is 'bank' -->
                                                    <td>
                                                        @if ($upi->type === 'bank')
                                                            <div><strong>Bank Name:</strong> {{ $upi->bank }}
                                                            </div>
                                                            <div><strong>Banking Name:</strong> {{ $upi->banking_name }}
                                                            </div>
                                                            <div><strong>Account No:</strong> {{ $upi->account_number }}
                                                            </div>
                                                            <div><strong>IFSC:</strong> {{ $upi->ifsc }}</div>
                                                        @else
                                                            N/A
                                                        @endif
                                                    </td>

                                                    <!-- Created At -->
                                                    <td>{{ $upi->created_at }}</td>

                                                    <!-- Delete Button -->
                                                    <td>
                                                        <a href="{{ url('/admin/upis/delete/' . $upi->id) }}"
                                                            class="text-decoration-none">
                                                            <div class="badge badge-success">Delete</div>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="8" class="text-center">No Data Found.</td>
                                            </tr>
                                        @endif
                                    </tbody>

                                </table>
                            </div>
                        </div>
                        <div class="card-footer text-right" id="pagination">
                            <nav class="d-inline-block">
                                {{ $upis->links('adminDashboard.pagination') }}
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="formModal1"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="formModal1">Rejection Reason</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ url('/admin/recharge/disapprove') }}" method="post">
                        @csrf
                        <input type="hidden" name="reject_id" value="">
                        <div class="row">
                            <div class="col-12 flex">
                                <textarea name="reason" class="form-control" id="reason" required rows="10"></textarea>
                            </div>
                            <div class="col-12">
                                <input type="submit" value="Submit" class="btn btn-success mt-2">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
</div>

<script>
    function rejectRecharge(id) {
        $("input[name='reject_id']").val(id);
    }
</script>
@include('adminDashboard.layout.footer')
