@extends('layouts.admin_layout')
@section('content')
<div class="container-fluid">
    <div class="row column_title">
        <div class="col-md-12">
            <div class="page_title">
                <h2>Event Registration</h2>
            </div>
        </div>
    </div>
    @if(Session::has('success'))
    <p class="alert {{ Session::get('alert-class', 'alert-info') }} alert-dismissible">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ Session::get('success') }}
    </p>
    @endif
    @if(Session::has('error'))
    <p class="alert {{ Session::get('alert-class', 'alert-danger') }}">{{ Session::get('error') }}</p>
    @endif

    <div class="row">
        <div class="col-md-12">
            <div class="white_shd full margin_bottom_30">
                <div class="full graph_head">
                    <div class="heading1 margin_0 d-flex justify-content-between">
                        <h2>Event Registration</h2>
                        <select class="form-control w-25" aria-label="select" name="" id="even_user_register">
                            @foreach($events as $event)
                            <option value="{{ $event->id }}" id="eventId"> {{ $event->title }} </option>
                            @endforeach
                        </select>
                        <div id="event_id">
                            <a href="{{ url('admin/downloadExcel/' .$current_event_id ) }}" class="btn btn-primary">Download</a>
                        </div>
                    </div>
                    <!-- <a href="{{url('admin/manage-events/create')}}" class="btn btn-primary btn-sm" style="float:right;">Add</a> -->
                </div>

                <div class="table_section padding_infor_info" id="eventUserData">
                    <div class="table-responsive-sm">
                        <table class="table" id="myTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <!-- <th>Sorting</th> -->
                                    <th>Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>Phone Number</th>
                                    <th>State</th>
                                    <th>City</th>
                                    <th>Pincode</th>
                                    <th>Company/University</th>
                                    <th>Category</th>
                                    <th>Payment Status</th>
                                    <th>Transaction Amount</th>
                                    <th>Payment Mode</th>
                                    <th>Payment Transaction Date</th>
                                    <th>GST No</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $i=1;@endphp

                                @foreach($userDatas as $userData)

                                <tr>
                                    <td>{{$i++}}</td>
                                    <td id="name">{{ $userData['user_name'] }}</td>
                                    <td id="lastname">{{ $userData['lastname'] }}</td>
                                    <td id="email">{{ $userData['email'] }}</td>
                                    <td id="lastname">{{ $userData['phone_number'] }}</td>
                                    <td id="state">{{ $userData['state'] }}</td>
                                    <td id="city">{{ $userData['city'] }}</td>
                                    <td id="pincode">{{ $userData['pincode'] }}</td>
                                    <td id="organization">{{ $userData['organization'] }}</td>
                                    <td id="category">{{ $userData['event_user_name'] }}</td>
                                    <td id="payment_status">{{ $userData['payment_status'] }}</td>
                                    <td id="payment_status">{{ $userData['display_price'] }}</td>
                                    <td id="payment_mode">{{ $userData['payment_mode'] }}</td>
                                    <td id="transaction_date">{{ $userData['transaction_date'] }}</td>
                                    <td id="transaction_date">{{ $userData['gst_number'] }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script>
    $(document).ready(function() {
        var $i = 1;
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // const ajaxCall = (api, id) => {
        //     // console.log(api,id);
        //     $.ajax({
        //         url: "/api/admin/" + api + id,
        //         type: 'GET',
        //         datatype: 'json',
        //         success: (response) => {
        //             if (response.status == 200) {
        //                 console.log(response.data[0]['name']);
        //                 var empty = "";
        //                 empty += '<div class="table-responsive-sm">';
        //                 empty += '<table class="table" id="myTable">';
        //                 empty += '<thead>';
        //                 empty += '<tr>';
        //                 empty += '<th>#</th>';
        //                 empty += '<th>Name</th>';
        //                 empty += '<th>Last Name</th>';
        //                 empty += '<th>Email</th>';
        //                 empty += '<th>Phone Number</th>';
        //                 empty += '<th>State</th>';
        //                 empty += '<th>City</th>';
        //                 empty += '<th>Company/University</th>';
        //                 empty += '<th>Payment Status</th>';
        //                 empty += '<th>Payment Mode</th>';
        //                 empty += '<th>Payment Transaction Date</th>';
        //                 empty += '</tr>';
        //                 empty += '</thead>';
        //                 empty += '<tbody>'
        //                 empty += '<tr>'
        //                 empty += '<td>{{$i++}}</td>'
        //                 empty += '<td id="name"> '+ response.data[0]['name'] +' </td>';
        //                 empty += '<td id="lastname"> '+ response.data[0]['lastname'] +' </td>';
        //                 empty += '<td id="email"> '+ response.data[0]['email'] +' </td>';
        //                 empty += '<td id="lastname"> '+ response.data[0]['phone_number'] +' </td>';
        //                 empty += '<td id="state"> '+ response.data[0]['state'] +' </td>';
        //                 empty += '<td id="city"> '+ response.data[0]['city'] +' </td>';
        //                 empty += '<td id="organization"> '+ response.data[0]['organization'] +' </td>';
        //                 empty += '<td id="payment_status"> '+ response.data[0]['payment_status'] +' </td>';
        //                 empty += '<td id="payment_mode"> '+ response.data[0]['payment_mode'] +' </td>';
        //                 empty += '<td id="transaction_date"> '+ response.data[0]['transaction_date'] +' </td>';
        //                 empty += '</tr>';
        //                 empty += '</tbody>';
        //                 empty += '</table>';
        //                 empty += '</div>';
        //                 empty += '</div>';
        //                 empty += '</div>';
        //                 empty += '</div>';
        //                 empty += '</div>';
        //                 empty += '</div>';
        //                 empty += '<td>' + $i++ + '</td>';

        //             $('#eventUserData').html(empty);

        //             } else if (response.status == 204) {
        //                 $('#eventUserData').html('Data doesnt exist!');
        //             }
        //         },
        //         error: function(response) {
        //             console.log(response);
        //         }
        //     });
        // }


        const ajaxCall = (api, id) => {
            $.ajax({
                url: "/api/admin/" + api + id,
                type: 'GET',
                dataType: 'json',
                success: (response) => {
                    if (response.status == 200) {
                        var empty = "";
                        empty += '<div class="table-responsive-sm">';
                        empty += '<table class="table" id="myTable">';
                        empty += '<thead>';
                        empty += '<tr>';
                        empty += '<th>#</th>';
                        empty += '<th>Name</th>';
                        empty += '<th>Last Name</th>';
                        empty += '<th>Email</th>';
                        empty += '<th>Phone Number</th>';
                        empty += '<th>State</th>';
                        empty += '<th>City</th>';
                        empty += '<th>Pincode</th>';
                        empty += '<th>Company/University</th>';
                        empty += '<th>Category</th>';
                        empty += '<th>Payment Status</th>';
                        empty += '<th>Transaction Amount</th>';
                        empty += '<th>Payment Mode</th>';
                        empty += '<th>Payment Transaction Date</th>';
                        empty += '</tr>';
                        empty += '</thead>';
                        empty += '<tbody>';
                        empty += response.data.map((user, index) => `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${user.user_name}</td>
                        <td>${user.lastname}</td>
                        <td>${user.email}</td>
                        <td>${user.phone_number}</td>
                        <td>${user.state}</td>
                        <td>${user.city}</td>
                        <td>${user.pincode}</td>
                        <td>${user.organization}</td>
                        <td>${user.event_user_name}</td>
                        <td>${user.payment_status}</td>
                        <td>${user.display_price}</td>
                        <td>${user.payment_mode}</td>
                        <td>${user.transaction_date}</td>
                    </tr>`).join('');
                        empty += '</tbody>';
                        empty += '</table>';
                        empty += '</div>';

                        $('#eventUserData').html(empty);

                    } else if (response.status == 204) {
                        $('#eventUserData').html('Data doesn\'t exist!');
                    }
                },
                error: function(response) {
                    console.log(response);
                }
            });
        }

        $("#even_user_register").change(function(e) {
            $eventId = e.target.value;
            // console.log($eventId);
            ajaxCall('event_user_register/', $eventId);

        });

    });
</script>



<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        const ajaxCall = (api, $eventId) => {
            // alert($eventId);
            $.ajax({
                url: "/admin/" + api + "/" + $eventId,
                type: "GET",
                dataType: 'json',

                success: function(response) {
                    if (response.status = 200) {
                        $eventId = response.data.eventId;
                        var empty = "";
                        var downloadUrl = "{{ url('admin/downloadExcel/') }}" + '/' + $eventId;
                        var empty = "<a href='" + downloadUrl + "' class='btn btn-primary'>Download</a>";
                        $('#event_id').html(empty);

                        // alert(eventId);
                    }
                    // Handle the response from the server if needed
                },
                error: function(response) {
                    console.log(response);
                }
            });
        }

        $("#even_user_register").change(function(e) {
            $eventId = e.target.value;
            ajaxCall('getEvent_id', $eventId);
        });

    });
</script>

@endsection