@extends('layouts.master')
@section('contain')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">
                {{ auth()->user()->user_role == 'sub_admin' ? 'Poll Management' : 'Stock Poll Management' }}</h3>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                    {{-- <li class="breadcrumb-item active">User Table</li> --}}
                </ol>
                @if (auth()->user()->user_role == 'sub_admin' || (auth()->user()->user_role == 'admin' && $is_stock < 10))
                @if (auth()->user()->user_role == 'sub_admin')
                    <a href="{{ route('polls.analytics') }}">
                        <button title="Poll Analytics" type="button" class="btn btn-info d-none d-lg-block m-l-15 text-white">
                            <i class="fa fa-line-chart"></i> Poll Analytics
                        </button>
                    </a>
                @endif
                    <a href="{{ route('poll.create') }}">
                        <button type="button" class="btn btn-info d-none d-lg-block m-l-15 text-white">
                            <i class="fa fa-plus-circle"></i>Create New
                        </button>
                    </a>
                @endif
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            {{-- <h6 class="card-subtitle">Data table example</h6> --}}
            <div class="table-responsive">
                <table id="myTable" class="table table-striped border">
                    <thead>
                        <tr class="text-white" style="background-color: gray">
                            <th>S.No</th>
                            <th>Question</th>
                            <th>End Date</th>
                            {{-- <th>Media</th> --}}
                            <th class="action-hide">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $num = 1;
                        @endphp
                        @foreach ($polls as $poll)
                            <tr>
                                <td>{{ $num++ }}</td>
                                <td>{{ $poll->question }}</td>
                                <td>{{ $poll->end_date }}</td>
                                <td class="text-canter">

                                    @if (auth()->user()->user_role == 'sub_admin' && $poll->is_stock == true)
                                        <a style="margin-left: 9%;" href="{{ Route('pollcompare.view', $poll->id) }}"><i
                                                title="compare data" class="far fa-bar-chart btn btn-primary"></i></a>
                                        <a href="#" onclick="togglePollType({{ json_encode($poll) }})">
                                            <i id="type-remove-add-{{ $poll->id }}"
                                                title="{{ $poll->pollstatus != null ? 'update Status to public' : 'update Status to private' }}"
                                                class="{{ $poll->pollstatus != null ? 'fas fa-lock btn btn-success' : 'fas fa-unlock btn btn-danger' }}"></i>
                                        </a>
                                    @elseif (auth()->user()->user_role == 'admin')
                                        <a href="{{ Route('data.overview', $poll->id) }}"><i title="Data overview"
                                                class="mdi mdi-chart-line btn btn-success" style="height: 30px"></i></a>
                                        <a href="{{ Route('pollcompare.view', $poll->id) }}"><i title="compare data"
                                                class="far fa-bar-chart btn btn-primary"></i></a>
                                    @endif
                                    @if (auth()->user()->user_role == 'admin')
                                        <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"
                                            data-msg="{{ json_encode($poll->answers) }}"
                                            data-stock="{{ json_encode($poll->is_stock) }}" onclick="setMsg(this)">
                                            <i title="view Progress Bars" class="fas fa-eye btn btn-info"></i>
                                        </a>
                                        <a href="{{ Route('poll.edit', $poll->id) }}"><i title="Edit"
                                                class="far fa-edit btn btn-info"></i></a>
                                        <a title="Delete" onclick="swalll({{ $poll->id }})"><i
                                                class="far fa-trash-alt btn btn-danger "></i></a>
                                        <form id="delete-form-{{ $poll->id }}"
                                            action="{{ Route('poll.delete', $poll->id) }}" method="POST" class="d-none">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    @elseif (auth()->user()->user_role == 'sub_admin' && $poll->is_stock == false)
                                        <a style="margin-left: -5%;" type="button" data-bs-toggle="modal"
                                            data-bs-target="#exampleModal" data-msg="{{ json_encode($poll->answers) }}"
                                            data-stock="{{ json_encode($poll->is_stock) }}" onclick="setMsg(this)">
                                            <i title="view Progress Bars" class="fas fa-eye btn btn-info"></i>
                                        </a>
                                        <a title="analytics" href="{{ Route('analytics.view', $poll->id) }}"><i
                                                class="fas fa-chart-pie btn btn-success"></i></a>

                                        <a href="{{ Route('poll.edit', $poll->id) }}"><i title="Edit"
                                                class="far fa-edit btn btn-info"></i></a>
                                        <a title="Delete" onclick="swalll({{ $poll->id }})"><i
                                                class="far fa-trash-alt btn btn-danger "></i></a>
                                        <form id="delete-form-{{ $poll->id }}"
                                            action="{{ Route('poll.delete', $poll->id) }}" method="POST" class="d-none">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    @endif
                                    {{-- {{$vid??""}} --}}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- sample modal content -->
    <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
        <div class="modal-dialog " role="document">
            <div class="modal-content topbar" style="border-radius: 5%;scale: 0.9;margin-top: -10%;">
                <div class="modal-header">
                    <h4 class="font-bold text-white" id="exampleModalLabel1">Poll Progress
                    </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"></span></button>
                </div>
                <div class="row">
                    <!-- Column -->
                    <div class="col-lg-12">
                        <div class="card">
                            {{-- <div class="card-body"> --}}

                            <div class="col-md-8">
                                {{-- <h5 class="card-title">SITES VISITS</h5> --}}
                                <div id="visitfromworld"></div>
                            </div>
                            <div class="col-md-12">
                                <ul class="country-state slimscrollcountry" id="modal-list">
                                    {{-- <li>
                                                @php
                                                    $percent = (4 / $userCount) * 100;
                                                @endphp
                                                <h2>6350</h2> <small>From India</small>
                                                <div class="pull-right">{{ $percent }}% <i
                                                        class="fa fa-level-up text-success"></i>
                                                </div>
                                                <div class="progress">

                                                    <div class="progress-bar bg-success" role="progressbar"
                                                        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
                                                        style="width:{{ $percent }}%; height: 100%;"> <span
                                                            class="sr-only">{{ $percent }}%
                                                            Complete</span></div>
                                                </div>
                                            </li>
                                            <li>
                                                <h2>3250</h2> <small>From UAE</small>
                                                <div class="pull-right">98% <i class="fa fa-level-up text-success"></i>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="50"
                                                        aria-valuemin="0" aria-valuemax="100"
                                                        style="width:98%; height: 100%;;"> <span class="sr-only">98%
                                                            Complete</span></div>
                                                </div>
                                            </li>
                                            <li>
                                                <h2>1250</h2> <small>From Australia</small>
                                                <div class="pull-right">75% <i class="fa fa-level-down text-danger"></i>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-danger" role="progressbar"
                                                        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
                                                        style="width:75%; height: 100%;;"> <span class="sr-only">75%
                                                            Complete</span></div>
                                                </div>
                                            </li>
                                            <li>
                                                <h2>1350</h2> <small>From USA</small>
                                                <div class="pull-right">48% <i class="fa fa-level-up text-success"></i>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-info" role="progressbar"
                                                        aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                                                        style="width:48%; height: 100%;;"> <span class="sr-only">48%
                                                            Complete</span></div>
                                                </div>
                                            </li>
                                            <li>
                                                <h2>350</h2> <small>From UK</small>
                                                <div class="pull-right">68% <i class="fa fa-level-down text-danger"></i>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-purple" role="progressbar"
                                                        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
                                                        style="width:68%; height: 100%;;"> <span class="sr-only">48%
                                                            Complete</span></div>
                                                </div>
                                            </li> --}}
                                </ul>
                            </div>
                        </div>
                        {{-- </div> --}}
                    </div>
                    <!-- Column -->
                </div>
                <button type="button" class="btn btn-default text-dark" data-bs-dismiss="modal">Close</button>
                {{-- </div> --}}
            </div>
        </div>
    </div>
    <!-- /.modal -->

    <script>
        function togglePollType(poll) {
            var baseUrl = '{{ route('poll.type') }}';
            var newType = (poll.poll_status != null) ? 'public' : 'private';
            var icon = $('#type-remove-add-' + poll.id);
            var hasSuccessClass = icon.hasClass('btn-success');
            var message;
            if (hasSuccessClass) {
                message = 'You are about to change the poll status to public.';
            } else {
                message = 'You are about to change the poll status to private.';
            }
            swal({
                title: 'Are you sure?',
                text: message,
                icon: 'warning',
                buttons: {
                    cancel: 'No, cancel!',
                    confirm: 'Yes, change it!'
                },
                dangerMode: true
            }).then((isConfirmed) => {
                if (isConfirmed) {
                    // Perform the toggle action here, e.g., make an AJAX request
                    $.ajax({
                        url: baseUrl,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            type: newType,
                            id: poll.id,
                        },
                        success: function(response) {
                            if (hasSuccessClass) {
                                icon.removeClass('fa-lock btn-success').addClass(
                                    'fa-unlock btn-danger');
                            } else {
                                icon.removeClass('fa-unlock btn-danger').addClass(
                                    'fa-lock btn-success');
                            }
                            setTimeout(function() {
                                window.location.reload();
                                // Set Toastr options
                                toastr.options = {
                                    "closeButton": true,
                                    "progressBar": true,
                                    "positionClass": "toast-top-right",
                                };

                                // Fire Toastr notification with the message from Laravel session
                            }, 1000); // 1000 milliseconds (1 second) delay
                            toastr.success("status updated successfully");

                        }
                    });
                }
            });
        }

        // popup method
        function setMsg(e) {
            var listItem = '';
            var s_no = 1;
            let mydata = $(e).attr("data-msg");
            let stock = $(e).attr("data-stock");
            if (mydata.length > 0) {
                mydata = eval(mydata);
                console.log(mydata);
                $.each(mydata, function(key, value) {
                    // alert(JSON.stringify(value));
                    var userCount = {{ $userCount }};
                    var app_user = {{ $appUserCount }};
                    var colorClass = getRandomColorClass();
                    var percent = stock == false ? (value.react_counts_count / userCount) * 100 : (value
                        .react_counts_count / app_user) * 100;
                    var integerValue = Math.floor(percent);
                    listItem += '<li><h5>' + value.react_counts_count + '</h2><small>' + value.answer +
                        '</small><div class="pull-right">' + integerValue + ' %' +
                        ' <i></i></div><div class="progress" style="position: relative;"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:' +
                        percent + '%; height: 100%; background:' + value.color +
                        '"><span class="sr-only">' + percent +
                        '% Complete</span></div><img src="{{ env('MEDIA_URL') }}' + value.emoji +
                        '" alt="Emoji" width="18" style="position: absolute; right: 0; top: 7px; transform: translateY(-50%);"></div></li>';

                });
                $('#modal-list').html(listItem);

                $('#modal-list').html(listItem);
            } else {}

            $('.mydata').empty();
        }

        function getRandomColorClass() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color; // Return a custom color class
        }
        // popup method
        function swalll(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary field !",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var formId = "delete-form-" + id;
                        document.getElementById(formId).submit();
                        // swal("Poof! Your imaginary file has been deleted!", {
                        //     icon: "success",
                        // });
                    } else {
                        // swal("Your imaginary file is safe!");
                    }
                });


            // alert(id);
        }
    </script>
@endsection