@extends('admin.layouts.main')
@section('title', 'Konseling')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Data Kuisioner DASS 42</h4>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCreate">
                        Kirim Kuisioner
                    </button>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered zero-configuration">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>User Detail</th>
                                <th>Tgl Kirim</th>
                                <th>Status</th>
                                <th>Tgl Diisi</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($submission as $item)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                        Nama: {{ $item->user->name }} <br>
                                        Email: {{ $item->user->email }} <br>
                                        Role: {{ $item->user->role }} <br>
                                        HP: {{ $item->user->phone ?? '-' }} <br>
                                    </td>
                                    <td>{{ $item->created_at->format('d-m-Y H:i') }}</td>
                                    <td>
                                        <span class="badge badge-{{ $item->answers ? 'success' : 'warning' }}">
                                            {{ $item->answers ? 'Sudah Diisi' : 'Belum Diisi' }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($item->answers !== null)
                                            {{ \Carbon\Carbon::parse($item->submission_date)->format('d-m-Y H:i') }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex gap-3">
                                            <a class="btn btn-sm btn-primary"
                                               href="{{ route('admin.kuisioner.show', $item->id) }}">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            &nbsp;
                                            <button class="btn btn-sm btn-danger" onclick="deleteData({{ $item->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--    Modal Create --}}
    <div class="modal fade" id="modalCreate" tabindex="-1" aria-labelledby="modalCreateLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fs-2" id="modalCreateLabel">Kirimkan Kuisioner DASS 42</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="createForm">
                    <div class="modal-body">
                        <div class="mb-3 form-group">
                            <label for="user_id" class="form-label">Pilih User</label>
                            <select class="form-control" id="user_id" name="user_id" required>
                                <option value="" disabled selected>Pilih User</option>
                                @foreach($listUser as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary text-white" data-bs-dismiss="modal">Close
                        </button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
            crossorigin="anonymous"></script>
    <script src="{{asset('assets/plugins/tables/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/plugins/tables/js/datatable/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{ asset('assets/plugins/tables/js/datatable-init/datatable-basic.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('#createForm').on('submit', function (e) {
                e.preventDefault();
                let userId = $('#user_id').val();
                if (!userId) {
                    alert('Please select a user');
                    return;
                }
                $.ajax({
                    url: '{{ route('admin.kuisioner.store') }}',
                    method: 'POST',
                    data: {
                        user_id: userId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        swal("Success", "Data has been updated", "success").then(() => {
                            location.reload();
                        });
                    },
                    error: function (error) {
                        swal("Error", "Failed to send questionnaire", "error");
                        console.error(error);
                    }
                });
            });
        });

        function deleteData(id){
            swal({
                title: "Are you sure?",
                text: "You will not be able to recover this data!",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        url: '/admin/kuisioner/delete/' + id,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            swal("Success", "Data has been deleted", "success").then(() => {
                                location.reload();
                            });
                        },
                        error: function (error) {
                            swal("Error", "Failed to delete data", "error");
                            console.error(error);
                        }
                    });
                }
            });
        }
    </script>
@endpush