@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])

@section('css')
        <!-- third party css -->
        <link href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
        <!-- third party css end -->
@endsection

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

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <a class="btn btn-dark waves-effect waves-light" href="/form/allsubmissions?partition={{$form->partition}}&form_id={{$form->id}}&download=1">Export</a>             
                </div>
                <h4 class="page-title">All Submissions</h4>
            </div>
        </div>
    </div>     
    <!-- end page title --> 
    @if(session()->has('message'))
    <div class="alert alert-success">
    {{ session()->get('message') }}
    </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card-box">
                <div class="responsive-table-plugin">
                    <div class="table-rep-plugin">
                        <div class="table-responsive" data-pattern="priority-columns">
                            <table id="basic-datatable" class="table dt-responsive nowrap">
                                <thead>
                                <tr>
                                    <!-- <th>#</th> -->
                                    <th>User Name</th>
                                    <th>User Email</th>
                                    <th>User Phone</th>
                                    <th>Submitted On</th>
                                    @foreach($questions as $que)
                                    <th>{{$que->question}}</th>
                                    @endforeach
                                    <th data-priority="1">Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div> <!-- end .table-responsive -->

                    </div> <!-- end .table-rep-plugin-->
                </div> <!-- end .responsive-table-plugin-->
            </div> <!-- end card-box -->
        </div> <!-- end col -->
    </div>
    <!-- end row -->

</div> <!-- container -->

<div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scrollableModalTitle">Update link</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




@endsection


@section('script')

    <!-- third party js -->
    <script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
    <script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
    <!-- third party js ends -->
    <script type="text/javascript">
        $(document).ready(function () {
          // Default Datatable
          let table = $('#basic-datatable').DataTable({
            "order": [[ 0, "desc" ]],
            "language": {
              "paginate": {
                "previous": "<i class='mdi mdi-chevron-left'>",
                "next": "<i class='mdi mdi-chevron-right'>"
              }
            },
            "drawCallback": function drawCallback() {
              //$('.dataTables_paginate > .pagination').addStaff('pagination-rounded');
            },

            fixedHeader: true,
            "pageLength": 50,
            "lengthMenu": [[50, 100, 250, 500], [50, 100, 250, 500]],
            'processing': false,
            'serverSide': false,
            'serverMethod': 'get',
            //searchDelay: 2000,
            "order": [[ 1, "asc" ]],
            'searching': true,
            'info': true,
            
            "ajax": {
                url: '{{$submission_json}}',
                data:{
                     //'listfilters': listfilters
                },
                dataSrc: ''
            },
            columns: [
                // { "data": "id" },
                { "data": "submitted_by" },
                { "data": "user_email" },
                { "data": "user_phone" },
                { "data": "submitted_on" },
                @foreach($questions as $que)
                { "data": "{{$que->code}}" },
                @endforeach
                { data: null,
                      render: function ( data, type, row ) {
                        return '<button title="View" class="btn btn-info btn-xs waves-effect waves-light"><i class="mdi mdi-eye-outline"></i></button>'
                      }
                }
            ],
            "initComplete": function(settings, json) {
                var api = this.api();
                var textBox = $('.dataTables_filter label input');
                textBox.unbind();
                textBox.bind('keyup input', function(e) {
                    if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
                        // do nothing ¯\_(ツ)_/¯
                    } else if(e.keyCode == 13 || !textBox.val()) {
                        api.search(this.value).draw();
                    }
                });
            }
          }); //Buttons examples

            $('#basic-datatable tbody').on( 'click', 'button', function () {
                $('#scrollable-modal').modal('show');
                $('#scrollable-modal .modal-body').html(`<div id="form-wrapper">
                    <form method="POST" action="/form/submit" id="report-form" enctype="multipart/form-data">
                        <input type="hidden" name="form_id" value="1714578520-efa6c1b8-d34d-4ada-9ab8-661291282b1c">
                        <input type="hidden" name="partition" value="rapport-team3">
                        @csrf
                        <div class="col-12 mb-2">
                            <label for="field-link" class="form-label"> Event Link </label>
                            <input type="text" id="field-link" class="form-control" name="link" value="">
                            <input type="hidden" name="link_status" id="link_status" value="Link Updated">
                        </div>
                        <div class="text-center d-grid mt-3">
                            <button class="btn btn-primary" type="submit" id="submit-btn"> Submit </button>
                        </div>
                    </form>
                </div>`)

                var submission_formdata = table.row( $(this).parents('tr') ).data();
                for(let key of Object.keys(submission_formdata)) {
                    if(key != 'link' && key != 'link_status') {
                        $('#report-form').append('<input type="hidden" name="'+key+'" value="'+submission_formdata[key]+'">')
                    }
                }

                $('#submit-btn').unbind()
                $('#report-form').on('submit', function(event){
                    event.preventDefault();
                    $("#pageloader").fadeIn();
                        $.ajax({
                        type: "POST",
                        url: '/form/ajaxsubmit',
                        data: new FormData($('#report-form')[0]),
                        processData: false,
                        contentType: false,
                        success: function( data ) {
                            $("#pageloader").fadeOut();
                            if(data.status == 'success') {
                                Swal.fire({
                                title: 'Great!',
                                text: 'Your data is successfully submitted!',
                                icon: 'success'
                                })
                                $('#scrollable-modal').modal('hide');
                                //window.location.reload()
                                //$('#report-form').trigger("reset");
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Data not submitted',
                                    text: 'Something went wrong, please try again after some time!'
                                })
                            }
                        },
                    });

                });
                
            });

        });
    </script>

@endsection