@extends('layouts.app')
@section('titlePage', 'webinar Payment')
@section('content')
    <div class="page-wrapper">
        <!-- [ breadcrumb ] start -->
        <div class="breadcrumb-header justify-content-between">
            <div class="left-content">
                <span class="main-content-title mg-b-0 mg-b-lg-1">CREATE</span>
            </div>
            <div class="justify-content-center mt-2">
                <ol class="breadcrumb breadcrumb-style3">
                    <li class="breadcrumb-item tx-15"><a
                            href="{{ _route('master.offline_classes.purchase-history-offline') }}"><i
                                class="feather icon-home"></i></a></li>
                    <li class="breadcrumb-item active">Add Payment</li>
                </ol>
            </div>
        </div>
        <!-- [ breadcrumb ] end -->
        <!-- [ Main Content ] start -->
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <a href="{{ route('master.offline_classes.purchase-history-offline') }}"
                            class="btn btn-primary float-right">List</a>
                    </div>
                    <div class="card-body">
                        @include('common.alert')
                        <form method="POST" action="{{ route('master.add_payment.webinarPayStore') }}"
                            enctype="multipart/form-data">
                            @csrf
                            @include('master.payment.form')
                            <div class="col-md-12 mt-2">
                                <button type="submit" id="filterButton" class="btn btn-primary mx-4 mb-4">Submit</button>
                            </div>
                            <div id="results">
                                {{-- @if ($data && $data->isNotEmpty())
                                    <ul>
                                        @foreach ($data as $item)
                                            <li>
                                                ID: {{ $item->id }} <br>
                                                Name: {{ $item->title ?? 'N/A' }} <br>
                                                Description: {{ $item->description ?? 'N/A' }}<br>
                                                price: {{ $item->selling_price ?? 'N/A' }}
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p>No data found.</p>
                                @endif --}}
                            </div>
                        </form>
                    </div>

                    {{-- /card-body --}}
                </div>
            </div>
        </div>

        <!-- [ Main Content ] end -->
    </div>
@endsection
@push('script')
    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
    <script>
        $(document).ready(function() {
            function fetchData() {
                // const selectType = $('#select_id').val();
                const searchId = $('#search_id').val();
               

                $.ajax({
                    url: "{{ route('master.add_payment.webinarPayCreate') }}", // Backend route
                    type: 'GET',
                    data: {
                        search_id: searchId, 
                    },
                    success: function(response) {
                        if (response.success) {
                            let resultsHtml = `
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Title</th>
                                            <th>Description</th>
                                            <th>Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                            `;

                            response.data.forEach(function(item) {
                                resultsHtml += `
                                    <tr>
                                        <td>${item.id}</td>
                                        <td>${item.topic || 'N/A'}</td>
                                        <td>${item.description && item.description.length > 20 ? item.description.substring(0, 40) + '...' : (item.description || 'N/A')}</td>
                                        <td>${(item.selling_price || 'N/A')}</td>

                                    </tr>
                                `;
                            });

                            resultsHtml += `
                                    </tbody>
                                </table>
                            `;

                            $('#results').html(resultsHtml);
                //              if (!searchId) {
                //     $('#amount').val('0'); 
                //     return;
                // }
                //             if (response.noteprice) {
                //                 $('#amount').val(response.price);  // Set noteprice first if available
                //             } else {
                //                 $('#amount').val('0'); // Default to 0 if neither is available
                //             }

                            let studentsHtml = `<select id="studentDropdown" class="form-control"><option value="">-- Select Student --</option>`;
                            response.students.forEach(function(student) {
                                studentsHtml += `<option value="${student.id}">${student.fullname}</option>`;
                            });
                            studentsHtml += `</select>`;

                            $('#studentDropdownContainer').html(studentsHtml);
                        } else {
                            $('#results').html('<p>No data found.</p>');
                            $('#amount').val('');
                        }
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                        $('#results').html('<p>An error occurred. Please try again.</p>');
                    },
                });
            }
           

            // Fetch data when the input field changes (real-time typing)
            $('#search_id').on('keyup', fetchData);
        });
    </script>
@endpush