@extends('layouts/contentNavbarLayout')

@section('title', 'Load Money Top-up')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-primary text-white">
                Load Money Top-up
            </div>
            <div class="card-body">
                <form id="moneyTransferForm" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">

                        <div class="col-md-6">
                            <label for="amount" class="form-label">Amount</label>
                            <input type="number" class="form-control" id="amount" name="amount"
                                placeholder="Enter Amount">
                        </div>

                        <div class="col-md-6">
                            <label for="account_holder_name" class="form-label">Payer name</label>
                            <input type="text" class="form-control" id="payer_name" name="payer_name"
                                placeholder="Enter Name">
                        </div>

                        <div class="col-md-6">
                            <label for="transfer_mode" class="form-label">Transfer Mode</label>
                            <select class="form-select" id="transfer_mode" name="transfer_mode">
                                <option value="PG">PG</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="transfer_email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="transfer_email" name="transfer_email"
                                placeholder="Enter Email">
                        </div>

                        <div class="col-md-6">
                            <label for="transfer_phone_number" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" id="transfer_phone_number"
                                name="transfer_phone_number" placeholder="Enter Phone Number" maxlength="10">
                        </div>

                        <div class="col-12 d-flex justify-content-end mt-3">
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="bi bi-send"></i> Link Generate
                            </button>
                        </div>
                    </div>
                </form>
                {{-- NEW: This div will be shown on successful link generation --}}
                <div id="paymentLinkContainer" class="p-2 border bg-light rounded-3 mt-3">
                    <p id="responseMessage" class="fw-bold text-success mb-3 fs-6"></p>
                    <div class="d-flex align-items-center">
                        <a href="#" id="paymentLinkAnchor" class="text-primary fw-semibold text-truncate me-3"
                            target="_blank" title="Open link in new tab">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            $('#moneyTransferForm').on('submit', function(e) {
                e.preventDefault();

                const form = $(this)[0];
                const formData = new FormData(form);
                const submitBtn = $('#submitBtn');

                submitBtn.prop('disabled', true).html('Submitting...');

                $.ajax({
                    url: "{{ route('payin.submit.route') }}",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        $('#moneyTransferForm')[0].reset();
                        if (response.success && response.data && response.data.payment_url) {
                            const paymentUrl = response.data.payment_url;
                            const responsemsg = response.message;
                            $('#responseMessage').text(responsemsg);
                            $('#paymentLinkAnchor').text(paymentUrl);
                            $('#paymentLinkAnchor').attr('href', paymentUrl);
                        } else {
                            const paymentUrl = '';
                            const responsemsg =
                                'LINK NOT GENERATED PLEASE TRY AGAIN AFTER SOMETIME';
                            $('#responseMessage').text(responsemsg);
                            $('#paymentLinkAnchor').attr('href', paymentUrl);
                        }
                    },
                    error: function(xhr) {
                        let errorMsg = 'Something went wrong!';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMsg
                        });
                    },
                    complete: function() {
                        $('#moneyTransferForm')[0].reset();
                        submitBtn.prop('disabled', false).html(
                            '<i class="bi bi-send"></i> Submit');
                    }
                });
            });
        });
    </script>
@endsection