@extends('partials.main')

@section('title')
    Responses List
@endsection

@section('content')
    <style>
        .modalb {

            background: #29aae3;

            color: white;

        }

        .modalb:hover {

            background: #0293d4;

            color: white;

        }
    </style>



    <!-- breadcrumb -->

    <div class="breadcrumb-header justify-content-between">

        <nav class="breadcrumb-4">

            <ol class="breadcrumb breadcrumb-style1">

                <li class="breadcrumb-item">

                    <a href="{{ route('dashboard') }}">Dashboard</a>

                </li>

                <li class="breadcrumb-item active">Responses List</li>

            </ol>

        </nav>

    </div>

    <!-- breadcrumb -->
    <div class="row row-sm">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between">
                        <h4 class="card-title mg-b-0">Response</h4>
                        <a class="btn modalb btn-with-icon" data-bs-target="#addpollingmodal" data-bs-toggle="modal"
                            href="javascript:;"><i class="ti-plus"></i>
                            Add Response
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div id="divLoader" class="text-center pt-5" style="display:block;height:300px;">
                        <span>
                            <i class="fas fa-spinner fa-spin"></i> Response are being loading.. It might take few seconds.
                        </span>
                    </div>
                    <div class="table-responsive">
                        <table class="table text-md-nowrap" id="datatable">
                            <thead>
                                <tr>
                                    <th class="wd-10p border-bottom-0"># </th>
                                    <th class="wd-10p border-bottom-0">Title </th>
                                    <th class="wd-25p border-bottom-0">Response </th>
                                    <th class="wd-15p border-bottom-0">Action</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-rows">
                            </tbody>
                        </table>
                    </div>
                </div><!-- bd -->
            </div>
        </div>
    </div>


    @include('settings.polling.polling_modal')


    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(e) {


            pollingList();

            //datatable
            function pollingList() {
                $("#tbody-rows").html('');
                $("#divLoader").css('display', 'block');
                $("#tbody").css('display', 'none');

                $.ajax({
                    url: '/api/polling/list/',
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json"
                    },
                    type: "get",
                    dataType: "JSON",
                    cache: false,
                    beforeSend: function() {

                    },
                    complete: function() {

                    },
                    success: function(response) {

                        if (response["status"] == "fail") {
                            $("#divLoader").css('display', 'none')
                            $("#tbody").css('display', 'block')
                            toastr.info('Not Found', response["msg"])
                        } else if (response["status"] == "success") {

                            $("#divLoader").css('display', 'none')
                            $("#tbody").css('display', 'block');

                            $("#tbody-rows").html(response["rows"]);
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }
            //datatable

            //add user
            $("#addpolling").on('submit', (function(e) {

                e.preventDefault();

                $.ajax({

                    url: "/api/add/polling",

                    type: "post",

                    data: new FormData(this),

                    dataType: "JSON",

                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    processData: false,

                    contentType: false,

                    cache: false,

                    beforeSend: function() {

                        $("#btnPollingSubmit").attr('disabled', true);

                        $(".fa-pulse").css('display', 'inline-block');

                    },

                    complete: function() {

                        $("#btnPollingSubmit").attr('disabled', false);

                        $(".fa-pulse").css('display', 'none');

                    },

                    success: function(response) {

                        if (response["status"] == "fail") {

                            toastr.error('Failed', response["msg"])

                        } else if (response["status"] == "success") {

                            toastr.success('Success', response["msg"])

                            $("#addpolling")[0].reset();

                            $('#addpollingmodal').modal('hide');
                            $('.modal-backdrop').css('display', 'none');

                            pollingList()
                        }

                    },

                    error: function(error) {

                        console.log(error);

                    }

                });

            }));
            //add user

            var counterResponse = 0;
            $(document).on("click", "#addrow", function() {
                var newRow = $("<div>");
                var cols = "";
                cols += '<div class="row removeElement">';
                cols += '<div class="col-10">';
                cols += '<div class="form-group">';
                cols +=
                    '<input type="text" class="form-control" name="response[]" placeholder="Response" required>';
                cols += '</div>';
                cols += '</div>';
                cols += '<div class="col-2">';
                cols += '<div class="form-group">';
                cols += '<a href="javascript:;" class="removeDiv" style="padding: 11px; width: 40px;">';
                cols += '<i class="fas fa-trash-alt btn btn-md btn-danger"></i>';
                cols += '</a>';
                cols += '</div>';
                cols += '</div>';
                cols += '</div>';
                newRow.append(cols);
                $(".appendRow").append(newRow);
                counterResponse++;
            });


            //edit user
            $(document).on('click', '.editPolling', function(e) {
                var id = $(this).attr('id');

                $.ajax({
                    url: '/api/edit/polling/' + id,
                    type: "GET",
                    dataType: "JSON",
                    success: function(response) {
                        if (response.status == "fail") {
                            Swal.fire("Failed!", "Failed to Get User.", "error");
                        } else if (response.status == "success") {
                            var responseData = JSON.parse(response.pollingEdit['response']);

                            $("#pillingId").val(response.pollingEdit['id']);
                            $("#response_title").val(response.pollingEdit['response_title']);
                            $("#response").val(responseData);

                            // Clear previous values
                            $("#response").empty();

                            // Populate input fields with values from the array
                            for (var i = 0; i < responseData.length; i++) {
                                // Append new input field with value from the array
                                $("#response").append('<div class="row removeElement">' +
                                    '<div class="col-10">' +
                                    '<div class="form-group">' +
                                    '<input type="text" class="form-control" name="response[]" value="' +
                                    responseData[i] + '" placeholder="Response" required>' +
                                    '</div>' +
                                    '</div>' +
                                    '<div class="col-2">' +
                                    '<div class="form-group">' +
                                    '<a href="javascript:;" class="deleteSingleOption" data-index="' +
                                    i + '" style="padding: 11px; width: 40px;">' +
                                    '<i class="fas fa-trash-alt btn btn-md btn-danger"></i>' +
                                    '</a>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
                                );
                            }
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    },
                    async: false
                });
            });
            //edit user

            //update user
            $("#updatePolling").on('submit', (function(e) {

                e.preventDefault();

                $.ajax({

                    url: "/api/update/polling",

                    type: "post",

                    data: new FormData(this),

                    dataType: "JSON",

                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    processData: false,

                    contentType: false,

                    cache: false,

                    beforeSend: function() {

                        $("#btnSubmit").attr('disabled', true);

                        $(".fa-pulse").css('display', 'inline-block');

                    },

                    complete: function() {

                        $("#btnSubmit").attr('disabled', false);

                        $(".fa-pulse").css('display', 'none');

                    },

                    success: function(response) {



                        if (response["status"] == "fail") {

                            toastr.error('Failed', response["msg"])

                        } else if (response["status"] == "success") {

                            toastr.success('Success', response["msg"])

                            $('#editpollingmodal').modal('hide');

                            $("#updatePolling")[0].reset();

                            $('.modal-backdrop').css('display', 'none');

                            pollingList()
                        }

                    },

                    error: function(error) {

                        console.log(error);

                    }

                });

            }));
            //update user

            //delete user
            $(document).on('click', '.btnDelete', function(e) {

                var id = $(this).attr('id');

                $.ajax({

                    url: '/api/delete/polling/' + id,

                    type: "GET",

                    dataType: "JSON",

                    success: function(response) {

                        if (response["status"] == "fail") {

                            toastr.error('Failed', response["msg"])

                        } else if (response["status"] == "success") {

                            toastr.success('Success', response["msg"])

                            pollingList()


                        }

                    },

                    error: function(error) {

                        console.log(error);

                    },

                    async: false

                });

            });
            //delete user

            //delete user
            $(document).on('click', '.deleteSingleOption', function(e) {

                var id = $("#pillingId").val();
                var dataIndex = $(this).attr('data-index');

                $.ajax({

                    url: '/api/delete/polling/option/' + id,

                    type: "GET",

                    dataType: "JSON",

                    data: {
                        dataIndex: dataIndex,
                    },

                    success: function(response) {

                        if (response["status"] == "fail") {
                            toastr.error('Failed', response["msg"])

                        } else if (response["status"] == "success") {

                            toastr.success('Success', response["msg"])
                            $(e.target).closest('.removeElement').remove();

                            pollingList()


                        }

                    },

                    error: function(error) {

                        console.log(error);

                    },

                    async: false

                });

            });
            //delete user   

            $(document).on('click', '.removeDiv', function(e) {
                $(e.target).closest('.removeElement').remove();

            });

        })
    </script>
@endsection