@extends('layouts.app')
@section('content')

<div class="wrapper">
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="player-title">User Analytics Request</h1>

                    </div>

                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">User Request</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <!-- Main content -->
        <section class="content">
            @if (\Session::has('success'))
                <div class="alert alert-success">
                    <ul>
                        <li>{!! \Session::get('success') !!}</li>
                    </ul>
                </div>
            @endif
            @if ($errors->any())
                <div class="notification is-danger is-light">
                    <ul>
                        <div class="alert alert-danger">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </div>
                    </ul>
                </div>
            @endif
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Sr. No</th>
                                        <th>User</th>
                                        <th>Survey</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                        @if($request)
                                        @foreach($request as $data)
                                            <tr>
                                                <th> {{$i}} </th>
                                                <td>{{ ucfirst($data->user->name ?? 'N/A') }}</td>
                                                <td>{{ ucfirst($data->survey->title ?? 'N/A') }}</td>
                                                @if($data->status == '1')
                                                    <td>Approved</td>
                                                @elseif($data->status == '2')
                                                    <td>Disapproved</td>
                                                @else
                                                    <td>Pending</td>
                                                @endif
                                                <td class="project-actions text-center">
                                                    <a class="btn btn-success btn-sm approve" data-id="{{ $data->id }}"
                                                        title="Approve">
                                                        <i class="fas fa-check"></i>
                                                    </a>
                                                    <a class="btn btn-danger btn-sm disapprove" data-id="{{ $data->id }}"
                                                        title="Disapprove">
                                                        <i class="fas fa-times"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                                                                    @endforeach
                                    @endif
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    </section>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function () {
        setTimeout(function () {
            $('.alert-success').hide();
        }, 1500);
    });

    function updateRequestStatus(action, requestId) {
            var updateUrl = "{{ route('survey.updateRequestStatus', '') }}" + '/' + requestId;
            $.ajax({
                type: "POST",
                url: updateUrl,
                data: {
                    action: action,
                    _token: '{{ csrf_token() }}'
                },
                success: function (data) {
                    if (data.status === 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: action.charAt(0).toUpperCase() + action.slice(1) + 'd!',
                            text: 'The request has been ' + action + 'd successfully.',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: 'Failed to ' + action + ' the request.',
                        });
                    }
                },
                error: function () {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'An error occurred. Please try again.',
                    });
                }
            });
        }

        // Approve Request
        $('.approve').click(function (e) {
            e.preventDefault();
            var requestId = $(this).data("id");
            updateRequestStatus('approve', requestId);
        });

        // Disapprove Request
        $('.disapprove').click(function (e) {
            e.preventDefault();
            var requestId = $(this).data("id");
            updateRequestStatus('disapprove', requestId);
        });
</script>
@endsection