@extends('layouts.admin')

@section('styles')

@endsection

@section('content')
    <div class="container-fluid">

        <style>
            .table thead tr td {
                padding: 0px 0px 15.2px 0px;
            }
            .card-body-alert{
                margin-bottom: 15px !important;
            }
            .card-body-alert .alert {
                margin-left: unset !important;
            }
        </style>
          <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-10">
                                @include('elements.admin-breadcrumb')
                            </div>
                           {{-- <div class="col-2 text-end">
                                <a class="btn btn-primary" href="{{ route('admin.export.userRegistrationReport') }}"><i class="fa-solid fa-file-export"></i> Export</a>
                            </div> --}}
                        </div>
                    </div>
                    <div class="card-body">
                        @include('elements.alert')

                    <form class="mb-15" id="kt_course_delete" action="" method="POST">
                        @csrf
                        @method('post')
                        {{-- <table class="table  w-100 nowrap  no-footer">
                            <tbody>
                                <tr>

                                    <td  class="col-md-4">
                                        <select id="role" class="form-select form-control-sm datatable-input">
                                            <option value="">- Select Role -</option>
                                            @foreach ($roles as $role)
                                                <option value="{{ $role->name }}">{{ $role->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td class="col-md-2">
                                        <input type="date" id="start_date" class="form-control form-control-sm datatable-input" />
                                    </td>

                                    <td class="col-md-2">
                                        <input type="date" id="end_date" class="form-control form-control-sm datatable-input" />
                                    </td>



                                    <td>

                                        <button type="button" class="btn btn-dark" id="kt_reset">Reset</button>

                                    </td>
                                </tr>
                            </tbody>
                        </table> --}}
                        <table id="common_datatable" class="table table-striped w-100"
                            data-column="name,phone,email,counselling_type,course_type,highest_qualification,remark,created_at,actions"
                            data-column-name="name,phone,email,counselling_type,course_type,highest_qualification,remark,created_at,actions"
                            data-control="{{route('admin.user-prospect-registration.list')}}"
                            data-sorting="7" data-sorting-type="DESC"
                            data-serial-number="1"
                            data-except-sorting-columns="8"

                            role="grid">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Counselling Type</th>
                                    <th>Course Type</th>
                                    <th>Qualification</th>
                                    <th>Remark</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>

                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div> <!-- end row-->
    </div>


    <div class="modal fade" id="assignModal" tabindex="-1" aria-labelledby="assignTopicModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignTopicModalLabel">Enroll Course</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- <form action="{{ route('admin.course.coursePurchase') }}" method="POST"> --}}
                    <form action="{{ route('admin.user-prospect-registration.convert') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <input type="hidden" name="pstudent_id" id="pstudent_id" value="">
                            <input type="hidden" name="status" id="status" value="1">
                            <label for="student" class="col-form-label">Select Course:</label>
                            <select id="course_id" name="course_id" class="form-select mb-3 form-control-sm datatable-input select2" data-toggle="select2">
                                <option value="" selected disabled>Select Student</option>
                                @foreach ($courses as $course)
                                    <option value="{{ $course->id }}">
                                        {{ $course->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Convert To Student</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="paymentLinkModal" tabindex="-1" aria-labelledby="paymentLinkModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentLinkModalLabel">Send Payment Link</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="payment_link_prospect_id">
                    <div class="mb-3">
                        <label class="form-label">Amount</label>
                        <input type="number" min="1" step="0.01" id="payment_link_amount" class="form-control" placeholder="Enter amount">
                    </div>
                    {{-- <div class="mb-3">
                        <label class="form-label">Generated Link</label>
                        <input type="text" id="generated_payment_link" class="form-control" readonly>
                    </div> --}}
                    <div id="payment_link_alert" class="small"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" id="copy_payment_link_btn">Copy Link</button>
                    <button type="button" class="btn btn-primary" id="send_payment_link_btn">Send</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        // Handle showing the modal and setting values
        $('#assignModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var pstudent_id = button.data('id');

            $("#assignModal #pstudent_id").val(pstudent_id);
        });

        // Clear inputs when modal is closed
        $('#assignModal').on('hidden.bs.modal', function () {
            $(this).find('form')[0].reset(); // Reset all form fields
            $(this).find('select').val(null).trigger('change'); // Reset all dropdowns
        });

        $('#paymentLinkModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var pstudent_id = button.data('id');

            $('#payment_link_prospect_id').val(pstudent_id);
            $('#payment_link_alert').html('');
            // $('#generated_payment_link').val('');
            $('#payment_link_amount').val('');
        });

        function showPaymentAlert(message, isError) {
            var cls = isError ? 'text-danger' : 'text-success';
            $('#payment_link_alert').html('<span class="' + cls + '">' + message + '</span>');
        }

        function toggleSendButtonLoading(isLoading) {
            var $btn = $('#send_payment_link_btn');
            if (isLoading) {
                $btn.prop('disabled', true);
                $btn.html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Sending...');
                return;
            }

            $btn.prop('disabled', false);
            $btn.html('Send');
        }

        function fetchPaymentLink(callback) {
            var id = $('#payment_link_prospect_id').val();
            var amount = $('#payment_link_amount').val();

            if (!amount || Number(amount) <= 0) {
                showPaymentAlert('Please enter valid amount.', true);
                return;
            }

            $.ajax({
                url: "{{ url('admin/user-prospect-registration') }}/" + id + "/generate-payment-link",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    amount: amount
                },
                success: function (res) {
                    // $('#generated_payment_link').val(res.link);
                    showPaymentAlert(res.message, false);
                    if (typeof callback === 'function') {
                        callback(res.link);
                    }
                },
                error: function (xhr) {
                    var message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Failed to generate link.';
                    showPaymentAlert(message, true);
                }
            });
        }

        $('#copy_payment_link_btn').on('click', function () {
            fetchPaymentLink(function (link) {
                navigator.clipboard.writeText(link).then(function () {
                    showPaymentAlert('Payment link copied.', false);
                }).catch(function () {
                    showPaymentAlert('Copy failed. Please copy manually.', true);
                });
            });
        });

        $('#send_payment_link_btn').on('click', function () {
            var id = $('#payment_link_prospect_id').val();
            var amount = $('#payment_link_amount').val();

            if (!amount || Number(amount) <= 0) {
                showPaymentAlert('Please enter valid amount.', true);
                return;
            }

            toggleSendButtonLoading(true);

            $.ajax({
                url: "{{ url('admin/user-prospect-registration') }}/" + id + "/send-payment-link",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    amount: amount
                },
                success: function (res) {
                    // $('#generated_payment_link').val(res.link);
                    showPaymentAlert(res.message, false);
                },
                error: function (xhr) {
                    var message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Failed to send payment link.';
                    showPaymentAlert(message, true);
                },
                complete: function () {
                    toggleSendButtonLoading(false);
                }
            });
        });
    });
</script>

@endsection